sigmasternchen/tagify
1
0
Fork 0
mirror of https://github.com/sigmasternchen/tagify synced 2025-03-15 07:08:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added detail page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/MediaDetails/index.tsx Normal file
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

7
src/components/MediaList/index.tsx
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>

17
src/components/MediaListItem/index.tsx
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>
)
}

8
src/views/Home/index.tsx
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} />
}
</>
}