diff --git a/src/app.tsx b/src/app.tsx
index d6f59a7..9e081db 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,9 +1,14 @@
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(
-
Hello from React!
, document.body
+
+
+ ,
+ document.getElementById("root")
);
}
diff --git a/src/components/MediaList/index.tsx b/src/components/MediaList/index.tsx
new file mode 100644
index 0000000..328f643
--- /dev/null
+++ b/src/components/MediaList/index.tsx
@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from "react";
+
+export type MediaListProps = {
+}
+
+const MediaList: FunctionComponent = () => {
+ return (
+
+ )
+}
+
+export default MediaList
\ No newline at end of file
diff --git a/src/components/RepositoryProvider/index.tsx b/src/components/RepositoryProvider/index.tsx
new file mode 100644
index 0000000..e3fa203
--- /dev/null
+++ b/src/components/RepositoryProvider/index.tsx
@@ -0,0 +1,42 @@
+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(null)
+
+export const useRepository = () => useContext(RepositoryContext)
+
+type RepositoryProviderProps = {
+}
+
+const RepositoryProvider: FunctionComponent = ({children}) => {
+ const [repository, setRepository] = useState(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 (
+
+ {children}
+
+ )
+}
+
+export default RepositoryProvider
\ No newline at end of file
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
new file mode 100644
index 0000000..c98635d
--- /dev/null
+++ b/src/components/Sidebar/index.tsx
@@ -0,0 +1,37 @@
+import React, {FunctionComponent, useEffect, useState} from "react";
+import {useRepository} from "../RepositoryProvider";
+import {CountedTag} from "../../database/query";
+
+export type SidebarProps = {
+}
+
+const Sidebar: FunctionComponent = () => {
+ const repository = useRepository()
+
+ const [tags, setTags] = useState([])
+
+ useEffect(() => {
+ console.log("sidebar use effect")
+
+ if (repository) {
+ repository.get().then(d => {
+ console.log(d)
+ setTags(d.query().countedTags())
+ }).catch(console.log)
+ }
+ }, [repository])
+
+ return (
+
+
+ {
+ tags.map(t => (
+ - {t.name} ({t.count})
+ ))
+ }
+
+
+ )
+}
+
+export default Sidebar
\ No newline at end of file
diff --git a/src/database/config-keys.ts b/src/database/config-keys.ts
index 8e5d8f3..f8c4f12 100644
--- a/src/database/config-keys.ts
+++ b/src/database/config-keys.ts
@@ -1,5 +1,5 @@
-const KEY_DIRECTORIES = "directories"
-const KEY_FILES = "files"
+export const KEY_DIRECTORIES = "directories"
+export const KEY_FILES = "files"
-const KEY_FILE_PATH = "path"
-const KEY_FILE_TAGS = "tags"
\ No newline at end of file
+export const KEY_FILE_PATH = "path"
+export const KEY_FILE_TAGS = "tags"
\ No newline at end of file
diff --git a/src/database/database.ts b/src/database/database.ts
index 6956cb2..a38f6b9 100644
--- a/src/database/database.ts
+++ b/src/database/database.ts
@@ -1,4 +1,9 @@
-class Database {
+import {KEY_DIRECTORIES, KEY_FILES} from "./config-keys";
+import {Directory} from "./directory";
+import {MediaFile} from "./file";
+import {Query} from "./query";
+
+export class Database {
private directories: Directory[]
private files: MediaFile[]
@@ -70,4 +75,4 @@ class Database {
return obj
}
-}
+}
\ No newline at end of file
diff --git a/src/database/directory.ts b/src/database/directory.ts
index 3b3561b..2b74ed7 100644
--- a/src/database/directory.ts
+++ b/src/database/directory.ts
@@ -1,4 +1,4 @@
-class Directory {
+export class Directory {
private readonly path: string
constructor(path: string) {
diff --git a/src/database/file-type.ts b/src/database/file-type.ts
index badded5..85a037e 100644
--- a/src/database/file-type.ts
+++ b/src/database/file-type.ts
@@ -1,10 +1,10 @@
-enum MediaFileType {
+export enum MediaFileType {
unknown,
video,
image
}
-function FileTypeFromExtension(name: string): MediaFileType {
+export function FileTypeFromExtension(name: string): MediaFileType {
while (name.indexOf(".") >= 0) {
name = name.substring(name.indexOf(".") + 1)
}
diff --git a/src/database/file.ts b/src/database/file.ts
index 4c95319..a80c540 100644
--- a/src/database/file.ts
+++ b/src/database/file.ts
@@ -1,4 +1,7 @@
-class MediaFile {
+import {FileTypeFromExtension, MediaFileType} from "./file-type";
+import {KEY_FILE_PATH, KEY_FILE_TAGS} from "./config-keys";
+
+export class MediaFile {
private readonly path: string
private readonly type: MediaFileType
private tags: string[]
diff --git a/src/database/query.ts b/src/database/query.ts
index 40495c9..c392b9a 100644
--- a/src/database/query.ts
+++ b/src/database/query.ts
@@ -1,10 +1,12 @@
-type CountedTag = {
+import {MediaFile} from "./file";
+import {MediaFileType} from "./file-type";
+
+export type CountedTag = {
name: string,
count: number
}
-
-class Query {
+export class Query {
private readonly files: MediaFile[]
public constructor(files: MediaFile[]) {
diff --git a/src/index.html b/src/index.html
index 25d360e..299a2c8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,5 +5,7 @@
Tagify
+
+