diff options
Diffstat (limited to 'packages/renderer')
-rw-r--r-- | packages/renderer/src/components/App.tsx | 64 | ||||
-rw-r--r-- | packages/renderer/src/components/BrowserViewPlaceholder.tsx | 26 | ||||
-rw-r--r-- | packages/renderer/src/stores/Service.ts | 84 |
3 files changed, 107 insertions, 67 deletions
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx index af2e4ec..b647a80 100644 --- a/packages/renderer/src/components/App.tsx +++ b/packages/renderer/src/components/App.tsx | |||
@@ -19,38 +19,46 @@ | |||
19 | */ | 19 | */ |
20 | 20 | ||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import React from 'react'; | 22 | import Button from '@mui/material/Button'; |
23 | import { observer } from 'mobx-react-lite'; | ||
24 | import React, { useCallback } from 'react'; | ||
23 | 25 | ||
24 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; | 26 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; |
25 | import { useStore } from './StoreProvider'; | 27 | import { useStore } from './StoreProvider'; |
26 | import LocationBar from './locationBar/LocationBar'; | 28 | import LocationBar from './locationBar/LocationBar'; |
27 | import Sidebar from './sidebar/Sidebar'; | 29 | import Sidebar from './sidebar/Sidebar'; |
28 | 30 | ||
29 | export default function App(): JSX.Element { | 31 | function App(): JSX.Element { |
30 | const store = useStore(); | 32 | const { |
33 | settings: { selectedService }, | ||
34 | } = useStore(); | ||
31 | 35 | ||
32 | function onClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void { | 36 | const handleBackForwardMouseButtons = useCallback( |
33 | switch (event.button) { | 37 | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { |
34 | case 3: | 38 | switch (event.button) { |
35 | store.settings.selectedService?.goBack(); | 39 | case 3: |
36 | break; | 40 | selectedService?.goBack(); |
37 | case 4: | 41 | break; |
38 | store.settings.selectedService?.goForward(); | 42 | case 4: |
39 | break; | 43 | selectedService?.goForward(); |
40 | default: | 44 | break; |
41 | // Allow the event to propagate. | 45 | default: |
42 | return; | 46 | // Allow the event to propagate. |
43 | } | 47 | return; |
44 | event.preventDefault(); | 48 | } |
45 | event.stopPropagation(); | 49 | event.preventDefault(); |
46 | } | 50 | event.stopPropagation(); |
51 | }, | ||
52 | [selectedService], | ||
53 | ); | ||
47 | 54 | ||
48 | return ( | 55 | return ( |
49 | <Box | 56 | <Box |
50 | onClick={(event) => onClick(event)} | 57 | onClick={handleBackForwardMouseButtons} |
51 | onAuxClick={(event) => onClick(event)} | 58 | onAuxClick={handleBackForwardMouseButtons} |
52 | sx={{ | 59 | sx={{ |
53 | display: 'flex', | 60 | display: 'flex', |
61 | overflow: 'hidden', | ||
54 | flexDirection: 'row', | 62 | flexDirection: 'row', |
55 | alignItems: 'stretch', | 63 | alignItems: 'stretch', |
56 | height: '100vh', | 64 | height: '100vh', |
@@ -69,8 +77,22 @@ export default function App(): JSX.Element { | |||
69 | }} | 77 | }} |
70 | > | 78 | > |
71 | <LocationBar /> | 79 | <LocationBar /> |
72 | <BrowserViewPlaceholder /> | 80 | <BrowserViewPlaceholder> |
81 | <p>{JSON.stringify(selectedService?.state)}</p> | ||
82 | {selectedService?.state.type === 'certificateError' && ( | ||
83 | <Button | ||
84 | disabled={selectedService.state.trust !== 'pending'} | ||
85 | onClick={() => | ||
86 | selectedService?.temporarilyTrustCurrentCertificate() | ||
87 | } | ||
88 | > | ||
89 | Trust certificate | ||
90 | </Button> | ||
91 | )} | ||
92 | </BrowserViewPlaceholder> | ||
73 | </Box> | 93 | </Box> |
74 | </Box> | 94 | </Box> |
75 | ); | 95 | ); |
76 | } | 96 | } |
97 | |||
98 | export default observer(App); | ||
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index c07ed15..1f5f9f4 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx | |||
@@ -20,12 +20,15 @@ | |||
20 | 20 | ||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import throttle from 'lodash-es/throttle'; | 22 | import throttle from 'lodash-es/throttle'; |
23 | import { observer } from 'mobx-react-lite'; | 23 | import React, { ReactNode, useCallback, useRef } from 'react'; |
24 | import React, { useCallback, useRef } from 'react'; | ||
25 | 24 | ||
26 | import { useStore } from './StoreProvider'; | 25 | import { useStore } from './StoreProvider'; |
27 | 26 | ||
28 | export default observer(() => { | 27 | function BrowserViewPlaceholder({ |
28 | children, | ||
29 | }: { | ||
30 | children?: ReactNode; | ||
31 | }): JSX.Element { | ||
29 | const store = useStore(); | 32 | const store = useStore(); |
30 | 33 | ||
31 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. | 34 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. |
@@ -62,11 +65,14 @@ export default observer(() => { | |||
62 | ); | 65 | ); |
63 | 66 | ||
64 | return ( | 67 | return ( |
65 | <Box | 68 | <Box flex={1} ref={ref}> |
66 | sx={{ | 69 | {children} |
67 | flex: 1, | 70 | </Box> |
68 | }} | ||
69 | ref={ref} | ||
70 | /> | ||
71 | ); | 71 | ); |
72 | }); | 72 | } |
73 | |||
74 | BrowserViewPlaceholder.defaultProps = { | ||
75 | children: undefined, | ||
76 | }; | ||
77 | |||
78 | export default BrowserViewPlaceholder; | ||
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts index 7878ea0..695cff4 100644 --- a/packages/renderer/src/stores/Service.ts +++ b/packages/renderer/src/stores/Service.ts | |||
@@ -25,47 +25,59 @@ import getEnv from '../env/getEnv'; | |||
25 | 25 | ||
26 | import ServiceSettings from './ServiceSettings'; | 26 | import ServiceSettings from './ServiceSettings'; |
27 | 27 | ||
28 | const Service = defineServiceModel(ServiceSettings).actions((self) => ({ | 28 | const Service = defineServiceModel(ServiceSettings).actions((self) => { |
29 | dispatch(serviceAction: ServiceAction): void { | 29 | function dispatch(serviceAction: ServiceAction): void { |
30 | getEnv(self).dispatchMainAction({ | 30 | getEnv(self).dispatchMainAction({ |
31 | action: 'dispatch-service-action', | 31 | action: 'dispatch-service-action', |
32 | serviceId: self.id, | 32 | serviceId: self.id, |
33 | serviceAction, | 33 | serviceAction, |
34 | }); | 34 | }); |
35 | }, | 35 | } |
36 | goBack(): void { | 36 | |
37 | this.dispatch({ | 37 | return { |
38 | action: 'back', | 38 | goBack(): void { |
39 | }); | 39 | dispatch({ |
40 | }, | 40 | action: 'back', |
41 | goForward(): void { | 41 | }); |
42 | this.dispatch({ | 42 | }, |
43 | action: 'forward', | 43 | goForward(): void { |
44 | }); | 44 | dispatch({ |
45 | }, | 45 | action: 'forward', |
46 | reload(ignoreCache = false): void { | 46 | }); |
47 | this.dispatch({ | 47 | }, |
48 | action: 'reload', | 48 | reload(ignoreCache = false): void { |
49 | ignoreCache, | 49 | dispatch({ |
50 | }); | 50 | action: 'reload', |
51 | }, | 51 | ignoreCache, |
52 | stop(): void { | 52 | }); |
53 | this.dispatch({ | 53 | }, |
54 | action: 'stop', | 54 | stop(): void { |
55 | }); | 55 | dispatch({ |
56 | }, | 56 | action: 'stop', |
57 | go(url: string): void { | 57 | }); |
58 | this.dispatch({ | 58 | }, |
59 | action: 'go', | 59 | go(url: string): void { |
60 | url, | 60 | dispatch({ |
61 | }); | 61 | action: 'go', |
62 | }, | 62 | url, |
63 | goHome(): void { | 63 | }); |
64 | this.dispatch({ | 64 | }, |
65 | action: 'go-home', | 65 | goHome(): void { |
66 | }); | 66 | dispatch({ |
67 | }, | 67 | action: 'go-home', |
68 | })); | 68 | }); |
69 | }, | ||
70 | temporarilyTrustCurrentCertificate(): void { | ||
71 | if (self.state.type !== 'certificateError') { | ||
72 | throw new Error('No certificate to accept'); | ||
73 | } | ||
74 | dispatch({ | ||
75 | action: 'temporarily-trust-current-certificate', | ||
76 | fingerprint: self.state.certificate.fingerprint, | ||
77 | }); | ||
78 | }, | ||
79 | }; | ||
80 | }); | ||
69 | 81 | ||
70 | /* | 82 | /* |
71 | eslint-disable-next-line @typescript-eslint/no-redeclare -- | 83 | eslint-disable-next-line @typescript-eslint/no-redeclare -- |