refactor: moved query stuff to home view

src/components/Sidebar/index.tsx

@@ -1,32 +1,17 @@
-import React, {FunctionComponent, useEffect, useState} from "react";
-import {useRepository} from "../RepositoryProvider";
+import React, {FunctionComponent} from "react";
 import {CountedTag} from "../../database/query";
 
 export type SidebarProps = {
+    countedTags: CountedTag[]
 }
 
-const Sidebar: FunctionComponent<SidebarProps> = () => {
-    const repository = useRepository()
-
-    const [tags, setTags] = useState<CountedTag[]>([])
-
-    useEffect(() => {
-        console.log("sidebar use effect")
-
-        if (repository) {
-            repository.get().then(d => {
-                console.log(d)
-                setTags(d.query().countedTags())
-            }).catch(console.log)
-        }
-    }, [repository])
-
+const Sidebar: FunctionComponent<SidebarProps> = ({countedTags}) => {
     return (
         <div>
             <ul>
                 {
-                    tags.map(t => (
-                        <li>{t.name} ({t.count})</li>
+                    countedTags.map(t => (
+                        <li key={t.name}>{t.name} ({t.count})</li>
                     ))
                 }
             </ul>

src/index.ts

@@ -33,7 +33,7 @@ const createWindow = (): void => {
       label: 'File',
       submenu: [
         {
-          label: 'Open Repository',
+          label: 'Open',
           click: menuItem => {
             dialog.showOpenDialog({
               title: "Open Repository",

src/views/Home/index.tsx

@@ -1,20 +1,65 @@
-import React, {FunctionComponent, useState} from "react";
+import React, {FunctionComponent, useEffect, useState} from "react";
 import Sidebar from "../../components/Sidebar";
 import MediaList from "../../components/MediaList";
 import {MediaFile} from "../../database/file";
+import {useRepository} from "../../components/RepositoryProvider";
+import {Query} from "../../database/query";
+import {Database} from "../../database/database";
 
 export type HomeProps = {
 }
 
-const Home: FunctionComponent<HomeProps> = () => {
+function queryFilter(query: Query, tags: string[]): Query {
+    tags.forEach(t => {
+        query = query.has(t)
+    })
+    return query
+}
 
+const Home: FunctionComponent<HomeProps> = () => {
+    const repository = useRepository()
+
+    const [tags, setTags] = useState<string[]>([])
     const [selected, setSelected] = useState<MediaFile|null>(null)
 
+    const [database, setDatabase] = useState<Database|null>(null)
+
+    const [error, setError] = useState<string|null>("Loading...")
+
+    useEffect(() => {
+        if (repository) {
+            repository.get()
+                .then(d => {
+                    setError(null)
+                    setDatabase(d)
+                })
+                .catch(e => {
+                    setError(e)
+                })
+        } else {
+            setError("no repository selected")
+        }
+    }, [repository])
+
+    const query = database ? queryFilter(database.query(), tags) : new Query([])
+
     return (
         <div>
-            <Sidebar />
-            { !selected &&
-                <MediaList />
+            { error &&
+                <div className="message">
+                    {error}
+                </div>
+            }
+            { !error &&
+                <>
+                    <Sidebar countedTags={query.countedTags()} />
+                    { selected &&
+                        <></>
+                    }
+                    { !selected &&
+                        <MediaList />
+                    }
+                </>
             }
         </div>
     )