src/views/App.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/**
 * Main React app logic
 */

import React, { useState, useEffect, useCallback } from "react";

import Detail from "./Detail.js";
import buildGraph from "../graph.js";

export default function App() {
  const [db, setDb] = useState(null);
  const [node, setNode] = useState(null);
  const [detailVisible, setDetailVisible] = useState(null);

  useEffect(async () => {
    const newDb = await loadDB();
    setDb(newDb);
    buildGraph(newDb, {
      click: handleClick,
    });
  }, []);

  const handleClick = useCallback((node) => {
    setNode(node);
    setDetailVisible(true);
  });

  const handleClose = useCallback((node) => {
    setDetailVisible(false);
  });

  return (
    <div>
      <Detail node={node} visible={detailVisible} onClose={handleClose} />
    </div>
  );
}

async function loadDB() {
  const request = await fetch("/assets/db.json");
  return await request.json();
}