Emily

backend/src/.cache

@@ -1 +1 @@
-{"access_token": "BQD-MHeT6Qbdm64cZ7mBc9kJ2uzmEE3_Rs6-7NJh5mMQZ6_N38B3U-JuJz2qwmEIXLZIhFY-hqJCyPzjcoI", "token_type": "Bearer", "expires_in": 3600, "expires_at": 1638063409}
+{"access_tok/en": "BQDu5b9CCeqfrykgeC4mUP0KojCNLCJNzOE7r6JLTTPoVU5wi1fBCNWxwa_0QiELWYXeogNYmb3lUbqZdeA", "token_type": "Bearer", "expires_in": 3600, "expires_at": 1637012366}

frontend/package.json

@@ -12,6 +12,7 @@
     "react-scripts": "4.0.3",
     "react-spotify-player": "^1.0.4",
     "react-spotify-web-playback": "^0.9.1",
+    "react-tree-graph": "^6.0.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -24,6 +25,10 @@
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "eslintIgnore": [
+      "node_modules",
+      "build/*"
     ]
   },
   "browserslist": {
@@ -37,5 +42,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^5.3.1",
+    "typescript": "^4.4.4"
   }
 }

frontend/src/MyApp.js

@@ -5,6 +5,47 @@ import CollabTable from './CollabTable';
 import Form from './Form';
 
 
+
+// import React from 'react';
+import Tree from 'react-tree-graph';
+import data from './data.ts';
+import 'react-tree-graph/dist/style.css'
+import './App.css';
+import SpotifyPlayer from 'react-spotify-player'
+
+// const App: React.FC = (props: any) => {
+//   return (
+//     <Tree
+// 	data={data}
+// 	height={700}
+// 	width={1000}/>
+//   );
+// }
+
+const App: React.FC = () => {
+  let data = {
+	name: 'Parent Artist',
+	children: [{
+		name: '[hello,hello]',
+    children: 'other artist'
+	}, {
+		name: 'Child Artist Two',
+    children: 'other artist'
+	}]
+};
+
+  return (
+    <Tree
+	data={data}
+	height={700}
+	width={700}/>
+  );
+}
+
+export default App;
+
+
+
 function MyApp() {
   const [characters, setCharacters] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
@@ -78,4 +119,4 @@ function MyApp() {
   );  
 }
 
-export default MyApp;
+export default MyApp;