From 8166c127fb9fcfbc02d9c31b29fd6680d044c5d6 Mon Sep 17 00:00:00 2001
From: John Tuckner <tuckner329@gmail.com>
Date: Mon, 25 Dec 2023 16:00:24 -0600
Subject: [PATCH] add configuration import

---
 src/components/Header.tsx | 39 ++++++++++++-------------
 src/utilis/index.ts       | 60 ++++++++++++++++++++++++---------------
 2 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 07a0838b..fdbcd198 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,7 +14,7 @@ import SideBar from "./SideBar";
 import { useSelector } from "react-redux";
 import { appData } from "redux/boardSlice";
 import { IBoard } from "types";
-import { exportConfig, resetBoard } from "utilis";
+import { exportConfig, importConfig, resetBoard } from "utilis";
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,9 +29,8 @@ export default function Header() {
   const editBoard = () => {
     setOpenBoard(true);
     setOpenMenu(false);
-
   };
-  const handleOpenMenu = ()=> setOpenMenu(false)
+  const handleOpenMenu = () => setOpenMenu(false);
   const isMobile = useMediaQuery({ query: "(min-width: 700px)" });
   return (
     <>
@@ -83,23 +82,21 @@ export default function Header() {
                     <span className="py-8"> + Add capability</span>
                   )}
                 </button>
+                <div className="pr-4"></div>
                 <div className="pr-4">
-                </div>
-                <div className="pr-4">
-                <button
-                  aria-label="Export"
-                  onClick={() => exportConfig()}
-                  className={`rounded-full bg-primary text-sm font-bold text-white ${
-                    !isMobile ? "w-[40px]" : "w-32"
-                  } h-[40px]`}
-                >
-                  {!isMobile ? (
-                    <IoIosAdd className="inline-flex" />
-                  ) : (
-                    <span className="py-8">Export</span>
-                  )}
-                </button>
-              
+                  <button
+                    aria-label="Export"
+                    onClick={() => exportConfig()}
+                    className={`rounded-full bg-primary text-sm font-bold text-white ${
+                      !isMobile ? "w-[40px]" : "w-32"
+                    } h-[40px]`}
+                  >
+                    {!isMobile ? (
+                      <IoIosAdd className="inline-flex" />
+                    ) : (
+                      <span className="py-8">Export</span>
+                    )}
+                  </button>
                 </div>
                 <div>
                   <BiDotsVerticalRounded
@@ -151,6 +148,10 @@ export default function Header() {
               title: "Reset configuration",
               handler: resetBoard,
             },
+            {
+              title: "Import configuration",
+              handler: importConfig,
+            },
           ]}
         />
       )}
diff --git a/src/utilis/index.ts b/src/utilis/index.ts
index e1ac6d81..091293c7 100644
--- a/src/utilis/index.ts
+++ b/src/utilis/index.ts
@@ -19,23 +19,14 @@ export const loadState = () => {
   }
 };
 
-export const resetBoard = () => {
-  try {
-    localStorage.removeItem("boarddata");
-    location.reload();
-  } catch (err) {
-    console.error("Error resetting local storage:", err);
-  }
-};
-
 export const exportConfig = () => {
   try {
     const boardData = localStorage.getItem("boarddata");
     if (boardData) {
-      const raw = JSON.parse(boardData).board
-      const data = {"schema": 1, "config": raw}
-      data.config.active = 0
-      const acmexport = JSON.stringify(data, null, 2)
+      const raw = JSON.parse(boardData).board;
+      const data = { schema: 1, config: raw };
+      data.config.active = 0;
+      const acmexport = JSON.stringify(data, null, 2);
       const blob = new Blob([acmexport], { type: "application/json" });
       const url = URL.createObjectURL(blob);
       const link = document.createElement("a");
@@ -49,30 +40,53 @@ export const exportConfig = () => {
   }
 };
 
-export const importConfig = (file: File) => {
+export const importConfig = () => {
   try {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const jsonData = event.target?.result as string;
-      const parsedData = JSON.parse(jsonData);
-      localStorage.setItem("boarddata", JSON.stringify(parsedData));
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = (event) => {
+      const file = (event.target as HTMLInputElement)?.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          const jsonData = event.target?.result as string;
+          const parsedData = JSON.parse(jsonData);
+          parsedData.config.active = parsedData.config.board[0];
+          const boardData = { board: {} };
+          boardData.board = parsedData.config;
+          localStorage.setItem("boarddata", JSON.stringify(boardData));
+          location.reload();
+        };
+        reader.readAsText(file);
+      }
     };
-    reader.readAsText(file);
+    input.click();
   } catch (err) {
-    console.error("Error loading JSON file:", err);
+    console.error("Error importing state from JSON file:", err);
+  }
+};
+
+export const resetBoard = () => {
+  try {
+    localStorage.removeItem("boarddata");
+    location.reload();
+  } catch (err) {
+    console.error("Error resetting local storage:", err);
   }
 };
 
 export const saveState = (state: any) => {
   try {
     const serializesState = JSON.stringify(state);
+    console.log(serializesState);
     localStorage.setItem("boarddata", serializesState);
   } catch (err) {
-    return err
+    return err;
   }
 };
 
-export const  checkDuplicatedBoard = (values: IBoard, board: IBoard[]) => {
+export const checkDuplicatedBoard = (values: IBoard, board: IBoard[]) => {
   return board.some((el: IBoard) => el.name === values.name);
 };