mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-15 07:08:55 +00:00
refactor: removed repository context and transformed to more functional style
This commit is contained in:
parent
6f624025af
commit
0faffad45d
4 changed files with 46 additions and 69 deletions
|
@ -1,13 +1,10 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import RepositoryProvider from "./components/RepositoryProvider";
|
||||
import Home from "./views/Home";
|
||||
|
||||
function render() {
|
||||
ReactDOM.render(
|
||||
<RepositoryProvider>
|
||||
<Home />
|
||||
</RepositoryProvider>,
|
||||
<Home />,
|
||||
document.getElementById("root")
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,42 +0,0 @@
|
|||
import React, {FunctionComponent, useContext, useEffect, useState} from "react";
|
||||
import Repository from "../../repository";
|
||||
import {ipcRenderer} from 'electron';
|
||||
|
||||
const OPEN_REPOSITORY_MESSAGE_NAME = "MSG_OPEN_REPO"
|
||||
|
||||
const RepositoryContext = React.createContext<Repository|null>(null)
|
||||
|
||||
export const useRepository = () => useContext(RepositoryContext)
|
||||
|
||||
type RepositoryProviderProps = {
|
||||
}
|
||||
|
||||
const RepositoryProvider: FunctionComponent<RepositoryProviderProps> = ({children}) => {
|
||||
const [repository, setRepository] = useState<Repository|null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const listener = (event: any, data: any) => {
|
||||
console.log(data)
|
||||
const _path = data as string
|
||||
if (_path) {
|
||||
setRepository(new Repository(_path))
|
||||
} else {
|
||||
setRepository(null)
|
||||
}
|
||||
}
|
||||
|
||||
ipcRenderer.on(OPEN_REPOSITORY_MESSAGE_NAME, listener)
|
||||
return () => {
|
||||
// cleanup
|
||||
ipcRenderer.removeListener(OPEN_REPOSITORY_MESSAGE_NAME, listener)
|
||||
}
|
||||
}, [setRepository])
|
||||
|
||||
return (
|
||||
<RepositoryContext.Provider value={repository}>
|
||||
{children}
|
||||
</RepositoryContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default RepositoryProvider
|
|
@ -64,8 +64,10 @@ class Repository {
|
|||
return untagged.filter((v, i, s) => s.indexOf(v) == i)
|
||||
}
|
||||
|
||||
public update(db: Database) {
|
||||
this.cached = db
|
||||
public update(db: Database): Repository {
|
||||
const clone = new Repository(this.path)
|
||||
clone.cached = db
|
||||
return clone
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -2,10 +2,13 @@ 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";
|
||||
import MediaDetails from "../../components/MediaDetails";
|
||||
import Repository from "../../repository";
|
||||
import {ipcRenderer} from "electron";
|
||||
|
||||
const OPEN_REPOSITORY_MESSAGE_NAME = "MSG_OPEN_REPO"
|
||||
|
||||
export type HomeProps = {
|
||||
}
|
||||
|
@ -20,42 +23,59 @@ function queryFilter(query: Query, tags: string[]): Query {
|
|||
const emptyQuery = new Query([])
|
||||
|
||||
const Home: FunctionComponent<HomeProps> = () => {
|
||||
const repository = useRepository()
|
||||
|
||||
const [tags, setTags] = useState<string[]>([])
|
||||
const [selected, setSelected] = useState<MediaFile|null>(null)
|
||||
|
||||
const [repository, setRepository] = useState<Repository|null>(null)
|
||||
const [database, setDatabase] = useState<Database|null>(null)
|
||||
|
||||
const [message, setMessage] = useState<string|null>("Loading...")
|
||||
const [message, setMessage] = useState<string|null>("No repository selected")
|
||||
|
||||
useEffect(() => {
|
||||
if (repository) {
|
||||
repository.get()
|
||||
.then(d => {
|
||||
setMessage(null)
|
||||
setDatabase(d)
|
||||
})
|
||||
.catch(e => {
|
||||
setMessage(e)
|
||||
})
|
||||
} else {
|
||||
setMessage("no repository selected")
|
||||
const listener = (event: any, data: any) => {
|
||||
console.log(data)
|
||||
const _path = data as string
|
||||
if (_path) {
|
||||
const repo = new Repository(_path)
|
||||
setRepository(repo)
|
||||
|
||||
setMessage("Loading...")
|
||||
setDatabase(null)
|
||||
repo.get()
|
||||
.then(d => {
|
||||
setMessage(null)
|
||||
setDatabase(d)
|
||||
})
|
||||
.catch(e => {
|
||||
setMessage(e)
|
||||
})
|
||||
} else {
|
||||
setMessage("no repository selected")
|
||||
setRepository(null)
|
||||
}
|
||||
}
|
||||
}, [repository])
|
||||
|
||||
ipcRenderer.on(OPEN_REPOSITORY_MESSAGE_NAME, listener)
|
||||
return () => {
|
||||
// cleanup
|
||||
ipcRenderer.removeListener(OPEN_REPOSITORY_MESSAGE_NAME, listener)
|
||||
}
|
||||
}, [setRepository])
|
||||
|
||||
const query = database ? queryFilter(database.query(), tags) : emptyQuery
|
||||
const allTags = database ? database.query().tags() : []
|
||||
|
||||
const mediaUpdate = (updatedFile: MediaFile) => {
|
||||
const clone = database.clone() // not a deep copy
|
||||
clone.updateFile(updatedFile)
|
||||
repository.update(clone)
|
||||
const dbClone = database.clone() // not a deep copy
|
||||
dbClone.updateFile(updatedFile)
|
||||
|
||||
const repoClone = repository.update(dbClone)
|
||||
setMessage("Saving...")
|
||||
|
||||
repository.write().then(() => {
|
||||
repoClone.write().then(() => {
|
||||
setRepository(repoClone)
|
||||
setDatabase(dbClone)
|
||||
setSelected(updatedFile)
|
||||
setDatabase(clone)
|
||||
setMessage(null)
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue