using react context

Author: Patricio Vargas

src/App.js

@@ -3,33 +3,32 @@ import './App.css';
 import Scan from './containers/Scan';
 import Write from './containers/Write';
 import { useState } from 'react';
+import { ActionsContext } from './contexts/context';
 
 function App() {
-  const [isScan, setScan] = useState(false);
-  const [isWrite, setWrite] = useState(false);
 
-  const onHandleScan = () =>{
-    setScan(true);
-    setWrite(false)
-  }
+  const [actions, setActions] = useState(null);
+  const {scan, write} = actions || {};
+
+  const actionsValue = {actions,setActions};
 
-  const onHandleWrite = () =>{
-    setScan(false);
-    setWrite(true)
+  const onHandleAction = (actions) =>{
+    setActions({...actions});
   }
 
   return (
-    <div className="App">
-      <img src={nfc} className="App-logo" alt="logo" />
-      <h1>NFC Tool</h1>
-      <div className="App-container">
-        <button onClick={onHandleScan} className="App-button">Scan</button>
-        <button onClick={onHandleWrite} className="App-button">Write</button>
+      <div className="App">
+        <img src={nfc} className="App-logo" alt="logo" />
+        <h1>NFC Tool</h1>
+        <div className="App-container">
+          <button onClick={()=>onHandleAction({scan: 'scanning', write: null})} className="App-button">Scan</button>
+          <button onClick={()=>onHandleAction({scan: null, write: 'writing'})} className="App-button">Write</button>
+        </div>
+        <ActionsContext.Provider value={actionsValue}>
+          {scan && <Scan/>}
+          {write && <Write/>}
+        </ActionsContext.Provider>
       </div>
-      {isScan && <Scan/>}
-      {isWrite && <Write/>}
- 
-    </div>
   );
 }
 

src/components/Scanner/Scanner.css

@@ -1,7 +1,7 @@
 .scanner {
   position: absolute;
   z-index: 1;
-  top: calc(50vh - 150px);
+  top: calc(50vh - 175px);
   border-radius: 15px;
   background-color: #fff;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

src/components/Scanner/Scanner.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import './Scanner.css'
 import Spinner from '../../spinner.gif';
+import { ActionsContext } from '../../contexts/context';
 
 const Scanner = ({status}) => {
+  const { actions, setActions} = useContext(ActionsContext);
     return (
       <div className="scanner">
-        <p className="scanner-exit">X</p>
+        <p className="scanner-exit" onClick={()=>setActions({...actions, scan: null})}>X</p>
         <div className="scanner-container">
           <img src={Spinner} alt="spinning log" className="scanner-image"/>
           <p className="scanner-text">

src/components/Writter/Writer.css src/components/Writer/Writer.jssrc/components/Writter/Writer.css renamed to src/components/Writer/Writer.js

@@ -1,10 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import Scanner from '../components/Scanner/Scanner';
+import { ActionsContext } from '../contexts/context';
 
 const Scan = () => {
-    const [status, setStatus] = useState('scanning');
+    // const [status, setStatus] = useState('scanning');
     const [message, setMessage] = useState('');
     const [serialNumber, setSerialNumber] = useState('');
+    const { actions, setActions} = useContext(ActionsContext);
 
     const scan = useCallback(async() => {
         if ('NDEFReader' in window) { 
@@ -20,14 +22,17 @@ const Scan = () => {
                 ndef.onreading = event => {
                     console.log("NDEF message read.");
                     onReading(event);
-                    setStatus('scanned');
+                    setActions({
+                        scan: 'scanned',
+                        write: null
+                    });
                 };
 
             } catch(error){
                 console.log(`Error! Scan failed to start: ${error}.`);
             };
         }
-    },[]);
+    },[setActions]);
 
     const onReading = ({message, serialNumber}) => {
         setSerialNumber(serialNumber);
@@ -50,15 +55,14 @@ const Scan = () => {
         scan();
     }, [scan]);
 
-
     return(
         <>
-            {status === 'scanned' ?  
+            {actions.scan === 'scanned' ?  
             <div>
                 <p>Serial Number: {serialNumber}</p>
                 <p>Message: {message}</p>
             </div>
-            : <Scanner status={status}></Scanner> }
+            : <Scanner status={actions.scan}></Scanner> }
         </>
     );
 };

src/containers/Scan.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 
 const Write = () => {
-
     const onWrite = useCallback(async() => {
         try {
             const ndef = new window.NDEFReader();
@@ -17,7 +16,7 @@ const Write = () => {
     }, [onWrite])
 
     return (
-      "Write"
+      <></>
     );
 };
 

src/containers/Write.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+export const ActionsContext = createContext(
+    {
+        scan: null,
+        write: null,
+        setActions:()=>{}
+    }
+);