displaying videos

1 files changed, 9 insertions, 5 deletions

diff --git a/src/views/App.js b/src/views/App.js
index 561523d..b435047 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -12,9 +12,10 @@ export default function App() {
   const [db, setDb] = useState(null);
   const [node, setNode] = useState(null);
   const [graph, setGraph] = useState(null);
-  const [selected, setSelected] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
   const [detailVisible, setDetailVisible] = useState(null);
 
+  /** Load the database */
   useEffect(async () => {
     const newDb = await loadDB();
     setDb(newDb);
@@ -25,21 +26,24 @@ export default function App() {
     );
   }, []);
 
+  /** 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 === selected) {
-      setSelected(null);
+    if (category === selectedCategory) {
+      setSelectedCategory(null);
       graph.onSelect(null);
     } else {
-      setSelected(category);
+      setSelectedCategory(category);
       graph.onSelect(category);
     }
   });
@@ -49,7 +53,7 @@ export default function App() {
       <Detail node={node} visible={detailVisible} onClose={handleClose} />
       <Legend
         visible={!detailVisible}
-        selected={selected}
+        selected={selectedCategory}
         onSelect={handleSelect}
       />
     </div>