refactor: moved query stuff to home view

This commit is contained in:
overflowerror 2021-10-07 18:42:28 +02:00
parent 05bf42c2e3
commit 26f93f4604
3 changed files with 56 additions and 26 deletions

View file

@ -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>

View file

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

View file

@ -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>
)