feat: added detail page

This commit is contained in:
overflowerror 2021-10-09 16:47:04 +02:00
parent b6f1c5763a
commit 380a0ece0b
4 changed files with 43 additions and 18 deletions

View file

@ -0,0 +1,29 @@
import React, {FunctionComponent} from "react";
import {MediaFile} from "../../database/file";
import MediaPreview from "../MediaPreview";
export type MediaDetailsProps = {
basePath: string,
file: MediaFile
}
const MediaDetails: FunctionComponent<MediaDetailsProps> = ({basePath, file}) => {
return (
<div>
<MediaPreview basePath={basePath} file={file} />
<div>
Path: {file.getPath()} <br />
Tags:
<ul>
{
file.getTags().map(t => (
<li key={t}>{t}</li>
))
}
</ul>
</div>
</div>
)
}
export default MediaDetails

View file

@ -4,15 +4,16 @@ import MediaListItem from "../MediaListItem";
export type MediaListProps = {
basePath: string,
files: MediaFile[]
files: MediaFile[],
onSelect: (file: MediaFile) => void
}
const MediaList: FunctionComponent<MediaListProps> = ({basePath, files}) => {
const MediaList: FunctionComponent<MediaListProps> = ({basePath, files, onSelect}) => {
return (
<div>
{
files.map(f => (
<MediaListItem basePath={basePath} file={f} />
<MediaListItem basePath={basePath} file={f} onClick={onSelect} />
))
}
</div>

View file

@ -4,23 +4,14 @@ import MediaPreview from "../MediaPreview";
export type MediaListItemProps = {
basePath: string,
file: MediaFile
file: MediaFile,
onClick: (file: MediaFile) => void
}
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file}) => {
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file, onClick}) => {
return (
<div>
<div onClick={() => onClick(file)}>
<MediaPreview basePath={basePath} file={file} />
<div>
Tags:
<ul>
{
file.getTags().map(t => (
<li key={t}>{t}</li>
))
}
</ul>
</div>
</div>
)
}

View file

@ -5,6 +5,7 @@ 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";
export type HomeProps = {
}
@ -56,10 +57,13 @@ const Home: FunctionComponent<HomeProps> = () => {
<>
<Sidebar countedTags={query.countedTags()} />
{ selected &&
<></>
<>
<button onClick={() => setSelected(null)}>Back</button>
<MediaDetails basePath={repository.getPath()} file={selected} />
</>
}
{ !selected &&
<MediaList basePath={repository.getPath()} files={query.get()} />
<MediaList basePath={repository.getPath()} files={query.get()} onSelect={setSelected} />
}
</>
}