diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-01-08 21:36:43 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-01-09 19:53:03 +0100 |
commit | d07e7b834831230b53860d0919a68edc2d36193d (patch) | |
tree | a1f2a021563ddff54f33341c475fc6c6eb787388 /packages/renderer/src/components | |
parent | New configurations based on review comments (WIP) (diff) | |
download | sophie-d07e7b834831230b53860d0919a68edc2d36193d.tar.gz sophie-d07e7b834831230b53860d0919a68edc2d36193d.tar.zst sophie-d07e7b834831230b53860d0919a68edc2d36193d.zip |
build: Eslint fixes for multi-module project
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages/renderer/src/components')
6 files changed, 21 insertions, 22 deletions
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx index 8bd3dd8..1174bbb 100644 --- a/packages/renderer/src/components/App.tsx +++ b/packages/renderer/src/components/App.tsx | |||
@@ -21,10 +21,10 @@ | |||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import React from 'react'; | 22 | import React from 'react'; |
23 | 23 | ||
24 | import { BrowserViewPlaceholder } from './BrowserViewPlaceholder'; | 24 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; |
25 | import { Sidebar } from './Sidebar'; | 25 | import Sidebar from './Sidebar'; |
26 | 26 | ||
27 | export function App(): JSX.Element { | 27 | export default function App(): JSX.Element { |
28 | return ( | 28 | return ( |
29 | <Box | 29 | <Box |
30 | sx={{ | 30 | sx={{ |
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index 6aa6b7b..c671983 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx | |||
@@ -18,17 +18,15 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import { throttle } from 'lodash'; | ||
22 | import { observer } from 'mobx-react-lite'; | ||
23 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import throttle from 'lodash-es/throttle'; | ||
23 | import { observer } from 'mobx-react-lite'; | ||
24 | import React, { useCallback, useRef } from 'react'; | 24 | import React, { useCallback, useRef } from 'react'; |
25 | 25 | ||
26 | import { useStore } from './StoreProvider'; | 26 | import { useStore } from './StoreProvider'; |
27 | 27 | ||
28 | export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() { | 28 | export default observer(() => { |
29 | const { | 29 | const store = useStore(); |
30 | setBrowserViewBounds, | ||
31 | } = useStore(); | ||
32 | 30 | ||
33 | const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { | 31 | const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { |
34 | if (entry) { | 32 | if (entry) { |
@@ -38,14 +36,14 @@ export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() | |||
38 | width, | 36 | width, |
39 | height, | 37 | height, |
40 | } = entry.target.getBoundingClientRect(); | 38 | } = entry.target.getBoundingClientRect(); |
41 | setBrowserViewBounds({ | 39 | store.setBrowserViewBounds({ |
42 | x, | 40 | x, |
43 | y, | 41 | y, |
44 | width, | 42 | width, |
45 | height, | 43 | height, |
46 | }); | 44 | }); |
47 | } | 45 | } |
48 | }, 100), [setBrowserViewBounds]); | 46 | }, 100), [store]); |
49 | 47 | ||
50 | const resizeObserverRef = useRef<ResizeObserver | null>(null); | 48 | const resizeObserverRef = useRef<ResizeObserver | null>(null); |
51 | 49 | ||
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx index 6c79932..44a47b0 100644 --- a/packages/renderer/src/components/Sidebar.tsx +++ b/packages/renderer/src/components/Sidebar.tsx | |||
@@ -21,9 +21,9 @@ | |||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import React from 'react'; | 22 | import React from 'react'; |
23 | 23 | ||
24 | import { ToggleDarkModeButton } from './ToggleDarkModeButton'; | 24 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
25 | 25 | ||
26 | export function Sidebar(): JSX.Element { | 26 | export default function Sidebar(): JSX.Element { |
27 | return ( | 27 | return ( |
28 | <Box | 28 | <Box |
29 | sx={(theme) => ({ | 29 | sx={(theme) => ({ |
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx index da1e699..cde6a31 100644 --- a/packages/renderer/src/components/StoreProvider.tsx +++ b/packages/renderer/src/components/StoreProvider.tsx | |||
@@ -32,7 +32,7 @@ export function useStore(): RendererStore { | |||
32 | return store; | 32 | return store; |
33 | } | 33 | } |
34 | 34 | ||
35 | export function StoreProvider({ children, store }: { | 35 | export default function StoreProvider({ children, store }: { |
36 | children: JSX.Element | JSX.Element[], | 36 | children: JSX.Element | JSX.Element[], |
37 | store: RendererStore, | 37 | store: RendererStore, |
38 | }): JSX.Element { | 38 | }): JSX.Element { |
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index 9215f5c..eacaa52 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx | |||
@@ -18,18 +18,18 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import { observer } from 'mobx-react-lite'; | ||
22 | import { | 21 | import { |
23 | unstable_createMuiStrictModeTheme as createTheme, | 22 | unstable_createMuiStrictModeTheme as createTheme, |
24 | ThemeProvider as MuiThemeProvider, | 23 | ThemeProvider as MuiThemeProvider, |
25 | } from '@mui/material/styles'; | 24 | } from '@mui/material/styles'; |
25 | import { observer } from 'mobx-react-lite'; | ||
26 | import React from 'react'; | 26 | import React from 'react'; |
27 | 27 | ||
28 | import { useStore } from './StoreProvider'; | 28 | import { useStore } from './StoreProvider'; |
29 | 29 | ||
30 | export const ThemeProvider = observer(function ThemeProvider({ children }: { | 30 | export default observer(({ children }: { |
31 | children: JSX.Element | JSX.Element[], | 31 | children: JSX.Element | JSX.Element[]; |
32 | }) { | 32 | }) => { |
33 | const { shared: { shouldUseDarkColors } } = useStore(); | 33 | const { shared: { shouldUseDarkColors } } = useStore(); |
34 | 34 | ||
35 | const theme = createTheme({ | 35 | const theme = createTheme({ |
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx index 1b6757e..c8ffdf0 100644 --- a/packages/renderer/src/components/ToggleDarkModeButton.tsx +++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx | |||
@@ -18,21 +18,22 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import { observer } from 'mobx-react-lite'; | ||
22 | import DarkModeIcon from '@mui/icons-material/DarkMode'; | 21 | import DarkModeIcon from '@mui/icons-material/DarkMode'; |
23 | import LightModeIcon from '@mui/icons-material/LightMode'; | 22 | import LightModeIcon from '@mui/icons-material/LightMode'; |
24 | import IconButton from '@mui/material/IconButton'; | 23 | import IconButton from '@mui/material/IconButton'; |
24 | import { observer } from 'mobx-react-lite'; | ||
25 | import React from 'react'; | 25 | import React from 'react'; |
26 | 26 | ||
27 | import { useStore } from './StoreProvider'; | 27 | import { useStore } from './StoreProvider'; |
28 | 28 | ||
29 | export const ToggleDarkModeButton = observer(function ToggleDarkModeButton() { | 29 | export default observer(() => { |
30 | const { shared: { shouldUseDarkColors }, toggleDarkMode } = useStore(); | 30 | const store = useStore(); |
31 | const { shared: { shouldUseDarkColors } } = store; | ||
31 | 32 | ||
32 | return ( | 33 | return ( |
33 | <IconButton | 34 | <IconButton |
34 | aria-label="Toggle dark mode" | 35 | aria-label="Toggle dark mode" |
35 | onClick={() => toggleDarkMode()} | 36 | onClick={() => store.toggleDarkMode()} |
36 | > | 37 | > |
37 | {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} | 38 | {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} |
38 | </IconButton> | 39 | </IconButton> |