refactor: removed repository context and transformed to more functional style

This commit is contained in:
overflowerror 2021-10-10 15:57:01 +02:00
parent 6f624025af
commit 0faffad45d
4 changed files with 46 additions and 69 deletions

View file

@ -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")
);
}

View file

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

View file

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

View file

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