modal working

Author: Patricio Vargas

src/App.css

@@ -1,4 +1,5 @@
 .App {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,6 +29,6 @@
 }
 
 .App-logo {
-  height: 10vmin;
+  height: 20vmin;
   pointer-events: none;
 }

src/App.js

@@ -1,4 +1,4 @@
-import logo from './logo.png';
+import nfc from './nfc.svg';
 import './App.css';
 import Scan from './containers/Scan';
 import Write from './containers/Write';
@@ -8,19 +8,19 @@ function App() {
   const [isScan, setScan] = useState(false);
   const [isWrite, setWrite] = useState(false);
 
-  const onHandleScan =()=>{
-    setScan(!isScan);
+  const onHandleScan = () =>{
+    setScan(true);
     setWrite(false)
   }
 
-  const onHandleWrite =()=>{
+  const onHandleWrite = () =>{
     setScan(false);
-    setWrite(!isWrite)
+    setWrite(true)
   }
 
   return (
     <div className="App">
-      <img src={logo} className="App-logo" alt="logo" />
+      <img src={nfc} className="App-logo" alt="logo" />
       <h1>NFC Tool</h1>
       <div className="App-container">
         <button onClick={onHandleScan} className="App-button">Scan</button>

src/components/Scanner/Scanner.css

@@ -0,0 +1,28 @@
+.scanner {
+  position: absolute;
+  z-index: 1;
+  top: calc(50vh - 150px);
+  border-radius: 15px;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+
+.scanner-exit {
+  text-align: right;
+  padding-right: 16px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.scanner-container {
+  height: 300px;
+  width: 250px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.scanner-image {
+  height: 20vmin;
+}

src/components/Scanner/Scanner.js

@@ -1,13 +1,16 @@
 import React from 'react';
+import './Scanner.css'
+import Spinner from '../../spinner.gif';
 
-const Scanner = ({scanned}) => {
+const Scanner = ({status}) => {
     return (
       <div className="scanner">
+        <p className="scanner-exit">X</p>
         <div className="scanner-container">
-          <div className="scanner-image" />
-          <div className="scanner-text">
-            {scanned}
-          </div>
+          <img src={Spinner} alt="spinning log" className="scanner-image"/>
+          <p className="scanner-text">
+            Scanning...
+          </p>
         </div>
       </div>
     );

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

@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Scanner from '../components/Scanner/Scanner';
 
 const Scan = () => {
-    const [isScanned, setiSScanned] = useState('Scanning...');
+    const [status, setStatus] = useState('scanning');
     const [message, setMessage] = useState('');
     const [serialNumber, setSerialNumber] = useState('');
 
-    const scan = () => {
+    const scan = useCallback(async() => {
         if ('NDEFReader' in window) { 
-            const ndef = new window.NDEFReader();
-            
-            ndef.scan().then(() => {
+            try {
+                const ndef = new window.NDEFReader();
+                await ndef.scan();
+                
                 console.log("Scan started successfully.");
                 ndef.onreadingerror = () => {
                     console.log("Cannot read data from the NFC tag. Try another one?");
@@ -19,20 +20,18 @@ const Scan = () => {
                 ndef.onreading = event => {
                     console.log("NDEF message read.");
                     onReading(event);
-                    setiSScanned('Scanned');
+                    setStatus('scanned');
                 };
-            }).catch(error => {
+
+            } catch(error){
                 console.log(`Error! Scan failed to start: ${error}.`);
-            });
+            };
         }
-    }
+    },[]);
 
     const onReading = ({message, serialNumber}) => {
         setSerialNumber(serialNumber);
         for (const record of message.records) {
-            console.log("Record type:  " + record.recordType);
-            console.log("MIME type:    " + record.mediaType);
-            console.log("Record id:    " + record.id);
             switch (record.recordType) {
                 case "text":
                     const textDecoder = new TextDecoder(record.encoding);
@@ -47,12 +46,19 @@ const Scan = () => {
         }
     };
 
-    scan();
-    return (
+    useEffect(() => {
+        scan();
+    }, [scan]);
+
+
+    return(
         <>
-            <p>Serial Number: {serialNumber}</p>
-            <p>Message: {message}</p>
-            <Scanner scanned={isScanned}></Scanner>
+            {status === 'scanned' ?  
+            <div>
+                <p>Serial Number: {serialNumber}</p>
+                <p>Message: {message}</p>
+            </div>
+            : <Scanner status={status}></Scanner> }
         </>
     );
 };

src/containers/Scan.js

@@ -1,29 +1,21 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 const Write = () => {
 
-    const onWrite = async() => {
-        const abortController = new AbortController();
-        abortController.signal.onabort = event => {
-            alert('STOP');
-        };
+    const onWrite = useCallback(async() => {
         try {
             const ndef = new window.NDEFReader();
-            await ndef.write(
-                {
-                    records: [{ recordType: "text", data: "17" }]
-                },
-                {signal: abortController.signal}
-            );
-            alert(`${16} saved!`);
-            abortController.abort();
+            await ndef.write({records: [{ recordType: "text", data: "18" }]});
+            alert(`${18} saved!`);
         } catch (error) {
             console.log(error);
-            abortController.abort();
         }
-    };
+    }, []);
+
+    useEffect(() => {
+        onWrite();
+    }, [onWrite])
 
-    onWrite();
     return (
       "Write"
     );