Add Import and Export JSON functionality

src/components/export-json/export-json.tsx

@@ -0,0 +1,38 @@
+import { useAppSelector } from "../../redux/store";
+
+export default function ExportJSON() {
+  const tiles = useAppSelector((state) => state.tiles.value).filter(
+    (t) => t.tier
+    );
+
+  const handleShow = () => {
+    const tileJSON = tiles;
+
+    if (tileJSON) {
+      let data = '';
+      tiles.map((tile) => {
+        const myJSON = JSON.stringify(tile);
+        const unquoted = myJSON.replace(/\\"/g, "\uFFFF")
+        .replace(/"([^"]+)":/g, '$1:').replace(/\uFFFF/g, '\\\"');;
+        data += unquoted;
+        data += ","
+      })
+
+      const element = document.createElement("a");
+      const textFile = new Blob([data], {type: "application/json"});
+      element.href = URL.createObjectURL(textFile);
+      element.download = "data.json";
+      document.body.appendChild(element);
+      element.click();
+    }
+  }
+
+    return (
+      <>
+        <button className="btn btn-dark btn-sm" onClick={handleShow}>
+            Export as JSON
+        </button>
+      </>
+    )
+  }
+

src/components/import-json/import-json.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { Modal } from "react-bootstrap";
+
+import { addTile, removeTile } from "../../redux/tilesSlice"; 
+import { useAppDispatch, useAppSelector } from "../../redux/store";
+import Tile from "../tile/tile";
+
+export default function ImportJSON() {
+    const [show, setShow] = useState(false);
+    const [file, setFile] = useState<File | null>(null);
+
+    const tiles = useAppSelector((state) => state.tiles.value);
+    const dispatch = useAppDispatch();
+
+    const handleShow = () => setShow(true);
+    const handleClose = () => setShow(false);
+    const handleDelete = (tile: { title: string; url: string }) => {
+        dispatch(removeTile(tile));
+      };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        setFile(e.target.files[0]);
+      }
+    };
+
+    // store text data from importing file.json
+    let input = '';
+
+    function handleUpload() {
+      if (file) {
+        let reader = new FileReader();
+        reader.readAsText(file)
+        reader.onload = function() {
+          if (reader.result  !== null) {
+             input = reader.result as string;
+            handleImport(input)
+          }
+        }
+      }
+      else {
+        alert("Error: Choose a file.json")
+      }
+    };
+
+    const handleImport = (input: string) => {
+        const lines = input
+          .replace(/[\n""'' ]/g, "")
+          .replace(/tier:/g, "")
+          .replace(/title:/g, "")
+          .replace(/url:/g, "")
+          .split("},")
+          .map((l) => l
+            .replace(/[{}]/g, "")
+            .trim())
+        //   .filter((l) => !!l);
+
+        lines.map((line) => {
+          const tokens = line.split(",");
+          if (tokens.length === 3) {
+            dispatch(removeTile({  title: tokens[1], tier: tokens[2], url: tokens[0] }))
+            dispatch(addTile({  title: tokens[1], tier: tokens[2], url: tokens[0] }));
+
+          }
+        //   if (tokens.length === 2) {
+        //     return { url: tokens[2], title: tokens[1], tier: tokens[1] };
+        //   } else {
+        //     return { url: tokens[0], title: tokens[0], tier: tokens[1] };
+        //   } 
+        });
+      };
+
+      function RemovableTile({ title, url }: { title: string; url: string }) {
+        return (
+          <div className="tile-wrapper card p-2">
+            <button
+              className="btn btn-remove btn-close"
+              onClick={() => handleDelete({ title, url })}
+            ></button>
+            <Tile title={title} key={url} url={url} />
+          </div>
+        );
+      }
+
+    return (
+        <>
+            <button className="btn btn-dark btn-sm" onClick={handleShow}>
+                Import
+            </button>
+            <Modal
+                size="lg"
+                show={show}
+                onHide={handleClose}
+                centered
+                className="edit-items"
+            >
+                <div className="p-3">
+                    <h5 className="mb-4">Import</h5>
+                    <div className="wrapper">
+                        <input className="btn btn-dark btn-sm" type='file' id='file' placeholder="Import" onChange={handleFileChange} />
+
+                        <button
+                            className="btn btn-info btn-sm btn-import mt-2 px-4"
+                            onClick={handleUpload}
+                        >
+                            Import
+                        </button>
+
+                        <div className="container-fluid mt-5 tiles-container">
+                            {tiles.map((t) => (
+                                <RemovableTile {...t} key={t.url} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className="p-3 d-flex justify-content-end">
+                    <button
+                        className="btn btn-sm btn-secondary px-4"
+                        onClick={handleClose}
+                    >
+                        Close
+                    </button>
+                </div>
+            </Modal>
+        </>
+    )
+}

src/components/sidebar/sidebar.tsx

@@ -5,6 +5,8 @@ import { addTile, removeTile, setTiles } from "../../redux/tilesSlice";
 import { handleOnDrag, handleOnDragOver } from "../../utils/drag-handler";
 import EditItems from "../edit-items/edit-items";
 import EditTiers from "../edit-tiers/edit-tiers";
+import ImportJSON from "../import-json/import-json";
+import ExportJSON from "../export-json/export-json";;
 import Tile from "../tile/tile";
 import "./sidebar.scss";
 
@@ -47,6 +49,8 @@ export default function Sidebar({ className, ...rest }: SidebarProps) {
         </div>
       </div>
       <div className="edit-row mt-3">
+        <ImportJSON />
+        <ExportJSON />
         <EditItems />
         <EditTiers />
       </div>

src/components/tier-row/tier-row.tsx

@@ -16,8 +16,10 @@ export default function TierRow({ title }: TierRowProps) {
 
   function handleOnDrop(e: React.DragEvent<HTMLDivElement>) {
     const tileJSON = e.dataTransfer.getData("tile");
+
     if (tileJSON) {
       const tile = JSON.parse(tileJSON);
+      // console.log(tile)
       dispatch(removeTile(tile));
       setTimeout(() => {
         dispatch(addTile({ ...tile, tier: title }));

src/data/frameworks.ts

@@ -4,7 +4,7 @@ export const frameworks: { url: string; title: string }[] = [
     title: "React",
   },
   {
-    url: "https://seeklogo.com/images/A/angular-logo-B76B1CDE98-seeklogo.com.png",
+    url: "https://seeklogo.com/images/A/angular-logox-B76B1CDE98-seeklogo.com.png",
     title: "Angular",
   },
   {
@@ -41,6 +41,6 @@ export const frameworks: { url: string; title: string }[] = [
   },
   {
     url: "https://seeklogo.com/images/S/svelte-logo-E3497608CB-seeklogo.com.png",
-    title: "Svelete",
+    title: "Svelte",
   },
 ];

src/redux/tierSlice.ts

@@ -12,7 +12,7 @@ const tierSlice = createSlice({
   name: "tiers",
   initialState,
   reducers: {
-    setTiers: (state, action: PayloadAction<TierState["value"]>) => {
+    setTiers: ( state, action: PayloadAction<TierState["value"]>) => {
       state.value = action.payload;
     },
     addTier: (state, action: PayloadAction<string>) => {