Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 073816a

Browse files
dastrong-codigadastrong-codiga
committed
feat: manage network changes
1 parent 836203f commit 073816a

File tree

4 files changed

+134
-75
lines changed

4 files changed

+134
-75
lines changed

‎src/renderer/components/Layout/Layout.tsx

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
import { ReactNode } from 'react';
1+
import { ReactNode, useEffect, useState } from 'react';
22
import { useLocation } from 'react-router-dom';
3-
import {
4-
Box,
5-
Button,
6-
Flex,
7-
useDisclosure,
8-
useColorMode,
9-
} from '@chakra-ui/react';
10-
import { EmptyState } from '@codiga/codiga-components';
3+
import { Box, Flex, useDisclosure, useColorMode } from '@chakra-ui/react';
114

125
import Login from 'renderer/components/Login';
136
import { useUser } from 'renderer/components/UserContext';
147
import SideMenu from './SideMenu';
158
import Titlebar from './Titlebar';
9+
import NotAuthenticated from './NotAuthenticated';
10+
import NoInternetConnection from './NoInternetConnection';
1611

1712
type LayoutProps = {
1813
children: ReactNode;
@@ -23,6 +18,25 @@ export default function Layout({ children }: LayoutProps) {
2318
const { id } = useUser();
2419
const { isOpen, onOpen, onClose } = useDisclosure();
2520
const { colorMode } = useColorMode();
21+
const [isOnline, setIsOnline] = useState(true);
22+
23+
useEffect(() => {
24+
const updateOnlineStatus = () => {
25+
const currentStatus = navigator.onLine;
26+
if (isOnline && !currentStatus) setIsOnline(false);
27+
if (!isOnline && currentStatus) setIsOnline(true);
28+
};
29+
30+
updateOnlineStatus();
31+
32+
window.addEventListener('online', updateOnlineStatus);
33+
window.addEventListener('offline', updateOnlineStatus);
34+
35+
return () => {
36+
window.removeEventListener('online', updateOnlineStatus);
37+
window.removeEventListener('offline', updateOnlineStatus);
38+
};
39+
}, [isOnline, setIsOnline]);
2640

2741
return (
2842
<Flex
@@ -34,48 +48,42 @@ export default function Layout({ children }: LayoutProps) {
3448
_dark={{ bg: 'base.dark' }}
3549
sx={{ colorScheme: colorMode }}
3650
>
37-
<Titlebar openLoginModal={onOpen} />
38-
39-
<Flex flex={1}>
40-
<Box
41-
w="214px"
42-
minW="214px"
43-
h="full"
44-
bg="neutral.25"
45-
_dark={{ bg: 'base.dark' }}
46-
pt="space_16"
47-
>
48-
<SideMenu openLoginModal={onOpen} />
49-
</Box>
51+
<Titlebar openLoginModal={onOpen} isOnline={isOnline} />
5052

51-
<Flex
52-
flex={1}
53-
justifyContent="center"
54-
alignItems="flex-start"
55-
overflow="auto"
56-
bg="neutral.0"
57-
_dark={{ bg: 'neutral.100' }}
58-
>
59-
<Box w="full">
60-
{/* IF THE USER'S LOGGED IN, SHOW CONTENT, OTHERWISE SHOW AN LOGIN NOTICE */}
61-
{id || pathname === '/' ? (
62-
children
63-
) : (
64-
<EmptyState
65-
title="Log in to access this section"
66-
description="Add your API Token to access this section"
67-
illustration="disconnected"
68-
mt="space_80"
69-
mx="auto"
70-
>
71-
<Button variant="primary" size="sm" onClick={onOpen}>
72-
Add Token
73-
</Button>
74-
</EmptyState>
75-
)}
53+
{!isOnline ? (
54+
<NoInternetConnection />
55+
) : (
56+
<Flex flex={1}>
57+
<Box
58+
w="214px"
59+
minW="214px"
60+
h="full"
61+
bg="neutral.25"
62+
_dark={{ bg: 'base.dark' }}
63+
pt="space_16"
64+
>
65+
<SideMenu openLoginModal={onOpen} />
7666
</Box>
67+
68+
<Flex
69+
flex={1}
70+
justifyContent="center"
71+
alignItems="flex-start"
72+
overflow="auto"
73+
bg="neutral.0"
74+
_dark={{ bg: 'neutral.100' }}
75+
>
76+
<Box w="full">
77+
{/* IF THE USER'S LOGGED IN, SHOW CONTENT, OTHERWISE SHOW AN LOGIN NOTICE */}
78+
{id || pathname === '/' ? (
79+
children
80+
) : (
81+
<NotAuthenticated handleAction={onOpen} />
82+
)}
83+
</Box>
84+
</Flex>
7785
</Flex>
78-
</Flex>
86+
)}
7987

8088
{/* LOGIN MODAL */}
8189
<Login isOpen={isOpen} closeModal={onClose} />

‎src/renderer/components/Layout/NoInternetConnection.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Button } from '@chakra-ui/react';
2+
import { EmptyState } from '@codiga/codiga-components';
3+
4+
export default function NoInternetConnection() {
5+
return (
6+
<EmptyState
7+
title="No internet connection"
8+
description="You must be online to use this Codiga app."
9+
illustration="disconnected"
10+
mt="space_80"
11+
mx="auto"
12+
>
13+
<Button
14+
size="sm"
15+
variant="primary"
16+
onClick={() => window.location.reload()}
17+
>
18+
Refresh
19+
</Button>
20+
</EmptyState>
21+
);
22+
}

‎src/renderer/components/Layout/NotAuthenticated.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Button } from '@chakra-ui/react';
2+
import { EmptyState } from '@codiga/codiga-components';
3+
4+
type NotAuthenticatedProps = {
5+
handleAction: () => void;
6+
};
7+
8+
export default function NotAuthenticated({
9+
handleAction,
10+
}: NotAuthenticatedProps) {
11+
return (
12+
<EmptyState
13+
title="Log in to access this section"
14+
description="Add your API Token to access this section"
15+
illustration="disconnected"
16+
mt="space_80"
17+
mx="auto"
18+
>
19+
<Button variant="primary" size="sm" onClick={handleAction}>
20+
Add Token
21+
</Button>
22+
</EmptyState>
23+
);
24+
}

‎src/renderer/components/Layout/Titlebar.tsx

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import TitlebarButton from './TitlebarButton';
1010

1111
type TitlebarProps = {
1212
openLoginModal: () => void;
13+
isOnline: boolean;
1314
};
1415

15-
export default function Titlebar({ openLoginModal }: TitlebarProps) {
16+
export default function Titlebar({ openLoginModal, isOnline }: TitlebarProps) {
1617
const { id, username, accountType } = useUser();
1718

1819
return (
@@ -35,35 +36,39 @@ export default function Titlebar({ openLoginModal }: TitlebarProps) {
3536
gridGap="space_16"
3637
sx={{ '-webkit-app-region': 'no-drag' }}
3738
>
38-
<Link
39-
isExternal
40-
href={`${APP_URL}/assistant/snippet/create`}
41-
variant="square"
42-
>
43-
Create Snippet
44-
</Link>
45-
46-
<Flex w="32px" alignItems="center">
47-
{id ? (
48-
<Avatar
49-
name={username || 'Anon'}
50-
kind={accountType as any}
51-
src={getAvatarUrl({ id, username, accountType })}
52-
size="sm"
53-
/>
54-
) : (
55-
// eslint-disable-next-line jsx-a11y/anchor-is-valid
39+
{isOnline && (
40+
<>
5641
<Link
57-
as="button"
58-
onClick={openLoginModal}
59-
variant="solid"
60-
size="sm"
61-
p="0"
42+
isExternal
43+
href={`${APP_URL}/assistant/snippet/create`}
44+
variant="square"
6245
>
63-
Login
46+
Create Snippet
6447
</Link>
65-
)}
66-
</Flex>
48+
49+
<Flex w="32px" alignItems="center">
50+
{id ? (
51+
<Avatar
52+
name={username || 'Anon'}
53+
kind={accountType as any}
54+
src={getAvatarUrl({ id, username, accountType })}
55+
size="sm"
56+
/>
57+
) : (
58+
// eslint-disable-next-line jsx-a11y/anchor-is-valid
59+
<Link
60+
as="button"
61+
onClick={openLoginModal}
62+
variant="solid"
63+
size="sm"
64+
p="0"
65+
>
66+
Login
67+
</Link>
68+
)}
69+
</Flex>
70+
</>
71+
)}
6772

6873
<Flex>
6974
<TitlebarButton message="minimizeApp">

0 commit comments

Comments
 (0)