adding context to switch display modes based on viewport

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,6 +22,7 @@ function App() {
               <ProfileContextProvider>
                 <AccountContextProvider>
                   <StoreContextProvider>
+                    <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 }}/>
@@ -28,6 +30,7 @@ function App() {
                         <div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
                         </div>
                       </AppContextProvider>
+                    </ViewportContextProvider>
                   </StoreContextProvider>
                 </AccountContextProvider>
               </ProfileContextProvider>

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>
+  );
+}
+

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
+}
+
+