mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-15 07:08:55 +00:00
refactor: moved query stuff to home view
This commit is contained in:
parent
05bf42c2e3
commit
26f93f4604
3 changed files with 56 additions and 26 deletions
|
@ -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>
|
||||
|
|
|
@ -33,7 +33,7 @@ const createWindow = (): void => {
|
|||
label: 'File',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Open Repository',
|
||||
label: 'Open',
|
||||
click: menuItem => {
|
||||
dialog.showOpenDialog({
|
||||
title: "Open Repository",
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue