use-settings-destructuring (entur#737)

Destructure when using useSettings
zyzmoz · Oct 12, 2022 · dd6f752 · dd6f752
1 parent 1bfbbd6
commit dd6f752
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Header/DashboardHeader.tsx b/src/components/Header/DashboardHeader.tsx
@@ -7,7 +7,7 @@ import { UpgradeTavlaBanner } from '../../containers/DashboardWrapper/UpgradeTav
 import { isMobileWeb } from '../../utils'
 
 function DashboardHeader(): JSX.Element | null {
-    const settings = useSettings()[0]
+    const [settings] = useSettings()
     if (!settings) return null
     const { logo, logoSize, description } = settings
 

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
@@ -178,25 +178,25 @@ function ProgressiveWebAppPrompt(pathName: string): JSX.Element | null {
 
 const Content = (): JSX.Element => {
     const user = useFirebaseAuthentication()
-    const settings = useSettings()
+    const [settings, setSettings] = useSettings()
     const location = useLocation()
     const [tavleOpenedAt] = useState(new Date().getTime())
 
     const includeSettings = !['/privacy', '/tavler'].includes(location.pathname)
 
     const isOnTavle = useRouteMatch('/t/')
 
-    const Dashboard = settings[0]
-        ? getDashboardComponent(settings[0].dashboard)
+    const Dashboard = settings
+        ? getDashboardComponent(settings.dashboard)
         : (): null => null
 
     const [isRotated, setIsRotated] = useState(false)
 
     useEffect(() => {
         updateManifest(window.location.href, window.location.origin)
         if (isOnTavle) {
-            const direction = settings[0]?.direction || Direction.STANDARD
-            const fontSizeScale = settings[0]?.fontScale || 1
+            const direction = settings?.direction || Direction.STANDARD
+            const fontSizeScale = settings?.fontScale || 1
             document.documentElement.style.fontSize = fontSizeScale * 16 + 'px'
             setIsRotated(direction === Direction.ROTATED)
         } else {
@@ -208,8 +208,8 @@ const Content = (): JSX.Element => {
     useEffect(() => {
         if (
             isOnTavle &&
-            settings[0]?.pageRefreshedAt &&
-            tavleOpenedAt < settings[0]?.pageRefreshedAt
+            settings?.pageRefreshedAt &&
+            tavleOpenedAt < settings?.pageRefreshedAt
         ) {
             window.location.reload()
         }
@@ -222,7 +222,11 @@ const Content = (): JSX.Element => {
                     ? ProgressiveWebAppPrompt(location.pathname)
                     : null}
                 <SettingsContext.Provider
-                    value={includeSettings ? settings : [null, settings[1]]}
+                    value={
+                        includeSettings
+                            ? [settings, setSettings]
+                            : [null, setSettings]
+                    }
                 >
                     <ThemeProvider>
                         <div
@@ -246,7 +250,7 @@ const Content = (): JSX.Element => {
                                     <PrivateRoute
                                         exact
                                         path="/admin/:documentId"
-                                        component={settings[0] && AdminPage}
+                                        component={settings && AdminPage}
                                         errorComponent={LockedTavle}
                                     />
                                     <Route
@@ -260,7 +264,7 @@ const Content = (): JSX.Element => {
                                     <Route
                                         path="/admin"
                                         component={
-                                            settings[0]
+                                            settings
                                                 ? AdminPage
                                                 : (): null => null
                                         }