no TS / Image upload form

package.json

@@ -10,21 +10,15 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^26.0.9",
-    "@types/node": "^14.0.27",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
     "axios": "^0.19.2",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-ga": "^3.1.2",
     "react-redux": "^7.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "typescript": "^3.9.7",
     "validator": "^13.1.1"
   },
   "scripts": {

src/components/Dialogs/NewRestaurant.js

@@ -16,6 +16,7 @@ import StepLabel from "@material-ui/core/StepLabel";
 import Paper from "@material-ui/core/Paper";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import InputAdornment from "@material-ui/core/InputAdornment";
+import ImageUpload from "../Input/ImageUpload";
 import validator from "validator";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
@@ -313,6 +314,11 @@ export default function NewRestaurant() {
               </div>
             </Paper>
           )}
+          {activeStep === 1 && (
+            <Paper>
+              <ImageUpload />
+            </Paper>
+          )}
           {activeStep !== 0 && (
             <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
           )}

src/components/Input/ImageUpload.js

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+export default function ImageUpload() {
+  const [file, setFile] = useState(null);
+  const [imagePreviewURL, setPreviewURL] = useState("");
+
+  const handleInputChange = (event) => {
+    setFile(event.target.files[0]);
+    let reader = new FileReader();
+
+    reader.onloadend = () => {
+      setPreviewURL(reader.result);
+    };
+
+    reader.readAsDataURL(event.target.files[0]);
+  };
+
+  let imagePreview = <div className="image-preview">Proszę wybrać obraz.</div>;
+  if (imagePreviewURL) {
+    imagePreview = (
+      <div className="image-preview">
+        <img
+          className="preview"
+          src={imagePreviewURL}
+          width="200"
+          alt="Obraz"
+        ></img>
+      </div>
+    );
+  }
+
+  return (
+    <div className="image-upload-container">
+      {imagePreview}
+      <input
+        name="menuiImage"
+        id="file"
+        type="file"
+        className="input-image"
+        onChange={handleInputChange}
+      ></input>
+      <label for="file">Wybierz plik...</label>
+    </div>
+  );
+}

src/index.js

@@ -15,8 +15,7 @@ const store = createStore(
   rootReducer,
   compose(
     applyMiddleware(thunk),
-    (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-      (window as any).__REDUX_DEVTOOLS_EXTENSION__()
   )
 );
 

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/styles/NewRestaurant.scss

@@ -8,3 +8,50 @@
   grid-column-start: 1;
   grid-column-end: 3;
 }
+
+.image-upload-container {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview {
+  width: 200px;
+  height: 200px;
+  border-radius: 15px;
+  box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151));
+  border: solid 1px rgb(126, 126, 126);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+}
+
+.preview {
+  border-radius: 15px;
+}
+
+.input-image {
+  width: 0.1ox;
+  height: 0.1px;
+  opacity: 0;
+  cursor: pointer;
+  overflow: hidden;
+  position: absolute;
+}
+
+.input-image + label {
+  margin-left: 24px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 14px;
+  border-radius: 8px;
+  color: #262626;
+  background-color: #d68000;
+  cursor: pointer;
+}
+
+.input-image + label:hover {
+  background-color: #fd9800;
+}

tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": ["./src/**/*"]
-}