git.iko.soy/bridge
on master help sign in
fix logout when inside nested router
148df77Liam Fitzgerald
src/components/View.js+9−9
compare with master
unifiedsplit
@@ -8,8 +8,6 @@ import MiniBackButton from './MiniBackButton';
8import { useHistory } from 'store/history';
8import { useHistory } from 'store/history';
9import NavHeader from './NavHeader';
9import NavHeader from './NavHeader';
10
10
11−const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
12−
13// View is a top-level component that all Views must render to inherit styling
11// View is a top-level component that all Views must render to inherit styling
14function View({
12function View({
15 className,
13 className,
@@ -19,7 +17,7 @@ function View({
19 pop,
17 pop,
20 ...rest
18 ...rest
21}) {
19}) {
22− const { size } = useHistory();
20+ const { reset } = useHistory();
23 const isMobile = useBreakpoints([true, false, false]);
21 const isMobile = useBreakpoints([true, false, false]);
24 const shouldInset = inset && !isMobile;
22 const shouldInset = inset && !isMobile;
25
23
@@ -30,17 +28,19 @@ function View({
30
28
31 const goBack = useCallback(() => pop(), [pop]);
29 const goBack = useCallback(() => pop(), [pop]);
32
30
33− const goLogout = useCallback(() => pop(size - 1), [pop, size]);
31+ const goLogout = reset;
34
32
35− const showBackButton = size > 1 && !!pop;
33+ const showBackButton = !!pop;
36− const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
37
34
38 const Header = useCallback(
35 const Header = useCallback(
39 ({ logout }) => {
36 ({ logout }) => {
40 return showBackButton ? (
37 return showBackButton ? (
41 <Flex.Item
38 <Flex.Item
42 as={Flex}
39 as={Flex}
40+ className={cn(
41+ insetPadding,
43− className={cn(insetPadding, 'flex-row-r justify-between pb5')}>
42+ 'flex-row-r justify-between pb5 align-center'
43+ )}>
44 <Flex.Item
44 <Flex.Item
45 onClick={goLogout}
45 onClick={goLogout}
46 as="a"
46 as="a"
@@ -75,12 +75,12 @@ function View({
75 col
75 col
76 style={{ width: '48px' }}
76 style={{ width: '48px' }}
77 className={cn(insetPadding)}>
77 className={cn(insetPadding)}>
78− {showBackButton && !backIsLogout && (
78+ {showBackButton && (
79 <MiniBackButton
79 <MiniBackButton
80 hpadding={!isMobile}
80 hpadding={!isMobile}
81 vpadding={isMobile}
81 vpadding={isMobile}
82− isExit={backIsLogout}
83 onClick={goBack}
82 onClick={goBack}
83+ className="mt2"
84 />
84 />
85 )}
85 )}
86 </Flex.Item>
86 </Flex.Item>
src/views/Login.js+1−1
@@ -59,7 +59,7 @@ export default function Login() {
59 }, [push, names]);
59 }, [push, names]);
60
60
61 return (
61 return (
62− <View pop={pop} inset>
62+ <View inset>
63 <Grid>
63 <Grid>
64 <Grid.Item full as={Crumbs} routes={[{ text: 'Bridge' }]} />
64 <Grid.Item full as={Crumbs} routes={[{ text: 'Bridge' }]} />
65 <Grid.Item full as={H4} className="mt4">
65 <Grid.Item full as={H4} className="mt4">