nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 12:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

serve frontend

Browse Source
This commit is contained in:
nyne
2025-05-15 12:47:15 +08:00
parent d6fea884cf
commit 578aab36c3
24 changed files with 400 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/index.html
View File

@@ -1,11 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="{{Description}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<!-- SEO meta -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{Title}}">
<meta name="twitter:description" content="{{Description}}">
<meta name="twitter:image" content="{{Preview}}">
<meta property="og:title" content="{{Title}}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{Url}}">
<meta property="og:image" content="{{Preview}}">
<meta property="og:description" content="{{Description}}">
<meta property="og:site_name" content={{SiteName}}>
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nysoure">
<link rel="apple-touch-icon" href="/icon-192.png">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>{{Title}}</title>
</head>
<body>
<script>
window.serverName = "{{SiteName}}";
window.cloudflareTurnstileSiteKey = "{{CFTurnstileSiteKey}}";
</script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

BIN
frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
frontend/public/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

11
frontend/src/app.ts
View File

@@ -1,12 +1,19 @@
import {User} from "./network/models.ts";
interface MyWindow extends Window {
serverName?: string;
cloudflareTurnstileSiteKey?: string;
}
class App {
appName = "资源库"
appName = "Nysoure"
user: User | null = null;
token: string | null = null;
cloudflareTurnstileSiteKey: string | null = null;
constructor() {
this.init();
}
@@ -20,6 +27,8 @@ class App {
if (tokenJson) {
this.token = JSON.parse(tokenJson);
}
this.appName = (window as MyWindow).serverName || this.appName;
this.cloudflareTurnstileSiteKey = (window as MyWindow).cloudflareTurnstileSiteKey || null;
}
saveData() {

2
frontend/src/components/alert.tsx
View File

@@ -10,7 +10,7 @@ export function ErrorAlert({ message, className }: { message: string, className?
export function InfoAlert({ message, className }: { message: string, className?: string }) {
return <div role="alert" className={`alert alert-info ${className}`}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-6 w-6 shrink-0 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>{message}</span>

2
frontend/src/components/navigator.tsx
View File

@@ -32,7 +32,7 @@ export default function Navigator() {
<SearchBar />
<UploadingSideBar />
{
app.isAdmin() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
app.isLoggedIn() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
navigate("/manage");
}}>
<MdSettings size={24} />

2
frontend/src/network/models.ts
View File

@@ -116,4 +116,6 @@ export interface ServerConfig {
allow_register: boolean;
cloudflare_turnstile_site_key: string;
cloudflare_turnstile_secret_key: string;
server_name: string;
server_description: string;
}

6
frontend/src/pages/home_page.tsx
View File

@@ -1,6 +1,12 @@
import { useEffect } from "react";
import ResourcesView from "../components/resources_view.tsx";
import {network} from "../network/network.ts";
import { app } from "../app.ts";
export default function HomePage() {
useEffect(() => {
document.title = app.appName;
}, [])
return <ResourcesView loader={(page) => network.getResources(page)}></ResourcesView>
}

6
frontend/src/pages/login_page.tsx
View File

@@ -1,4 +1,4 @@
import {FormEvent, useState} from "react";
import {FormEvent, useEffect, useState} from "react";
import {network} from "../network/network.ts";
import {app} from "../app.ts";
import {useNavigate} from "react-router";
@@ -32,6 +32,10 @@ export default function LoginPage() {
}
};
useEffect(() => {
document.title = t("Login");
}, [])
return <div className={"flex items-center justify-center w-full h-full bg-base-200"} id={"login-page"}>
<div className={"w-96 card card-border bg-base-100 border-base-300"}>
<form onSubmit={onSubmit}>

28
frontend/src/pages/manage_page.tsx
View File

@@ -1,5 +1,5 @@
import {MdMenu, MdOutlineBadge, MdOutlinePerson, MdOutlineStorage} from "react-icons/md";
import {ReactNode, useEffect, useState} from "react";
import { MdMenu, MdOutlineBadge, MdOutlinePerson, MdOutlineStorage } from "react-icons/md";
import { ReactNode, useEffect, useState } from "react";
import StorageView from "./manage_storage_page.tsx";
import UserView from "./manage_user_page.tsx";
import { useTranslation } from "react-i18next";
@@ -24,6 +24,10 @@ export default function ManagePage() {
};
}, []);
useEffect(() => {
document.title = t("Manage");
}, [])
const buildItem = (title: string, icon: ReactNode, p: number) => {
return <li key={title} onClick={() => {
setPage(p);
@@ -49,20 +53,20 @@ export default function ManagePage() {
]
const pageComponents = [
<ManageMePage/>,
<StorageView/>,
<UserView/>,
<ManageServerConfigPage/>,
<ManageMePage />,
<StorageView />,
<UserView />,
<ManageServerConfigPage />,
]
return <div className="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" className="drawer-toggle"/>
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
<div className="drawer-content" style={{
height: "calc(100vh - 64px)",
}}>
<div className={"flex w-full h-14 items-center gap-2 px-3"}>
<label className={"btn btn-square btn-ghost lg:hidden"} htmlFor="my-drawer-2">
<MdMenu size={24}/>
<MdMenu size={24} />
</label>
<h1 className={"text-xl font-bold"}>
{pageNames[page]}
@@ -80,10 +84,10 @@ export default function ManagePage() {
<h2 className={"text-lg font-bold p-4"}>
{t("Manage")}
</h2>
{buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"}/>, 0)}
{buildItem(t("Storage"), <MdOutlineStorage className={"text-xl"}/>, 1)}
{buildItem(t("Users"), <MdOutlinePerson className={"text-xl"}/>, 2)}
{buildItem(t("Server"), <MdOutlineStorage className={"text-xl"}/>, 3)}
{buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
{buildItem(t("Storage"), <MdOutlineStorage className={"text-xl"} />, 1)}
{buildItem(t("Users"), <MdOutlinePerson className={"text-xl"} />, 2)}
{buildItem(t("Server"), <MdOutlineStorage className={"text-xl"} />, 3)}
</ul>
</div>
</div>

8
frontend/src/pages/manage_server_config_page.tsx
View File

@@ -62,7 +62,7 @@ export default function ManageServerConfigPage() {
setIsLoading(false);
};
return <form className="px-4" onSubmit={handleSubmit}>
return <form className="px-4 pb-4" onSubmit={handleSubmit}>
<Input type="number" value={config.max_uploading_size_in_mb.toString()} label="Max uploading size (MB)" onChange={(e) => {
setConfig({...config, max_uploading_size_in_mb: parseInt(e.target.value) })
}}></Input>
@@ -78,6 +78,12 @@ export default function ManageServerConfigPage() {
setConfig({ ...config, allow_register: e.target.checked })
}} />
</fieldset>
<Input type="text" value={config.server_name} label="Server name" onChange={(e) => {
setConfig({...config, server_name: e.target.value })
}}></Input>
<Input type="text" value={config.server_description} label="Server description" onChange={(e) => {
setConfig({...config, server_description: e.target.value })
}}></Input>
<Input type="text" value={config.cloudflare_turnstile_site_key} label="Cloudflare Turnstile Site Key" onChange={(e) => {
setConfig({...config, cloudflare_turnstile_site_key: e.target.value })
}}></Input>

130
frontend/src/pages/publish_page.tsx
View File

@@ -1,13 +1,13 @@
import {useRef, useState} from "react";
import {MdAdd, MdDelete, MdOutlineInfo} from "react-icons/md";
import {Tag} from "../network/models.ts";
import {network} from "../network/network.ts";
import {LuInfo} from "react-icons/lu";
import {useNavigate} from "react-router";
import { useEffect, useRef, useState } from "react";
import { MdAdd, MdDelete, MdOutlineInfo } from "react-icons/md";
import { Tag } from "../network/models.ts";
import { network } from "../network/network.ts";
import { LuInfo } from "react-icons/lu";
import { useNavigate } from "react-router";
import showToast from "../components/toast.ts";
import {useTranslation} from "react-i18next";
import {app} from "../app.ts";
import {ErrorAlert} from "../components/alert.tsx";
import { useTranslation } from "react-i18next";
import { app } from "../app.ts";
import { ErrorAlert } from "../components/alert.tsx";
export default function PublishPage() {
const [title, setTitle] = useState<string>("")
@@ -22,6 +22,10 @@ export default function PublishPage() {
const navigate = useNavigate()
const { t } = useTranslation();
useEffect(() => {
document.title = t("Publish Resource");
}, [])
const handleSubmit = async () => {
if (isSubmitting) {
return
@@ -53,7 +57,7 @@ export default function PublishPage() {
})
if (res.success) {
setSubmitting(false)
navigate("/resources/" + res.data!, {replace: true})
navigate("/resources/" + res.data!, { replace: true })
} else {
setSubmitting(false)
setError(res.message)
@@ -80,28 +84,28 @@ export default function PublishPage() {
setImages([...images, res.data!])
} else {
setUploading(false)
showToast({message: t("Failed to upload image"), type: "error"})
showToast({ message: t("Failed to upload image"), type: "error" })
}
}
input.click()
}
if (!app.user) {
return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")}/>
return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")} />
}
if (!app.user?.is_admin) {
return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")}/>
return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")} />
}
return <div className={"p-4"}>
<h1 className={"text-2xl font-bold my-4"}>{t("Publish Resource")}</h1>
<div role="alert" className="alert alert-info mb-2 alert-dash">
<MdOutlineInfo size={24}/>
<MdOutlineInfo size={24} />
<span>{t("All information, images, and files can be modified after publishing")}</span>
</div>
<p className={"my-1"}>{t("Title")}</p>
<input type="text" className="input w-full" value={title} onChange={(e) => setTitle(e.target.value)}/>
<input type="text" className="input w-full" value={title} onChange={(e) => setTitle(e.target.value)} />
<div className={"h-4"}></div>
<p className={"my-1"}>{t("Alternative Titles")}</p>
{
@@ -111,13 +115,13 @@ export default function PublishPage() {
const newAltTitles = [...altTitles]
newAltTitles[index] = e.target.value
setAltTitles(newAltTitles)
}}/>
}} />
<button className={"btn btn-square btn-error ml-2"} type={"button"} onClick={() => {
const newAltTitles = [...altTitles]
newAltTitles.splice(index, 1)
setAltTitles(newAltTitles)
}}>
<MdDelete size={24}/>
<MdDelete size={24} />
</button>
</div>
})
@@ -125,7 +129,7 @@ export default function PublishPage() {
<button className={"btn my-2"} type={"button"} onClick={() => {
setAltTitles([...altTitles, ""])
}}>
<MdAdd/>
<MdAdd />
{t("Add Alternative Title")}
</button>
<div className={"h-2"}></div>
@@ -139,67 +143,67 @@ export default function PublishPage() {
</p>
<TagInput onAdd={(tag) => {
setTags([...tags, tag])
}}/>
}} />
<div className={"h-4"}></div>
<p className={"my-1"}>{t("Description")}</p>
<textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)}/>
<textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)} />
<div className={"flex items-center py-1 "}>
<MdOutlineInfo className={"inline mr-1"}/>
<MdOutlineInfo className={"inline mr-1"} />
<span className={"text-sm"}>{t("Use Markdown format")}</span>
</div>
<div className={"h-4"}></div>
<p className={"my-1"}>{t("Images")}</p>
<div role="alert" className="alert alert-info alert-soft my-2">
<MdOutlineInfo size={24}/>
<MdOutlineInfo size={24} />
<span>{t("Images will not be displayed automatically, you need to reference them in the description")}</span>
</div>
<div className={`rounded-box border border-base-content/5 bg-base-100 ${images.length === 0 ? "hidden" : ""}`}>
<table className={"table"}>
<thead>
<tr>
<td>{t("Preview")}</td>
<td>{t("Link")}</td>
<td>{t("Action")}</td>
</tr>
<tr>
<td>{t("Preview")}</td>
<td>{t("Link")}</td>
<td>{t("Action")}</td>
</tr>
</thead>
<tbody>
{
images.map((image, index) => {
return <tr key={index} className={"hover"}>
<td>
<img src={network.getImageUrl(image)} className={"w-16 h-16 object-cover card"} alt={"image"}/>
</td>
<td>
{network.getImageUrl(image)}
</td>
<td>
<button className={"btn btn-square"} type={"button"} onClick={() => {
const id = images[index]
const newImages = [...images]
newImages.splice(index, 1)
setImages(newImages)
network.deleteImage(id)
}}>
<MdDelete size={24}/>
</button>
</td>
</tr>
})
}
{
images.map((image, index) => {
return <tr key={index} className={"hover"}>
<td>
<img src={network.getImageUrl(image)} className={"w-16 h-16 object-cover card"} alt={"image"} />
</td>
<td>
{network.getImageUrl(image)}
</td>
<td>
<button className={"btn btn-square"} type={"button"} onClick={() => {
const id = images[index]
const newImages = [...images]
newImages.splice(index, 1)
setImages(newImages)
network.deleteImage(id)
}}>
<MdDelete size={24} />
</button>
</td>
</tr>
})
}
</tbody>
</table>
</div>
<button className={"btn my-2"} type={"button"} onClick={addImage}>
{isUploading ? <span className="loading loading-spinner"></span> : <MdAdd/>}
{isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
{t("Upload Image")}
</button>
<div className={"h-4"}></div>
{
error && <div role="alert" className="alert alert-error my-2 shadow">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shrink-0 stroke-current" fill="none"
viewBox="0 0 24 24">
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{t("Error")}: {error}</span>
</div>
@@ -213,7 +217,7 @@ export default function PublishPage() {
</div>
}
function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
function TagInput({ onAdd }: { onAdd: (tag: Tag) => void }) {
const [keyword, setKeyword] = useState<string>("")
const [tags, setTags] = useState<Tag[]>([])
const [error, setError] = useState<string | null>(null)
@@ -221,7 +225,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
const debounce = useRef(new Debounce(500))
const {t} = useTranslation();
const { t } = useTranslation();
const searchTags = async (keyword: string) => {
if (keyword.length === 0) {
@@ -273,22 +277,22 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
if (error) {
dropdownContent = <div className="alert alert-error my-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shrink-0 stroke-current" fill="none"
viewBox="0 0 24 24">
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{error}</span>
</div>
} else if (!keyword) {
dropdownContent = <div className="flex flex-row py-2 px-4">
<LuInfo size={20}/>
<span className={"w-2"}/>
<LuInfo size={20} />
<span className={"w-2"} />
<span className={"flex-1"}>{t("Please enter a search keyword")}</span>
</div>
} else if(isLoading) {
} else if (isLoading) {
dropdownContent = <div className="flex flex-row py-2 px-4">
<span className={"loading loading-spinner loading-sm"}></span>
<span className={"w-2"}/>
<span className={"w-2"} />
<span className={"flex-1"}>{t("Searching...")}</span>
</div>
} else {
@@ -310,7 +314,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
handleCreateTag(keyword)
}}><a>{t("Create Tag")}: {keyword}</a></li>
}
</>
</>
}
return <div className={"dropdown dropdown-end"}>
@@ -327,7 +331,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)}/>
<input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)} />
</label>
<ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow mt-2 border border-base-300">
{dropdownContent}

6
frontend/src/pages/register_page.tsx
View File

@@ -1,4 +1,4 @@
import {FormEvent, useState} from "react";
import {FormEvent, useEffect, useState} from "react";
import {network} from "../network/network.ts";
import {app} from "../app.ts";
import {useNavigate} from "react-router";
@@ -37,6 +37,10 @@ export default function RegisterPage() {
}
};
useEffect(() => {
document.title = t("Register");
}, [])
return <div className={"flex items-center justify-center w-full h-full bg-base-200"} id={"register-page"}>
<div className={"w-96 card card-border bg-base-100 border-base-300"}>
<form onSubmit={onSubmit}>

135
frontend/src/pages/resource_details_page.tsx
View File

@@ -1,21 +1,21 @@
import {useNavigate, useParams} from "react-router";
import {createContext, useCallback, useContext, useEffect, useRef, useState} from "react";
import {ResourceDetails, RFile, Storage, Comment} from "../network/models.ts";
import {network} from "../network/network.ts";
import { useNavigate, useParams } from "react-router";
import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
import { ResourceDetails, RFile, Storage, Comment } from "../network/models.ts";
import { network } from "../network/network.ts";
import showToast from "../components/toast.ts";
import Markdown from "react-markdown";
import "../markdown.css";
import Loading from "../components/loading.tsx";
import {MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDownload} from "react-icons/md";
import {app} from "../app.ts";
import {uploadingManager} from "../network/uploading.ts";
import {ErrorAlert} from "../components/alert.tsx";
import {useTranslation} from "react-i18next";
import { MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDownload } from "react-icons/md";
import { app } from "../app.ts";
import { uploadingManager } from "../network/uploading.ts";
import { ErrorAlert } from "../components/alert.tsx";
import { useTranslation } from "react-i18next";
import Pagination from "../components/pagination.tsx";
export default function ResourcePage() {
const params = useParams()
const {t} = useTranslation();
const { t } = useTranslation();
const idStr = params.id
@@ -32,18 +32,23 @@ export default function ResourcePage() {
if (res.success) {
setResource(res.data!)
} else {
showToast({message: res.message, type: "error"})
showToast({ message: res.message, type: "error" })
}
}
}, [id])
useEffect(() => {
document.title = t("Resource Details");
}, [])
useEffect(() => {
if (!isNaN(id)) {
network.getResourceDetails(id).then((res) => {
if (res.success) {
setResource(res.data!)
document.title = res.data!.title
} else {
showToast({message: res.message, type: "error"})
showToast({ message: res.message, type: "error" })
}
})
}
@@ -60,7 +65,7 @@ export default function ResourcePage() {
}
if (!resource) {
return <Loading/>
return <Loading />
}
return <context.Provider value={reload}>
@@ -79,7 +84,7 @@ export default function ResourcePage() {
<div className="flex items-center ">
<div className="avatar">
<div className="w-6 rounded-full">
<img src={network.getUserAvatar(resource.author)} alt={"avatar"}/>
<img src={network.getUserAvatar(resource.author)} alt={"avatar"} />
</div>
</div>
<div className="w-2"></div>
@@ -99,40 +104,40 @@ export default function ResourcePage() {
<label className="tab transition-all">
<input type="radio" name="my_tabs" checked={page === 0} onChange={() => {
setPage(0)
}}/>
<MdOutlineArticle className="text-xl mr-2"/>
}} />
<MdOutlineArticle className="text-xl mr-2" />
<span className="text-sm">
{t("Description")}
</span>
{t("Description")}
</span>
</label>
<div key={"article"} className="tab-content p-2">
<Article article={resource.article}/>
<Article article={resource.article} />
</div>
<label className="tab transition-all">
<input type="radio" name="my_tabs" checked={page === 1} onChange={() => {
setPage(1)
}}/>
<MdOutlineDataset className="text-xl mr-2"/>
}} />
<MdOutlineDataset className="text-xl mr-2" />
<span className="text-sm">
{t("Files")}
</span>
{t("Files")}
</span>
</label>
<div key={"files"} className="tab-content p-2">
<Files files={resource.files} resourceID={resource.id}/>
<Files files={resource.files} resourceID={resource.id} />
</div>
<label className="tab transition-all">
<input type="radio" name="my_tabs" checked={page === 2} onChange={() => {
setPage(2)
}}/>
<MdOutlineComment className="text-xl mr-2"/>
}} />
<MdOutlineComment className="text-xl mr-2" />
<span className="text-sm">
{t("Comments")}
</span>
{t("Comments")}
</span>
</label>
<div key={"comments"} className="tab-content p-2">
<Comments resourceId={resource.id}/>
<Comments resourceId={resource.id} />
</div>
</div>
<div className="h-4"></div>
@@ -143,13 +148,13 @@ export default function ResourcePage() {
const context = createContext<() => void>(() => {
})
function Article({article}: { article: string }) {
function Article({ article }: { article: string }) {
return <article>
<Markdown>{article}</Markdown>
</article>
}
function FileTile({file}: { file: RFile }) {
function FileTile({ file }: { file: RFile }) {
return <div className={"card card-border border-base-300 my-2"}>
<div className={"p-4 flex flex-row items-center"}>
<div className={"grow"}>
@@ -161,14 +166,14 @@ function FileTile({file}: { file: RFile }) {
const link = network.getFileDownloadLink(file.id);
window.open(link, "_blank");
}}>
<MdOutlineDownload size={24}/>
<MdOutlineDownload size={24} />
</button>
</div>
</div>
</div>
}
function Files({files, resourceID}: { files: RFile[], resourceID: number }) {
function Files({ files, resourceID }: { files: RFile[], resourceID: number }) {
return <div>
{
files.map((file) => {
@@ -189,8 +194,8 @@ enum FileType {
upload = "upload",
}
function CreateFileDialog({resourceId}: { resourceId: number }) {
const {t} = useTranslation();
function CreateFileDialog({ resourceId }: { resourceId: number }) {
const { t } = useTranslation();
const [isLoading, setLoading] = useState(false)
const storages = useRef<Storage[] | null>(null)
const mounted = useRef(true)
@@ -236,7 +241,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
setSubmitting(false)
const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
dialog.close()
showToast({message: t("File created successfully"), type: "success"})
showToast({ message: t("File created successfully"), type: "success" })
reload()
} else {
setError(res.message)
@@ -257,7 +262,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
setSubmitting(false)
const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
dialog.close()
showToast({message: t("Successfully create uploading task."), type: "success"})
showToast({ message: t("Successfully create uploading task."), type: "success" })
} else {
setError(res.message)
setSubmitting(false)
@@ -277,7 +282,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
return;
}
if (!res.success) {
showToast({message: res.message, type: "error"})
showToast({ message: res.message, type: "error" })
} else {
storages.current = res.data!
setLoading(false)
@@ -291,7 +296,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
dialog.showModal()
}}>
{
isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24}/>
isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24} />
}
<span className={"text-sm"}>
{t("Upload")}
@@ -305,13 +310,13 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
<form className="filter mb-2">
<input className="btn btn-square" type="reset" value="×" onClick={() => {
setFileType(null);
}}/>
}} />
<input className="btn text-sm" type="radio" name="type" aria-label={t("Redirect")} onInput={() => {
setFileType(FileType.redirect);
}}/>
}} />
<input className="btn text-sm" type="radio" name="type" aria-label={t("Upload")} onInput={() => {
setFileType(FileType.upload);
}}/>
}} />
</form>
{
@@ -319,13 +324,13 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
<p className={"text-sm p-2"}>{t("User who click the file will be redirected to the URL")}</p>
<input type="text" className="input w-full my-2" placeholder={t("File Name")} onChange={(e) => {
setFilename(e.target.value)
}}/>
}} />
<input type="text" className="input w-full my-2" placeholder={t("URL")} onChange={(e) => {
setRedirectUrl(e.target.value)
}}/>
}} />
<input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
setDescription(e.target.value)
}}/>
}} />
</>
}
@@ -348,25 +353,25 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
{
storages.current?.map((s) => {
return <option key={s.id}
value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
})
}
</select>
<input
type="file" className="file-input w-full my-2" onChange={(e) => {
if (e.target.files) {
setFile(e.target.files[0])
}
}}/>
if (e.target.files) {
setFile(e.target.files[0])
}
}} />
<input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
setDescription(e.target.value)
}}/>
}} />
</>
}
{error && <ErrorAlert className={"my-2"} message={error}/>}
{error && <ErrorAlert className={"my-2"} message={error} />}
<div className="modal-action">
<form method="dialog">
@@ -382,7 +387,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
</>
}
function Comments({resourceId}: { resourceId: number }) {
function Comments({ resourceId }: { resourceId: number }) {
const [page, setPage] = useState(1);
const [maxPage, setMaxPage] = useState(0);
@@ -404,17 +409,17 @@ function Comments({resourceId}: { resourceId: number }) {
return;
}
if (commentContent === "") {
showToast({message: "Comment content cannot be empty", type: "error"});
showToast({ message: "Comment content cannot be empty", type: "error" });
return;
}
setLoading(true);
const res = await network.createComment(resourceId, commentContent);
if (res.success) {
setCommentContent("");
showToast({message: "Comment created successfully", type: "success"});
showToast({ message: "Comment created successfully", type: "success" });
reload();
} else {
showToast({message: res.message, type: "error"});
showToast({ message: res.message, type: "error" });
}
setLoading(false);
}
@@ -422,23 +427,23 @@ function Comments({resourceId}: { resourceId: number }) {
return <div>
<div className={"mt-4 mb-6 textarea w-full p-4 h-28 flex flex-col"}>
<textarea placeholder={"Write down your comment"} className={"w-full resize-none grow"} value={commentContent}
onChange={(e) => setCommentContent(e.target.value)}/>
onChange={(e) => setCommentContent(e.target.value)} />
<div className={"flex flex-row-reverse"}>
<button onClick={sendComment}
className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
{isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : null}
Submit
</button>
</div>
</div>
<CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey}/>
<CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey} />
{maxPage && <div className={"w-full flex justify-center"}>
<Pagination page={page} setPage={setPage} totalPages={maxPage}/>
<Pagination page={page} setPage={setPage} totalPages={maxPage} />
</div>}
</div>
}
function CommentsList({resourceId, page, maxPageCallback}: {
function CommentsList({ resourceId, page, maxPageCallback }: {
resourceId: number,
page: number,
maxPageCallback: (maxPage: number) => void
@@ -461,25 +466,25 @@ function CommentsList({resourceId, page, maxPageCallback}: {
if (comments == null) {
return <div className={"w-full"}>
<Loading/>
<Loading />
</div>
}
return <>
{
comments.map((comment) => {
return <CommentTile comment={comment} key={comment.id}/>
return <CommentTile comment={comment} key={comment.id} />
})
}
</>
}
function CommentTile({comment}: { comment: Comment }) {
function CommentTile({ comment }: { comment: Comment }) {
return <div className={"card card-border border-base-300 p-2 my-3"}>
<div className={"flex flex-row items-center my-1 mx-1"}>
<div className="avatar">
<div className="w-8 rounded-full">
<img src={network.getUserAvatar(comment.user)} alt={"avatar"}/>
<img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
</div>
</div>
<div className={"w-2"}></div>

4
frontend/src/pages/search_page.tsx
View File

@@ -10,7 +10,9 @@ export default function SearchPage() {
const keyword = params.get("keyword")
useEffect(() => {}, [])
useEffect(() => {
document.title = t("Search") + ": " + (keyword || "");
}, [])
if (keyword === null || keyword === "") {
return <div role="alert" className="alert alert-info alert-dash">

18
frontend/src/pages/tagged_resources_page.tsx
View File

@@ -1,17 +1,25 @@
import {useParams} from "react-router";
import {ErrorAlert} from "../components/alert.tsx";
import { useParams } from "react-router";
import { ErrorAlert } from "../components/alert.tsx";
import ResourcesView from "../components/resources_view.tsx";
import {network} from "../network/network.ts";
import { network } from "../network/network.ts";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
export default function TaggedResourcesPage() {
const {tag} = useParams()
const { tag } = useParams()
const { t } = useTranslation();
if (!tag) {
return <div>
<ErrorAlert message={"Tag not found"}/>
<ErrorAlert message={"Tag not found"} />
</div>
}
useEffect(() => {
document.title = t("Tag: " + tag);
}, [tag])
return <div>
<h1 className={"text-2xl pt-6 pb-2 px-4 font-bold"}>
Tag: {tag}

4
frontend/src/pages/user_page.tsx
View File

@@ -28,6 +28,10 @@ export default function UserPage() {
});
}, [username]);
useEffect(() => {
document.title = username || "User";
}, [username]);
if (!user) {
return <div className="w-full">
<Loading />