From dd6f752a0ddf63769fa2f2a0358ce2806e920e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Helstr=C3=B8m?= <Orjan.Helstrom@gmail.com>
Date: Wed, 12 Oct 2022 09:42:46 +0200
Subject: [PATCH] use-settings-destructuring (#737)

Destructure when using useSettings
---
 src/components/Header/DashboardHeader.tsx |  2 +-
 src/containers/App.tsx                    | 24 +++++++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Header/DashboardHeader.tsx b/src/components/Header/DashboardHeader.tsx
index e159cc51f..c3135148a 100644
--- 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
index e345bc0cd..9e1042c51 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -178,7 +178,7 @@ 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())
 
@@ -186,8 +186,8 @@ const Content = (): JSX.Element => {
 
     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)
@@ -195,8 +195,8 @@ const Content = (): JSX.Element => {
     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
                                         }