time-to-program
diff --git a/‎package-lock.json
Lines changed: 78 additions & 0 deletions b/‎package-lock.json
Lines changed: 78 additions & 0 deletions
diff --git a/‎package.json
Lines changed: 2 additions & 0 deletions b/‎package.json
Lines changed: 2 additions & 0 deletions
diff --git a/‎public/index.html
Lines changed: 7 additions & 0 deletions b/‎public/index.html
Lines changed: 7 additions & 0 deletions
diff --git a/‎src/App.css
Lines changed: 0 additions & 38 deletions b/‎src/App.css
Lines changed: 0 additions & 38 deletions
diff --git a/‎src/App.js
Lines changed: 84 additions & 17 deletions b/‎src/App.js
Lines changed: 84 additions & 17 deletions
diff --git a/‎src/App.test.js
Lines changed: 0 additions & 8 deletions b/‎src/App.test.js
Lines changed: 0 additions & 8 deletions
diff --git a/‎src/components/FileInput.js
Lines changed: 37 additions & 0 deletions b/‎src/components/FileInput.js
Lines changed: 37 additions & 0 deletions
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-easy-crop": "^4.5.1",
+    "react-image-crop": "^10.0.8",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
 
@@ -24,6 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
     <title>React App</title>
   </head>
   <body>
 
@@ -1,23 +1,90 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import FileInput from "./components/FileInput";
+import ImageCropper from "./components/ImageCropper";
 
 function App() {
+  const [image, setImage] = useState("");
+  const [currentPage, setCurrentPage] = useState("choose-img");
+  const [imgAfterCrop, setImgAfterCrop] = useState("");
+
+  // Invoked when new image file is selected
+  const onImageSelected = (selectedImg) => {
+    setImage(selectedImg);
+    setCurrentPage("crop-img");
+  };
+
+  // Generating Cropped Image When Done Button Clicked
+  const onCropDone = (imgCroppedArea) => {
+    const canvasEle = document.createElement("canvas");
+    canvasEle.width = imgCroppedArea.width;
+    canvasEle.height = imgCroppedArea.height;
+
+    const context = canvasEle.getContext("2d");
+
+    let imageObj1 = new Image();
+    imageObj1.src = image;
+    imageObj1.onload = function () {
+      context.drawImage(
+        imageObj1,
+        imgCroppedArea.x,
+        imgCroppedArea.y,
+        imgCroppedArea.width,
+        imgCroppedArea.height,
+        0,
+        0,
+        imgCroppedArea.width,
+        imgCroppedArea.height
+      );
+
+      const dataURL = canvasEle.toDataURL("image/jpeg");
+
+      setImgAfterCrop(dataURL);
+      setCurrentPage("img-cropped");
+    };
+  };
+
+  // Handle Cancel Button Click
+  const onCropCancel = () => {
+    setCurrentPage("choose-img");
+    setImage("");
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="container">
+      {currentPage === "choose-img" ? (
+        <FileInput setImage={setImage} onImageSelected={onImageSelected} />
+      ) : currentPage === "crop-img" ? (
+        <ImageCropper
+          image={image}
+          onCropDone={onCropDone}
+          onCropCancel={onCropCancel}
+        />
+      ) : (
+        <div>
+          <div>
+            <img src={imgAfterCrop} className="cropped-img" />
+          </div>
+
+          <button
+            onClick={() => {
+              setCurrentPage("crop-img");
+            }}
+            className="btn"
+          >
+            Crop
+          </button>
+
+          <button
+            onClick={() => {
+              setCurrentPage("choose-img");
+              setImage("");
+            }}
+            className="btn"
+          >
+            New Image
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+
+function FileInput({ onImageSelected }) {
+  const inputRef = useRef();
+
+  const handleOnChange = (event) => {
+    if (event.target.files && event.target.files.length > 0) {
+      const reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0]);
+      reader.onload = function (e) {
+        onImageSelected(reader.result);
+      };
+    }
+  };
+
+  const onChooseImg = () => {
+    inputRef.current.click();
+  };
+
+  return (
+    <div>
+      <input
+        type="file"
+        accept="image/*"
+        ref={inputRef}
+        onChange={handleOnChange}
+        style={{ display: "none" }}
+      />
+
+      <button className="btn" onClick={onChooseImg}>
+        Choose Image
+      </button>
+    </div>
+  );
+}
+
+export default FileInput;