fix: theme is saving correctly

zextras · May 20, 2022 · 5a5dc83 · 5a5dc83
1 parent adb0f93
commit 5a5dc83
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 87 deletions.
diff --git a/src/boot/theme-provider.tsx b/src/boot/theme-provider.tsx
@@ -9,19 +9,19 @@ import { ThemeProvider as UIThemeProvider } from '@zextras/carbonio-design-syste
 import { enable, disable, auto, setFetchMethod } from 'darkreader';
 import { reduce } from 'lodash';
 import { useAccountStore } from '../store/account';
-import { ThemeExtension, ThemeExtensionMap } from '../../types';
+import { DRPropValues, ThemeExtension, ThemeExtensionMap } from '../../types';
 import { darkReaderDynamicThemeFixes } from '../constants';
 
 setFetchMethod(window.fetch);
 
 export const ThemeCallbacksContext = createContext<{
 	addExtension: (newExtension: ThemeExtension, id: string) => void;
-	setDarkReaderState: (newState: 'auto' | 'enabled' | 'disabled') => void;
+	setDarkReaderState: (newState: DRPropValues) => void;
 }>({
 	// eslint-disable-next-line @typescript-eslint/no-empty-function
 	addExtension: (newExtension: ThemeExtension, id: string) => {},
 	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	setDarkReaderState: (newState: 'auto' | 'enabled' | 'disabled') => {}
+	setDarkReaderState: (newState: DRPropValues) => {}
 });
 
 const themeSizes = (

diff --git a/src/settings/components/general-settings/appearance-settings.tsx b/src/settings/components/general-settings/appearance-settings.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { FC, useState, useMemo, useContext, useCallback } from 'react';
+import React, { FC, useMemo, useContext, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FormSubSection, Select } from '@zextras/carbonio-design-system';
 import { find } from 'lodash';
@@ -18,9 +18,11 @@ const AppearanceSettings: FC<{
 	addMod: (type: 'prefs' | 'props', key: string, value: { value: any; app: string }) => void;
 }> = ({ settings, addMod }) => {
 	const { setDarkReaderState } = useContext(ThemeCallbacksContext);
-	const [drMode, setDrMode] = useState<DRPropValues>(
-		(find(settings.props, ['name', 'zappDarkreaderMode'])?._content as unknown as DRPropValues) ??
-			'auto'
+	const currentDRMSetting = useMemo(
+		() =>
+			find(settings.props, { name: 'zappDarkreaderMode', zimlet: SHELL_APP_ID })
+				?._content as DRPropValues,
+		[settings]
 	);
 	const [t] = useTranslation();
 	const items = useMemo(
@@ -41,27 +43,16 @@ const AppearanceSettings: FC<{
 		[t]
 	);
 	const defaultSelection = useMemo(
-		() => find(items, ['value', drMode]) ?? items[0],
-		[drMode, items]
+		() => find(items, { value: currentDRMSetting }),
+		[currentDRMSetting, items]
 	);
 	const onSelectionChange = useCallback(
 		(v) => {
-			if (v !== drMode) {
-				setDrMode((old) => (v !== old ? v : old));
-				// setDarkReaderState(v);
-				addMod('props', 'zappDarkreaderMode', { app: SHELL_APP_ID, value: v });
-			}
+			setDarkReaderState(v);
+			addMod('props', 'zappDarkreaderMode', { app: SHELL_APP_ID, value: v });
 		},
-		[addMod, drMode]
+		[addMod, setDarkReaderState]
 	);
-	// useEffect(
-	// 	() => (): void =>
-	// 		setDarkReaderState(
-	// 			(find(settings.props, ['name', 'zappDarkreaderMode'])
-	// 				?._content as unknown as DRPropValues) ?? 'auto'
-	// 		),
-	// 	[setDarkReaderState, settings.props]
-	// );
 	const subSection = useMemo(() => themeSubSection(t), [t]);
 	return (
 		<FormSubSection

diff --git a/src/shell/app-view-container.jsx → src/shell/app-view-container.tsx b/src/shell/app-view-container.jsx → src/shell/app-view-container.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { map, find } from 'lodash';
@@ -20,7 +20,7 @@ const _BoardsRouterContainer = styled(Container)`
 	overflow-y: auto;
 `;
 
-const FirstAppRedirect = () => {
+const FirstAppRedirect: FC = () => {
 	const apps = useAppList();
 	const routes = useRoutes();
 	const location = useLocation();
@@ -33,7 +33,7 @@ const FirstAppRedirect = () => {
 	) : null;
 };
 
-export default function AppViewContainer() {
+const AppViewContainer: FC = () => {
 	const appViews = useAppStore((s) => s.views.appView);
 	const routes = useMemo(
 		() => [
@@ -56,4 +56,6 @@ export default function AppViewContainer() {
 			</Container>
 		</_BoardsRouterContainer>
 	);
-}
+};
+
+export default AppViewContainer;
diff --git a/src/shell/shell-context-provider.jsx → src/shell/shell-context-provider.tsx b/src/shell/shell-context-provider.jsx → src/shell/shell-context-provider.tsx
@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useScreenMode } from '@zextras/carbonio-design-system';
 import ShellContext from './shell-context';
 
-export default function ShellContextProvider({ children }) {
+const ShellContextProvider: FC<{ children: unknown }> = ({ children }) => {
 	const screenMode = useScreenMode();
 
 	const value = useMemo(
@@ -19,4 +19,6 @@ export default function ShellContextProvider({ children }) {
 	);
 
 	return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;
-}
+};
+
+export default ShellContextProvider;
diff --git a/src/shell/shell-context.js → src/shell/shell-context.ts b/src/shell/shell-context.js → src/shell/shell-context.ts
diff --git a/src/shell/shell-navigation-bar.jsx b/src/shell/shell-navigation-bar.jsx
diff --git a/src/shell/shell-navigation-bar.tsx b/src/shell/shell-navigation-bar.tsx
@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { FC } from 'react';
+import { Container, Responsive } from '@zextras/carbonio-design-system';
+import ShellPrimaryBar from './shell-primary-bar';
+import ShellSecondaryBar from './shell-secondary-bar';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import ShellMobileNav from './shell-mobile-nav';
+import { AppRoute } from '../../types';
+
+type ShellNavigationBarProps = {
+	mobileNavIsOpen: boolean;
+	activeRoute: AppRoute;
+};
+
+const ShellNavigationBar: FC<ShellNavigationBarProps> = ({ mobileNavIsOpen, activeRoute }) => (
+	<Container
+		orientation="horizontal"
+		background="gray5"
+		width="fit"
+		height="fill"
+		mainAlignment="flex-start"
+		crossAlignment="flex-start"
+	>
+		<Responsive mode="desktop">
+			<ShellPrimaryBar activeRoute={activeRoute} />
+			<ShellSecondaryBar activeRoute={activeRoute} />
+		</Responsive>
+		<Responsive mode="mobile">
+			<ShellMobileNav mobileNavIsOpen={mobileNavIsOpen} menuTree={activeRoute} />
+		</Responsive>
+	</Container>
+);
+
+export default ShellNavigationBar;
diff --git a/src/shell/shell-view.jsx → src/shell/shell-view.tsx b/src/shell/shell-view.jsx → src/shell/shell-view.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, FC, useMemo } from 'react';
 import { Row, Responsive, ModalManager, SnackbarManager } from '@zextras/carbonio-design-system';
 import styled from 'styled-components';
 import { find } from 'lodash';
@@ -14,14 +14,18 @@ import AppViewContainer from './app-view-container';
 import ShellContextProvider from './shell-context-provider';
 import ShellHeader from './shell-header';
 import ShellNavigationBar from './shell-navigation-bar';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import AppBoardWindow from './boards/app-board-window';
 import { ThemeCallbacksContext } from '../boot/theme-provider';
 import { useUserSettings } from '../store/account';
 import { ShellUtilityBar, ShellUtilityPanel } from '../utility-bar';
 import { useCurrentRoute } from '../history/hooks';
+import { SHELL_APP_ID } from '../constants';
+import { AppRoute, DRPropValues } from '../../types';
 
 const Background = styled.div`
-	background: ${({ theme }) => theme.palette.gray6.regular};
+	background: ${({ theme }): string => theme.palette.gray6.regular};
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -32,53 +36,60 @@ const Background = styled.div`
 	max-width: 100%;
 `;
 
-function DarkReaderListener() {
+function DarkReaderListener(): null {
 	const { setDarkReaderState } = useContext(ThemeCallbacksContext);
 	const settings = useUserSettings();
+	const currentDRMSetting = useMemo(
+		() =>
+			find(settings?.props ?? [], {
+				name: 'zappDarkreaderMode',
+				zimlet: SHELL_APP_ID
+			})?._content as DRPropValues,
+		[settings]
+	);
+
 	useEffect(() => {
-		const darkreaderState =
-			find(settings?.props ?? [], ['name', 'zappDarkreaderMode'])?._content ?? 'auto';
-		setDarkReaderState(darkreaderState);
-	}, [setDarkReaderState, settings]);
+		setDarkReaderState(currentDRMSetting);
+	}, [currentDRMSetting, setDarkReaderState]);
 	return null;
 }
 
-export function Shell() {
+export const Shell: FC = () => {
 	const [mobileNavOpen, setMobileNavOpen] = useState(false);
-	const activeRoute = useCurrentRoute();
+	const activeRoute = useCurrentRoute() as AppRoute;
 	return (
 		<Background>
 			<DarkReaderListener />
 			{/* <MainAppRerouter /> */}
 			<ShellHeader
 				activeRoute={activeRoute}
 				mobileNavIsOpen={mobileNavOpen}
-				onMobileMenuClick={() => setMobileNavOpen(!mobileNavOpen)}
+				onMobileMenuClick={(): void => setMobileNavOpen(!mobileNavOpen)}
 			>
 				<ShellUtilityBar />
 			</ShellHeader>
 			<Row crossAlignment="unset" style={{ position: 'relative', flexGrow: '1' }}>
 				<ShellNavigationBar activeRoute={activeRoute} mobileNavIsOpen={mobileNavOpen} />
-				<AppViewContainer activeRoute={activeRoute} />
+				<AppViewContainer />
 				<ShellUtilityPanel />
 			</Row>
 			<Responsive mode="desktop">
 				<AppBoardWindow />
 			</Responsive>
 		</Background>
 	);
-}
+};
 
-export default function ShellView() {
-	return (
-		<ShellContextProvider>
-			<ModalManager>
-				<SnackbarManager>
-					<PreviewManager>
-						<Shell />
-					</PreviewManager>
-				</SnackbarManager>
-			</ModalManager>
-		</ShellContextProvider>
-	);
-}
+const ShellView: FC = () => (
+	<ShellContextProvider>
+		<ModalManager>
+			<SnackbarManager>
+				<PreviewManager>
+					<Shell />
+				</PreviewManager>
+			</SnackbarManager>
+		</ModalManager>
+	</ShellContextProvider>
+);
+
+export default ShellView;