Puush

src/App.js

@@ -1,7 +1,9 @@
 import Drawing from "./Drawing";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import StartForm from "./StartForm";
 
+let fileInput
+
 export default function App() {
 
     const [showForm, setShowForm] = useState("flex")
@@ -14,6 +16,11 @@ export default function App() {
     const [loadInId, setLoadInId] = useState(-1)
     const [shouldUpdate, setShouldUpdate] = useState(false)
 
+    useEffect(() => {
+
+        fileInput = document.getElementById("fileInput")
+    }, [])
+
     function onCreateCanvas(inputWidth, inputHeight) {
         setWidthDrawing(parseInt(inputWidth.value))
         setHeightDrawing(parseInt(inputHeight.value))
@@ -35,10 +42,36 @@ export default function App() {
         image.src = save
     }
 
-   return (
+    function onOpenButtonClick () {
-       <div>
+        fileInput.click()
-            <StartForm onLoadIn={onLoadIn} show={showForm} onCreateCanvas={onCreateCanvas}/>
+    }
-            <Drawing shouldUpdate={shouldUpdate} loadInId={loadInId} loadIn={loadIn} show={showDrawing} width={widthDrawing} height={heightDrawing}/>
+
-       </div>
+    return (
+        <div>
+            <StartForm onOpenButtonClick={onOpenButtonClick} onLoadIn={onLoadIn} show={showForm} onCreateCanvas={onCreateCanvas}/>
+            <Drawing shouldUpdate={shouldUpdate} loadInId={loadInId} loadIn={loadIn} show={showDrawing}
+                     width={widthDrawing} height={heightDrawing}/>
+            <input onChange={() => {
+                let file = fileInput.files[0]
+
+                let reader = new FileReader()
+                reader.onload = e => {
+                    let image = new Image()
+                    image.onload = () => {
+                        setWidthDrawing(image.width)
+                        setHeightDrawing(image.height)
+                        setLoadIn(e.target.result)
+                        setLoadInId(-1)
+                        setShowForm("none")
+                        setShowDrawing("block")
+                        setShouldUpdate(!shouldUpdate)
+                    }
+                    image.src = e.target.result
+                }
+                reader.readAsText(file)
+
+            }} id={"fileInput"} type={"file"} accept={".redraw"}
+                   style={{pointerEvents: "auto", display: "none"}}/>
+        </div>
     );
 }

src/Drawing.js

@@ -622,39 +622,6 @@ export default function Drawing(p) {
                             gap: 5
                         }}>
 
-                            {/*open button*/}
-                            <button style={{
-                                padding: 10,
-                                backgroundColor: "white",
-                                borderRadius: 15,
-                                marginLeft: 10,
-                                boxShadow: "0 0 5px gray",
-                                borderWidth: 0,
-                                width: 100,
-                                height: 60,
-                                pointerEvents: "auto"
-                            }}
-                                    onClick={onOpenButtonClick}>
-                                Open
-                            </button>
-                            <input onChange={() => {
-                                let file = fileInput.files[0]
-
-                                let reader = new FileReader()
-                                reader.onload = e => {
-                                    let image = new Image()
-                                    image.onload = () => {
-                                        context.clearRect(0, 0, p.width, p.height)
-                                        context.drawImage(image, 0, 0)
-                                    }
-                                    image.src = e.target.result
-                                }
-                                reader.readAsText(file)
-
-                            }} id={"fileInput"} type={"file"} accept={".redraw"}
-                                   style={{pointerEvents: "auto", display: "none"}}/>
-
-
                             {/*save button*/}
                             <button style={{
                                 padding: 10,
@@ -729,6 +696,24 @@ export default function Drawing(p) {
                                     }}>
                                 Save / Home
                             </button>
+
+                            {/*home button*/}
+                            <button style={{
+                                padding: 10,
+                                backgroundColor: "white",
+                                borderRadius: 15,
+                                marginLeft: 10,
+                                boxShadow: "0 0 5px gray",
+                                borderWidth: 0,
+                                width: 100,
+                                height: 60,
+                                pointerEvents: "auto"
+                            }}
+                                    onClick={() => {
+                                        window.location.reload()
+                                    }}>
+                                Discard / Home
+                            </button>
                         </div>
                     </div>
                 </div>

src/StartForm.js

@@ -80,6 +80,21 @@ export default function StartForm(p) {
                     </button>
                 </div>
 
+                <button style={{
+                    padding: 10,
+                    backgroundColor: "white",
+                    borderRadius: 15,
+                    marginLeft: 10,
+                    boxShadow: "0 0 5px gray",
+                    borderWidth: 0,
+                    width: 100,
+                    height: 60,
+                    pointerEvents: "auto"
+                }}
+                        onClick={p.onOpenButtonClick}>
+                    Open
+                </button>
+
                 <h3 style={{userSelect: "none"}}>Recent:</h3>
                 <div style={{
                     display: "flex",