Skip to content

Commit eea1b5d

Browse files
mgurgelmgurgel
committed
Stack navigation
1 parent 03970f9 commit eea1b5d

File tree

6 files changed

+39
-42
lines changed

6 files changed

+39
-42
lines changed

‎schema/__generated__/schema.parsers.mjs

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎schema/__generated__/schema.types.ts

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎schema/event-origin.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"toggleReport",
1515
"breakageFormCategorySelection",
1616
"breakageFormFinalStep",
17+
"breakageFormSuccess",
1718
"connection",
1819
"trackers",
1920
"nonTrackers",

‎v2/components/top-nav.jsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -52,34 +52,32 @@ export function SecondaryTopNav({ children }) {
5252
/**
5353
* @param {object} props
5454
* @param {boolean} [props.hideBackButton=false]
55-
* @param {boolean} [props.backToRoot=false]
5655
* @param {import("preact").ComponentChild} [props.children]
5756
*/
58-
export function SecondaryTopNavAlt({ hideBackButton = false, backToRoot = false, children }) {
59-
const { pop, popToRoot } = useNav();
57+
export function SecondaryTopNavAlt({ hideBackButton = false, children }) {
58+
const { pop } = useNav();
6059
const canPop = useCanPop();
6160
const onClose = useClose();
6261

6362
const canGoBack = canPop && !hideBackButton;
64-
const backHandler = backToRoot ? popToRoot : pop;
6563

6664
return platformSwitch({
6765
ios: () => {
6866
return (
69-
<TopNav back={canGoBack ? <Back onClick={backHandler} /> : null} done={<Cancel onClick={onClose} />}>
67+
<TopNav back={canGoBack ? <Back onClick={pop} /> : null} done={<Cancel onClick={onClose} />}>
7068
{children}
7169
</TopNav>
7270
);
7371
},
7472
android: () => {
75-
return <TopNav back={canGoBack ? <Back onClick={backHandler} /> : <Back onClick={onClose} />}>{children}</TopNav>;
73+
return <TopNav back={canGoBack ? <Back onClick={pop} /> : <Back onClick={onClose} />}>{children}</TopNav>;
7674
},
7775
browser: () => {
78-
return <TopNav back={canGoBack ? <Back onClick={backHandler} /> : null}>{children}</TopNav>;
76+
return <TopNav back={canGoBack ? <Back onClick={pop} /> : null}>{children}</TopNav>;
7977
},
8078
default: () => {
8179
return (
82-
<TopNav back={canGoBack ? <Back onClick={backHandler} /> : null} done={<Close onClick={onClose} />}>
80+
<TopNav back={canGoBack ? <Back onClick={pop} /> : null} done={<Close onClick={onClose} />}>
8381
{children}
8482
</TopNav>
8583
);

‎v2/navigation.jsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { TrackersScreen } from './screens/trackers-screen';
88
import { NonTrackersScreen } from './screens/non-trackers-screen';
99
import { ConsentManagedScreen } from './screens/consent-managed-screen';
1010
import { ToggleReportScreen } from './screens/toggle-report-screen';
11-
import { BreakagePrimaryScreen, BreakageCategorySelection, BreakageForm } from './screens/breakage-form-screen';
11+
import { BreakagePrimaryScreen, BreakageCategorySelection, BreakageForm, BreakageFormSuccess } from './screens/breakage-form-screen';
1212
import { isAndroid } from '../shared/js/ui/environment-check';
1313
import { screenKindSchema } from '../schema/__generated__/schema.parsers.mjs';
1414

@@ -24,6 +24,7 @@ const availableScreens = {
2424
breakageForm: { kind: 'subview', component: () => <BreakagePrimaryScreen /> },
2525
breakageFormCategorySelection: { kind: 'subview', component: () => <BreakageCategorySelection /> },
2626
breakageFormFinalStep: { kind: 'subview', component: () => <BreakageForm /> },
27+
breakageFormSuccess: { kind: 'subview', component: () => <BreakageFormSuccess /> },
2728
toggleReport: { kind: 'subview', component: () => <ToggleReportScreen /> },
2829

2930
//
@@ -46,8 +47,8 @@ const NavContext = createContext({
4647
pop() {
4748
throw new Error('not implemented');
4849
},
49-
/** @type {(name: ScreenName) => void} */
50-
popToRoot() {
50+
/** @type {(addedItems: ScreenName[]) => void} */
51+
replace() {
5152
throw new Error('not implemented');
5253
},
5354
params: new URLSearchParams(''),
@@ -112,14 +113,12 @@ function navReducer(state, event) {
112113
if (!event.opts.animate) {
113114
return {
114115
...state,
115-
commit: event.stack,
116116
stack: event.stack,
117117
state: /** @type {const} */ ('settled'),
118118
};
119119
}
120120
return {
121121
...state,
122-
commit: state.stack,
123122
stack: event.stack,
124123
state: /** @type {const} */ ('transitioning'),
125124
};
@@ -308,15 +307,18 @@ export function Navigation(props) {
308307
// change component state
309308
dispatch({ type: 'pop', opts: { animate: props.animate } });
310309
},
311-
popToRoot: () => {
312-
const stack = [state.stack[0]];
313-
const historyDelta = 1 - state.stack.length;
310+
replace: (stack) => {
311+
const url = new URL(window.location.href);
312+
313+
url.searchParams.delete('stack');
314+
for (let string of stack) {
315+
url.searchParams.append('stack', string);
316+
}
314317

315-
// remove entries from history
316-
window.history.go(historyDelta);
318+
window.history.replaceState({}, '', url);
317319

318320
// change component state
319-
dispatch({ type: 'goto', stack, opts: { animate: props.animate } });
321+
dispatch({ type: 'goto', stack, opts: { animate: false } });
320322
},
321323
canPop: canPop,
322324
canPopFrom: canPopFrom,

‎v2/screens/breakage-form-screen.jsx

+17-22
Original file line numberDiff line numberDiff line change
@@ -115,25 +115,15 @@ export function BreakageForm() {
115115
const fetcher = useFetcher();
116116
const { tab } = useData();
117117
const sendReport = useSendReport();
118-
const nav = useNav();
119-
const [isSent, setIsSent] = useState(false);
118+
const { replace, params } = useNav();
120119
const { count } = useConnectionCount();
121120

122121
const connectionId = `connection-${count}`;
123122
const desktop = platform.name === 'macos' || platform.name === 'windows';
124123
const extension = platform.name === 'browser';
125124

126-
// on desktop only, show success screen
127-
if (isSent && (desktop || extension)) {
128-
return (
129-
<BreakageScreenWrapper pageId="success">
130-
<FormSent />
131-
</BreakageScreenWrapper>
132-
);
133-
}
134-
135125
const categories = validCategories();
136-
let category = nav.params.get('category');
126+
let category = params.get('category');
137127

138128
if (!category || !Object.hasOwnProperty.call(categories, category)) {
139129
category = 'other';
@@ -147,7 +137,11 @@ export function BreakageForm() {
147137
*/
148138
function submit(description) {
149139
sendReport({ category, description });
150-
setIsSent(true);
140+
141+
if (desktop || extension) {
142+
// Clear stack before showing success screen
143+
replace(['primaryScreen', 'breakageFormSuccess']);
144+
}
151145
}
152146

153147
return (
@@ -191,22 +185,21 @@ function BreakageScreenWrapper({ className = '', pageId, children }) {
191185
const features = useFeatures();
192186

193187
const showTitle = platform.name === 'ios' || platform.name === 'android';
194-
const backToRoot = pageId === 'success';
195-
const hideBackButton = backToRoot && features.opener === 'menu';
188+
const hideBackButton = pageId === 'success' && features.opener === 'menu';
196189

197190
const classes = cn('site-info page-inner card breakage-screen', className);
198191

199192
return (
200193
<div className={classes} data-page={pageId}>
201-
<SecondaryTopNavAlt backToRoot={backToRoot} hideBackButton={hideBackButton}>
194+
<SecondaryTopNavAlt hideBackButton={hideBackButton}>
202195
{showTitle && <Title>{ns.report('reportTitle.title')}</Title>}
203196
</SecondaryTopNavAlt>
204197
{children}
205198
</div>
206199
);
207200
}
208201

209-
function FormSent() {
202+
export function BreakageFormSuccess() {
210203
const onClose = useClose();
211204
const clickHandler = () => {
212205
if (platform.name === 'windows' || platform.name === 'macos') {
@@ -215,11 +208,13 @@ function FormSent() {
215208
};
216209

217210
return (
218-
<div className="success__container" onClick={clickHandler}>
219-
<div className="success__icon"></div>
220-
<h1 className="token-body-em">{ns.report('thankYou.title')}</h1>
221-
<p className="token-body success__message">{ns.report('yourReportWillHelpDesc.title', { newline: '\n' })}</p>
222-
</div>
211+
<BreakageScreenWrapper pageId="success">
212+
<div className="success__container" onClick={clickHandler}>
213+
<div className="success__icon"></div>
214+
<h1 className="token-body-em">{ns.report('thankYou.title')}</h1>
215+
<p className="token-body success__message">{ns.report('yourReportWillHelpDesc.title', { newline: '\n' })}</p>
216+
</div>
217+
</BreakageScreenWrapper>
223218
);
224219
}
225220

0 commit comments

Comments
 (0)