Added indentation and upload functionality

Author: shreyakurian02

components/constants.js

@@ -27,3 +27,11 @@ export const DEMO_JSON_STRING = {
     },
   },
 };
+
+export const INDENTATION_SPACE_OPTIONS = [
+  { label: 2, value: 2 },
+  { label: 3, value: 3 },
+  { label: 4, value: 4 },
+];
+
+export const DEFAULT_INDENTATION_SPACE = { label: 2, value: 2 };

package.json

@@ -20,6 +20,7 @@
     "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-select": "^4.3.1",
     "react-toastify": "^9.1.1",
     "sass": "^1.57.1"
   },

pages/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { createTheme } from "@uiw/codemirror-themes";
@@ -7,9 +7,14 @@ import Head from "next/head";
 import Toastr from "../components/Toastr";
 import { ToastContainer } from "react-toastify";
 import Button from "../components/Button";
+import Select from "react-select";
 
 import { CODE_EDITOR_THEME } from "../constants/theme";
-import { DEMO_JSON_STRING } from "../components/constants";
+import {
+  DEFAULT_INDENTATION_SPACE,
+  DEMO_JSON_STRING,
+  INDENTATION_SPACE_OPTIONS,
+} from "../components/constants";
 import { Copy } from "../icons/Copy";
 import Header from "../components/Header";
 
@@ -19,11 +24,16 @@ export default function Home() {
   );
   const [outputString, setOutputString] = useState("");
 
+  const hiddenFileInput = useRef(null);
+  const selectRef = useRef(null);
+
   let editorExtensions = [javascript({ jsx: true }), EditorView.lineWrapping];
 
-  const handleFormat = () => {
+  const handleFormat = (indentationSpace = 2) => {
     try {
-      setOutputString(JSON.stringify(JSON.parse(inputString), null, 2));
+      setOutputString(
+        JSON.stringify(JSON.parse(inputString), null, indentationSpace)
+      );
     } catch (error) {
       Toastr.error("Enter Valid JSON");
     }
@@ -59,6 +69,13 @@ export default function Home() {
     setOutputString("");
   };
 
+  const handleUpload = (e) => {
+    const fileReader = new FileReader();
+    fileReader.readAsText(e.target.files[0], "UTF-8");
+    fileReader.onload = (e) => setInputString(e.target.result);
+    setOutputString("");
+  };
+
   useEffect(() => {
     inputString === "" && setOutputString("");
   }, [inputString]);
@@ -73,7 +90,7 @@ export default function Home() {
 
       <main className="h-screen flex flex-col justify-between bg-zinc-900 p-5">
         <ToastContainer theme="dark" />
-        <Header/>
+        <Header />
         <div className="space-y-3 grow flex flex-col">
           <div className="flex grow space-x-3">
             <div className="w-full bg-[#282c34]">
@@ -113,13 +130,35 @@ export default function Home() {
             </div>
           </div>
           <div className="flex justify-end bg-zinc-800 space-x-3 px-3 py-3 rounded">
-            <Button label="Format" onClick={handleFormat} />
+            <Button
+              label="Format"
+              onClick={() => handleFormat(selectRef.current.state.value.value)}
+            />
             <Button label="Clear" onClick={handleClear} />
             <Button
               label="Download"
               onClick={handleDownload}
               disabled={outputString === ""}
             />
+            <Button
+              onClick={() => hiddenFileInput.current.click()}
+              label="Upload"
+            />
+            <input
+              type="file"
+              style={{ display: "none" }}
+              ref={hiddenFileInput}
+              onChange={handleUpload}
+            />
+            <Select
+              ref={selectRef}
+              classNamePrefix="react-select"
+              onChange={(e) => handleFormat(e.value)}
+              className={"react-select__container"}
+              menuPlacement="top"
+              options={INDENTATION_SPACE_OPTIONS}
+              defaultValue={DEFAULT_INDENTATION_SPACE}
+            />
           </div>
         </div>
         {/* <Footer /> */}

styles/application.scss

@@ -4,8 +4,9 @@
 
 @import "./abstracts/variable";
 @import "./base/index";
+@import "react-toastify/dist/ReactToastify.min.css";
 
 // components
 @import "./components/button";
 @import "./components/textarea";
-@import "react-toastify/dist/ReactToastify.min.css";
+@import "./components/select";

styles/components/_select.scss

@@ -0,0 +1,43 @@
+.react-select__single-value {
+  color: white;
+}
+
+.react-select__container,
+.react-select__menu-portal {
+  .react-select__control.react-select__control--is-focused {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none;
+  }
+
+  .react-select__control {
+    background-color: $secondary;
+    border: none;
+    color: white;
+  }
+
+  .react-select__value-container {
+    padding: 0 8px;
+    min-height: 40px;
+
+    &.react-select__value-container--has-value {
+      padding: 6px 12px;
+    }
+  }
+
+  .react-select__indicator-separator {
+    display: none;
+  }
+
+  .react-select__menu {
+    background-color: #b14b74b9;
+
+    .react-select__option--is-focused {
+      background-color: #461629b9;
+    }
+
+    .react-select__option--is-selected {
+      background-color: #2e111db9;
+    }
+  }
+}