Skip to content
This repository was archived by the owner on Dec 20, 2024. It is now read-only.

Commit 2e5a470

Browse files
atomicptratomicptr
committed
add pw units
1 parent fdb4216 commit 2e5a470

File tree

11 files changed

+245
-98
lines changed

11 files changed

+245
-98
lines changed

‎src/@types/playwire.d.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
interface PlaywireUnit {
2+
type: string;
3+
selectorId?: string;
4+
}
5+
6+
interface Window {
7+
ramp: {
8+
que: unknown[];
9+
passiveMode: boolean;
10+
addUnits: (units: PlaywireUnit[]) => Promise<void>;
11+
displayUnits: () => void;
12+
};
13+
14+
_pwGA4PageviewId: string;
15+
dataLayer: unknown[];
16+
gtag: (...args: unknown[]) => void;
17+
}

‎src/app.tsx‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
import "./i18n";
44
import { store } from "./store";
55
/* eslint-enable simple-import-sort/imports */
6-
76
import { registerSW } from "virtual:pwa-register";
8-
import { ThemeProvider } from "@mui/material";
9-
import { Slide } from "@mui/material";
7+
import { Slide, ThemeProvider } from "@mui/material";
108
import About from "@src/pages/about/About";
119
import Privacy from "@src/pages/about/Privacy";
1210
import { SnackbarProvider } from "notistack";
@@ -30,6 +28,8 @@ import useIsMobile from "@src/hooks/is-mobile";
3028
import log from "@src/utils/logger";
3129
import { useAppSelector } from "@src/hooks/redux";
3230
import { selectConfiguration } from "@src/reducers/configuration/configuration-slice";
31+
import SomethingWentWrong from "@src/components/SometingWentWrong";
32+
import { ErrorBoundary } from "react-error-boundary";
3333

3434
const DauntlessBuilderApp = () => {
3535
const isMobile = useIsMobile();
@@ -40,76 +40,81 @@ const DauntlessBuilderApp = () => {
4040

4141
return (
4242
<ThemeProvider theme={theme}>
43-
<BrowserRouter>
44-
<SnackbarProvider
45-
TransitionComponent={Slide}
46-
anchorOrigin={{
47-
horizontal: isMobile ? "center" : "right",
48-
vertical: "bottom",
49-
}}
50-
maxSnack={3}
51-
>
52-
<Layout>
53-
<Routes>
54-
<Route path="/">
55-
<Route
56-
element={<Home />}
57-
index
58-
/>
59-
60-
<Route path="b">
43+
<ErrorBoundary
44+
FallbackComponent={SomethingWentWrong}
45+
onError={(e, info) => log.error(e.message, { info })}
46+
>
47+
<BrowserRouter>
48+
<SnackbarProvider
49+
TransitionComponent={Slide}
50+
anchorOrigin={{
51+
horizontal: isMobile ? "center" : "right",
52+
vertical: "bottom",
53+
}}
54+
maxSnack={3}
55+
>
56+
<Layout>
57+
<Routes>
58+
<Route path="/">
6159
<Route
62-
element={<Navigate to={"/b/new"} />}
60+
element={<Home />}
6361
index
6462
/>
63+
64+
<Route path="b">
65+
<Route
66+
element={<Navigate to={"/b/new"} />}
67+
index
68+
/>
69+
<Route
70+
element={<NewBuild />}
71+
path="new"
72+
/>
73+
<Route
74+
element={<BuildFinder />}
75+
path="finder"
76+
/>
77+
<Route
78+
element={<MetaBuilds />}
79+
path="meta"
80+
/>
81+
<Route
82+
element={<Build />}
83+
path=":buildId"
84+
/>
85+
</Route>
86+
87+
<Route
88+
element={<Favorites />}
89+
path="/favorites"
90+
/>
91+
6592
<Route
66-
element={<NewBuild />}
67-
path="new"
93+
element={<About />}
94+
path="/about"
6895
/>
96+
6997
<Route
70-
element={<BuildFinder />}
71-
path="finder"
98+
element={<Privacy />}
99+
path="/privacy"
72100
/>
101+
73102
<Route
74-
element={<MetaBuilds />}
75-
path="meta"
103+
element={<Settings />}
104+
path="/settings"
76105
/>
106+
77107
<Route
78-
element={<Build />}
79-
path=":buildId"
108+
element={<NotFound />}
109+
path="*"
80110
/>
81111
</Route>
82-
83-
<Route
84-
element={<Favorites />}
85-
path="/favorites"
86-
/>
87-
88-
<Route
89-
element={<About />}
90-
path="/about"
91-
/>
92-
93-
<Route
94-
element={<Privacy />}
95-
path="/privacy"
96-
/>
97-
98-
<Route
99-
element={<Settings />}
100-
path="/settings"
101-
/>
102-
103-
<Route
104-
element={<NotFound />}
105-
path="*"
106-
/>
107-
</Route>
108-
</Routes>
109-
<BackgroundTasks />
110-
</Layout>
111-
</SnackbarProvider>
112-
</BrowserRouter>
112+
</Routes>
113+
<BackgroundTasks />
114+
</Layout>
115+
</SnackbarProvider>
116+
</BrowserRouter>
117+
</ErrorBoundary>
113118
</ThemeProvider>
114119
);
115120
};

‎src/components/AdSpace.tsx‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,51 @@
11
import { FeaturedVideo } from "@mui/icons-material";
22
import { Box, useTheme } from "@mui/material";
3+
import { useAppSelector } from "@src/hooks/redux";
4+
import { selectEvents } from "@src/reducers/events/events-slice";
35
import { adsEnabled } from "@src/utils/env-tools";
6+
import log from "@src/utils/logger";
7+
import React, { useEffect } from "react";
48

5-
const AdSpace = () => {
9+
export enum UnitType {
10+
RightRail = "right_rail",
11+
BottomRail = "bottom_rail",
12+
LeftRail = "left_rail",
13+
}
14+
15+
interface AdSpaceProps {
16+
unitType: UnitType;
17+
}
18+
19+
const AdSpace: React.FC<AdSpaceProps> = ({ unitType }) => {
620
const theme = useTheme();
721

8-
if (!adsEnabled()) {
22+
const events = useAppSelector(selectEvents);
23+
24+
const selectorName = `db_unit_${unitType.toString()}`;
25+
26+
useEffect(() => {
27+
if (!events.playwireSetupHasFinished) {
28+
return;
29+
}
30+
31+
const initUnit = async () => {
32+
try {
33+
await window.ramp.addUnits([
34+
{
35+
selectorId: selectorName,
36+
type: unitType,
37+
},
38+
]);
39+
window.ramp.displayUnits();
40+
} catch (error) {
41+
log.error("ramp: could not add unit", { error });
42+
window.ramp.displayUnits();
43+
}
44+
};
45+
initUnit();
46+
}, [events.playwireSetupHasFinished, selectorName, unitType]);
47+
48+
if (!adsEnabled) {
949
return null;
1050
}
1151

@@ -28,7 +68,7 @@ const AdSpace = () => {
2868
);
2969
}
3070

31-
return null;
71+
return <div id={selectorName} />;
3272
};
3373

34-
export default AdSpace;
74+
export default React.memo(AdSpace);

‎src/components/AdSpaceFloating.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Box, useTheme } from "@mui/material";
2-
import AdSpace from "@src/components/AdSpace";
2+
import AdSpace, { UnitType } from "@src/components/AdSpace";
33
import useIsMobile from "@src/hooks/is-mobile";
44
import useWindowSize from "@src/hooks/window-size";
55
import { adsEnabled } from "@src/utils/env-tools";
@@ -13,7 +13,7 @@ const AdSpaceFloating = () => {
1313
const isMobile = useIsMobile();
1414
const { width } = useWindowSize();
1515

16-
if (!adsEnabled()) {
16+
if (!adsEnabled) {
1717
return null;
1818
}
1919

@@ -49,7 +49,7 @@ const AdSpaceFloating = () => {
4949

5050
return (
5151
<Box sx={style}>
52-
<AdSpace />
52+
<AdSpace unitType={isMobile ? UnitType.BottomRail : UnitType.RightRail} />
5353
</Box>
5454
);
5555
};

‎src/components/BuildMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const BuildMenu: React.FC = () => {
9494
color="primary"
9595
onClick={handleCopyToClipboardClicked}
9696
sx={{
97-
bottom: adsEnabled() ? `${adSpaceMobileBannerHeight}px` : theme.spacing(2),
97+
bottom: adsEnabled ? `${adSpaceMobileBannerHeight}px` : theme.spacing(2),
9898
position: "fixed",
9999
right: theme.spacing(3),
100100
}}

‎src/components/Layout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ import {
3131
Typography,
3232
useTheme,
3333
} from "@mui/material";
34-
import AdSpace from "@src/components/AdSpace";
34+
import AdSpace, { UnitType } from "@src/components/AdSpace";
3535
import AdSpaceFloating, { adSpaceRightSideMinSize } from "@src/components/AdSpaceFloating";
3636
import BuildMenu from "@src/components/BuildMenu";
3737
import LinkBox from "@src/components/LinkBox";
3838
import SomethingWentWrong from "@src/components/SometingWentWrong";
3939
import Spacer from "@src/components/Spacer";
4040
import { drawerWidth } from "@src/components/theme";
41-
import Tracking from "@src/components/Tracking";
41+
import TrackingRampSetup from "@src/components/TrackingRampSetup";
4242
import { crowdinLink, discordServerUrl, githubUrl, xTwitterUrl } from "@src/constants";
4343
import dauntlessBuilderData from "@src/data/Data";
4444
import useIsMobile from "@src/hooks/is-mobile";
@@ -88,7 +88,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
8888
{ icon: <Settings />, link: "/settings", text: t("drawer.settings") },
8989
];
9090

91-
const showLeftSideAdSpace = adsEnabled() && (width - theme.breakpoints.values.xl) * 0.5 <= adSpaceRightSideMinSize;
91+
const showLeftSideAdSpace = adsEnabled && (width - theme.breakpoints.values.xl) * 0.5 <= adSpaceRightSideMinSize;
9292

9393
return (
9494
<Box sx={{ display: "flex" }}>
@@ -190,7 +190,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
190190
))}
191191
</List>
192192

193-
{isMobile ? <Spacer /> : showLeftSideAdSpace ? <AdSpace /> : <Spacer />}
193+
{isMobile ? <Spacer /> : showLeftSideAdSpace ? <AdSpace unitType={UnitType.LeftRail} /> : <Spacer />}
194194

195195
<Box
196196
sx={{
@@ -269,7 +269,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
269269
</ErrorBoundary>
270270
</Container>
271271

272-
<Tracking />
272+
<TrackingRampSetup />
273273
<AdSpaceFloating />
274274
</Box>
275275
);

‎src/components/Tracking.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)