From 4aad468e4ecfc80f119df8a92732c468aad7920a Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:04:21 +1300
Subject: [PATCH] Implement Viewport state

---
 semantic/src/site/globals/site.overrides |  2 +-
 semantic/src/site/globals/site.variables |  2 +-
 src/containers/Main/AppWrapper.tsx       | 47 +++++++++++++-----------
 src/contexts/ViewportState.tsx           | 44 ++++++++++++++++++++++
 4 files changed, 71 insertions(+), 24 deletions(-)
 create mode 100644 src/contexts/ViewportState.tsx

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index 4fb7f5148..a4c561cab 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -1847,7 +1847,7 @@ a:hover {
   background-color: @surfacesWhite;
   margin: 5px;
   color: @darkGrey;
-  border: solid 1px @fullyTransperant;
+  border: solid 1px @fullyTransparent;
 
   &.visible {
     border: solid 1px @blue;
diff --git a/semantic/src/site/globals/site.variables b/semantic/src/site/globals/site.variables
index 7b3d3b7ae..49cd6a4a8 100644
--- a/semantic/src/site/globals/site.variables
+++ b/semantic/src/site/globals/site.variables
@@ -55,7 +55,7 @@
 @disabledOpacity: 0.75;
 //
 @boxShadowColor: #d4d4d5;
-@fullyTransperant: rgba(0, 0, 0, 0);
+@fullyTransparent: rgba(0, 0, 0, 0);
 
 // For date filters
 @weekDayHeaderColor: rgba(0, 0, 0, 0.5);
diff --git a/src/containers/Main/AppWrapper.tsx b/src/containers/Main/AppWrapper.tsx
index 3592dc673..6d1ac9112 100644
--- a/src/containers/Main/AppWrapper.tsx
+++ b/src/containers/Main/AppWrapper.tsx
@@ -11,6 +11,7 @@ import AuthenticatedContent from './AuthenticatedWrapper'
 import { Loading } from '../../components'
 import { usePrefs } from '../../contexts/SystemPrefs'
 import { trackerTestMode } from './Tracker'
+import { ViewportStateProvider } from '../../contexts/ViewportState'
 
 const AppWrapper: React.FC = () => {
   const { error, loading } = useLanguageProvider()
@@ -38,28 +39,30 @@ const AppWrapper: React.FC = () => {
 
   return (
     <Router>
-      <UserProvider>
-        <Switch>
-          <Route exact path="/login">
-            <Login />
-          </Route>
-          <Route exact path="/register">
-            <NonRegisteredLogin option="register" />
-          </Route>
-          <Route exact path="/reset-password">
-            <NonRegisteredLogin option="reset-password" />
-          </Route>
-          <Route exact path="/verify">
-            <Verify />
-          </Route>
-          <Route exact path="/logout">
-            <Logout />
-          </Route>
-          <Route>
-            <AuthenticatedContent />
-          </Route>
-        </Switch>
-      </UserProvider>
+      <ViewportStateProvider>
+        <UserProvider>
+          <Switch>
+            <Route exact path="/login">
+              <Login />
+            </Route>
+            <Route exact path="/register">
+              <NonRegisteredLogin option="register" />
+            </Route>
+            <Route exact path="/reset-password">
+              <NonRegisteredLogin option="reset-password" />
+            </Route>
+            <Route exact path="/verify">
+              <Verify />
+            </Route>
+            <Route exact path="/logout">
+              <Logout />
+            </Route>
+            <Route>
+              <AuthenticatedContent />
+            </Route>
+          </Switch>
+        </UserProvider>
+      </ViewportStateProvider>
     </Router>
   )
 }
diff --git a/src/contexts/ViewportState.tsx b/src/contexts/ViewportState.tsx
new file mode 100644
index 000000000..457386a31
--- /dev/null
+++ b/src/contexts/ViewportState.tsx
@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { throttle } from 'lodash'
+
+// From Semantic-UI breakpoints
+const TABLET_BREAKPOINT = 768
+
+interface ViewportState {
+  viewport: { width: number; height: number }
+  isMobile: boolean
+}
+
+const getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window
+  return {
+    width,
+    height,
+  }
+}
+
+const ViewportStateContext = createContext<ViewportState>({
+  viewport: getWindowDimensions(),
+  isMobile: getWindowDimensions().width < TABLET_BREAKPOINT,
+})
+
+export const ViewportStateProvider = ({ children }: { children: React.ReactNode }) => {
+  const [viewport, setViewport] = useState(getWindowDimensions())
+
+  useEffect(() => {
+    const handleResize = throttle(() => setViewport(getWindowDimensions()), 300)
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return (
+    <ViewportStateContext.Provider
+      value={{ viewport, isMobile: viewport.width < TABLET_BREAKPOINT }}
+    >
+      {children}
+    </ViewportStateContext.Provider>
+  )
+}
+
+export const useViewport = () => useContext(ViewportStateContext)