From e25e5df79737f0359ac1ed4dbdc573fdbabc117c Mon Sep 17 00:00:00 2001
From: Thomas Decaux <ebuildy@gmail.com>
Date: Mon, 7 Nov 2022 19:21:58 +0100
Subject: [PATCH] feat(ui): Add theme switcher #5

---
 front/src/components/LayoutHeader.tsx   |  68 +++++++++++-
 front/src/index.tsx                     | 137 ++++++++++++------------
 front/src/providers/SiteMetaContext.tsx |  30 +++++-
 front/src/themes/Dark.tsx               |   7 ++
 front/src/themes/Light.tsx              |   7 ++
 5 files changed, 177 insertions(+), 72 deletions(-)
 create mode 100644 front/src/themes/Dark.tsx
 create mode 100644 front/src/themes/Light.tsx

diff --git a/front/src/components/LayoutHeader.tsx b/front/src/components/LayoutHeader.tsx
index efe94bc..4afdf9f 100644
--- a/front/src/components/LayoutHeader.tsx
+++ b/front/src/components/LayoutHeader.tsx
@@ -1,4 +1,4 @@
-import { EuiAvatar, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiHeader, EuiHeaderLogo, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, EuiLink, EuiPopover, EuiSpacer, EuiText, useGeneratedHtmlId } from '@elastic/eui'
+import { EuiAvatar, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiHeader, EuiHeaderLogo, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, EuiLink, EuiPopover, EuiSpacer, EuiSwitch, EuiSwitchEvent, EuiText, useGeneratedHtmlId } from '@elastic/eui'
 import { useNavigate } from 'react-router-dom'
 import { useSiteMetaContext } from 'providers/SiteMetaContext'
 import { useAuthContext } from 'providers/AuthContext'
@@ -97,8 +97,7 @@ const HeaderAboutMenu: FC = () => {
       aria-label="Account menu"
       onClick={onMenuButtonClick}
       iconType='help'
-    >
-    </EuiButtonEmpty>
+    >About</EuiButtonEmpty>
   )
 
   return (
@@ -133,6 +132,63 @@ const HeaderAboutMenu: FC = () => {
   )
 }
 
+interface SMProps {
+  theme: string
+  setTheme: (theme: string) => void
+}
+
+interface SwitchEvent extends EuiSwitchEvent {
+  checked: boolean
+}
+
+const HeaderSettingsMenu: FC<SMProps> = ({ theme, setTheme }) => {
+  const headerUserPopoverId = useGeneratedHtmlId({
+    prefix: 'headerSettingsPopover'
+  })
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onMenuButtonClick = (): void => {
+    setIsOpen(!isOpen)
+  }
+
+  const closeMenu = (): void => {
+    setIsOpen(false)
+  }
+
+  const button = (
+    <EuiButtonEmpty
+      aria-controls={headerUserPopoverId}
+      aria-expanded={isOpen}
+      aria-haspopup="true"
+      aria-label="Account menu"
+      onClick={onMenuButtonClick}
+      iconType='menu'
+    >
+      Settings
+    </EuiButtonEmpty>
+  )
+
+  return (
+    <EuiPopover
+      id={headerUserPopoverId}
+      button={button}
+      isOpen={isOpen}
+      anchorPosition="downRight"
+      closePopover={closeMenu}
+      panelPaddingSize="none"
+    >
+      <div style={{ width: 320, padding: '20px' }}>
+        <EuiSwitch
+          showLabel={true}
+          label="Dark theme"
+          onChange={(event: SwitchEvent) => { setTheme(theme === 'dark' ? 'light' : 'dark') }}
+          checked={theme === 'dark'}
+        />
+      </div>
+    </EuiPopover>
+  )
+}
+
 const LayoutHeader: FC = () => {
   /**
    * Hooks
@@ -162,6 +218,11 @@ const LayoutHeader: FC = () => {
     <HeaderAboutMenu />
   , [])
 
+  const settingsMenu = <HeaderSettingsMenu
+    theme={siteMetaContext.theme}
+    setTheme={siteMetaContext.setTheme}
+  />
+
   return (
     <EuiHeader
       title={siteMetaContext.title}
@@ -177,6 +238,7 @@ const LayoutHeader: FC = () => {
       </EuiHeaderSection>
 
       <EuiHeaderSection side="right">
+        <EuiHeaderSectionItem>{settingsMenu}</EuiHeaderSectionItem>
         <EuiHeaderSectionItem>{aboutMenu}</EuiHeaderSectionItem>
         <EuiHeaderSectionItem>{userMenu}</EuiHeaderSectionItem>
         <If condition={authContext.apiAccessToken !== ''}>
diff --git a/front/src/index.tsx b/front/src/index.tsx
index 95078d4..8df8880 100644
--- a/front/src/index.tsx
+++ b/front/src/index.tsx
@@ -15,15 +15,12 @@ import {
   EuiPageTemplate, EuiProvider
 } from '@elastic/eui'
 
-// import '@elastic/eui/dist/eui_theme_light.css';
-import '@elastic/eui/dist/eui_theme_dark.css'
-
 import AnonymousLoginPage from 'views/Auth/AnonymousPage'
 import ProtectedRoute from 'components/ProtectedRoute'
 import BucketContextProvider from 'providers/BucketContext'
 import HomePage from 'views/Bucket/HomePage/HomePage'
 import DetailsPage from 'views/Bucket/DetailsPage/DetailsPage'
-import { SiteMetaContextProvider } from 'providers/SiteMetaContext'
+import { SiteContext, SiteMetaContextProvider } from 'providers/SiteMetaContext'
 import { AuthContext, AuthContextProvider } from 'providers/AuthContext'
 import BrowserPage from 'views/Bucket/BrowserPage/BrowserPage'
 import UploadPage from 'views/Bucket/UploadPage/UploadPage'
@@ -34,88 +31,92 @@ import { NotificationToasts } from 'components/NotificationToasts'
 ReactDOM.render(
   <React.StrictMode>
     <ConfigContextProvider>
-      <EuiProvider colorMode="DARK">
-          <SiteMetaContextProvider>
-            <AuthContextProvider>
-              <BrowserRouter>
-
-                <LayoutHeader />
-
-                <Routes>
-
-                  <Route
-                    path=""
-                    element={(
-                      <AuthContext.Consumer>
-                        {({ apiAccessToken }) => (
-                          apiAccessToken !== ''
-                            ? <Navigate to="/bucket" replace />
-                            : <Navigate to="/auth" replace />
-                        )}
-                      </AuthContext.Consumer>
-                    )}
-                  />
+      <SiteMetaContextProvider>
+        <SiteContext.Consumer>
+          {({ theme }) => (
+            <EuiProvider colorMode={theme === 'dark' ? 'DARK' : 'LIGHT'}>
+              <AuthContextProvider>
+                <BrowserRouter>
 
-                  <Route
-                    path="auth"
-                    element={(
-                      <EuiPageTemplate>
-                        <EuiPageTemplate.Section>
-                        <Outlet />
-                      </EuiPageTemplate.Section>
-                      </EuiPageTemplate>
-                    )}
-                  >
-                    <Route path="" element={<LoginPage />} />
-                    <Route path="anonymous" element={<AnonymousLoginPage />} />
-                    <Route path="*" />
-                  </Route>
+                  <LayoutHeader />
 
-                  <Route
-                    path="bucket"
-                    element={(
-                      <ProtectedRoute>
-                        <BucketContextProvider>
-                        <Outlet />
-                      </BucketContextProvider>
-                      </ProtectedRoute>
-                    )}
-                  >
+                  <Routes>
 
                     <Route
                       path=""
                       element={(
-                        <ProtectedRoute>
+                        <AuthContext.Consumer>
+                          {({ apiAccessToken }) => (
+                            apiAccessToken !== ''
+                              ? <Navigate to="/bucket" replace />
+                              : <Navigate to="/auth" replace />
+                          )}
+                        </AuthContext.Consumer>
+                      )}
+                    />
+
+                    <Route
+                      path="auth"
+                      element={(
                         <EuiPageTemplate>
                           <EuiPageTemplate.Section>
-                            <HomePage />
-                          </EuiPageTemplate.Section>
+                          <Outlet />
+                        </EuiPageTemplate.Section>
                         </EuiPageTemplate>
+                      )}
+                    >
+                      <Route path="" element={<LoginPage />} />
+                      <Route path="anonymous" element={<AnonymousLoginPage />} />
+                      <Route path="*" />
+                    </Route>
 
-                      </ProtectedRoute>
+                    <Route
+                      path="bucket"
+                      element={(
+                        <ProtectedRoute>
+                          <BucketContextProvider>
+                          <Outlet />
+                        </BucketContextProvider>
+                        </ProtectedRoute>
                       )}
-                    />
+                    >
 
-                    <Route path=":bucket" element={<BucketLayout />}>
                       <Route
                         path=""
-                        element={<DetailsPage />}
+                        element={(
+                          <ProtectedRoute>
+                          <EuiPageTemplate>
+                            <EuiPageTemplate.Section>
+                              <HomePage />
+                            </EuiPageTemplate.Section>
+                          </EuiPageTemplate>
+
+                        </ProtectedRoute>
+                        )}
                       />
-                      <Route path="upload" element={<UploadPage />} />
-                      <Route path="upload/*" element={<UploadPage />} />
-                      <Route id="bucket-browser" path="browse" element={<BrowserPage />} />
-                      <Route id="bucket-browser" path="browse/*" element={<BrowserPage />} />
+
+                      <Route path=":bucket" element={<BucketLayout />}>
+                        <Route
+                          path=""
+                          element={<DetailsPage />}
+                        />
+                        <Route path="upload" element={<UploadPage />} />
+                        <Route path="upload/*" element={<UploadPage />} />
+                        <Route id="bucket-browser" path="browse" element={<BrowserPage />} />
+                        <Route id="bucket-browser" path="browse/*" element={<BrowserPage />} />
+                      </Route>
                     </Route>
-                  </Route>
 
-                  <Route path="*" element={<NotFoundErrorPage />} />
-                </Routes>
+                    <Route path="*" element={<NotFoundErrorPage />} />
+                  </Routes>
 
-              </BrowserRouter>
-            </AuthContextProvider>
-          </SiteMetaContextProvider>
-          <NotificationToasts />
-      </EuiProvider>
+                </BrowserRouter>
+              </AuthContextProvider>
+              <NotificationToasts />
+            </EuiProvider>
+          )}
+      </SiteContext.Consumer>
+      </SiteMetaContextProvider>
     </ConfigContextProvider>
   </React.StrictMode>,
   document.getElementById('root')
diff --git a/front/src/providers/SiteMetaContext.tsx b/front/src/providers/SiteMetaContext.tsx
index 575807a..e46f5e5 100644
--- a/front/src/providers/SiteMetaContext.tsx
+++ b/front/src/providers/SiteMetaContext.tsx
@@ -1,4 +1,12 @@
 import React, { FC } from 'react'
+import store from 'store'
+
+const LightTheme = React.lazy(async () => await import('../themes/Light'))
+const DarkTheme = React.lazy(async () => await import('../themes/Dark'))
+const themes = ['light', 'dark']
+
+const themeFromStore = store.get('theme')
+const themeDefault = themes.includes(themeFromStore) ? themeFromStore : themes[0]
 
 interface BreadcrumbItem {
   text: string
@@ -8,10 +16,12 @@ interface BreadcrumbItem {
 interface ISiteMetaState {
   title: string
   breadcrumbs: BreadcrumbItem[]
+  theme: string
 }
 
 interface ISiteMetaContext extends ISiteMetaState {
   setTitle: (title: string) => void
+  setTheme: (theme: string) => void
   setBreadcrumbs: (breadcrumbs: BreadcrumbItem[]) => void
 }
 
@@ -21,7 +31,9 @@ interface ISiteMetaContext extends ISiteMetaState {
 export const SiteContext = React.createContext<ISiteMetaContext>({
   title: '',
   breadcrumbs: [],
+  theme: themeDefault,
   setTitle: (title: string) => {},
+  setTheme: (theme: string) => {},
   setBreadcrumbs: (breadcrumbs: BreadcrumbItem[]) => {}
 })
 
@@ -54,7 +66,8 @@ export const useSetSiteMetaTitle = (): (title: string) => void => {
 export const SiteMetaContextProvider: FC = ({ children }) => {
   const [state, setState] = React.useState<ISiteMetaState>({
     title: 'GUI',
-    breadcrumbs: []
+    breadcrumbs: [],
+    theme: themeDefault
   })
 
   const actions = {
@@ -73,11 +86,26 @@ export const SiteMetaContextProvider: FC = ({ children }) => {
           title
         })
       }
+    },
+
+    setTheme: (theme: string) => {
+      if (theme !== state.theme) {
+        store.set('theme', theme)
+
+        setState({
+          ...state,
+          theme
+        })
+      }
     }
   }
 
   return (
     <SiteContext.Provider value={{ ...state, ...actions }}>
+      <React.Suspense fallback={<></>}>
+        {(state.theme === 'light') && <LightTheme />}
+        {(state.theme === 'dark') && <DarkTheme />}
+      </React.Suspense>
       {children}
     </SiteContext.Provider>
   )
diff --git a/front/src/themes/Dark.tsx b/front/src/themes/Dark.tsx
new file mode 100644
index 0000000..a032b95
--- /dev/null
+++ b/front/src/themes/Dark.tsx
@@ -0,0 +1,7 @@
+import React, { FC } from 'react'
+
+import '@elastic/eui/dist/eui_theme_dark.css'
+
+const Theme: FC = () => (<React.Fragment></React.Fragment>)
+
+export default Theme
diff --git a/front/src/themes/Light.tsx b/front/src/themes/Light.tsx
new file mode 100644
index 0000000..dd602d6
--- /dev/null
+++ b/front/src/themes/Light.tsx
@@ -0,0 +1,7 @@
+import React, { FC } from 'react'
+
+import '@elastic/eui/dist/eui_theme_light.css'
+
+const Theme: FC = () => (<React.Fragment></React.Fragment>)
+
+export default Theme