Merge pull request #16 from Ben8t/feat/export

Import & Export

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "file-saver": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.8.3",

src/Search.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import SearchList from './SearchList.tsx'
 import { useContext, useState } from 'react'
 import axios from 'axios'
 import { SpotifyContext } from './context/SpotifyContext.tsx'
 import { FlowContext } from './context/FlowContext.tsx'
+import { saveAs } from 'file-saver';
 
 const CLIENT_ID = '0350c90137454dc5a748549664e5ba75'
 const REDIRECT_URI = 'http://localhost:5173'
@@ -11,7 +13,7 @@ const RESPONSE_TYPE = 'token'
 
 function Search() {
   const { token, logout } = useContext(SpotifyContext)
-  const { nodes, setNodes } = useContext(FlowContext)
+  const { nodes, setNodes, edges, setEdges } = useContext(FlowContext)
 
   const [searchKey, setSearchKey] = useState('')
   const [tracks, setTracks] = useState([])
@@ -54,6 +56,47 @@ function Search() {
     setTracks(trackFeatures)
   }
 
+  const handleExport = (e) => {
+    const data = {
+      nodes: nodes,
+      edges: edges
+    };
+
+    const json = JSON.stringify(data);
+    const blob = new Blob([json], { type: 'application/json' });
+
+    saveAs(blob, 'graph_data.json');
+  }
+
+  const fileInputRef = React.createRef();
+
+  const handleImportButtonClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleImport = (event) => {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const data = JSON.parse(e.target.result);
+
+        if (data.nodes && data.edges) {
+          setNodes(data.nodes);
+          setEdges(data.edges);
+          alert('Import successful!');
+        } else {
+          alert('Invalid file format. Please select a valid JSON file.');
+        }
+      } catch (error) {
+        alert('Error parsing JSON. Please check the file format.');
+      }
+    };
+
+    reader.readAsText(file);
+  };
+
   return (
     <div className="search rounded-lg bg-gray-100 gap-2">
       {!token ? (
@@ -71,6 +114,28 @@ function Search() {
           Logout
         </button>
       )}
+      <div>
+      <button
+          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+          onClick={handleImportButtonClick}
+        >
+          Import
+      </button>
+      <input
+        type="file"
+        accept=".json"
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        onChange={handleImport}
+      />
+      </div>
+
+      <button
+          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+          onClick={handleExport}
+        >
+          Export
+      </button>
       <form onSubmit={searchTracks} className="form grid grid-cols-6 gap-2">
         <input
           type="text"