Merge pull request #1571 from openmsupply/1568-mobile-state-context

#1568 Viewport state context
msupply-foundation · Oct 31, 2023 · f38280a · f38280a
2 parents 1a1d346 + 4aad468
commit f38280a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)