From 6c618545931771986db64018e077ec0f767bee9d Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 1 Aug 2022 22:35:36 -0700
Subject: [PATCH] adding context to switch display modes based on viewport

---
 net/web/src/App.js                            | 17 ++++++----
 net/web/src/context/ViewportContext.js        | 14 ++++++++
 .../src/context/useViewportContext.hook.js    | 34 +++++++++++++++++++
 3 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 net/web/src/context/ViewportContext.js
 create mode 100644 net/web/src/context/useViewportContext.hook.js

diff --git a/net/web/src/App.js b/net/web/src/App.js
index 8bb57d3c..dadef075 100644
--- a/net/web/src/App.js
+++ b/net/web/src/App.js
@@ -8,6 +8,7 @@ import { CardContextProvider } from 'context/CardContext';
 import { ChannelContextProvider } from 'context/ChannelContext';
 import { StoreContextProvider } from 'context/StoreContext';
 import { UploadContextProvider } from 'context/UploadContext';
+import { ViewportContextProvider } from 'context/ViewportContext';
 import 'antd/dist/antd.min.css'; 
 
 function App() {
@@ -21,13 +22,15 @@ function App() {
               <ProfileContextProvider>
                 <AccountContextProvider>
                   <StoreContextProvider>
-                    <AppContextProvider>
-                      <div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
-                        <img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
-                      </div>
-                      <div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
-                      </div>
-                    </AppContextProvider>
+                    <ViewportContextProvider>
+                      <AppContextProvider>
+                        <div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
+                          <img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
+                        </div>
+                        <div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
+                        </div>
+                      </AppContextProvider>
+                    </ViewportContextProvider>
                   </StoreContextProvider>
                 </AccountContextProvider>
               </ProfileContextProvider>
diff --git a/net/web/src/context/ViewportContext.js b/net/web/src/context/ViewportContext.js
new file mode 100644
index 00000000..8eed0d2e
--- /dev/null
+++ b/net/web/src/context/ViewportContext.js
@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useViewportContext } from './useViewportContext.hook';
+
+export const ViewportContext = createContext({});
+
+export function ViewportContextProvider({ children }) {
+  const { state, actions } = useViewportContext();
+  return (
+    <ViewportContext.Provider value={{ state, actions }}>
+      {children}
+    </ViewportContext.Provider>
+  );
+}
+
diff --git a/net/web/src/context/useViewportContext.hook.js b/net/web/src/context/useViewportContext.hook.js
new file mode 100644
index 00000000..a9b2ca3b
--- /dev/null
+++ b/net/web/src/context/useViewportContext.hook.js
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+export function useViewportContext() {
+
+  const [state, setState] = useState({ });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  };
+
+  const handleResize = () => {
+    console.log(window.innerWidth);
+    console.log(window.innerHeight);
+    if (window.innerWidth < 600) {
+      updateState({ display: 'small' });
+    }
+    else if (window.innerWidth < 1600) {
+      updateState({ display: 'medium' });
+    }
+    else {
+      updateState({ display: 'large' });
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, []);
+
+  return state
+}
+
+