graph, intro

1 files changed, 12 insertions, 58 deletions

diff --git a/src/views/App.js b/src/views/App.js
index 8c8722b..74f479f 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -1,79 +1,33 @@
 /**
- * Main React app logic
+ * Application
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import * as THREE from "three";
 import { MTLLoader, OBJLoader } from "@hbis/three-obj-mtl-loader";
 
-import Detail from "./Detail.js";
-import Legend from "./Legend.js";
-import Quote from "./Quote.js";
-import Credits from "./Credits.js";
-import Title from "./Title.js";
-import buildGraph from "../graph.js";
+import Graph from "./Graph.js";
+import Intro from "./Intro.js";
 
 export default function App() {
   const [db, setDb] = useState(null);
-  const [node, setNode] = useState(null);
-  const [graph, setGraph] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState(null);
-  const [detailVisible, setDetailVisible] = useState(null);
-  const [creditsVisible, setCreditsVisible] = useState(true);
+  const [intro, setIntro] = useState(true);
 
-  /** Load the database */
   useEffect(async () => {
     const newDb = await loadDB();
     await loadObjects(newDb);
     setDb(newDb);
-    setGraph(
-      buildGraph({
-        db: newDb,
-        handlers: {
-          click: handleClick,
-        },
-      })
-    );
   }, []);
 
-  /** Click to open a node */
-  const handleClick = useCallback((node) => {
-    setNode(node);
-    setDetailVisible(true);
-  });
-
-  /** Click to close the media modal */
-  const handleClose = useCallback((node) => {
-    setDetailVisible(false);
-  });
-
-  /** Select or clear the category */
-  const handleSelect = useCallback((category) => {
-    if (category === selectedCategory) {
-      setSelectedCategory(null);
-      graph.onSelect(null);
-    } else {
-      setSelectedCategory(category);
-      graph.onSelect(category);
-    }
-  });
+  const closeIntro = () => {
+    setIntro(false);
+  };
 
   return (
-    <div>
-      <Detail node={node} visible={detailVisible} onClose={handleClose} />
-      <Legend
-        visible={!detailVisible && !creditsVisible}
-        selected={selectedCategory}
-        onSelect={handleSelect}
-      />
-      <Quote visible={!detailVisible && !creditsVisible} />
-      <Credits
-        onToggle={setCreditsVisible}
-        visible={!detailVisible}
-        open={creditsVisible}
-      />
-      <Title visible={!detailVisible && !creditsVisible} />
-    </div>
+    <>
+      {intro && <Intro onComplete={closeIntro} />}
+      {!intro && db && <Graph db={db} />}
+    </>
   );
 }