Merge pull request #9 from Ben8t/dev/refacto

minor refactoring
Ben8t · Sep 24, 2023 · 2ff2e95 · 2ff2e95
2 parents 6606490 + 9bfeb8e
commit 2ff2e95
Show file tree

Hide file tree

Showing 9 changed files with 878 additions and 2,221 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,15 +14,13 @@ import 'reactflow/dist/style.css'
 import Search from './Search.tsx'
 import './custom_node.css'
 
-import CustomNode from './CustomNode.tsx';
+import CustomNode from './CustomNode.tsx'
 
-const nodeTypes = { customNode: CustomNode };
+const nodeTypes = { customNode: CustomNode }
 
-const initialNodes: Node[] = [
-]
+const initialNodes: Node[] = []
 
-const initialEdges: Edge[] = [
-]
+const initialEdges: Edge[] = []
 
 function Flow() {
   const [nodes, setNodes] = useState<Node[]>(initialNodes)
@@ -45,7 +43,7 @@ function Flow() {
   )
 
   return (
-    <div className="grid grid-cols-4 gap-2 m-2">
+    <div className="m-2 grid grid-cols-4 gap-2">
       <div className="col-span-3" style={{ width: '100%', height: '100%' }}>
         <ReactFlow
           className="flow_board"
@@ -60,10 +58,7 @@ function Flow() {
         </ReactFlow>
       </div>
       <div>
-        <Search
-          nodes={nodes}
-          setNodes={setNodes}
-        />
+        <Search nodes={nodes} setNodes={setNodes} />
       </div>
     </div>
   )

diff --git a/src/CustomNode.tsx b/src/CustomNode.tsx
@@ -1,25 +1,36 @@
-import { useCallback } from 'react';
-import { Handle, Position } from 'reactflow';
-
+import { useCallback } from 'react'
+import { Handle, Position } from 'reactflow'
 
 function CustomNode({ data, isConnectable }) {
   const onChange = useCallback((evt) => {
-    console.log(evt.target.value);
-  }, []);
+    console.log(evt.target.value)
+  }, [])
 
   return (
     <div className="text-updater-node shadow-md">
-      <Handle type="target" position={Position.Left} id="target" isConnectable={isConnectable} className="h-3 w-3 bg-purple"/>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="target"
+        isConnectable={isConnectable}
+        className="h-3 w-3 bg-purple"
+      />
       <div>
         <label>{data.label}</label>
         <hr />
         <span>Key: {data.key}</span>
         <span>BPM: {data.bpm}</span>
         <span>Style: {data.style}</span>
       </div>
-      <Handle type="source" position={Position.Right} id="source" isConnectable={isConnectable} className="h-3 w-3 bg-purple" />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="source"
+        isConnectable={isConnectable}
+        className="h-3 w-3 bg-purple"
+      />
     </div>
-  );
+  )
 }
 
-export default CustomNode;
+export default CustomNode
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,7 +1,7 @@
 function Header() {
   return (
     <div className="header mb-5">
-      <h1 className="font-mono text-3xl font-bold title">Track Lineage</h1>
+      <h1 className="title font-mono text-3xl font-bold">Track Lineage</h1>
     </div>
   )
 }

diff --git a/src/Search.tsx b/src/Search.tsx
@@ -1,13 +1,12 @@
 import SearchList from './SearchList.tsx'
 
 function Search({ nodes, setNodes }: Props) {
-    return (
-      <div className="search bg-gray-100 rounded-lg">
-        <span className='font-mono text-1xl font-bold'>Search</span>
-        <SearchList nodes={nodes} setNodes={setNodes} />
-      </div>
-    )
-  }
-
-  export default Search
-
+  return (
+    <div className="search rounded-lg bg-gray-100">
+      <span className="text-1xl font-mono font-bold">Search</span>
+      <SearchList nodes={nodes} setNodes={setNodes} />
+    </div>
+  )
+}
+
+export default Search
diff --git a/src/SearchList.tsx b/src/SearchList.tsx
@@ -2,45 +2,56 @@ import { FormEvent } from 'react'
 import { Node } from 'reactflow'
 import node_library from './nodes'
 
-
 type Props = {
   nodes: Node[]
   setNodes: React.Dispatch<React.SetStateAction<Node[]>>
 }
 function SearchList({ nodes, setNodes }: Props) {
-
   function onSubmit(node, event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     console.log(node)
     setNodes(
       nodes.concat({
         id: node.id,
-        type: "customNode",
-        data: { label: node.data.label, bpm: node.data.bpm, key: node.data.key, style: node.data.style },
+        type: 'customNode',
+        data: {
+          label: node.data.label,
+          bpm: node.data.bpm,
+          key: node.data.key,
+          style: node.data.style,
+        },
         position: { x: 500, y: 25 },
       }),
     )
   }
 
   return (
-    <div className='overflow-auto' style={{ width: '100%', height: '20rem' }}>
-      {node_library.map(node => (
-        <div className="max-w-sm p-6 m-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-          <form className="form grid grid-cols-2" onSubmit={(e) => onSubmit(node, e)} key={node.id}>
+    <div className="overflow-auto" style={{ width: '100%', height: '20rem' }}>
+      {node_library.map((node) => (
+        <div className="m-2 max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
+          <form
+            className="form grid grid-cols-2"
+            onSubmit={(e) => onSubmit(node, e)}
+            key={node.id}
+          >
             <div>
-              <p className="font-mono font-normal text-purple dark:text-gray-400" key={node.data.label}>
+              <p
+                className="font-mono font-normal text-purple dark:text-gray-400"
+                key={node.data.label}
+              >
                 {node.data.label}
               </p>
             </div>
             <div>
-              <button className="font-mono col-span-1 bg-purple hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" type="submit">
+              <button
+                className="hover:bg-purple-700 col-span-1 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                type="submit"
+              >
                 Add Track
               </button>
             </div>
-
           </form>
         </div>
-
       ))}
     </div>
   )

diff --git a/src/custom_node.css b/src/custom_node.css
@@ -1,14 +1,13 @@
 .text-updater-node {
-    width: 10rem;
-    border: 1px solid rgba(137, 38, 215, 0.3);
-    padding: 5px;
-    border-radius: 5px;
-    background: white;
-  }
-
-  .text-updater-node span {
-    display: block;
-    color: #777;
-    font-size: 12px;
-  }
-
+  width: 10rem;
+  border: 1px solid rgba(137, 38, 215, 0.3);
+  padding: 5px;
+  border-radius: 5px;
+  background: white;
+}
+
+.text-updater-node span {
+  display: block;
+  color: #777;
+  font-size: 12px;
+}
diff --git a/src/index.css b/src/index.css
@@ -7,12 +7,12 @@
 }
 
 .header {
-  background-color: #16160E;
+  background-color: #16160e;
   padding-bottom: 1rem;
 }
 
 .title {
   color: white;
   margin-left: 2rem;
   padding-top: 1rem;
-}
+}
diff --git a/src/nodes.tsx b/src/nodes.tsx
@@ -1,20 +1,18 @@
-
-
-function create_library(nb_title: number){
-    var tmp = [];
-    for (let i = 0; i < nb_title; i++) {
-        const node = {
-            id: `${i}`,
-            sourcePosition: 'right',
-            targetPosition: 'left',
-            data: { label: `Title ${i}`, bpm: '110', key: 'Eb', style:'Disco' },
-            position: { x: 500, y: 100 },
-        };
-        tmp.push(node);
+function create_library(nb_title: number) {
+  var tmp = []
+  for (let i = 0; i < nb_title; i++) {
+    const node = {
+      id: `${i}`,
+      sourcePosition: 'right',
+      targetPosition: 'left',
+      data: { label: `Title ${i}`, bpm: '110', key: 'Eb', style: 'Disco' },
+      position: { x: 500, y: 100 },
     }
-    return tmp;
+    tmp.push(node)
+  }
+  return tmp
 }
 
-const node_library = create_library(10);
+const node_library = create_library(10)
 
-export default node_library;
+export default node_library