Added context to store variables for local storage support

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#1b5f62",
+        "activityBar.background": "#1b5f62",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#320e30",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#1b5f62",
+        "statusBar.background": "#10383a",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#1b5f62",
+        "statusBarItem.remoteBackground": "#10383a",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#10383a",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#10383a99",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#10383a"
+}

src/App.css

@@ -92,6 +92,7 @@ body{
   border-radius: 100px;
   color: black;
   z-index: 5;
+  cursor: pointer;
 }
 
 .popupDrawer{
@@ -102,7 +103,7 @@ body{
   width: min(600px, 100vw);
   background-color: white;
 
-  padding: 5em 2em;
+  padding: 3em 2em;
   box-sizing: border-box;
   transition: bottom 1s;
   display: flex;
@@ -132,8 +133,12 @@ body{
   background-color: #282c34;
   color: white;
   font-weight: bold;
-  font-size: 3em;
+  font-size: 1em;
   min-height: min(50vw, 400px);
+  border-radius: 20px
+}
+#reader video{
+  border-radius: 20px
 }
 
 

src/App.js

@@ -2,21 +2,25 @@
 import './App.css';
 import QrScanner from './components/QrScanner';
 import DayView from './components/DayView';
-import React, {useState} from 'react';
+import React, {useContext} from 'react';
+import { DataContext } from './dataContext';
+
 
 function App() {
-  const [qrPopupOpen, setQrPopupOpen] = useState(false);
+  const {qrPopupOpen, setQrPopupOpen} = useContext(DataContext);
 
 
 
   return (
     <div className="App">
-
-
-      <QrScanner active={qrPopupOpen} setActive={setQrPopupOpen}/>
-      <DayView />
-      <div id="qr-fab" onClick={()=>{setQrPopupOpen(!qrPopupOpen)}}>Scan QR codes</div>
-
+
+          {/* Content */}
+          <QrScanner />
+          <DayView />
+
+          {/* Buttons */}
+          <div id="qr-fab" onClick={()=>{setQrPopupOpen(!qrPopupOpen)}}>Scan QR codes</div>
+
     </div>
   );
 }

src/components/QrScanner.js

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import {Html5Qrcode } from "html5-qrcode"
+import { DataContext } from "../dataContext";
 
-export default function QrScanner({active, setActive}){
+export default function QrScanner(){
     const [html5QrCode, setHtml5QrCode] = useState(undefined);
+    const {qrPopupOpen, setQrPopupOpen} = useContext(DataContext);
 
     function scanSuccess(decodedText, decodedResult){
         console.log(decodedText, decodedResult);
-        setActive(false);
+        setQrPopupOpen(false);
     }
 
     function qrStart(){
@@ -26,7 +28,7 @@ export default function QrScanner({active, setActive}){
 
     useEffect(()=>{
         try {
-            if(active){
+            if(qrPopupOpen){
                 qrStart();
             } else {
                 if(!html5QrCode){return};
@@ -36,17 +38,17 @@ export default function QrScanner({active, setActive}){
             console.log(error);
         }
 
-    }, [active])
+    }, [qrPopupOpen])
 
 
 
 
 
     return (
         <>
-            <div className="popupBackdrop" onClick={()=>{setActive(false)}} style={{opacity: active ? '1' : '0'  , pointerEvents: active ? 'all' : 'none' }}></div>
-            <div className="popupDrawer" style={{bottom: active? '0' : '-75vmax'}}>
-                <div id="reader" style={{width: '80%'}}>Camera loading or permissions not given.</div>
+            <div className="popupBackdrop" onClick={()=>{setQrPopupOpen(false)}} style={{opacity: qrPopupOpen ? '1' : '0'  , pointerEvents: qrPopupOpen ? 'all' : 'none' }}></div>
+            <div className="popupDrawer" style={{bottom: qrPopupOpen? '0' : '-75vmax'}}>
+                <div id="reader" style={{width: 'calc(100% - 1em)'}}>Camera loading or permissions not given.</div>
             </div>
         </>
 

src/dataContext.js

@@ -0,0 +1,16 @@
+import React, {useState, createContext} from 'react';
+
+export const DataContext = createContext({});
+
+export const DataContextProvider = (props) => {
+    const [qrPopupOpen, setQrPopupOpen] = useState(false);
+
+
+    const dataContextStore = {
+        qrPopupOpen,
+        setQrPopupOpen
+    }
+
+    return <DataContext.Provider value={dataContextStore}>{props.children}</DataContext.Provider>
+
+}

src/index.js

@@ -2,8 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { DataContextProvider } from './dataContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-    <App />
+    <DataContextProvider>
+        <App />
+    </DataContextProvider>
 );