diff options
Diffstat (limited to 'FrontEnd/src/app')
104 files changed, 0 insertions, 9298 deletions
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx deleted file mode 100644 index a4363ff5..00000000 --- a/FrontEnd/src/app/App.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { ReactElement } from "react"; -import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; - -import AppBar from "./views/common/AppBar"; -import LoadingPage from "./views/common/LoadingPage"; -import Center from "./views/center"; -import Home from "./views/home"; -import Login from "./views/login"; -import Settings from "./views/settings"; -import About from "./views/about"; -import User from "./views/user"; -import TimelinePage from "./views/timeline"; -import Search from "./views/search"; -import AlertHost from "./views/common/alert/AlertHost"; - -import { useRawUser } from "./services/user"; - -const NoMatch: React.FC = () => { - return <div>Ah-oh, 404!</div>; -}; - -const LazyAdmin = React.lazy( - () => import(/* webpackChunkName: "admin" */ "./views/admin/Admin") -); - -function App(): ReactElement | null { - const user = useRawUser(); - - if (user === undefined) { - return <LoadingPage />; - } else { - return ( - <React.Suspense fallback={<LoadingPage />}> - <Router> - <AppBar /> - <div style={{ height: 56 }} /> - <Switch> - <Route exact path="/"> - {user == null ? <Home /> : <Center />} - </Route> - <Route exact path="/home"> - <Home /> - </Route> - {user != null ? ( - <Route exact path="/center"> - <Center /> - </Route> - ) : null} - <Route exact path="/login"> - <Login /> - </Route> - <Route path="/settings"> - <Settings /> - </Route> - <Route path="/about"> - <About /> - </Route> - <Route path="/timelines/:name"> - <TimelinePage /> - </Route> - <Route path="/users/:username"> - <User /> - </Route> - <Route path="/search"> - <Search /> - </Route> - {user && user.hasAdministrationPermission && ( - <Route path="/admin"> - <LazyAdmin user={user} /> - </Route> - )} - <Route> - <NoMatch /> - </Route> - </Switch> - <AlertHost /> - </Router> - </React.Suspense> - ); - } -} - -export default App; diff --git a/FrontEnd/src/app/common.ts b/FrontEnd/src/app/common.ts deleted file mode 100644 index 1a4f6dda..00000000 --- a/FrontEnd/src/app/common.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { TFunction } from "i18next"; - -export type BootstrapThemeColor = - | "primary" - | "secondary" - | "success" - | "danger" - | "warning" - | "info"; - -// This error is thrown when ui goes wrong with bad logic. -// Such as a variable should not be null, but it does. -// This error should never occur. If it does, it indicates there is some logic bug in codes. -export class UiLogicError extends Error {} - -export type I18nText = - | string - | { type: "custom"; value: string } - | { type: "i18n"; value: string }; - -export function convertI18nText(text: I18nText, t: TFunction): string; -export function convertI18nText( - text: I18nText | null | undefined, - t: TFunction -): string | null; -export function convertI18nText( - text: I18nText | null | undefined, - t: TFunction -): string | null { - if (text == null) { - return null; - } else if (typeof text === "string") { - return t(text); - } else if (text.type === "i18n") { - return t(text.value); - } else { - return text.value; - } -} diff --git a/FrontEnd/src/app/http/bookmark.ts b/FrontEnd/src/app/http/bookmark.ts deleted file mode 100644 index 3e5be229..00000000 --- a/FrontEnd/src/app/http/bookmark.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { axios, apiBaseUrl, extractResponseData } from "./common"; - -import { HttpTimelineInfo } from "./timeline"; - -export interface HttpHighlightMoveRequest { - timeline: string; - newPosition: number; -} - -export interface IHttpBookmarkClient { - list(): Promise<HttpTimelineInfo[]>; - put(timeline: string): Promise<void>; - delete(timeline: string): Promise<void>; - move(req: HttpHighlightMoveRequest): Promise<void>; -} - -export class HttpHighlightClient implements IHttpBookmarkClient { - list(): Promise<HttpTimelineInfo[]> { - return axios - .get<HttpTimelineInfo[]>(`${apiBaseUrl}/bookmarks`) - .then(extractResponseData); - } - - put(timeline: string): Promise<void> { - return axios.put(`${apiBaseUrl}/bookmarks/${timeline}`).then(); - } - - delete(timeline: string): Promise<void> { - return axios.delete(`${apiBaseUrl}/bookmarks/${timeline}`).then(); - } - - move(req: HttpHighlightMoveRequest): Promise<void> { - return axios.post(`${apiBaseUrl}/bookmarkop/move`, req).then(); - } -} - -let client: IHttpBookmarkClient = new HttpHighlightClient(); - -export function getHttpBookmarkClient(): IHttpBookmarkClient { - return client; -} - -export function setHttpBookmarkClient( - newClient: IHttpBookmarkClient -): IHttpBookmarkClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/http/common.ts b/FrontEnd/src/app/http/common.ts deleted file mode 100644 index e1672985..00000000 --- a/FrontEnd/src/app/http/common.ts +++ /dev/null @@ -1,214 +0,0 @@ -import rawAxios, { AxiosError, AxiosResponse } from "axios"; -import { Base64 } from "js-base64"; -import { BehaviorSubject, Observable } from "rxjs"; - -export const apiBaseUrl = "/api"; - -export const axios = rawAxios.create(); - -function convertToNetworkError(error: AxiosError): never { - if (error.isAxiosError && error.response == null) { - throw new HttpNetworkError(error); - } else { - throw error; - } -} - -function convertToForbiddenError(error: AxiosError): never { - if ( - error.isAxiosError && - error.response != null && - (error.response.status == 401 || error.response.status == 403) - ) { - throw new HttpForbiddenError(error); - } else { - throw error; - } -} - -function convertToNotFoundError(error: AxiosError): never { - if ( - error.isAxiosError && - error.response != null && - error.response.status == 404 - ) { - throw new HttpNotFoundError(error); - } else { - throw error; - } -} - -rawAxios.interceptors.response.use(undefined, convertToNetworkError); -rawAxios.interceptors.response.use(undefined, convertToForbiddenError); -rawAxios.interceptors.response.use(undefined, convertToNotFoundError); -axios.interceptors.response.use(undefined, convertToNetworkError); -axios.interceptors.response.use(undefined, convertToForbiddenError); -axios.interceptors.response.use(undefined, convertToNotFoundError); - -const tokenSubject = new BehaviorSubject<string | null>(null); - -export function getHttpToken(): string | null { - return tokenSubject.value; -} - -export function setHttpToken(token: string | null): void { - tokenSubject.next(token); - - if (token == null) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - delete axios.defaults.headers.common["Authorization"]; - } else { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - axios.defaults.headers.common["Authorization"] = `Bearer ${token}`; - } -} - -export const token$: Observable<string | null> = tokenSubject.asObservable(); - -export function base64(blob: Blob | string): Promise<string> { - if (typeof blob === "string") { - return Promise.resolve(Base64.encode(blob)); - } - - return new Promise<string>((resolve) => { - const reader = new FileReader(); - reader.onload = function () { - resolve((reader.result as string).replace(/^data:.*;base64,/, "")); - }; - reader.readAsDataURL(blob); - }); -} - -export function extractStatusCode(error: AxiosError): number | null { - if (error.isAxiosError) { - const code = error?.response?.status; - if (typeof code === "number") { - return code; - } - } - return null; -} - -export interface CommonErrorResponse { - code: number; - message: string; -} - -export function extractErrorCode( - error: AxiosError<CommonErrorResponse> -): number | null { - if (error.isAxiosError) { - const code = error.response?.data?.code; - if (typeof code === "number") { - return code; - } - } - return null; -} - -export class HttpNetworkError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class HttpForbiddenError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class HttpNotFoundError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class NotModified {} - -export interface BlobWithEtag { - data: Blob; - etag: string; -} - -export function extractResponseData<T>(res: AxiosResponse<T>): T { - return res.data; -} - -export function catchIfStatusCodeIs< - TResult, - TErrorHandlerResult extends TResult | PromiseLike<TResult> | null | undefined ->( - statusCode: number, - errorHandler: (error: AxiosError<CommonErrorResponse>) => TErrorHandlerResult -): (error: AxiosError<CommonErrorResponse>) => TErrorHandlerResult { - return (error: AxiosError<CommonErrorResponse>) => { - if (extractStatusCode(error) == statusCode) { - return errorHandler(error); - } else { - throw error; - } - }; -} - -export function convertToIfStatusCodeIs<NewError>( - statusCode: number, - newErrorType: { - new (innerError: AxiosError): NewError; - } -): (error: AxiosError<CommonErrorResponse>) => never { - return catchIfStatusCodeIs(statusCode, (error) => { - throw new newErrorType(error); - }); -} - -export function catchIfErrorCodeIs< - TResult, - TErrorHandlerResult extends TResult | PromiseLike<TResult> | null | undefined ->( - errorCode: number, - errorHandler: (error: AxiosError<CommonErrorResponse>) => TErrorHandlerResult -): (error: AxiosError<CommonErrorResponse>) => TErrorHandlerResult { - return (error: AxiosError<CommonErrorResponse>) => { - if (extractErrorCode(error) == errorCode) { - return errorHandler(error); - } else { - throw error; - } - }; -} -export function convertToIfErrorCodeIs<NewError>( - errorCode: number, - newErrorType: { - new (innerError: AxiosError): NewError; - } -): (error: AxiosError<CommonErrorResponse>) => never { - return catchIfErrorCodeIs(errorCode, (error) => { - throw new newErrorType(error); - }); -} - -export function convertToNotModified( - error: AxiosError<CommonErrorResponse> -): NotModified { - if ( - error.isAxiosError && - error.response != null && - error.response.status == 304 - ) { - return new NotModified(); - } else { - throw error; - } -} - -export function convertToBlobWithEtag(res: AxiosResponse<Blob>): BlobWithEtag { - return { - data: res.data, - etag: (res.headers as Record<"etag", string>)["etag"], - }; -} - -export function extractEtag(res: AxiosResponse): string { - return (res.headers as Record<"etag", string>)["etag"]; -} diff --git a/FrontEnd/src/app/http/highlight.ts b/FrontEnd/src/app/http/highlight.ts deleted file mode 100644 index fddf0729..00000000 --- a/FrontEnd/src/app/http/highlight.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { axios, apiBaseUrl, extractResponseData } from "./common"; - -import { HttpTimelineInfo } from "./timeline"; - -export interface HttpHighlightMoveRequest { - timeline: string; - newPosition: number; -} - -export interface IHttpHighlightClient { - list(): Promise<HttpTimelineInfo[]>; - put(timeline: string): Promise<void>; - delete(timeline: string): Promise<void>; - move(req: HttpHighlightMoveRequest): Promise<void>; -} - -export class HttpHighlightClient implements IHttpHighlightClient { - list(): Promise<HttpTimelineInfo[]> { - return axios - .get<HttpTimelineInfo[]>(`${apiBaseUrl}/highlights`) - .then(extractResponseData); - } - - put(timeline: string): Promise<void> { - return axios.put(`${apiBaseUrl}/highlights/${timeline}`).then(); - } - - delete(timeline: string): Promise<void> { - return axios.delete(`${apiBaseUrl}/highlights/${timeline}`).then(); - } - - move(req: HttpHighlightMoveRequest): Promise<void> { - return axios.post(`${apiBaseUrl}/highlightop/move`, req).then(); - } -} - -let client: IHttpHighlightClient = new HttpHighlightClient(); - -export function getHttpHighlightClient(): IHttpHighlightClient { - return client; -} - -export function setHttpHighlightClient( - newClient: IHttpHighlightClient -): IHttpHighlightClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/http/search.ts b/FrontEnd/src/app/http/search.ts deleted file mode 100644 index 8ca48fe9..00000000 --- a/FrontEnd/src/app/http/search.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { apiBaseUrl, axios, extractResponseData } from "./common"; -import { HttpTimelineInfo } from "./timeline"; -import { HttpUser } from "./user"; - -export interface IHttpSearchClient { - searchTimelines(query: string): Promise<HttpTimelineInfo[]>; - searchUsers(query: string): Promise<HttpUser[]>; -} - -export class HttpSearchClient implements IHttpSearchClient { - searchTimelines(query: string): Promise<HttpTimelineInfo[]> { - return axios - .get<HttpTimelineInfo[]>(`${apiBaseUrl}/search/timelines?q=${query}`) - .then(extractResponseData); - } - - searchUsers(query: string): Promise<HttpUser[]> { - return axios - .get<HttpUser[]>(`${apiBaseUrl}/search/users?q=${query}`) - .then(extractResponseData); - } -} - -let client: IHttpSearchClient = new HttpSearchClient(); - -export function getHttpSearchClient(): IHttpSearchClient { - return client; -} - -export function setHttpSearchClient( - newClient: IHttpSearchClient -): IHttpSearchClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/http/timeline.ts b/FrontEnd/src/app/http/timeline.ts deleted file mode 100644 index 9697c1a0..00000000 --- a/FrontEnd/src/app/http/timeline.ts +++ /dev/null @@ -1,234 +0,0 @@ -import { AxiosError } from "axios"; - -import { applyQueryParameters } from "../utilities/url"; - -import { - axios, - apiBaseUrl, - extractResponseData, - convertToIfErrorCodeIs, - getHttpToken, -} from "./common"; -import { HttpUser } from "./user"; - -export const kTimelineVisibilities = ["Public", "Register", "Private"] as const; - -export type TimelineVisibility = typeof kTimelineVisibilities[number]; - -export interface HttpTimelineInfo { - uniqueId: string; - title: string; - name: string; - description: string; - owner: HttpUser; - visibility: TimelineVisibility; - color: string; - lastModified: string; - members: HttpUser[]; - isHighlight: boolean; - isBookmark: boolean; - manageable: boolean; - postable: boolean; -} - -export interface HttpTimelineListQuery { - visibility?: TimelineVisibility; - relate?: string; - relateType?: "own" | "join"; -} - -export interface HttpTimelinePostRequest { - name: string; -} - -export interface HttpTimelinePostDataDigest { - kind: string; - eTag: string; - lastUpdated: string; -} - -export interface HttpTimelinePostInfo { - id: number; - time: string; - author: HttpUser; - dataList: HttpTimelinePostDataDigest[]; - color: string; - lastUpdated: string; - timelineName: string; - editable: boolean; -} - -export interface HttpTimelinePostPostRequestData { - contentType: string; - data: string; -} - -export interface HttpTimelinePostPostRequest { - time?: string; - color?: string; - dataList: HttpTimelinePostPostRequestData[]; -} - -export interface HttpTimelinePatchRequest { - name?: string; - title?: string; - color?: string; - visibility?: TimelineVisibility; - description?: string; -} - -export interface HttpTimelinePostPatchRequest { - time?: string; - color?: string; -} - -export class HttpTimelineNameConflictError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export interface IHttpTimelineClient { - listTimeline(query: HttpTimelineListQuery): Promise<HttpTimelineInfo[]>; - getTimeline(timelineName: string): Promise<HttpTimelineInfo>; - postTimeline(req: HttpTimelinePostRequest): Promise<HttpTimelineInfo>; - patchTimeline( - timelineName: string, - req: HttpTimelinePatchRequest - ): Promise<HttpTimelineInfo>; - deleteTimeline(timelineName: string): Promise<void>; - memberPut(timelineName: string, username: string): Promise<void>; - memberDelete(timelineName: string, username: string): Promise<void>; - listPost(timelineName: string): Promise<HttpTimelinePostInfo[]>; - generatePostDataUrl(timelineName: string, postId: number): string; - getPostDataAsString(timelineName: string, postId: number): Promise<string>; - postPost( - timelineName: string, - req: HttpTimelinePostPostRequest - ): Promise<HttpTimelinePostInfo>; - patchPost( - timelineName: string, - postId: number, - req: HttpTimelinePostPatchRequest - ): Promise<HttpTimelinePostInfo>; - deletePost(timelineName: string, postId: number): Promise<void>; -} - -export class HttpTimelineClient implements IHttpTimelineClient { - listTimeline(query: HttpTimelineListQuery): Promise<HttpTimelineInfo[]> { - return axios - .get<HttpTimelineInfo[]>( - applyQueryParameters(`${apiBaseUrl}/timelines`, query) - ) - .then(extractResponseData); - } - - getTimeline(timelineName: string): Promise<HttpTimelineInfo> { - return axios - .get<HttpTimelineInfo>(`${apiBaseUrl}/timelines/${timelineName}`) - .then(extractResponseData); - } - - postTimeline(req: HttpTimelinePostRequest): Promise<HttpTimelineInfo> { - return axios - .post<HttpTimelineInfo>(`${apiBaseUrl}/timelines`, req) - .then(extractResponseData) - .catch(convertToIfErrorCodeIs(11040101, HttpTimelineNameConflictError)); - } - - patchTimeline( - timelineName: string, - req: HttpTimelinePatchRequest - ): Promise<HttpTimelineInfo> { - return axios - .patch<HttpTimelineInfo>(`${apiBaseUrl}/timelines/${timelineName}`, req) - .then(extractResponseData); - } - - deleteTimeline(timelineName: string): Promise<void> { - return axios.delete(`${apiBaseUrl}/timelines/${timelineName}`).then(); - } - - memberPut(timelineName: string, username: string): Promise<void> { - return axios - .put(`${apiBaseUrl}/timelines/${timelineName}/members/${username}`) - .then(); - } - - memberDelete(timelineName: string, username: string): Promise<void> { - return axios - .delete(`${apiBaseUrl}/timelines/${timelineName}/members/${username}`) - .then(); - } - - listPost(timelineName: string): Promise<HttpTimelinePostInfo[]> { - return axios - .get<HttpTimelinePostInfo[]>( - `${apiBaseUrl}/timelines/${timelineName}/posts` - ) - .then(extractResponseData); - } - - generatePostDataUrl(timelineName: string, postId: number): string { - return applyQueryParameters( - `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}/data`, - { token: getHttpToken() } - ); - } - - getPostDataAsString(timelineName: string, postId: number): Promise<string> { - return axios - .get<string>( - `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}/data`, - { - responseType: "text", - } - ) - .then(extractResponseData); - } - - postPost( - timelineName: string, - req: HttpTimelinePostPostRequest - ): Promise<HttpTimelinePostInfo> { - return axios - .post<HttpTimelinePostInfo>( - `${apiBaseUrl}/timelines/${timelineName}/posts`, - req - ) - .then(extractResponseData); - } - - patchPost( - timelineName: string, - postId: number, - req: HttpTimelinePostPatchRequest - ): Promise<HttpTimelinePostInfo> { - return axios - .patch<HttpTimelinePostInfo>( - `${apiBaseUrl}/timelines/${timelineName}/posts/${postId}`, - req - ) - .then(extractResponseData); - } - - deletePost(timelineName: string, postId: number): Promise<void> { - return axios - .delete(`${apiBaseUrl}/timelines/${timelineName}/posts/${postId}`) - .then(); - } -} - -let client: IHttpTimelineClient = new HttpTimelineClient(); - -export function getHttpTimelineClient(): IHttpTimelineClient { - return client; -} - -export function setHttpTimelineClient( - newClient: IHttpTimelineClient -): IHttpTimelineClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/http/token.ts b/FrontEnd/src/app/http/token.ts deleted file mode 100644 index f8b09d63..00000000 --- a/FrontEnd/src/app/http/token.ts +++ /dev/null @@ -1,71 +0,0 @@ -// Don't use axios in common because it will contains -// authorization header, which shouldn't be used in token apis. -import axios, { AxiosError } from "axios"; - -import { - apiBaseUrl, - convertToIfErrorCodeIs, - extractResponseData, -} from "./common"; -import { HttpUser } from "./user"; - -export interface HttpCreateTokenRequest { - username: string; - password: string; - expire: number; -} - -export interface HttpCreateTokenResponse { - token: string; - user: HttpUser; -} - -export interface HttpVerifyTokenRequest { - token: string; -} - -export interface HttpVerifyTokenResponse { - user: HttpUser; -} - -export class HttpCreateTokenBadCredentialError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export interface IHttpTokenClient { - create(req: HttpCreateTokenRequest): Promise<HttpCreateTokenResponse>; - verify(req: HttpVerifyTokenRequest): Promise<HttpVerifyTokenResponse>; -} - -export class HttpTokenClient implements IHttpTokenClient { - create(req: HttpCreateTokenRequest): Promise<HttpCreateTokenResponse> { - return axios - .post<HttpCreateTokenResponse>(`${apiBaseUrl}/token/create`, req) - .then(extractResponseData) - .catch( - convertToIfErrorCodeIs(11010101, HttpCreateTokenBadCredentialError) - ); - } - - verify(req: HttpVerifyTokenRequest): Promise<HttpVerifyTokenResponse> { - return axios - .post<HttpVerifyTokenResponse>(`${apiBaseUrl}/token/verify`, req) - .then(extractResponseData); - } -} - -let client: IHttpTokenClient = new HttpTokenClient(); - -export function getHttpTokenClient(): IHttpTokenClient { - return client; -} - -export function setHttpTokenClient( - newClient: IHttpTokenClient -): IHttpTokenClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts deleted file mode 100644 index dcf24cba..00000000 --- a/FrontEnd/src/app/http/user.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { AxiosError } from "axios"; - -import { - axios, - apiBaseUrl, - extractResponseData, - convertToIfStatusCodeIs, - convertToIfErrorCodeIs, - extractEtag, -} from "./common"; - -export const kUserManagement = "UserManagement"; -export const kAllTimelineManagement = "AllTimelineManagement"; -export const kHighlightTimelineManagement = "HighlightTimelineManagement"; - -export const kUserPermissionList = [ - kUserManagement, - kAllTimelineManagement, - kHighlightTimelineManagement, -] as const; - -export type UserPermission = typeof kUserPermissionList[number]; - -export interface HttpUser { - uniqueId: string; - username: string; - permissions: UserPermission[]; - nickname: string; -} - -export interface HttpUserPatchRequest { - username?: string; - password?: string; - nickname?: string; -} - -export interface HttpChangePasswordRequest { - oldPassword: string; - newPassword: string; -} - -export interface HttpCreateUserRequest { - username: string; - password: string; -} - -export class HttpUserNotExistError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class HttpChangePasswordBadCredentialError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export interface IHttpUserClient { - list(): Promise<HttpUser[]>; - get(username: string): Promise<HttpUser>; - post(req: HttpCreateUserRequest): Promise<HttpUser>; - patch(username: string, req: HttpUserPatchRequest): Promise<HttpUser>; - delete(username: string): Promise<void>; - generateAvatarUrl(username: string): string; - putAvatar(username: string, data: Blob): Promise<string>; - changePassword(req: HttpChangePasswordRequest): Promise<void>; - putUserPermission( - username: string, - permission: UserPermission - ): Promise<void>; - deleteUserPermission( - username: string, - permission: UserPermission - ): Promise<void>; -} - -export class HttpUserClient implements IHttpUserClient { - list(): Promise<HttpUser[]> { - return axios - .get<HttpUser[]>(`${apiBaseUrl}/users`) - .then(extractResponseData); - } - - get(username: string): Promise<HttpUser> { - return axios - .get<HttpUser>(`${apiBaseUrl}/users/${username}`) - .then(extractResponseData) - .catch(convertToIfStatusCodeIs(404, HttpUserNotExistError)); - } - - post(req: HttpCreateUserRequest): Promise<HttpUser> { - return axios - .post<HttpUser>(`${apiBaseUrl}/users`, req) - .then(extractResponseData) - .then(); - } - - patch(username: string, req: HttpUserPatchRequest): Promise<HttpUser> { - return axios - .patch<HttpUser>(`${apiBaseUrl}/users/${username}`, req) - .then(extractResponseData); - } - - delete(username: string): Promise<void> { - return axios.delete(`${apiBaseUrl}/users/${username}`).then(); - } - - generateAvatarUrl(username: string): string { - return `${apiBaseUrl}/users/${username}/avatar`; - } - - putAvatar(username: string, data: Blob): Promise<string> { - return axios - .put(`${apiBaseUrl}/users/${username}/avatar`, data, { - headers: { - "Content-Type": data.type, - }, - }) - .then(extractEtag); - } - - changePassword(req: HttpChangePasswordRequest): Promise<void> { - return axios - .post(`${apiBaseUrl}/userop/changepassword`, req) - .catch( - convertToIfErrorCodeIs(11020201, HttpChangePasswordBadCredentialError) - ) - .then(); - } - - putUserPermission( - username: string, - permission: UserPermission - ): Promise<void> { - return axios - .put(`${apiBaseUrl}/users/${username}/permissions/${permission}`) - .then(); - } - - deleteUserPermission( - username: string, - permission: UserPermission - ): Promise<void> { - return axios - .delete(`${apiBaseUrl}/users/${username}/permissions/${permission}`) - .then(); - } -} - -let client: IHttpUserClient = new HttpUserClient(); - -export function getHttpUserClient(): IHttpUserClient { - return client; -} - -export function setHttpUserClient(newClient: IHttpUserClient): IHttpUserClient { - const old = client; - client = newClient; - return old; -} diff --git a/FrontEnd/src/app/i18n.ts b/FrontEnd/src/app/i18n.ts deleted file mode 100644 index 5b8e9d41..00000000 --- a/FrontEnd/src/app/i18n.ts +++ /dev/null @@ -1,88 +0,0 @@ -import i18n, { BackendModule, ResourceKey } from "i18next"; -import LanguageDetector from "i18next-browser-languagedetector"; -import { initReactI18next } from "react-i18next"; - -const backend: BackendModule = { - type: "backend", - async read(language, namespace, callback) { - function error(message: string): void { - callback(new Error(message), false); - } - - function success(result: ResourceKey): void { - callback(null, result); - } - - const promise = (() => { - if (namespace === "translation") { - if (language === "en") { - return import("./locales/en/translation.json"); - } else if (language === "zh") { - return import("./locales/zh/translation.json"); - } else { - error(`Language ${language} is not supported.`); - } - } else if (namespace === "admin") { - if (language === "en") { - return import("./locales/en/admin.json"); - } else if (language === "zh") { - return import("./locales/zh/admin.json"); - } else { - error(`Language ${language} is not supported.`); - } - } else { - error(`Namespace ${namespace} is not supported.`); - } - })(); - - if (promise) { - success((await promise).default); - } - }, - init() {}, // eslint-disable-line @typescript-eslint/no-empty-function - create() {}, // eslint-disable-line @typescript-eslint/no-empty-function -}; - -export const i18nPromise = i18n - .use(LanguageDetector) - .use(backend) - .use(initReactI18next) // bind react-i18next to the instance - .init({ - fallbackLng: false, - lowerCaseLng: true, - - debug: process.env.NODE_ENV === "development", - - interpolation: { - escapeValue: false, // not needed for react!! - }, - - // react i18next special options (optional) - // override if needed - omit if ok with defaults - /* - react: { - bindI18n: 'languageChanged', - bindI18nStore: '', - transEmptyNodeValue: '', - transSupportBasicHtmlNodes: true, - transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'], - useSuspense: true, - } - */ - }); - -if (module.hot) { - module.hot.accept( - [ - "./locales/en/translation.json", - "./locales/zh/translation.json", - "./locales/en/admin.json", - "./locales/zh/admin.json", - ], - () => { - void i18n.reloadResources(); - } - ); -} - -export default i18n; diff --git a/FrontEnd/src/app/index.ejs b/FrontEnd/src/app/index.ejs deleted file mode 100644 index c2ff4182..00000000 --- a/FrontEnd/src/app/index.ejs +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-
- <link rel="icon" href="/favicon.ico" />
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
- <link rel="manifest" href="/site.webmanifest" />
- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
- <meta name="msapplication-TileColor" content="#2d89ef" />
- <meta name="theme-color" content="#ffffff" />
-
- <title><%= htmlWebpackPlugin.options.title %></title>
- </head>
- <body>
- <noscript>
- <strong>
- We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
- properly without JavaScript enabled. Please enable it to continue.
- </strong>
- </noscript>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
-</html>
diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass deleted file mode 100644 index 4cee155f..00000000 --- a/FrontEnd/src/app/index.sass +++ /dev/null @@ -1,120 +0,0 @@ -@import 'bootstrap/scss/bootstrap'
-@import 'bootstrap-icons/font/bootstrap-icons.css'
-
-@import './views/common/common'
-@import './views/common/alert/alert'
-@import './views/center/center'
-@import './views/home/home'
-@import './views/about/about'
-@import './views/login/login'
-@import './views/settings/settings'
-@import './views/timeline-common/timeline-common'
-@import './views/timeline/timeline'
-@import './views/user/user'
-@import './views/search/search'
-
-@import './views/admin/admin'
-
-.tl-color-primary
- color: var(--tl-primary-color)
-
-.tl-color-danger
- color: var(--tl-danger-color)
-
-small
- line-height: 1.2
-
-.flex-fix-length
- flex-grow: 0
- flex-shrink: 0
-
-.position-lt
- left: 0
- top: 0
-
-.avatar
- width: 60px
- height: 60px
- &.large
- width: 100px
- height: 100px
- &.small
- width: 40px
- height: 40px
-
-.icon-button
- font-size: 1.4rem
- cursor: pointer
- &.large
- font-size: 1.6rem
-
-.flat-button
- cursor: pointer
- padding: 0.2em 0.5em
- border-radius: 0.2em
- &:hover:not(.disabled)
- background-color: $gray-200
- &.disabled
- cursor: default
- @each $color, $value in $theme-colors
- &.#{$color}
- color: $value
- &.disabled
- color: adjust-color($value, $lightness: +15%)
-
-.cursor-pointer
- cursor: pointer
-
-textarea
- resize: none
-
-.white-space-no-wrap
- white-space: nowrap
-
-.cru-card
- @extend .shadow
- @extend .rounded
- border: 1px solid
- border-color: $gray-200
- background: $gray-100
- transition: all 0.3s
- &:hover
- border-color: var(--tl-primary-color)
-
-.full-viewport-center-child
- position: fixed
- width: 100vw
- height: 100vh
- display: flex
- justify-content: center
- align-items: center
-
-.text-orange
- color: $orange
-
-.text-yellow
- color: $yellow
-
-.text-button
- background: transparent
- border: none
- @each $color, $value in $theme-colors
- &.#{$color}
- color: $value
- &:hover
- color: adjust-color($value, $lightness: +15%)
-
-.touch-action-none
- touch-action: none
-
-i
- line-height: 1
-
-.markdown-container
- white-space: initial
- img
- max-height: 200px
- max-width: 100%
-
-a
- text-decoration: none
diff --git a/FrontEnd/src/app/index.tsx b/FrontEnd/src/app/index.tsx deleted file mode 100644 index fb0c8899..00000000 --- a/FrontEnd/src/app/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import "regenerator-runtime"; -import "core-js/modules/es.promise"; -import "core-js/modules/es.array.iterator"; -import "pepjs"; - -import React from "react"; -import ReactDOM from "react-dom"; - -import "./index.sass"; - -import "./i18n"; - -import App from "./App"; - -import "./palette"; - -import { userService } from "./services/user"; - -void userService.checkLoginState(); - -ReactDOM.render(<App />, document.getElementById("app")); diff --git a/FrontEnd/src/app/locales/en/admin.json b/FrontEnd/src/app/locales/en/admin.json deleted file mode 100644 index ddb3ffad..00000000 --- a/FrontEnd/src/app/locales/en/admin.json +++ /dev/null @@ -1,35 +0,0 @@ -{
- "nav": {
- "users": "Users",
- "more": "More"
- },
- "create": "Create",
- "user": {
- "username": "Username: ",
- "password": "Password: ",
- "nickname": "Nickname: ",
- "uniqueId": "Unique ID: ",
- "permissions": "Permissions: ",
- "modify": "Modify",
- "modifyPermissions": "Modify Permissions",
- "delete": "Delete",
- "dialog": {
- "create": {
- "title": "Create User",
- "prompt": "You are creating a new user."
- },
- "delete": {
- "title": "Delete user",
- "prompt": "You are deleting <1>username</1> . Caution: This can't be undo."
- },
- "modify": {
- "title": "Modify User",
- "prompt": "You are modifying user <1>username</1> ."
- },
- "modifyPermissions": {
- "title": "Modify User Permissions",
- "prompt": "You are modifying permissions of user <1>username</1> ."
- }
- }
- }
-}
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json deleted file mode 100644 index a2766b4e..00000000 --- a/FrontEnd/src/app/locales/en/translation.json +++ /dev/null @@ -1,224 +0,0 @@ -{ - "welcome": "Welcome!", - "search": "Search", - "edit": "Edit", - "image": "Image", - "done": "Done", - "preview": "Preview", - "delete": "Delete", - "changeProperty": "Change Property", - "loadFailReload": "Load failed, <1>click here to reload</1>.", - "error": { - "network": "Network error.", - "unknown": "Unknown error." - }, - "connectionState": { - "Connected": "Connected", - "Connecting": "Connecting", - "Disconnected": "Disconnected", - "Disconnecting": "Disconnecting", - "Reconnecting": "Reconnecting" - }, - "serviceWorker": { - "availableOffline": "Timeline is now cached in your computer and you can use it offline. 🎉🎉🎉", - "upgradePrompt": "App is getting a new version!", - "upgradeNow": "Update Now", - "upgradeSuccess": "Congratulations! App update succeeded! Still you can use it offline. 🎉🎉🎉", - "externalActivatedPrompt": "A new version of app is activated. Please refresh the page. Or it may be broken.", - "reloadNow": "Refresh Now" - }, - "nav": { - "settings": "Settings", - "login": "Login", - "about": "About", - "administration": "Administration" - }, - "chooseImage": "Choose a image", - "loadImageError": "Failed to load image.", - "home": { - "loadingHighlightTimelines": "Loading highlight timelines...", - "loadedHighlightTimelines": "Here are some highlight timelines💡", - "errorHighlightTimelines": "Failed to load highlight timelines, please try reloading!", - "bookmarkTimeline": "Bookmark Timelines", - "highlightTimeline": "Highlight Timelines", - "relatedTimeline": "Timelines You Participate", - "message": { - "moveHighlightFail": "Failed to move highlight timeline.", - "deleteHighlightFail": "Failed to delete highlight timeline.", - "moveBookmarkFail": "Failed to move bookmark timeline.", - "deleteBookmarkFail": "Failed to delete bookmark timeline." - }, - "createButton": "Create Timeline", - "createDialog": { - "title": "Create Timeline!", - "name": "Name", - "nameFormat": "Name must consist of only letter including non-English letter, digit, hyphen(-) and underline(_) and be no longer than 26.", - "badFormat": "Bad format.", - "noEmpty": "Empty is not allowed.", - "tooLong": "Too long." - } - }, - "operationDialog": { - "retry": "Retry", - "nextStep": "Next", - "previousStep": "Previous", - "confirm": "Confirm", - "cancel": "Cancel", - "ok": "OK!", - "processing": "Processing...", - "success": "Success!", - "error": "An error occured." - }, - "timeline": { - "messageCantSee": "Sorry, you are not allowed to see this timeline.😅", - "userNotExist": "The user does not exist!", - "timelineNotExist": "The timeline does not exist!", - "manage": "Manage", - "memberButton": "Member", - "send": "Send", - "deletePostFailed": "Failed to delete post.", - "sendPostFailed": "Failed to send post.", - "dropDraft": "Drop Draft", - "confirmLeave": "Are you sure to leave? All content you typed would be lost.", - "visibility": { - "public": "public to everyone", - "register": "only registed people can see", - "private": "only members can see" - }, - "visibilityTooltip": { - "public": "Everyone including those without accounts can see content of the timeline.", - "register": "Only those who have an account and logined can see content of the timeline.", - "private": "Only members of this timeline can see content of the timeline." - }, - "dialogChangeProperty": { - "title": "Change Timeline Properties", - "titleField": "Title", - "visibility": "Visibility", - "description": "Description", - "color": "Color" - }, - "changePostPropertyDialog": { - "title": "Change Post Properties", - "time": "Date and time", - "timeEmpty": "You must select a time." - }, - "member": { - "noUserAvailableToAdd": "Sorry, no user available to be a member in search result.", - "add": "Add", - "remove": "Remove" - }, - "manageItem": { - "nickname": "Nickname", - "avatar": "Avatar", - "property": "Timeline Property", - "member": "Timeline Member", - "delete": "Delete Timeline" - }, - "deleteDialog": { - "title": "Delete Timeline", - "inputPrompt": "This is a dangerous action. If you are sure to delete timeline<1>{{name}}</1>, please input its name below and click confirm button.", - "notMatch": "Name does not match." - }, - "post": { - "type": { - "text": "Plain Text", - "markdown": "Markdown", - "image": "Image" - }, - "deleteDialog": { - "title": "Confirm Delete", - "prompt": "Are you sure to delete the post? This operation is not recoverable." - } - }, - "addHighlightFail": "Failed to add highlight.", - "removeHighlightFail": "Failed to remove highlight.", - "addBookmarkFail": "Failed to add bookmark.", - "removeBookmarkFail": "Failed to remove bookmark." - }, - "searchPage": { - "loading": "Loading search result...", - "input": "Input something and search!", - "noResult": "Sorry, there is no satisfied results." - }, - "user": { - "username": "username", - "password": "password", - "login": "login", - "rememberMe": "Remember Me", - "welcomeBack": "Welcome back!", - "verifyTokenFailed": "User login info is expired. Please login again!", - "verifyTokenFailedNetwork": "Verifying user login info failed. Please check your network and refresh page!" - }, - "login": { - "emptyUsername": "Username can't be empty.", - "emptyPassword": "Password can't be empty.", - "badCredential": "Username or password is invalid.", - "alreadyLogin": "Already login! Redirect to home page in 3s!" - }, - "settings": { - "subheaders": { - "account": "Account", - "customization": "Customization" - }, - "languagePrimary": "Choose display language.", - "languageSecondary": "You language preference will be saved locally. Next time you visit this page, last language option will be used.", - "changePassword": "Change account's password.", - "logout": "Log out this account.", - "changeAvatar": "Change avatar.", - "changeNickname": "Change nickname.", - "dialogChangePassword": { - "title": "Change Password", - "prompt": "You are changing your password. You need to input the correct old password. After change, you need to login again and all old login will be invalid.", - "inputOldPassword": "Old password", - "inputNewPassword": "New password", - "inputRetypeNewPassword": "Retype new password", - "errorEmptyOldPassword": "Old password can't be empty.", - "errorEmptyNewPassword": "New password can't be empty.", - "errorRetypeNotMatch": "Password retyped does not match." - }, - "dialogConfirmLogout": { - "title": "Confirm Logout", - "prompt": "Are you sure to log out? All cached data in the browser will be deleted." - }, - "dialogChangeNickname": { - "title": "Change Nickname", - "inputLabel": "New nickname" - }, - "dialogChangeAvatar": { - "title": "Change Avatar", - "previewImgAlt": "preview", - "prompt": { - "select": "Please select a picture.", - "crop": "Please crop the picture.", - "processingCrop": "Cropping picture...", - "uploading": "Uploading...", - "preview": "Please preview avatar" - }, - "upload": "upload" - } - }, - "about": { - "author": { - "title": "Site Developer", - "fullname": "Fullname: ", - "nickname": "Nickname: ", - "introduction": "Introduction: ", - "introductionContent": "A programmer coding based on coincidence", - "links": "Links: " - }, - "site": { - "title": "Site Information", - "content": "The name of this site is <1>Timeline</1>, which is a Web App with <3>timeline</3> as its core concept. Its frontend and backend are both developed by <5>me</5>, and open source on GitHub. It is relatively easy to deploy it on your own server, which is also one of my goals. Welcome to comment anything in GitHub repository.", - "repo": "GitHub Repo" - }, - "credits": { - "title": "Credits", - "content": "Timeline is works standing on shoulders of gaints. Special appreciation for many open source projects listed below or not. Related licenses could be found in GitHub repository.", - "frontend": "Frontend: ", - "backend": "Backend: " - } - }, - "admin": { - "title": "admin" - } -} diff --git a/FrontEnd/src/app/locales/zh/admin.json b/FrontEnd/src/app/locales/zh/admin.json deleted file mode 100644 index edd1cabd..00000000 --- a/FrontEnd/src/app/locales/zh/admin.json +++ /dev/null @@ -1,35 +0,0 @@ -{
- "nav": {
- "users": "用户",
- "more": "更多"
- },
- "create": "创建",
- "user": {
- "username": "用户名：",
- "password": "密码：",
- "nickname": "昵称：",
- "uniqueId": "唯一ID：",
- "permissions": "权限：",
- "modify": "修改",
- "modifyPermissions": "修改权限",
- "delete": "删除",
- "dialog": {
- "create": {
- "title": "创建用户",
- "prompt": "您正在创建一个新用户。"
- },
- "delete": {
- "title": "删除用户",
- "prompt": "您正在删除用户 <1>username</1> 。注意：此操作不可撤销。"
- },
- "modify": {
- "title": "修改用户",
- "prompt": "您正在修改用户 <1>username</1> 。"
- },
- "modifyPermissions": {
- "title": "修改用户权限",
- "prompt": "您正在修改用户 <1>username</1> 的权限。"
- }
- }
- }
-}
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json deleted file mode 100644 index 5a5a6843..00000000 --- a/FrontEnd/src/app/locales/zh/translation.json +++ /dev/null @@ -1,224 +0,0 @@ -{ - "welcome": "欢迎！", - "search": "搜索", - "edit": "编辑", - "image": "图片", - "done": "完成", - "preview": "预览", - "loadFailReload": "加载失败，<1>点击重试</1>。", - "delete": "删除", - "changeProperty": "修改属性", - "error": { - "network": "网络错误。", - "unknown": "未知错误。" - }, - "connectionState": { - "Connected": "已连接", - "Connecting": "正在连接", - "Disconnected": "已断开连接", - "Disconnecting": "正在断开连接", - "Reconnecting": "正在重新连接" - }, - "serviceWorker": { - "availableOffline": "Timeline 已经缓存在本地，你可以离线使用它。🎉🎉🎉", - "upgradePrompt": "App 有新版本！", - "upgradeNow": "现在升级", - "upgradeSuccess": "App 升级成功，当然，你仍可以离线使用它。 🎉🎉🎉", - "externalActivatedPrompt": "一个新的 App 版本已经激活，请刷新页面使用，否则页面可能会出现故障。", - "reloadNow": "立刻刷新" - }, - "nav": { - "settings": "设置", - "login": "登陆", - "about": "关于", - "administration": "管理" - }, - "chooseImage": "选择一个图片", - "loadImageError": "加载图片失败", - "home": { - "loadingHighlightTimelines": "正在加载高光时间线...", - "loadedHighlightTimelines": "康康以下这些高光时间线💡", - "errorHighlightTimelines": "加载高光时间线失败，刷新试试！", - "bookmarkTimeline": "书签时间线", - "highlightTimeline": "高光时间线", - "relatedTimeline": "参与的时间线", - "message": { - "moveHighlightFail": "移动高光时间线失败。", - "deleteHighlightFail": "删除高光时间线失败。", - "moveBookmarkFail": "移动书签时间线失败。", - "deleteBookmarkFail": "删除书签时间线失败。" - }, - "createButton": "创建时间线", - "createDialog": { - "title": "创建时间线！", - "name": "名字", - "nameFormat": "名字只能由字母、汉字、数字、下划线（_）和连字符（-）构成，且长度不能超过26.", - "badFormat": "格式错误", - "noEmpty": "不能为空", - "tooLong": "太长了" - } - }, - "operationDialog": { - "retry": "重试", - "nextStep": "下一步", - "previousStep": "上一步", - "confirm": "确定", - "cancel": "取消", - "ok": "好的！", - "processing": "处理中...", - "success": "成功！", - "error": "出错啦！" - }, - "timeline": { - "messageCantSee": "不好意思，你没有权限查看这个时间线。😅", - "userNotExist": "该用户不存在！", - "timelineNotExist": "该时间线不存在！", - "manage": "管理", - "memberButton": "成员", - "send": "发送", - "deletePostFailed": "删除消息失败。", - "sendPostFailed": "发送消息失败。", - "dropDraft": "放弃草稿", - "confirmLeave": "确定要离开吗？所有输入的内容将会丢失。", - "visibility": { - "public": "对所有人公开", - "register": "仅注册可见", - "private": "仅成员可见" - }, - "visibilityTooltip": { - "public": "所有人都可以看到这个时间线的内容，包括没有注册的人。", - "register": "只有拥有本网站的账号且登陆了的人才能看到这个时间线的内容。", - "private": "只有这个时间线的成员可以看到这个时间线的内容。" - }, - "dialogChangeProperty": { - "title": "修改时间线属性", - "titleField": "标题", - "visibility": "可见性", - "description": "描述", - "color": "颜色" - }, - "changePostPropertyDialog": { - "title": "修改消息属性", - "time": "时间", - "timeEmpty": "你必须选择一个时间。" - }, - "member": { - "noUserAvailableToAdd": "搜索结果显示没有可以添加为成员的用户。", - "add": "添加", - "remove": "移除" - }, - "manageItem": { - "nickname": "昵称", - "avatar": "头像", - "property": "时间线属性", - "member": "时间线成员", - "delete": "删除时间线" - }, - "deleteDialog": { - "title": "删除时间线", - "inputPrompt": "这是一个危险的操作。如果您确认要删除时间线<1>{{name}}</1>，请在下面输入它的名字并点击确认。", - "notMatch": "名字不匹配" - }, - "post": { - "type": { - "text": "纯文本", - "markdown": "Markdown", - "image": "图片" - }, - "deleteDialog": { - "title": "确认删除", - "prompt": "确定删除这个消息？这个操作不可撤销。" - } - }, - "addHighlightFail": "添加高光失败。", - "removeHighlightFail": "删除高光失败。", - "addBookmarkFail": "添加书签失败。", - "removeBookmarkFail": "删除书签失败。" - }, - "searchPage": { - "loading": "加载搜索结果中...", - "input": "输入一些东西来搜索！", - "noResult": "对不起，没有符合条件的结果。" - }, - "user": { - "username": "用户名", - "password": "密码", - "login": "登录", - "rememberMe": "记住我", - "welcomeBack": "欢迎回来！", - "verifyTokenFailed": "用户登录信息已过期，请重新登陆！", - "verifyTokenFailedNetwork": "验证用户登录信息失败，请检查网络连接并刷新页面！" - }, - "login": { - "emptyUsername": "用户名不能为空。", - "emptyPassword": "密码不能为空。", - "badCredential": "用户名或密码错误。", - "alreadyLogin": "已经登陆，三秒后导航到首页！" - }, - "settings": { - "subheaders": { - "account": "账户", - "customization": "个性化" - }, - "languagePrimary": "选择显示的语言。", - "languageSecondary": "您的语言偏好将会存储在本地，下次浏览时将自动使用上次保存的语言选项。", - "changePassword": "更改账号的密码。", - "logout": "注销此账号。", - "changeAvatar": "更改头像。", - "changeNickname": "更改昵称。", - "dialogChangePassword": { - "title": "修改密码", - "prompt": "您正在修改密码，您需要输入正确的旧密码。成功修改后您需要重新登陆，而且以前所有的登录都会失效。", - "inputOldPassword": "旧密码", - "inputNewPassword": "新密码", - "inputRetypeNewPassword": "再次输入新密码", - "errorEmptyOldPassword": "旧密码不能为空。", - "errorEmptyNewPassword": "新密码不能为空", - "errorRetypeNotMatch": "两次输入的密码不一致" - }, - "dialogConfirmLogout": { - "title": "确定注销", - "prompt": "您确定注销此账号？这将删除所有已经缓存在浏览器的数据。" - }, - "dialogChangeNickname": { - "title": "更改昵称", - "inputLabel": "新昵称" - }, - "dialogChangeAvatar": { - "title": "修改头像", - "previewImgAlt": "预览", - "prompt": { - "select": "请选择一个图片", - "crop": "请裁剪图片", - "processingCrop": "正在裁剪图片", - "uploading": "正在上传", - "preview": "请预览图片" - }, - "upload": "上传" - } - }, - "about": { - "author": { - "title": "网站作者", - "fullname": "姓名：", - "nickname": "昵称：", - "introduction": "简介：", - "introductionContent": "一个基于巧合编程的代码爱好者。", - "links": "链接：" - }, - "site": { - "title": "网站信息", - "content": "这个网站的名字叫 <1>Timeline</1>，是一个以<3>时间线</3>为核心概念的 Web App . 它的前端和后端都是由<5>我</5>开发，并且在 GitHub 上开源。大家可以相对轻松的把它们部署在自己的服务器上，这也是我的目标之一。欢迎大家前往 GitHub 仓库提出任何意见。", - "repo": "GitHub 仓库" - }, - "credits": { - "title": "鸣谢", - "content": "Timeline 是站在巨人肩膀上的作品，感谢以下列出的和其他未列出的许多开源项目，相关 License 请在 GitHub 仓库中查看。", - "frontend": "前端：", - "backend": "后端：" - } - }, - "admin": { - "title": "管理" - } -} diff --git a/FrontEnd/src/app/palette.ts b/FrontEnd/src/app/palette.ts deleted file mode 100644 index c4f4f4f9..00000000 --- a/FrontEnd/src/app/palette.ts +++ /dev/null @@ -1,116 +0,0 @@ -import Color from "color"; -import { BehaviorSubject, Observable } from "rxjs"; - -function lightenBy(color: Color, ratio: number): Color { - const lightness = color.lightness(); - return color.lightness(lightness + (100 - lightness) * ratio); -} - -function darkenBy(color: Color, ratio: number): Color { - const lightness = color.lightness(); - return color.lightness(lightness - lightness * ratio); -} - -export interface PaletteColor { - color: string; - inactive: string; - lighter: string; - darker: string; - [key: string]: string; -} - -export interface Palette { - primary: PaletteColor; - primaryEnhance: PaletteColor; - secondary: PaletteColor; - textPrimary: PaletteColor; - textOnPrimary: PaletteColor; - danger: PaletteColor; - success: PaletteColor; - [key: string]: PaletteColor; -} - -export function generatePaletteColor(color: string): PaletteColor { - const c = Color(color); - return { - color: c.toString(), - inactive: (c.lightness() > 60 - ? darkenBy(c, 0.1) - : lightenBy(c, 0.2) - ).toString(), - lighter: lightenBy(c, 0.1).fade(0.1).toString(), - darker: darkenBy(c, 0.1).toString(), - }; -} - -export function generatePalette(options: { - primary: string; - primaryEnhance?: string; - secondary?: string; -}): Palette { - const { primary, primaryEnhance, secondary } = options; - const p = Color(primary); - const pe = - primaryEnhance == null - ? lightenBy(p, 0.3).saturate(0.3) - : Color(primaryEnhance); - const s = secondary == null ? p.rotate(90) : Color(secondary); - - return { - primary: generatePaletteColor(p.toString()), - primaryEnhance: generatePaletteColor(pe.toString()), - secondary: generatePaletteColor(s.toString()), - textPrimary: generatePaletteColor("#111111"), - textOnPrimary: generatePaletteColor(p.lightness() > 60 ? "black" : "white"), - danger: generatePaletteColor("red"), - success: generatePaletteColor("green"), - }; -} - -export function generatePaletteCSS(palette: Palette): string { - function toSnakeCase(s: string): string { - return s.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`); - } - - const colors: [string, string][] = []; - for (const paletteColorName in palette) { - const paletteColor = palette[paletteColorName]; - for (const variant in paletteColor) { - let key = `--tl-${toSnakeCase(paletteColorName)}`; - if (variant !== "color") key += `-${toSnakeCase(variant)}`; - key += "-color"; - colors.push([key, paletteColor[variant]]); - } - } - - return `:root {${colors - .map(([key, color]) => `${key} : ${color};`) - .join("")}}`; -} - -const paletteSubject: BehaviorSubject<Palette> = new BehaviorSubject<Palette>( - generatePalette({ primary: "#007bff" }) -); - -export const palette$: Observable<Palette> = paletteSubject.asObservable(); - -palette$.subscribe((palette) => { - const styleTagId = "timeline-palette-css"; - let styleTag = document.getElementById(styleTagId); - if (styleTag == null) { - styleTag = document.createElement("style"); - styleTag.id = styleTagId; - document.head.append(styleTag); - } - styleTag.innerHTML = generatePaletteCSS(palette); -}); - -export function setPalette(palette: Palette): () => void { - const old = paletteSubject.value; - - paletteSubject.next(palette); - - return () => { - paletteSubject.next(old); - }; -} diff --git a/FrontEnd/src/app/service-worker.tsx b/FrontEnd/src/app/service-worker.tsx deleted file mode 100644 index ea8dfc32..00000000 --- a/FrontEnd/src/app/service-worker.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { Button } from "react-bootstrap"; - -import { pushAlert } from "./services/alert"; - -if ("serviceWorker" in navigator) { - let isThisTriggerUpgrade = false; - - const upgradeSuccessLocalStorageKey = "TIMELINE_UPGRADE_SUCCESS"; - - if (window.localStorage.getItem(upgradeSuccessLocalStorageKey)) { - pushAlert({ - message: "serviceWorker.upgradeSuccess", - type: "success", - }); - window.localStorage.removeItem(upgradeSuccessLocalStorageKey); - } - - void import("workbox-window").then(({ Workbox, messageSW }) => { - const wb = new Workbox("/sw.js"); - let registration: ServiceWorkerRegistration | undefined; - - // externalactivated is not usable but I still use its name. - wb.addEventListener("controlling", () => { - const upgradeReload = (): void => { - window.localStorage.setItem(upgradeSuccessLocalStorageKey, "true"); - window.location.reload(); - }; - - if (isThisTriggerUpgrade) { - upgradeReload(); - } else { - const Message: React.FC = () => { - const { t } = useTranslation(); - return ( - <> - {t("serviceWorker.externalActivatedPrompt")} - <Button - variant="outline-success" - size="sm" - onClick={upgradeReload} - > - {t("serviceWorker.reloadNow")} - </Button> - </> - ); - }; - - pushAlert({ - message: Message, - dismissTime: "never", - type: "warning", - }); - } - }); - - wb.addEventListener("activated", (event) => { - if (!event.isUpdate) { - pushAlert({ - message: "serviceWorker.availableOffline", - type: "success", - }); - } - }); - - // Add an event listener to detect when the registered - // service worker has installed but is waiting to activate. - wb.addEventListener("waiting", (): void => { - const upgrade = (): void => { - isThisTriggerUpgrade = true; - if (registration && registration.waiting) { - // Send a message to the waiting service worker, - // instructing it to activate. - // Note: for this to work, you have to add a message - // listener in your service worker. See below. - void messageSW(registration.waiting, { type: "SKIP_WAITING" }); - } - }; - - const UpgradeMessage: React.FC = () => { - const { t } = useTranslation(); - return ( - <> - {t("serviceWorker.upgradePrompt")} - <Button variant="outline-success" size="sm" onClick={upgrade}> - {t("serviceWorker.upgradeNow")} - </Button> - </> - ); - }; - - pushAlert({ - message: UpgradeMessage, - dismissTime: "never", - type: "success", - }); - }); - - void wb.register().then((reg) => { - registration = reg; - }); - }); -} diff --git a/FrontEnd/src/app/services/TimelinePostBuilder.ts b/FrontEnd/src/app/services/TimelinePostBuilder.ts deleted file mode 100644 index 40279eca..00000000 --- a/FrontEnd/src/app/services/TimelinePostBuilder.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { Remarkable } from "remarkable"; - -import { UiLogicError } from "@/common"; - -import { base64 } from "@/http/common"; -import { HttpTimelinePostPostRequest } from "@/http/timeline"; - -export default class TimelinePostBuilder { - private _onChange: () => void; - private _text = ""; - private _images: { file: File; url: string }[] = []; - private _md: Remarkable = new Remarkable(); - - constructor(onChange: () => void) { - this._onChange = onChange; - const oldImageRenderer = this._md.renderer.rules.image; - this._md.renderer.rules.image = (( - _t: TimelinePostBuilder - ): Remarkable.Rule<Remarkable.ImageToken, string> => - function (tokens, idx, options /*, env */) { - const i = parseInt(tokens[idx].src); - if (!isNaN(i) && i > 0 && i <= _t._images.length) { - tokens[idx].src = _t._images[i - 1].url; - } - return oldImageRenderer(tokens, idx, options); - })(this); - } - - setMarkdownText(text: string): void { - this._text = text; - this._onChange(); - } - - appendImage(file: File): void { - this._images = this._images.slice(); - this._images.push({ - file, - url: URL.createObjectURL(file), - }); - this._onChange(); - } - - moveImage(oldIndex: number, newIndex: number): void { - if (oldIndex < 0 || oldIndex >= this._images.length) { - throw new UiLogicError("Old index out of range."); - } - - if (newIndex < 0) { - newIndex = 0; - } - - if (newIndex >= this._images.length) { - newIndex = this._images.length - 1; - } - - this._images = this._images.slice(); - - const [old] = this._images.splice(oldIndex, 1); - this._images.splice(newIndex, 0, old); - - this._onChange(); - } - - deleteImage(index: number): void { - if (index < 0 || index >= this._images.length) { - throw new UiLogicError("Old index out of range."); - } - - this._images = this._images.slice(); - - URL.revokeObjectURL(this._images[index].url); - this._images.splice(index, 1); - - this._onChange(); - } - - get text(): string { - return this._text; - } - - get images(): { file: File; url: string }[] { - return this._images; - } - - get isEmpty(): boolean { - return this._text.length === 0 && this._images.length === 0; - } - - renderHtml(): string { - return this._md.render(this._text); - } - - dispose(): void { - for (const image of this._images) { - URL.revokeObjectURL(image.url); - } - this._images = []; - } - - async build(): Promise<HttpTimelinePostPostRequest["dataList"]> { - return [ - { - contentType: "text/markdown", - data: await base64(this._text), - }, - ...(await Promise.all( - this._images.map((image) => - base64(image.file).then((data) => ({ - contentType: image.file.type, - data, - })) - ) - )), - ]; - } -} diff --git a/FrontEnd/src/app/services/alert.ts b/FrontEnd/src/app/services/alert.ts deleted file mode 100644 index 48d482ea..00000000 --- a/FrontEnd/src/app/services/alert.ts +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react"; -import pull from "lodash/pull"; - -import { BootstrapThemeColor, I18nText } from "@/common"; - -export interface AlertInfo { - type?: BootstrapThemeColor; - message: React.FC<unknown> | I18nText; - dismissTime?: number | "never"; -} - -export interface AlertInfoEx extends AlertInfo { - id: number; -} - -export type AlertConsumer = (alerts: AlertInfoEx) => void; - -export class AlertService { - private consumers: AlertConsumer[] = []; - private savedAlerts: AlertInfoEx[] = []; - private currentId = 1; - - private produce(alert: AlertInfoEx): void { - for (const consumer of this.consumers) { - consumer(alert); - } - } - - registerConsumer(consumer: AlertConsumer): void { - this.consumers.push(consumer); - if (this.savedAlerts.length !== 0) { - for (const alert of this.savedAlerts) { - this.produce(alert); - } - this.savedAlerts = []; - } - } - - unregisterConsumer(consumer: AlertConsumer): void { - pull(this.consumers, consumer); - } - - push(alert: AlertInfo): void { - const newAlert: AlertInfoEx = { ...alert, id: this.currentId++ }; - if (this.consumers.length === 0) { - this.savedAlerts.push(newAlert); - } else { - this.produce(newAlert); - } - } -} - -export const alertService = new AlertService(); - -export function pushAlert(alert: AlertInfo): void { - alertService.push(alert); -} - -export const kAlertHostId = "alert-host"; - -export function getAlertHost(): HTMLElement | null { - return document.getElementById(kAlertHostId); -} diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts deleted file mode 100644 index d8c0ae00..00000000 --- a/FrontEnd/src/app/services/timeline.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { TimelineVisibility } from "@/http/timeline"; -import XRegExp from "xregexp"; -import { Observable } from "rxjs"; -import { HubConnectionBuilder, HubConnectionState } from "@microsoft/signalr"; - -import { getHttpToken } from "@/http/common"; - -const timelineNameReg = XRegExp("^[-_\\p{L}]*$", "u"); - -export function validateTimelineName(name: string): boolean { - return timelineNameReg.test(name); -} - -export const timelineVisibilityTooltipTranslationMap: Record< - TimelineVisibility, - string -> = { - Public: "timeline.visibilityTooltip.public", - Register: "timeline.visibilityTooltip.register", - Private: "timeline.visibilityTooltip.private", -}; - -export function getTimelinePostUpdate$( - timelineName: string -): Observable<{ update: boolean; state: HubConnectionState }> { - return new Observable((subscriber) => { - subscriber.next({ - update: false, - state: HubConnectionState.Connecting, - }); - - const token = getHttpToken(); - const connection = new HubConnectionBuilder() - .withUrl("/api/hub/timeline", { - accessTokenFactory: token == null ? undefined : () => token, - }) - .withAutomaticReconnect() - .build(); - - const handler = (tn: string): void => { - if (timelineName === tn) { - subscriber.next({ update: true, state: connection.state }); - } - }; - - connection.onclose(() => { - subscriber.next({ - update: false, - state: HubConnectionState.Disconnected, - }); - }); - - connection.onreconnecting(() => { - subscriber.next({ - update: false, - state: HubConnectionState.Reconnecting, - }); - }); - - connection.onreconnected(() => { - subscriber.next({ - update: false, - state: HubConnectionState.Connected, - }); - }); - - connection.on("OnTimelinePostChanged", handler); - - void connection.start().then(() => { - subscriber.next({ update: false, state: HubConnectionState.Connected }); - - return connection.invoke("SubscribeTimelinePostChange", timelineName); - }); - - return () => { - connection.off("OnTimelinePostChanged", handler); - - if (connection.state === HubConnectionState.Connected) { - void connection - .invoke("UnsubscribeTimelinePostChange", timelineName) - .then(() => connection.stop()); - } - }; - }); -} diff --git a/FrontEnd/src/app/services/user.ts b/FrontEnd/src/app/services/user.ts deleted file mode 100644 index 9a8e5687..00000000 --- a/FrontEnd/src/app/services/user.ts +++ /dev/null @@ -1,228 +0,0 @@ -import { useState, useEffect } from "react"; -import { BehaviorSubject, Observable } from "rxjs"; - -import { UiLogicError } from "@/common"; - -import { HttpNetworkError, setHttpToken } from "@/http/common"; -import { - getHttpTokenClient, - HttpCreateTokenBadCredentialError, -} from "@/http/token"; -import { getHttpUserClient, HttpUser, UserPermission } from "@/http/user"; - -import { pushAlert } from "./alert"; - -interface IAuthUser extends HttpUser { - token: string; -} - -export class AuthUser implements IAuthUser { - constructor(user: HttpUser, public token: string) { - this.uniqueId = user.uniqueId; - this.username = user.username; - this.permissions = user.permissions; - this.nickname = user.nickname; - } - - uniqueId: string; - username: string; - permissions: UserPermission[]; - nickname: string; - - get hasAdministrationPermission(): boolean { - return this.permissions.length !== 0; - } - - get hasAllTimelineAdministrationPermission(): boolean { - return this.permissions.includes("AllTimelineManagement"); - } - - get hasHighlightTimelineAdministrationPermission(): boolean { - return this.permissions.includes("HighlightTimelineManagement"); - } -} - -export interface LoginCredentials { - username: string; - password: string; -} - -export class BadCredentialError { - message = "login.badCredential"; -} - -const USER_STORAGE_KEY = "currentuser"; - -export class UserService { - constructor() { - this.userSubject.subscribe((u) => { - setHttpToken(u?.token ?? null); - }); - } - - private userSubject = new BehaviorSubject<AuthUser | null | undefined>( - undefined - ); - - get user$(): Observable<AuthUser | null | undefined> { - return this.userSubject; - } - - get currentUser(): AuthUser | null | undefined { - return this.userSubject.value; - } - - async checkLoginState(): Promise<AuthUser | null> { - if (this.currentUser !== undefined) { - console.warn("Already checked user. Can't check twice."); - } - - const savedUserString = localStorage.getItem(USER_STORAGE_KEY); - - const savedAuthUserData = - savedUserString == null - ? null - : (JSON.parse(savedUserString) as IAuthUser); - - const savedUser = - savedAuthUserData == null - ? null - : new AuthUser(savedAuthUserData, savedAuthUserData.token); - - if (savedUser == null) { - this.userSubject.next(null); - return null; - } - - this.userSubject.next(savedUser); - - const savedToken = savedUser.token; - try { - const res = await getHttpTokenClient().verify({ token: savedToken }); - const user = new AuthUser(res.user, savedToken); - localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user)); - this.userSubject.next(user); - pushAlert({ - type: "success", - message: "user.welcomeBack", - }); - return user; - } catch (error) { - if (error instanceof HttpNetworkError) { - pushAlert({ - type: "danger", - message: "user.verifyTokenFailedNetwork", - }); - return savedUser; - } else { - localStorage.removeItem(USER_STORAGE_KEY); - this.userSubject.next(null); - pushAlert({ - type: "danger", - message: "user.verifyTokenFailed", - }); - return null; - } - } - } - - async login( - credentials: LoginCredentials, - rememberMe: boolean - ): Promise<void> { - if (this.currentUser) { - throw new UiLogicError("Already login."); - } - try { - const res = await getHttpTokenClient().create({ - ...credentials, - expire: 30, - }); - const user = new AuthUser(res.user, res.token); - if (rememberMe) { - localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user)); - } - this.userSubject.next(user); - } catch (e) { - if (e instanceof HttpCreateTokenBadCredentialError) { - throw new BadCredentialError(); - } else { - throw e; - } - } - } - - logout(): Promise<void> { - if (this.currentUser === undefined) { - throw new UiLogicError("Please check user first."); - } - if (this.currentUser === null) { - throw new UiLogicError("No login."); - } - localStorage.removeItem(USER_STORAGE_KEY); - this.userSubject.next(null); - return Promise.resolve(); - } - - changePassword(oldPassword: string, newPassword: string): Promise<void> { - if (this.currentUser == undefined) { - throw new UiLogicError("Not login or checked now, can't log out."); - } - - return getHttpUserClient() - .changePassword({ - oldPassword, - newPassword, - }) - .then(() => this.logout()); - } -} - -export const userService = new UserService(); - -export function useRawUser(): AuthUser | null | undefined { - const [user, setUser] = useState<AuthUser | null | undefined>( - userService.currentUser - ); - useEffect(() => { - const subscription = userService.user$.subscribe((u) => setUser(u)); - return () => { - subscription.unsubscribe(); - }; - }); - return user; -} - -export function useUser(): AuthUser | null { - const [user, setUser] = useState<AuthUser | null>(() => { - const initUser = userService.currentUser; - if (initUser === undefined) { - throw new UiLogicError( - "This is a logic error in user module. Current user can't be undefined in useUser." - ); - } - return initUser; - }); - useEffect(() => { - const sub = userService.user$.subscribe((u) => { - if (u === undefined) { - throw new UiLogicError( - "This is a logic error in user module. User emitted can't be undefined later." - ); - } - setUser(u); - }); - return () => { - sub.unsubscribe(); - }; - }); - return user; -} - -export function useUserLoggedIn(): AuthUser { - const user = useUser(); - if (user == null) { - throw new UiLogicError("You assert user has logged in but actually not."); - } - return user; -} diff --git a/FrontEnd/src/app/tsconfig.json b/FrontEnd/src/app/tsconfig.json deleted file mode 100644 index 17ee69cb..00000000 --- a/FrontEnd/src/app/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ]
- },
- "include": [
- "."
- ]
-}
diff --git a/FrontEnd/src/app/typings.d.ts b/FrontEnd/src/app/typings.d.ts deleted file mode 100644 index 34381682..00000000 --- a/FrontEnd/src/app/typings.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -declare module "*.png" { - const content: string; - export default content; -} - -declare module "*.jpeg" { - const content: string; - export default content; -} - -declare module "*.jpg" { - const content: string; - export default content; -} - -declare module "*.gif" { - const content: string; - export default content; -} - -declare module "*.svg" { - const content: string; - export default content; -} diff --git a/FrontEnd/src/app/utilities/mediaQuery.ts b/FrontEnd/src/app/utilities/mediaQuery.ts deleted file mode 100644 index ad55c3c0..00000000 --- a/FrontEnd/src/app/utilities/mediaQuery.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useMediaQuery } from "react-responsive"; - -export function useIsSmallScreen(): boolean { - return useMediaQuery({ maxWidth: 576 }); -} diff --git a/FrontEnd/src/app/utilities/url.ts b/FrontEnd/src/app/utilities/url.ts deleted file mode 100644 index 4f2a6ecd..00000000 --- a/FrontEnd/src/app/utilities/url.ts +++ /dev/null @@ -1,17 +0,0 @@ -export function applyQueryParameters<T>(url: string, query: T): string { - if (query == null) return url; - - const params = new URLSearchParams(); - - for (const [key, value] of Object.entries(query)) { - if (value == null) void 0; - else if (typeof value === "string") params.set(key, value); - else if (typeof value === "number") params.set(key, String(value)); - else if (typeof value === "boolean") params.set(key, String(value)); - else if (value instanceof Date) params.set(key, value.toISOString()); - else { - console.error("Unknown query parameter type. Param: ", value); - } - } - return url + "?" + params.toString(); -} diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts deleted file mode 100644 index a5812808..00000000 --- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; - -let on = false; - -let reverseScrollPosition = getReverseScrollPosition(); -let reverseScrollToPosition: number | null = null; -let lastScrollPosition = window.scrollY; - -export function getReverseScrollPosition(): number { - if (document.documentElement.scrollHeight <= window.innerHeight) { - return 0; - } else { - return ( - document.documentElement.scrollHeight - - document.documentElement.scrollTop - - window.innerHeight - ); - } -} - -export function scrollToReverseScrollPosition(reversePosition: number): void { - if (document.documentElement.scrollHeight <= window.innerHeight) return; - - const old = document.documentElement.style.scrollBehavior; - document.documentElement.style.scrollBehavior = "auto"; - - const newPosition = - document.documentElement.scrollHeight - - window.innerHeight - - reversePosition; - - reverseScrollToPosition = newPosition; - - window.scrollTo(0, newPosition); - - document.documentElement.style.scrollBehavior = old; -} - -const scrollListener = (): void => { - if ( - reverseScrollToPosition != null && - Math.abs(window.scrollY - reverseScrollToPosition) > 50 - ) { - scrollToReverseScrollPosition(reverseScrollPosition); - return; - } - if ( - reverseScrollToPosition == null && - Math.abs(window.scrollY - lastScrollPosition) > 1000 - ) { - scrollToReverseScrollPosition(reverseScrollPosition); - return; - } - - reverseScrollToPosition = null; - lastScrollPosition = window.scrollY; - reverseScrollPosition = getReverseScrollPosition(); -}; - -const resizeObserver = new ResizeObserver(() => { - scrollToReverseScrollPosition(reverseScrollPosition); -}); - -export default function useReverseScrollPositionRemember(): void { - React.useEffect(() => { - if (on) return; - on = true; - window.addEventListener("scroll", scrollListener); - resizeObserver.observe(document.documentElement); - - return () => { - window.removeEventListener("scroll", scrollListener); - resizeObserver.disconnect(); - on = false; - }; - }, []); -} diff --git a/FrontEnd/src/app/utilities/useScrollToTop.ts b/FrontEnd/src/app/utilities/useScrollToTop.ts deleted file mode 100644 index 892e3545..00000000 --- a/FrontEnd/src/app/utilities/useScrollToTop.ts +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import { fromEvent } from "rxjs"; -import { filter, throttleTime } from "rxjs/operators"; - -function useScrollToTop( - handler: () => void, - enable = true, - option = { - maxOffset: 50, - throttle: 1000, - } -): void { - const handlerRef = React.useRef<(() => void) | null>(null); - - React.useEffect(() => { - handlerRef.current = handler; - - return () => { - handlerRef.current = null; - }; - }, [handler]); - - React.useEffect(() => { - const subscription = fromEvent(window, "scroll") - .pipe( - filter(() => { - return window.scrollY <= option.maxOffset; - }), - throttleTime(option.throttle) - ) - .subscribe(() => { - if (enable) { - handlerRef.current?.(); - } - }); - - return () => { - subscription.unsubscribe(); - }; - }, [enable, option.maxOffset, option.throttle]); -} - -export default useScrollToTop; diff --git a/FrontEnd/src/app/views/about/about.sass b/FrontEnd/src/app/views/about/about.sass deleted file mode 100644 index f4d00cae..00000000 --- a/FrontEnd/src/app/views/about/about.sass +++ /dev/null @@ -1,4 +0,0 @@ -.about-link-icon
- @extend .mx-2
- width: 1.2em
- height: 1.2em
diff --git a/FrontEnd/src/app/views/about/author-avatar.png b/FrontEnd/src/app/views/about/author-avatar.png Binary files differdeleted file mode 100644 index d890d8d0..00000000 --- a/FrontEnd/src/app/views/about/author-avatar.png +++ /dev/null diff --git a/FrontEnd/src/app/views/about/github.png b/FrontEnd/src/app/views/about/github.png Binary files differdeleted file mode 100644 index ea6ff545..00000000 --- a/FrontEnd/src/app/views/about/github.png +++ /dev/null diff --git a/FrontEnd/src/app/views/about/index.tsx b/FrontEnd/src/app/views/about/index.tsx deleted file mode 100644 index a8a53a97..00000000 --- a/FrontEnd/src/app/views/about/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import React from "react"; -import { useTranslation, Trans } from "react-i18next"; - -import authorAvatarUrl from "./author-avatar.png"; -import githubLogoUrl from "./github.png"; - -const frontendCredits: { - name: string; - url: string; -}[] = [ - { - name: "reactjs", - url: "https://reactjs.org", - }, - { - name: "typescript", - url: "https://www.typescriptlang.org", - }, - { - name: "bootstrap", - url: "https://getbootstrap.com", - }, - { - name: "react-bootstrap", - url: "https://react-bootstrap.github.io", - }, - { - name: "webpack", - url: "https://webpack.js.org", - }, - { - name: "sass", - url: "https://sass-lang.com", - }, - { - name: "eslint", - url: "https://eslint.org", - }, - { - name: "prettier", - url: "https://prettier.io", - }, - { - name: "pepjs", - url: "https://github.com/jquery/PEP", - }, -]; - -const backendCredits: { - name: string; - url: string; -}[] = [ - { - name: "ASP.NET Core", - url: "https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core", - }, - { name: "sqlite", url: "https://sqlite.org" }, - { - name: "ImageSharp", - url: "https://github.com/SixLabors/ImageSharp", - }, -]; - -const AboutPage: React.FC = () => { - const { t } = useTranslation(); - - return ( - <div className="px-2 mb-4"> - <div className="container mt-4 py-3 cru-card"> - <h4 id="author-info">{t("about.author.title")}</h4> - <div> - <div className="d-flex"> - <img - src={authorAvatarUrl} - className="align-self-start avatar large rounded-circle" - /> - <div> - <p> - <small>{t("about.author.fullname")}</small> - <span className="text-primary">杨宇千</span> - </p> - <p> - <small>{t("about.author.nickname")}</small> - <span className="text-primary">crupest</span> - </p> - <p> - <small>{t("about.author.introduction")}</small> - {t("about.author.introductionContent")} - </p> - </div> - </div> - <p> - <small>{t("about.author.links")}</small> - <a - href="https://github.com/crupest" - target="_blank" - rel="noopener noreferrer" - > - <img src={githubLogoUrl} className="about-link-icon text-body" /> - </a> - </p> - </div> - </div> - <div className="container mt-4 py-3 cru-card"> - <h4>{t("about.site.title")}</h4> - <p> - <Trans i18nKey="about.site.content"> - 0<span className="text-primary">1</span>2<b>3</b>4 - <a href="#author-info">5</a>6 - </Trans> - </p> - <p> - <a - href="https://github.com/crupest/Timeline" - target="_blank" - rel="noopener noreferrer" - > - {t("about.site.repo")} - </a> - </p> - </div> - <div className="container mt-4 py-3 cru-card"> - <h4>{t("about.credits.title")}</h4> - <p>{t("about.credits.content")}</p> - <p>{t("about.credits.frontend")}</p> - <ul> - {frontendCredits.map((item, index) => { - return ( - <li key={index}> - <a href={item.url} target="_blank" rel="noopener noreferrer"> - {item.name} - </a> - </li> - ); - })} - <li>...</li> - </ul> - <p>{t("about.credits.backend")}</p> - <ul> - {backendCredits.map((item, index) => { - return ( - <li key={index}> - <a href={item.url} target="_blank" rel="noopener noreferrer"> - {item.name} - </a> - </li> - ); - })} - <li>...</li> - </ul> - </div> - </div> - ); -}; - -export default AboutPage; diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx deleted file mode 100644 index 0b6d1f05..00000000 --- a/FrontEnd/src/app/views/admin/Admin.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { Fragment } from "react"; -import { Redirect, Route, Switch, useRouteMatch, match } from "react-router"; -import { Container } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -import { AuthUser } from "@/services/user"; - -import AdminNav from "./AdminNav"; -import UserAdmin from "./UserAdmin"; -import MoreAdmin from "./MoreAdmin"; - -interface AdminProps { - user: AuthUser; -} - -const Admin: React.FC<AdminProps> = ({ user }) => { - useTranslation("admin"); - - const match = useRouteMatch(); - - return ( - <Fragment> - <Switch> - <Redirect from={match.path} to={`${match.path}/users`} exact /> - <Route path={`${match.path}/:name`}> - {(p) => { - const match = p.match as match<{ name: string }>; - const name = match.params["name"]; - return ( - <Container> - <AdminNav /> - {(() => { - if (name === "users") { - return <UserAdmin user={user} />; - } else if (name === "more") { - return <MoreAdmin user={user} />; - } - })()} - </Container> - ); - }} - </Route> - </Switch> - </Fragment> - ); -}; - -export default Admin; diff --git a/FrontEnd/src/app/views/admin/AdminNav.tsx b/FrontEnd/src/app/views/admin/AdminNav.tsx deleted file mode 100644 index 47e2138f..00000000 --- a/FrontEnd/src/app/views/admin/AdminNav.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { Nav } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; -import { useHistory, useRouteMatch } from "react-router"; - -const AdminNav: React.FC = () => { - const match = useRouteMatch<{ name: string }>(); - const history = useHistory(); - - const { t } = useTranslation(); - - const name = match.params.name; - - function toggle(newTab: string): void { - history.push(`/admin/${newTab}`); - } - - return ( - <Nav variant="tabs" className="my-2"> - <Nav.Item> - <Nav.Link - active={name === "users"} - onClick={() => { - toggle("users"); - }} - > - {t("admin:nav.users")} - </Nav.Link> - </Nav.Item> - <Nav.Item> - <Nav.Link - active={name === "more"} - onClick={() => { - toggle("more"); - }} - > - {t("admin:nav.more")} - </Nav.Link> - </Nav.Item> - </Nav> - ); -}; - -export default AdminNav; diff --git a/FrontEnd/src/app/views/admin/MoreAdmin.tsx b/FrontEnd/src/app/views/admin/MoreAdmin.tsx deleted file mode 100644 index 042789a0..00000000 --- a/FrontEnd/src/app/views/admin/MoreAdmin.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -import { AuthUser } from "@/services/user"; - -export interface MoreAdminProps { - user: AuthUser; -} - -const MoreAdmin: React.FC<MoreAdminProps> = () => { - return <>More...</>; -}; - -export default MoreAdmin; diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx deleted file mode 100644 index 558d3aee..00000000 --- a/FrontEnd/src/app/views/admin/UserAdmin.tsx +++ /dev/null @@ -1,396 +0,0 @@ -import React, { useState, useEffect } from "react"; -import classnames from "classnames"; -import { ListGroup, Row, Col, Spinner, Button } from "react-bootstrap"; - -import OperationDialog, { - OperationDialogBoolInput, -} from "../common/OperationDialog"; - -import { AuthUser } from "@/services/user"; -import { - getHttpUserClient, - HttpUser, - kUserPermissionList, - UserPermission, -} from "@/http/user"; -import { Trans, useTranslation } from "react-i18next"; - -interface DialogProps<TData = undefined, TReturn = undefined> { - open: boolean; - close: () => void; - data: TData; - onSuccess: (data: TReturn) => void; -} - -const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({ - open, - close, - onSuccess, -}) => { - return ( - <OperationDialog - title="admin:user.dialog.create.title" - themeColor="success" - inputPrompt="admin:user.dialog.create.prompt" - inputScheme={ - [ - { type: "text", label: "admin:user.username" }, - { type: "text", label: "admin:user.password" }, - ] as const - } - onProcess={([username, password]) => - getHttpUserClient().post({ - username, - password, - }) - } - close={close} - open={open} - onSuccessAndClose={onSuccess} - /> - ); -}; - -const UsernameLabel: React.FC = (props) => { - return <span style={{ color: "blue" }}>{props.children}</span>; -}; - -const UserDeleteDialog: React.FC<DialogProps<{ username: string }, unknown>> = - ({ open, close, data: { username }, onSuccess }) => { - return ( - <OperationDialog - open={open} - close={close} - title="admin:user.dialog.delete.title" - themeColor="danger" - inputPrompt={() => ( - <Trans i18nKey="admin:user.dialog.delete.prompt"> - 0<UsernameLabel>{username}</UsernameLabel>2 - </Trans> - )} - onProcess={() => getHttpUserClient().delete(username)} - onSuccessAndClose={onSuccess} - /> - ); - }; - -const UserModifyDialog: React.FC< - DialogProps< - { - oldUser: HttpUser; - }, - HttpUser - > -> = ({ open, close, data: { oldUser }, onSuccess }) => { - return ( - <OperationDialog - open={open} - close={close} - title="admin:user.dialog.modify.title" - themeColor="danger" - inputPrompt={() => ( - <Trans i18nKey="admin:user.dialog.modify.prompt"> - 0<UsernameLabel>{oldUser.username}</UsernameLabel>2 - </Trans> - )} - inputScheme={ - [ - { - type: "text", - label: "admin:user.username", - initValue: oldUser.username, - }, - { type: "text", label: "admin:user.password" }, - { - type: "text", - label: "admin:user.nickname", - initValue: oldUser.nickname, - }, - ] as const - } - onProcess={([username, password, nickname]) => - getHttpUserClient().patch(oldUser.username, { - username: username !== oldUser.username ? username : undefined, - password: password !== "" ? password : undefined, - nickname: nickname !== oldUser.nickname ? nickname : undefined, - }) - } - onSuccessAndClose={onSuccess} - /> - ); -}; - -const UserPermissionModifyDialog: React.FC< - DialogProps< - { - username: string; - permissions: UserPermission[]; - }, - UserPermission[] - > -> = ({ open, close, data: { username, permissions }, onSuccess }) => { - const oldPermissionBoolList: boolean[] = kUserPermissionList.map( - (permission) => permissions.includes(permission) - ); - - return ( - <OperationDialog - open={open} - close={close} - title="admin:user.dialog.modifyPermissions.title" - themeColor="danger" - inputPrompt={() => ( - <Trans i18nKey="admin:user.dialog.modifyPermissions.prompt"> - 0<UsernameLabel>{username}</UsernameLabel>2 - </Trans> - )} - inputScheme={kUserPermissionList.map<OperationDialogBoolInput>( - (permission, index) => ({ - type: "bool", - label: permission, - initValue: oldPermissionBoolList[index], - }) - )} - onProcess={async (newPermissionBoolList): Promise<boolean[]> => { - for (let index = 0; index < kUserPermissionList.length; index++) { - const oldValue = oldPermissionBoolList[index]; - const newValue = newPermissionBoolList[index]; - const permission = kUserPermissionList[index]; - if (oldValue === newValue) continue; - if (newValue) { - await getHttpUserClient().putUserPermission(username, permission); - } else { - await getHttpUserClient().deleteUserPermission( - username, - permission - ); - } - } - return newPermissionBoolList; - }} - onSuccessAndClose={(newPermissionBoolList: boolean[]) => { - const permissions: UserPermission[] = []; - for (let index = 0; index < kUserPermissionList.length; index++) { - if (newPermissionBoolList[index]) { - permissions.push(kUserPermissionList[index]); - } - } - onSuccess(permissions); - }} - /> - ); -}; - -const kModify = "modify"; -const kModifyPermission = "permission"; -const kDelete = "delete"; - -type TModify = typeof kModify; -type TModifyPermission = typeof kModifyPermission; -type TDelete = typeof kDelete; - -type ContextMenuItem = TModify | TModifyPermission | TDelete; - -interface UserItemProps { - on: { [key in ContextMenuItem]: () => void }; - user: HttpUser; -} - -const UserItem: React.FC<UserItemProps> = ({ user, on }) => { - const { t } = useTranslation(); - - const [editMaskVisible, setEditMaskVisible] = React.useState<boolean>(false); - - return ( - <ListGroup.Item className="admin-user-item"> - <i - className="bi-pencil-square float-end icon-button text-warning" - onClick={() => setEditMaskVisible(true)} - /> - <h4 className="text-primary">{user.username}</h4> - <div className="text-secondary"> - {t("admin:user.nickname")} - {user.nickname} - </div> - <div className="text-secondary"> - {t("admin:user.uniqueId")} - {user.uniqueId} - </div> - <div className="text-secondary"> - {t("admin:user.permissions")} - {user.permissions.map((permission) => { - return ( - <span key={permission} className="text-danger"> - {permission}{" "} - </span> - ); - })} - </div> - <div - className={classnames("edit-mask", !editMaskVisible && "d-none")} - onClick={() => setEditMaskVisible(false)} - > - <button className="text-button primary" onClick={on[kModify]}> - {t("admin:user.modify")} - </button> - <button className="text-button primary" onClick={on[kModifyPermission]}> - {t("admin:user.modifyPermissions")} - </button> - <button className="text-button danger" onClick={on[kDelete]}> - {t("admin:user.delete")} - </button> - </div> - </ListGroup.Item> - ); -}; - -interface UserAdminProps { - user: AuthUser; -} - -const UserAdmin: React.FC<UserAdminProps> = () => { - const { t } = useTranslation(); - - type DialogInfo = - | null - | { - type: "create"; - } - | { - type: TModify; - user: HttpUser; - } - | { - type: TModifyPermission; - username: string; - permissions: UserPermission[]; - } - | { type: TDelete; username: string }; - - const [users, setUsers] = useState<HttpUser[] | null>(null); - const [dialog, setDialog] = useState<DialogInfo>(null); - const [usersVersion, setUsersVersion] = useState<number>(0); - const updateUsers = (): void => { - setUsersVersion(usersVersion + 1); - }; - - useEffect(() => { - let subscribe = true; - void getHttpUserClient() - .list() - .then((us) => { - if (subscribe) { - setUsers(us); - } - }); - return () => { - subscribe = false; - }; - }, [usersVersion]); - - let dialogNode: React.ReactNode; - if (dialog) { - switch (dialog.type) { - case "create": - dialogNode = ( - <CreateUserDialog - open - close={() => setDialog(null)} - data={undefined} - onSuccess={updateUsers} - /> - ); - break; - case kDelete: - dialogNode = ( - <UserDeleteDialog - open - close={() => setDialog(null)} - data={{ username: dialog.username }} - onSuccess={updateUsers} - /> - ); - break; - case kModify: - dialogNode = ( - <UserModifyDialog - open - close={() => setDialog(null)} - data={{ oldUser: dialog.user }} - onSuccess={updateUsers} - /> - ); - break; - case kModifyPermission: - dialogNode = ( - <UserPermissionModifyDialog - open - close={() => setDialog(null)} - data={{ - username: dialog.username, - permissions: dialog.permissions, - }} - onSuccess={updateUsers} - /> - ); - break; - } - } - - if (users) { - const userComponents = users.map((user) => { - return ( - <UserItem - key={user.username} - user={user} - on={{ - modify: () => { - setDialog({ - type: "modify", - user, - }); - }, - permission: () => { - setDialog({ - type: kModifyPermission, - username: user.username, - permissions: user.permissions, - }); - }, - delete: () => { - setDialog({ - type: "delete", - username: user.username, - }); - }, - }} - /> - ); - }); - - return ( - <> - <Row className="justify-content-end my-2"> - <Col xs="auto"> - <Button - variant="outline-success" - onClick={() => - setDialog({ - type: "create", - }) - } - > - {t("admin:create")} - </Button> - </Col> - </Row> - {userComponents} - {dialogNode} - </> - ); - } else { - return <Spinner animation="border" />; - } -}; - -export default UserAdmin; diff --git a/FrontEnd/src/app/views/admin/admin.sass b/FrontEnd/src/app/views/admin/admin.sass deleted file mode 100644 index 1ce010f8..00000000 --- a/FrontEnd/src/app/views/admin/admin.sass +++ /dev/null @@ -1,22 +0,0 @@ -.admin-user-item
- position: relative
-
- .edit-mask
- position: absolute
- top: 0
- left: 0
- bottom: 0
- right: 0
-
- background: #ffffffc5
- position: absolute
-
- display: flex
- justify-content: center
- align-items: center
-
- @include media-breakpoint-down(xs)
- flex-direction: column
-
- button
- margin: 0.5em 2em
diff --git a/FrontEnd/src/app/views/center/CenterBoards.tsx b/FrontEnd/src/app/views/center/CenterBoards.tsx deleted file mode 100644 index f5200415..00000000 --- a/FrontEnd/src/app/views/center/CenterBoards.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from "react"; -import { Row, Col } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -import { pushAlert } from "@/services/alert"; -import { useUserLoggedIn } from "@/services/user"; - -import { getHttpTimelineClient } from "@/http/timeline"; -import { getHttpBookmarkClient } from "@/http/bookmark"; -import { getHttpHighlightClient } from "@/http/highlight"; - -import TimelineBoard from "./TimelineBoard"; - -const CenterBoards: React.FC = () => { - const { t } = useTranslation(); - - const user = useUserLoggedIn(); - - return ( - <> - <Row className="justify-content-center"> - <Col xs="12" md="6"> - <Row> - <Col xs="12" className="my-2"> - <TimelineBoard - title={t("home.bookmarkTimeline")} - load={() => getHttpBookmarkClient().list()} - editHandler={{ - onDelete: (timeline) => { - return getHttpBookmarkClient() - .delete(timeline) - .catch((e) => { - pushAlert({ - message: "home.message.deleteBookmarkFail", - type: "danger", - }); - throw e; - }); - }, - onMove: (timeline, index, offset) => { - return getHttpBookmarkClient() - .move( - { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1 - ) - .catch((e) => { - pushAlert({ - message: "home.message.moveBookmarkFail", - type: "danger", - }); - throw e; - }); - }, - }} - /> - </Col> - <Col xs="12" className="my-2"> - <TimelineBoard - title={t("home.highlightTimeline")} - load={() => getHttpHighlightClient().list()} - editHandler={ - user.hasHighlightTimelineAdministrationPermission - ? { - onDelete: (timeline) => { - return getHttpHighlightClient() - .delete(timeline) - .catch((e) => { - pushAlert({ - message: "home.message.deleteHighlightFail", - type: "danger", - }); - throw e; - }); - }, - onMove: (timeline, index, offset) => { - return getHttpHighlightClient() - .move( - { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1 - ) - .catch((e) => { - pushAlert({ - message: "home.message.moveHighlightFail", - type: "danger", - }); - throw e; - }); - }, - } - : undefined - } - /> - </Col> - </Row> - </Col> - <Col xs="12" md="6" className="my-2"> - <TimelineBoard - title={t("home.relatedTimeline")} - load={() => - getHttpTimelineClient().listTimeline({ relate: user.username }) - } - /> - </Col> - </Row> - </> - ); -}; - -export default CenterBoards; diff --git a/FrontEnd/src/app/views/center/TimelineBoard.tsx b/FrontEnd/src/app/views/center/TimelineBoard.tsx deleted file mode 100644 index 35249f66..00000000 --- a/FrontEnd/src/app/views/center/TimelineBoard.tsx +++ /dev/null @@ -1,370 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { Link } from "react-router-dom"; -import { useTranslation } from "react-i18next"; -import { Spinner } from "react-bootstrap"; - -import { HttpTimelineInfo } from "@/http/timeline"; - -import TimelineLogo from "../common/TimelineLogo"; -import UserTimelineLogo from "../common/UserTimelineLogo"; -import LoadFailReload from "../common/LoadFailReload"; - -interface TimelineBoardItemProps { - timeline: HttpTimelineInfo; - // In height. - offset?: number; - // In px. - arbitraryOffset?: number; - // If not null, will disable navigation on click. - actions?: { - onDelete: () => void; - onMove: { - start: (e: React.PointerEvent) => void; - moving: (e: React.PointerEvent) => void; - end: (e: React.PointerEvent) => void; - }; - }; -} - -const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({ - timeline, - arbitraryOffset, - offset, - actions, -}) => { - const { name, title } = timeline; - const isPersonal = name.startsWith("@"); - const url = isPersonal - ? `/users/${timeline.owner.username}` - : `/timelines/${name}`; - - const content = ( - <> - {isPersonal ? ( - <UserTimelineLogo className="icon" /> - ) : ( - <TimelineLogo className="icon" /> - )} - <span className="title">{title}</span> - <small className="ms-2 text-secondary">{name}</small> - <span className="flex-grow-1"></span> - {actions != null ? ( - <div className="right"> - <i - className="bi-trash icon-button text-danger px-2" - onClick={actions.onDelete} - /> - <i - className="bi-grip-vertical icon-button text-gray px-2 touch-action-none" - onPointerDown={(e) => { - e.currentTarget.setPointerCapture(e.pointerId); - actions.onMove.start(e); - }} - onPointerUp={(e) => { - actions.onMove.end(e); - try { - e.currentTarget.releasePointerCapture(e.pointerId); - } catch (_) { - void null; - } - }} - onPointerMove={actions.onMove.moving} - /> - </div> - ) : null} - </> - ); - - const offsetStyle: React.CSSProperties = { - transform: - arbitraryOffset != null - ? `translate(0,${arbitraryOffset}px)` - : offset != null - ? `translate(0,${offset * 100}%)` - : undefined, - transition: offset != null ? "transform 0.5s" : undefined, - zIndex: arbitraryOffset != null ? 1 : undefined, - }; - - return actions == null ? ( - <Link to={url} className="timeline-board-item"> - {content} - </Link> - ) : ( - <div style={offsetStyle} className="timeline-board-item"> - {content} - </div> - ); -}; - -interface TimelineBoardItemContainerProps { - timelines: HttpTimelineInfo[]; - editHandler?: { - // offset may exceed index range plusing index. - onMove: (timeline: string, index: number, offset: number) => void; - onDelete: (timeline: string) => void; - }; -} - -const TimelineBoardItemContainer: React.FC<TimelineBoardItemContainerProps> = ({ - timelines, - editHandler, -}) => { - const [moveState, setMoveState] = React.useState<null | { - index: number; - offset: number; - startPointY: number; - }>(null); - - return ( - <> - {timelines.map((timeline, index) => { - const height = 48; - - let offset: number | undefined = undefined; - let arbitraryOffset: number | undefined = undefined; - if (moveState != null) { - if (index === moveState.index) { - arbitraryOffset = moveState.offset; - } else { - if (moveState.offset >= 0) { - const offsetCount = Math.round(moveState.offset / height); - if ( - index > moveState.index && - index <= moveState.index + offsetCount - ) { - offset = -1; - } else { - offset = 0; - } - } else { - const offsetCount = Math.round(-moveState.offset / height); - if ( - index < moveState.index && - index >= moveState.index - offsetCount - ) { - offset = 1; - } else { - offset = 0; - } - } - } - } - - return ( - <TimelineBoardItem - key={timeline.name} - timeline={timeline} - offset={offset} - arbitraryOffset={arbitraryOffset} - actions={ - editHandler != null - ? { - onDelete: () => { - editHandler.onDelete(timeline.name); - }, - onMove: { - start: (e) => { - if (moveState != null) return; - setMoveState({ - index, - offset: 0, - startPointY: e.clientY, - }); - }, - moving: (e) => { - if (moveState == null) return; - setMoveState({ - index, - offset: e.clientY - moveState.startPointY, - startPointY: moveState.startPointY, - }); - }, - end: () => { - if (moveState != null) { - const offsetCount = Math.round( - moveState.offset / height - ); - editHandler.onMove( - timeline.name, - moveState.index, - offsetCount - ); - } - setMoveState(null); - }, - }, - } - : undefined - } - /> - ); - })} - </> - ); -}; - -interface TimelineBoardUIProps { - title?: string; - timelines: HttpTimelineInfo[] | "offline" | "loading"; - onReload: () => void; - className?: string; - editHandler?: { - onMove: (timeline: string, index: number, offset: number) => void; - onDelete: (timeline: string) => void; - }; -} - -const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => { - const { title, timelines, className, editHandler } = props; - - const { t } = useTranslation(); - - const editable = editHandler != null; - - const [editing, setEditing] = React.useState<boolean>(false); - - return ( - <div className={classnames("timeline-board", className)}> - <div className="timeline-board-header"> - {title != null && <h3>{title}</h3>} - {editable && - (editing ? ( - <div - className="flat-button text-primary" - onClick={() => { - setEditing(false); - }} - > - {t("done")} - </div> - ) : ( - <div - className="flat-button text-primary" - onClick={() => { - setEditing(true); - }} - > - {t("edit")} - </div> - ))} - </div> - {(() => { - if (timelines === "loading") { - return ( - <div className="d-flex flex-grow-1 justify-content-center align-items-center"> - <Spinner variant="primary" animation="border" /> - </div> - ); - } else if (timelines === "offline") { - return ( - <div className="d-flex flex-grow-1 justify-content-center align-items-center"> - <LoadFailReload onReload={props.onReload} /> - </div> - ); - } else { - return ( - <TimelineBoardItemContainer - timelines={timelines} - editHandler={ - editHandler && editing - ? { - onDelete: editHandler.onDelete, - onMove: (timeline, index, offset) => { - if (index + offset >= timelines.length) { - offset = timelines.length - index - 1; - } else if (index + offset < 0) { - offset = -index; - } - editHandler.onMove(timeline, index, offset); - }, - } - : undefined - } - /> - ); - } - })()} - </div> - ); -}; - -export interface TimelineBoardProps { - title?: string; - className?: string; - load: () => Promise<HttpTimelineInfo[]>; - editHandler?: { - onMove: (timeline: string, index: number, offset: number) => Promise<void>; - onDelete: (timeline: string) => Promise<void>; - }; -} - -const TimelineBoard: React.FC<TimelineBoardProps> = ({ - className, - title, - load, - editHandler, -}) => { - const [timelines, setTimelines] = React.useState< - HttpTimelineInfo[] | "offline" | "loading" - >("loading"); - - React.useEffect(() => { - let subscribe = true; - if (timelines === "loading") { - void load().then( - (timelines) => { - if (subscribe) { - setTimelines(timelines); - } - }, - () => { - setTimelines("offline"); - } - ); - } - return () => { - subscribe = false; - }; - }, [load, timelines]); - - return ( - <TimelineBoardUI - title={title} - className={className} - timelines={timelines} - onReload={() => { - setTimelines("loading"); - }} - editHandler={ - typeof timelines === "object" && editHandler != null - ? { - onMove: (timeline, index, offset) => { - const newTimelines = timelines.slice(); - const [t] = newTimelines.splice(index, 1); - newTimelines.splice(index + offset, 0, t); - setTimelines(newTimelines); - editHandler.onMove(timeline, index, offset).then(null, () => { - setTimelines(timelines); - }); - }, - onDelete: (timeline) => { - const newTimelines = timelines.slice(); - newTimelines.splice( - timelines.findIndex((t) => t.name === timeline), - 1 - ); - setTimelines(newTimelines); - editHandler.onDelete(timeline).then(null, () => { - setTimelines(timelines); - }); - }, - } - : undefined - } - /> - ); -}; - -export default TimelineBoard; diff --git a/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx deleted file mode 100644 index b4e25ba1..00000000 --- a/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; - -import { validateTimelineName } from "@/services/timeline"; -import OperationDialog from "../common/OperationDialog"; -import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; - -interface TimelineCreateDialogProps { - open: boolean; - close: () => void; -} - -const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => { - const history = useHistory(); - - return ( - <OperationDialog - open={props.open} - close={props.close} - themeColor="success" - title="home.createDialog.title" - inputScheme={ - [ - { - type: "text", - label: "home.createDialog.name", - helperText: "home.createDialog.nameFormat", - }, - ] as const - } - inputValidator={([name]) => { - if (name.length === 0) { - return { 0: "home.createDialog.noEmpty" }; - } else if (name.length > 26) { - return { 0: "home.createDialog.tooLong" }; - } else if (!validateTimelineName(name)) { - return { 0: "home.createDialog.badFormat" }; - } else { - return null; - } - }} - onProcess={([name]): Promise<HttpTimelineInfo> => - getHttpTimelineClient().postTimeline({ name }) - } - onSuccessAndClose={(timeline: HttpTimelineInfo) => { - history.push(`timelines/${timeline.name}`); - }} - failurePrompt={(e) => `${e as string}`} - /> - ); -}; - -export default TimelineCreateDialog; diff --git a/FrontEnd/src/app/views/center/center.sass b/FrontEnd/src/app/views/center/center.sass deleted file mode 100644 index c0dfb9c0..00000000 --- a/FrontEnd/src/app/views/center/center.sass +++ /dev/null @@ -1,36 +0,0 @@ -.timeline-board
- @extend .cru-card
- @extend .d-flex
- @extend .flex-column
- @extend .py-3
- min-height: 200px
- height: 100%
- position: relative
-
-.timeline-board-header
- @extend .px-3
- display: flex
- align-items: center
- justify-content: space-between
-
-.timeline-board-item
- font-size: 1.1em
- @extend .px-3
- height: 48px
- transition: background 0.3s
- display: flex
- align-items: center
- .icon
- height: 1.3em
- color: black
- @extend .me-2
- &:hover
- background: $gray-300
- .right
- display: flex
- align-items: center
- flex-shrink: 0
- .title
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
diff --git a/FrontEnd/src/app/views/center/index.tsx b/FrontEnd/src/app/views/center/index.tsx deleted file mode 100644 index 0a2abb2c..00000000 --- a/FrontEnd/src/app/views/center/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Row, Container, Button, Col } from "react-bootstrap"; - -import { useUserLoggedIn } from "@/services/user"; - -import SearchInput from "../common/SearchInput"; -import CenterBoards from "./CenterBoards"; -import TimelineCreateDialog from "./TimelineCreateDialog"; - -const HomePage: React.FC = () => { - const history = useHistory(); - - const { t } = useTranslation(); - - const user = useUserLoggedIn(); - - const [navText, setNavText] = React.useState<string>(""); - - const [dialog, setDialog] = React.useState<"create" | null>(null); - - return ( - <> - <Container> - <Row className="my-3 justify-content-center"> - <Col xs={12} sm={8} lg={6}> - <SearchInput - className="justify-content-center" - value={navText} - onChange={setNavText} - onButtonClick={() => { - history.push(`search?q=${navText}`); - }} - additionalButton={ - user != null && ( - <Button - variant="outline-success" - onClick={() => { - setDialog("create"); - }} - > - {t("home.createButton")} - </Button> - ) - } - /> - </Col> - </Row> - <CenterBoards /> - </Container> - {dialog === "create" && ( - <TimelineCreateDialog - open - close={() => { - setDialog(null); - }} - /> - )} - </> - ); -}; - -export default HomePage; diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx deleted file mode 100644 index 91dfbee9..00000000 --- a/FrontEnd/src/app/views/common/AppBar.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { Link, NavLink } from "react-router-dom"; -import classnames from "classnames"; -import { useMediaQuery } from "react-responsive"; - -import { useUser } from "@/services/user"; - -import TimelineLogo from "./TimelineLogo"; -import UserAvatar from "./user/UserAvatar"; - -const AppBar: React.FC = (_) => { - const { t } = useTranslation(); - - const user = useUser(); - const hasAdministrationPermission = user && user.hasAdministrationPermission; - - const isSmallScreen = useMediaQuery({ maxWidth: 576 }); - - const [expand, setExpand] = React.useState<boolean>(false); - const collapse = (): void => setExpand(false); - const toggleExpand = (): void => setExpand(!expand); - - const createLink = ( - link: string, - label: React.ReactNode, - className?: string - ): React.ReactNode => ( - <NavLink - to={link} - activeClassName="active" - onClick={collapse} - className={className} - > - {label} - </NavLink> - ); - - return ( - <nav className={classnames("app-bar", isSmallScreen && "small-screen")}> - <Link to="/" className="app-bar-brand active"> - <TimelineLogo className="app-bar-brand-icon" /> - Timeline - </Link> - - {isSmallScreen && ( - <i className="bi-list app-bar-toggler" onClick={toggleExpand} /> - )} - - <div - className={classnames( - "app-bar-main-area", - !expand && "app-bar-collapse" - )} - > - <div className="app-bar-link-area"> - {createLink("/settings", t("nav.settings"))} - {createLink("/about", t("nav.about"))} - {hasAdministrationPermission && - createLink("/admin", t("nav.administration"))} - </div> - - <div className="app-bar-user-area"> - {user != null - ? createLink( - "/", - <UserAvatar - username={user.username} - className="avatar small rounded-circle bg-white cursor-pointer ml-auto" - />, - "app-bar-avatar" - ) - : createLink("/login", t("nav.login"))} - </div> - </div> - </nav> - ); -}; - -export default AppBar; diff --git a/FrontEnd/src/app/views/common/BlobImage.tsx b/FrontEnd/src/app/views/common/BlobImage.tsx deleted file mode 100644 index 0dd25c52..00000000 --- a/FrontEnd/src/app/views/common/BlobImage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; - -const BlobImage: React.FC< - Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & { - blob?: Blob | unknown; - } -> = (props) => { - const { blob, ...otherProps } = props; - - const [url, setUrl] = React.useState<string | undefined>(undefined); - - React.useEffect(() => { - if (blob instanceof Blob) { - const url = URL.createObjectURL(blob); - setUrl(url); - return () => { - URL.revokeObjectURL(url); - }; - } else { - setUrl(undefined); - } - }, [blob]); - - return <img {...otherProps} src={url} />; -}; - -export default BlobImage; diff --git a/FrontEnd/src/app/views/common/ConfirmDialog.tsx b/FrontEnd/src/app/views/common/ConfirmDialog.tsx deleted file mode 100644 index 72940c51..00000000 --- a/FrontEnd/src/app/views/common/ConfirmDialog.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { convertI18nText, I18nText } from "@/common"; -import React from "react"; -import { Modal, Button } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -const ConfirmDialog: React.FC<{ - onClose: () => void; - onConfirm: () => void; - title: I18nText; - body: I18nText; -}> = ({ onClose, onConfirm, title, body }) => { - const { t } = useTranslation(); - - return ( - <Modal onHide={onClose} show centered> - <Modal.Header> - <Modal.Title className="text-danger"> - {convertI18nText(title, t)} - </Modal.Title> - </Modal.Header> - <Modal.Body>{convertI18nText(body, t)}</Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={onClose}> - {t("operationDialog.cancel")} - </Button> - <Button - variant="danger" - onClick={() => { - onConfirm(); - onClose(); - }} - > - {t("operationDialog.confirm")} - </Button> - </Modal.Footer> - </Modal> - ); -}; - -export default ConfirmDialog; diff --git a/FrontEnd/src/app/views/common/FlatButton.tsx b/FrontEnd/src/app/views/common/FlatButton.tsx deleted file mode 100644 index b1f7a051..00000000 --- a/FrontEnd/src/app/views/common/FlatButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -import { BootstrapThemeColor } from "@/common"; - -export interface FlatButtonProps { - variant?: BootstrapThemeColor | string; - disabled?: boolean; - className?: string; - style?: React.CSSProperties; - onClick?: () => void; -} - -const FlatButton: React.FC<FlatButtonProps> = (props) => { - const { disabled, className, style } = props; - const variant = props.variant ?? "primary"; - - const onClick = disabled ? undefined : props.onClick; - - return ( - <div - className={classnames( - "flat-button", - variant, - disabled ? "disabled" : null, - className - )} - style={style} - onClick={onClick} - > - {props.children} - </div> - ); -}; - -export default FlatButton; diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx deleted file mode 100644 index 1b59045a..00000000 --- a/FrontEnd/src/app/views/common/FullPage.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -export interface FullPageProps { - show: boolean; - onBack: () => void; - contentContainerClassName?: string; -} - -const FullPage: React.FC<FullPageProps> = ({ - show, - onBack, - children, - contentContainerClassName, -}) => { - return ( - <div - className="cru-full-page" - style={{ display: show ? undefined : "none" }} - > - <div className="cru-full-page-top-bar"> - <i - className="icon-button bi-arrow-left text-white ms-3" - onClick={onBack} - /> - </div> - <div - className={classnames( - "cru-full-page-content-container", - contentContainerClassName - )} - > - {children} - </div> - </div> - ); -}; - -export default FullPage; diff --git a/FrontEnd/src/app/views/common/ImageCropper.tsx b/FrontEnd/src/app/views/common/ImageCropper.tsx deleted file mode 100644 index 2ef5b7ed..00000000 --- a/FrontEnd/src/app/views/common/ImageCropper.tsx +++ /dev/null @@ -1,306 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -import { UiLogicError } from "@/common"; - -export interface Clip { - left: number; - top: number; - width: number; -} - -interface NormailizedClip extends Clip { - height: number; -} - -interface ImageInfo { - width: number; - height: number; - landscape: boolean; - ratio: number; - maxClipWidth: number; - maxClipHeight: number; -} - -interface ImageCropperSavedState { - clip: NormailizedClip; - x: number; - y: number; - pointerId: number; -} - -export interface ImageCropperProps { - clip: Clip | null; - imageUrl: string; - onChange: (clip: Clip) => void; - imageElementCallback?: (element: HTMLImageElement | null) => void; - className?: string; -} - -const ImageCropper = (props: ImageCropperProps): React.ReactElement => { - const { clip, imageUrl, onChange, imageElementCallback, className } = props; - - const [oldState, setOldState] = React.useState<ImageCropperSavedState | null>( - null - ); - const [imageInfo, setImageInfo] = React.useState<ImageInfo | null>(null); - - const normalizeClip = (c: Clip | null | undefined): NormailizedClip => { - if (c == null) { - return { left: 0, top: 0, width: 0, height: 0 }; - } - - return { - left: c.left || 0, - top: c.top || 0, - width: c.width || 0, - height: imageInfo != null ? (c.width || 0) / imageInfo.ratio : 0, - }; - }; - - const c = normalizeClip(clip); - - const imgElementRef = React.useRef<HTMLImageElement | null>(null); - - const onImageRef = React.useCallback( - (e: HTMLImageElement | null) => { - imgElementRef.current = e; - if (imageElementCallback != null && e == null) { - imageElementCallback(null); - } - }, - [imageElementCallback] - ); - - const onImageLoad = React.useCallback( - (e: React.SyntheticEvent<HTMLImageElement>) => { - const img = e.currentTarget; - const landscape = img.naturalWidth >= img.naturalHeight; - - const info = { - width: img.naturalWidth, - height: img.naturalHeight, - landscape, - ratio: img.naturalHeight / img.naturalWidth, - maxClipWidth: landscape ? img.naturalHeight / img.naturalWidth : 1, - maxClipHeight: landscape ? 1 : img.naturalWidth / img.naturalHeight, - }; - setImageInfo(info); - onChange({ left: 0, top: 0, width: info.maxClipWidth }); - if (imageElementCallback != null) { - imageElementCallback(img); - } - }, - [onChange, imageElementCallback] - ); - - const onPointerDown = React.useCallback( - (e: React.PointerEvent) => { - if (oldState != null) return; - e.currentTarget.setPointerCapture(e.pointerId); - setOldState({ - x: e.clientX, - y: e.clientY, - clip: c, - pointerId: e.pointerId, - }); - }, - [oldState, c] - ); - - const onPointerUp = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null || oldState.pointerId !== e.pointerId) return; - e.currentTarget.releasePointerCapture(e.pointerId); - setOldState(null); - }, - [oldState] - ); - - const onPointerMove = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null) return; - - const oldClip = oldState.clip; - - const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; - - const { current: imgElement } = imgElementRef; - - if (imgElement == null) throw new UiLogicError("Image element is null."); - - const moveRatio = { - x: movement.x / imgElement.width, - y: movement.y / imgElement.height, - }; - - const newRatio = { - x: oldClip.left + moveRatio.x, - y: oldClip.top + moveRatio.y, - }; - if (newRatio.x < 0) { - newRatio.x = 0; - } else if (newRatio.x > 1 - oldClip.width) { - newRatio.x = 1 - oldClip.width; - } - if (newRatio.y < 0) { - newRatio.y = 0; - } else if (newRatio.y > 1 - oldClip.height) { - newRatio.y = 1 - oldClip.height; - } - - onChange({ left: newRatio.x, top: newRatio.y, width: oldClip.width }); - }, - [oldState, onChange] - ); - - const onHandlerPointerMove = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null) return; - - const oldClip = oldState.clip; - - const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; - - const ratio = imageInfo == null ? 1 : imageInfo.ratio; - - const { current: imgElement } = imgElementRef; - - if (imgElement == null) throw new UiLogicError("Image element is null."); - - const moveRatio = { - x: movement.x / imgElement.width, - y: movement.x / imgElement.width / ratio, - }; - - const newRatio = { - x: oldClip.width + moveRatio.x, - y: oldClip.height + moveRatio.y, - }; - - const maxRatio = { - x: Math.min(1 - oldClip.left, newRatio.x), - y: Math.min(1 - oldClip.top, newRatio.y), - }; - - const maxWidthRatio = Math.min(maxRatio.x, maxRatio.y * ratio); - - let newWidth; - if (newRatio.x < 0) { - newWidth = 0; - } else if (newRatio.x > maxWidthRatio) { - newWidth = maxWidthRatio; - } else { - newWidth = newRatio.x; - } - - onChange({ left: oldClip.left, top: oldClip.top, width: newWidth }); - }, - [imageInfo, oldState, onChange] - ); - - const toPercentage = (n: number): string => `${n}%`; - - // fuck!!! I just can't find a better way to implement this in pure css - const containerStyle: React.CSSProperties = (() => { - if (imageInfo == null) { - return { width: "100%", paddingTop: "100%", height: 0 }; - } else { - if (imageInfo.ratio > 1) { - return { - width: toPercentage(100 / imageInfo.ratio), - paddingTop: "100%", - height: 0, - }; - } else { - return { - width: "100%", - paddingTop: toPercentage(100 * imageInfo.ratio), - height: 0, - }; - } - } - })(); - - return ( - <div - className={classnames("image-cropper-container", className)} - style={containerStyle} - > - <img ref={onImageRef} src={imageUrl} onLoad={onImageLoad} alt="to crop" /> - <div className="image-cropper-mask-container"> - <div - className="image-cropper-mask" - touch-action="none" - style={{ - left: toPercentage(c.left * 100), - top: toPercentage(c.top * 100), - width: toPercentage(c.width * 100), - height: toPercentage(c.height * 100), - }} - onPointerMove={onPointerMove} - onPointerDown={onPointerDown} - onPointerUp={onPointerUp} - /> - </div> - <div - className="image-cropper-handler" - touch-action="none" - style={{ - left: `calc(${(c.left + c.width) * 100}% - 15px)`, - top: `calc(${(c.top + c.height) * 100}% - 15px)`, - }} - onPointerMove={onHandlerPointerMove} - onPointerDown={onPointerDown} - onPointerUp={onPointerUp} - /> - </div> - ); -}; - -export default ImageCropper; - -export function applyClipToImage( - image: HTMLImageElement, - clip: Clip, - mimeType: string -): Promise<Blob> { - return new Promise((resolve, reject) => { - const naturalSize = { - width: image.naturalWidth, - height: image.naturalHeight, - }; - const clipArea = { - x: naturalSize.width * clip.left, - y: naturalSize.height * clip.top, - length: naturalSize.width * clip.width, - }; - - const canvas = document.createElement("canvas"); - canvas.width = clipArea.length; - canvas.height = clipArea.length; - const context = canvas.getContext("2d"); - - if (context == null) throw new Error("Failed to create context."); - - context.drawImage( - image, - clipArea.x, - clipArea.y, - clipArea.length, - clipArea.length, - 0, - 0, - clipArea.length, - clipArea.length - ); - - canvas.toBlob((blob) => { - if (blob == null) { - reject(new Error("canvas.toBlob returns null")); - } else { - resolve(blob); - } - }, mimeType); - }); -} diff --git a/FrontEnd/src/app/views/common/LoadFailReload.tsx b/FrontEnd/src/app/views/common/LoadFailReload.tsx deleted file mode 100644 index a80e7b76..00000000 --- a/FrontEnd/src/app/views/common/LoadFailReload.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Trans } from "react-i18next"; - -export interface LoadFailReloadProps { - className?: string; - style?: React.CSSProperties; - onReload: () => void; -} - -const LoadFailReload: React.FC<LoadFailReloadProps> = ({ - onReload, - className, - style, -}) => { - return ( - <Trans - i18nKey="loadFailReload" - parent="div" - className={className} - style={style} - > - 0 - <a - href="#" - onClick={(e) => { - onReload(); - e.preventDefault(); - }} - > - 1 - </a> - 2 - </Trans> - ); -}; - -export default LoadFailReload; diff --git a/FrontEnd/src/app/views/common/LoadingButton.tsx b/FrontEnd/src/app/views/common/LoadingButton.tsx deleted file mode 100644 index cd9f1adc..00000000 --- a/FrontEnd/src/app/views/common/LoadingButton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { Button, ButtonProps, Spinner } from "react-bootstrap"; - -const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({ - loading, - variant, - disabled, - ...otherProps -}) => { - return ( - <Button - variant={variant != null ? `outline-${variant}` : "outline-primary"} - disabled={disabled || loading} - {...otherProps} - > - {otherProps.children} - {loading ? ( - <Spinner - className="ms-1" - variant={variant} - animation="grow" - size="sm" - /> - ) : null} - </Button> - ); -}; - -export default LoadingButton; diff --git a/FrontEnd/src/app/views/common/LoadingPage.tsx b/FrontEnd/src/app/views/common/LoadingPage.tsx deleted file mode 100644 index 590fafa0..00000000 --- a/FrontEnd/src/app/views/common/LoadingPage.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { Spinner } from "react-bootstrap"; - -const LoadingPage: React.FC = () => { - return ( - <div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center"> - <Spinner variant="primary" animation="border" /> - </div> - ); -}; - -export default LoadingPage; diff --git a/FrontEnd/src/app/views/common/Menu.tsx b/FrontEnd/src/app/views/common/Menu.tsx deleted file mode 100644 index ae73a331..00000000 --- a/FrontEnd/src/app/views/common/Menu.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { OverlayTrigger, OverlayTriggerProps, Popover } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -import { BootstrapThemeColor, convertI18nText, I18nText } from "@/common"; - -export type MenuItem = - | { - type: "divider"; - } - | { - type: "button"; - text: I18nText; - iconClassName?: string; - color?: BootstrapThemeColor; - onClick: () => void; - }; - -export type MenuItems = MenuItem[]; - -export interface MenuProps { - items: MenuItems; - className?: string; - onItemClicked?: () => void; -} - -const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => { - const { t } = useTranslation(); - - return ( - <div className={classnames("cru-menu", className)}> - {items.map((item, index) => { - if (item.type === "divider") { - return <div key={index} className="cru-menu-divider" />; - } else { - return ( - <div - key={index} - className={classnames( - "cru-menu-item", - `color-${item.color ?? "primary"}` - )} - onClick={() => { - item.onClick(); - onItemClicked?.(); - }} - > - {item.iconClassName != null ? ( - <i - className={classnames( - item.iconClassName, - "cru-menu-item-icon" - )} - /> - ) : null} - {convertI18nText(item.text, t)} - </div> - ); - } - })} - </div> - ); -}; - -export default Menu; - -export interface PopupMenuProps { - items: MenuItems; - children: OverlayTriggerProps["children"]; -} - -export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => { - const [show, setShow] = React.useState<boolean>(false); - const toggle = (): void => setShow(!show); - - return ( - <OverlayTrigger - trigger="click" - rootClose - overlay={ - <Popover id="menu-popover"> - <Menu items={items} onItemClicked={() => setShow(false)} /> - </Popover> - } - show={show} - onToggle={toggle} - > - {children} - </OverlayTrigger> - ); -}; diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx deleted file mode 100644 index ac4c51b9..00000000 --- a/FrontEnd/src/app/views/common/OperationDialog.tsx +++ /dev/null @@ -1,471 +0,0 @@ -import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Form, Button, Modal } from "react-bootstrap"; -import { TwitterPicker } from "react-color"; -import moment from "moment"; - -import { convertI18nText, I18nText, UiLogicError } from "@/common"; - -import LoadingButton from "./LoadingButton"; - -interface DefaultErrorPromptProps { - error?: string; -} - -const DefaultErrorPrompt: React.FC<DefaultErrorPromptProps> = (props) => { - const { t } = useTranslation(); - - let result = <p className="text-danger">{t("operationDialog.error")}</p>; - - if (props.error != null) { - result = ( - <> - {result} - <p className="text-danger">{props.error}</p> - </> - ); - } - - return result; -}; - -export interface OperationDialogTextInput { - type: "text"; - label?: I18nText; - password?: boolean; - initValue?: string; - textFieldProps?: Omit< - React.InputHTMLAttributes<HTMLInputElement>, - "type" | "value" | "onChange" | "aria-relevant" - >; - helperText?: string; -} - -export interface OperationDialogBoolInput { - type: "bool"; - label: I18nText; - initValue?: boolean; -} - -export interface OperationDialogSelectInputOption { - value: string; - label: I18nText; - icon?: React.ReactElement; -} - -export interface OperationDialogSelectInput { - type: "select"; - label: I18nText; - options: OperationDialogSelectInputOption[]; - initValue?: string; -} - -export interface OperationDialogColorInput { - type: "color"; - label?: I18nText; - initValue?: string | null; - canBeNull?: boolean; -} - -export interface OperationDialogDateTimeInput { - type: "datetime"; - label?: I18nText; - initValue?: string; -} - -export type OperationDialogInput = - | OperationDialogTextInput - | OperationDialogBoolInput - | OperationDialogSelectInput - | OperationDialogColorInput - | OperationDialogDateTimeInput; - -interface OperationInputTypeStringToValueTypeMap { - text: string; - bool: boolean; - select: string; - color: string | null; - datetime: string; -} - -type MapOperationInputTypeStringToValueType<Type> = - Type extends keyof OperationInputTypeStringToValueTypeMap - ? OperationInputTypeStringToValueTypeMap[Type] - : never; - -type MapOperationInputInfoValueType<T> = T extends OperationDialogInput - ? MapOperationInputTypeStringToValueType<T["type"]> - : T; - -const initValueMapperMap: { - [T in OperationDialogInput as T["type"]]: ( - item: T - ) => MapOperationInputInfoValueType<T>; -} = { - bool: (item) => item.initValue ?? false, - color: (item) => item.initValue ?? null, - datetime: (item) => { - if (item.initValue != null) { - return moment(item.initValue).format("YYYY-MM-DDTHH:mm:ss"); - } else { - return ""; - } - }, - select: (item) => item.initValue ?? item.options[0].value, - text: (item) => item.initValue ?? "", -}; - -type MapOperationInputInfoValueTypeList< - Tuple extends readonly OperationDialogInput[] -> = { - [Index in keyof Tuple]: MapOperationInputInfoValueType<Tuple[Index]>; -} & { length: Tuple["length"] }; - -export type OperationInputError = - | { - [index: number]: I18nText | null | undefined; - } - | null - | undefined; - -const isNoError = (error: OperationInputError): boolean => { - if (error == null) return true; - for (const key in error) { - if (error[key] != null) return false; - } - return true; -}; - -export interface OperationDialogProps< - TData, - OperationInputInfoList extends readonly OperationDialogInput[] -> { - open: boolean; - close: () => void; - title: I18nText | (() => React.ReactNode); - themeColor?: "danger" | "success" | string; - onProcess: ( - inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList> - ) => Promise<TData>; - inputScheme?: OperationInputInfoList; - inputValidator?: ( - inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList> - ) => OperationInputError; - inputPrompt?: I18nText | (() => React.ReactNode); - processPrompt?: () => React.ReactNode; - successPrompt?: (data: TData) => React.ReactNode; - failurePrompt?: (error: unknown) => React.ReactNode; - onSuccessAndClose?: (data: TData) => void; -} - -const OperationDialog = < - TData, - OperationInputInfoList extends readonly OperationDialogInput[] ->( - props: OperationDialogProps<TData, OperationInputInfoList> -): React.ReactElement => { - const inputScheme = (props.inputScheme ?? - []) as readonly OperationDialogInput[]; - - const { t } = useTranslation(); - - type Step = - | { type: "input" } - | { type: "process" } - | { - type: "success"; - data: TData; - } - | { - type: "failure"; - data: unknown; - }; - const [step, setStep] = useState<Step>({ type: "input" }); - - type ValueType = boolean | string | null | undefined; - - const [values, setValues] = useState<ValueType[]>( - inputScheme.map((item) => { - if (item.type in initValueMapperMap) { - return ( - initValueMapperMap[item.type] as ( - i: OperationDialogInput - ) => ValueType - )(item); - } else { - throw new UiLogicError("Unknown input scheme."); - } - }) - ); - const [dirtyList, setDirtyList] = useState<boolean[]>(() => - inputScheme.map(() => false) - ); - const [inputError, setInputError] = useState<OperationInputError>(); - - const close = (): void => { - if (step.type !== "process") { - props.close(); - if (step.type === "success" && props.onSuccessAndClose) { - props.onSuccessAndClose(step.data); - } - } else { - console.log("Attempt to close modal when processing."); - } - }; - - const onConfirm = (): void => { - setStep({ type: "process" }); - props - .onProcess( - values.map((v, index) => { - if (inputScheme[index].type === "datetime" && v !== "") - return new Date(v as string).toISOString(); - else return v; - }) as unknown as MapOperationInputInfoValueTypeList<OperationInputInfoList> - ) - .then( - (d) => { - setStep({ - type: "success", - data: d, - }); - }, - (e: unknown) => { - setStep({ - type: "failure", - data: e, - }); - } - ); - }; - - let body: React.ReactNode; - if (step.type === "input" || step.type === "process") { - const process = step.type === "process"; - - let inputPrompt = - typeof props.inputPrompt === "function" - ? props.inputPrompt() - : convertI18nText(props.inputPrompt, t); - inputPrompt = <h6>{inputPrompt}</h6>; - - const validate = (values: ValueType[]): boolean => { - const { inputValidator } = props; - if (inputValidator != null) { - const result = inputValidator( - values as unknown as MapOperationInputInfoValueTypeList<OperationInputInfoList> - ); - setInputError(result); - return isNoError(result); - } - return true; - }; - - const updateValue = (index: number, newValue: ValueType): void => { - const oldValues = values; - const newValues = oldValues.slice(); - newValues[index] = newValue; - setValues(newValues); - if (dirtyList[index] === false) { - const newDirtyList = dirtyList.slice(); - newDirtyList[index] = true; - setDirtyList(newDirtyList); - } - validate(newValues); - }; - - const canProcess = isNoError(inputError); - - body = ( - <> - <Modal.Body> - {inputPrompt} - {inputScheme.map((item, index) => { - const value = values[index]; - const error: string | null = - dirtyList[index] && inputError != null - ? convertI18nText(inputError[index], t) - : null; - - if (item.type === "text") { - return ( - <Form.Group key={index}> - {item.label && ( - <Form.Label>{convertI18nText(item.label, t)}</Form.Label> - )} - <Form.Control - type={item.password === true ? "password" : "text"} - value={value as string} - onChange={(e) => { - const v = e.target.value; - updateValue(index, v); - }} - isInvalid={error != null} - disabled={process} - /> - {error != null && ( - <Form.Control.Feedback type="invalid"> - {error} - </Form.Control.Feedback> - )} - {item.helperText && ( - <Form.Text>{t(item.helperText)}</Form.Text> - )} - </Form.Group> - ); - } else if (item.type === "bool") { - return ( - <Form.Group key={index}> - <Form.Check<"input"> - type="checkbox" - checked={value as boolean} - onChange={(event) => { - updateValue(index, event.currentTarget.checked); - }} - label={convertI18nText(item.label, t)} - disabled={process} - /> - </Form.Group> - ); - } else if (item.type === "select") { - return ( - <Form.Group key={index}> - <Form.Label>{convertI18nText(item.label, t)}</Form.Label> - <Form.Control - as="select" - value={value as string} - onChange={(event) => { - updateValue(index, event.target.value); - }} - disabled={process} - > - {item.options.map((option, i) => { - return ( - <option value={option.value} key={i}> - {option.icon} - {convertI18nText(option.label, t)} - </option> - ); - })} - </Form.Control> - </Form.Group> - ); - } else if (item.type === "color") { - return ( - <Form.Group key={index}> - {item.canBeNull ? ( - <Form.Check<"input"> - type="checkbox" - checked={value !== null} - onChange={(event) => { - if (event.currentTarget.checked) { - updateValue(index, "#007bff"); - } else { - updateValue(index, null); - } - }} - label={convertI18nText(item.label, t)} - disabled={process} - /> - ) : ( - <Form.Label>{convertI18nText(item.label, t)}</Form.Label> - )} - {value !== null && ( - <TwitterPicker - color={value as string} - onChange={(result) => updateValue(index, result.hex)} - /> - )} - </Form.Group> - ); - } else if (item.type === "datetime") { - return ( - <Form.Group key={index}> - {item.label && ( - <Form.Label>{convertI18nText(item.label, t)}</Form.Label> - )} - <Form.Control - type="datetime-local" - value={value as string} - onChange={(e) => { - const v = e.target.value; - updateValue(index, v); - }} - isInvalid={error != null} - disabled={process} - /> - {error != null && ( - <Form.Control.Feedback type="invalid"> - {error} - </Form.Control.Feedback> - )} - </Form.Group> - ); - } - })} - </Modal.Body> - <Modal.Footer> - <Button variant="outline-secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - <LoadingButton - variant={props.themeColor} - loading={process} - disabled={!canProcess} - onClick={() => { - setDirtyList(inputScheme.map(() => true)); - if (validate(values)) { - onConfirm(); - } - }} - > - {t("operationDialog.confirm")} - </LoadingButton> - </Modal.Footer> - </> - ); - } else { - let content: React.ReactNode; - const result = step; - if (result.type === "success") { - content = - props.successPrompt?.(result.data) ?? t("operationDialog.success"); - if (typeof content === "string") - content = <p className="text-success">{content}</p>; - } else { - content = props.failurePrompt?.(result.data) ?? <DefaultErrorPrompt />; - if (typeof content === "string") - content = <DefaultErrorPrompt error={content} />; - } - body = ( - <> - <Modal.Body>{content}</Modal.Body> - <Modal.Footer> - <Button variant="primary" onClick={close}> - {t("operationDialog.ok")} - </Button> - </Modal.Footer> - </> - ); - } - - const title = - typeof props.title === "function" - ? props.title() - : convertI18nText(props.title, t); - - return ( - <Modal show={props.open} onHide={close}> - <Modal.Header - className={ - props.themeColor != null ? "text-" + props.themeColor : undefined - } - > - {title} - </Modal.Header> - {body} - </Modal> - ); -}; - -export default OperationDialog; diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx deleted file mode 100644 index ccb6dad6..00000000 --- a/FrontEnd/src/app/views/common/SearchInput.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { useCallback } from "react"; -import classnames from "classnames"; -import { useTranslation } from "react-i18next"; -import { Spinner, Form, Button } from "react-bootstrap"; - -export interface SearchInputProps { - value: string; - onChange: (value: string) => void; - onButtonClick: () => void; - className?: string; - loading?: boolean; - buttonText?: string; - placeholder?: string; - additionalButton?: React.ReactNode; - alwaysOneline?: boolean; -} - -const SearchInput: React.FC<SearchInputProps> = (props) => { - const { onChange, onButtonClick, alwaysOneline } = props; - - const { t } = useTranslation(); - - const onInputChange = useCallback( - (event: React.ChangeEvent<HTMLInputElement>): void => { - onChange(event.currentTarget.value); - }, - [onChange] - ); - - const onInputKeyPress = useCallback( - (event: React.KeyboardEvent<HTMLInputElement>): void => { - if (event.key === "Enter") { - onButtonClick(); - event.preventDefault(); - } - }, - [onButtonClick] - ); - - return ( - <Form - className={classnames( - "cru-search-input", - alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap", - props.className - )} - > - <Form.Control - className="me-sm-2 flex-grow-1" - value={props.value} - onChange={onInputChange} - onKeyPress={onInputKeyPress} - placeholder={props.placeholder} - /> - {props.additionalButton ? ( - <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2"> - {props.additionalButton} - </div> - ) : null} - <div - className={classnames( - alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0", - "flex-shrink-0" - )} - > - {props.loading ? ( - <Spinner variant="primary" animation="border" /> - ) : ( - <Button variant="outline-primary" onClick={props.onButtonClick}> - {props.buttonText ?? t("search")} - </Button> - )} - </div> - </Form> - ); -}; - -export default SearchInput; diff --git a/FrontEnd/src/app/views/common/Skeleton.tsx b/FrontEnd/src/app/views/common/Skeleton.tsx deleted file mode 100644 index 14886c71..00000000 --- a/FrontEnd/src/app/views/common/Skeleton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { range } from "lodash"; - -export interface SkeletonProps { - lineNumber?: number; - className?: string; - style?: React.CSSProperties; -} - -const Skeleton: React.FC<SkeletonProps> = (props) => { - const { lineNumber: lineNumberProps, className, style } = props; - const lineNumber = lineNumberProps ?? 3; - - return ( - <div className={classnames(className, "cru-skeleton")} style={style}> - {range(lineNumber).map((i) => ( - <div - key={i} - className={classnames( - "cru-skeleton-line", - i === lineNumber - 1 && "last" - )} - /> - ))} - </div> - ); -}; - -export default Skeleton; diff --git a/FrontEnd/src/app/views/common/TabPages.tsx b/FrontEnd/src/app/views/common/TabPages.tsx deleted file mode 100644 index 2b1d91cb..00000000 --- a/FrontEnd/src/app/views/common/TabPages.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -import { Nav } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -import { convertI18nText, I18nText, UiLogicError } from "@/common"; - -export interface TabPage { - id: string; - tabText: I18nText; - page: React.ReactNode; -} - -export interface TabPagesProps { - pages: TabPage[]; - actions?: React.ReactNode; - className?: string; - style?: React.CSSProperties; - navClassName?: string; - navStyle?: React.CSSProperties; - pageContainerClassName?: string; - pageContainerStyle?: React.CSSProperties; -} - -const TabPages: React.FC<TabPagesProps> = ({ - pages, - actions, - className, - style, - navClassName, - navStyle, - pageContainerClassName, - pageContainerStyle, -}) => { - if (pages.length === 0) { - throw new UiLogicError("Page list can't be empty."); - } - - const { t } = useTranslation(); - - const [tab, setTab] = React.useState<string>(pages[0].id); - - const currentPage = pages.find((p) => p.id === tab); - - if (currentPage == null) { - throw new UiLogicError("Current tab value is bad."); - } - - return ( - <div className={className} style={style}> - <Nav variant="tabs" className={navClassName} style={navStyle}> - {pages.map((page) => ( - <Nav.Item key={page.id}> - <Nav.Link - active={tab === page.id} - onClick={() => { - setTab(page.id); - }} - > - {convertI18nText(page.tabText, t)} - </Nav.Link> - </Nav.Item> - ))} - {actions != null && ( - <div className="ms-auto cru-tab-pages-action-area">{actions}</div> - )} - </Nav> - <div className={pageContainerClassName} style={pageContainerStyle}> - {currentPage.page} - </div> - </div> - ); -}; - -export default TabPages; diff --git a/FrontEnd/src/app/views/common/TimelineLogo.tsx b/FrontEnd/src/app/views/common/TimelineLogo.tsx deleted file mode 100644 index 27d188fc..00000000 --- a/FrontEnd/src/app/views/common/TimelineLogo.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { SVGAttributes } from "react"; - -export interface TimelineLogoProps extends SVGAttributes<SVGElement> { - color?: string; -} - -const TimelineLogo: React.FC<TimelineLogoProps> = (props) => { - const { color, ...forwardProps } = props; - const coercedColor = color ?? "currentcolor"; - return ( - <svg - className={props.className} - viewBox="0 0 100 100" - fill="none" - strokeWidth="12" - stroke={coercedColor} - {...forwardProps} - > - <line x1="50" y1="0" x2="50" y2="25" /> - <circle cx="50" cy="50" r="22" /> - <line x1="50" y1="75" x2="50" y2="100" /> - </svg> - ); -}; - -export default TimelineLogo; diff --git a/FrontEnd/src/app/views/common/ToggleIconButton.tsx b/FrontEnd/src/app/views/common/ToggleIconButton.tsx deleted file mode 100644 index c4d2d132..00000000 --- a/FrontEnd/src/app/views/common/ToggleIconButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -export interface ToggleIconButtonProps - extends React.HTMLAttributes<HTMLElement> { - state: boolean; - trueIconClassName: string; - falseIconClassName: string; -} - -const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({ - state, - className, - trueIconClassName, - falseIconClassName, - ...otherProps -}) => { - return ( - <i - className={classnames( - state ? trueIconClassName : falseIconClassName, - "icon-button", - className - )} - {...otherProps} - /> - ); -}; - -export default ToggleIconButton; diff --git a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx b/FrontEnd/src/app/views/common/UserTimelineLogo.tsx deleted file mode 100644 index 19b9fee5..00000000 --- a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { SVGAttributes } from "react"; - -export interface UserTimelineLogoProps extends SVGAttributes<SVGElement> { - color?: string; -} - -const UserTimelineLogo: React.FC<UserTimelineLogoProps> = (props) => { - const { color, ...forwardProps } = props; - const coercedColor = color ?? "currentcolor"; - - return ( - <svg viewBox="0 0 100 100" {...forwardProps}> - <g fill="none" stroke={coercedColor} strokeWidth="12"> - <line x1="50" x2="50" y1="0" y2="25" /> - <circle cx="50" cy="50" r="22" /> - <line x1="50" x2="50" y1="75" y2="100" /> - </g> - <g fill={coercedColor}> - <circle cx="85" cy="75" r="10" /> - <path d="m70,100c0,0 15,-30 30,0.25" /> - </g> - </svg> - ); -}; - -export default UserTimelineLogo; diff --git a/FrontEnd/src/app/views/common/alert/AlertHost.tsx b/FrontEnd/src/app/views/common/alert/AlertHost.tsx deleted file mode 100644 index 949be7ed..00000000 --- a/FrontEnd/src/app/views/common/alert/AlertHost.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from "react"; -import without from "lodash/without"; -import { useTranslation } from "react-i18next"; -import { Alert } from "react-bootstrap"; - -import { - alertService, - AlertInfoEx, - kAlertHostId, - AlertInfo, -} from "@/services/alert"; -import { convertI18nText } from "@/common"; - -interface AutoCloseAlertProps { - alert: AlertInfo; - close: () => void; -} - -export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => { - const { alert, close } = props; - const { dismissTime } = alert; - - const { t } = useTranslation(); - - const timerTag = React.useRef<number | null>(null); - const closeHandler = React.useRef<(() => void) | null>(null); - - React.useEffect(() => { - closeHandler.current = close; - }, [close]); - - React.useEffect(() => { - const tag = - dismissTime === "never" - ? null - : typeof dismissTime === "number" - ? window.setTimeout(() => closeHandler.current?.(), dismissTime) - : window.setTimeout(() => closeHandler.current?.(), 5000); - timerTag.current = tag; - return () => { - if (tag != null) { - window.clearTimeout(tag); - } - }; - }, [dismissTime]); - - const cancelTimer = (): void => { - const { current: tag } = timerTag; - if (tag != null) { - window.clearTimeout(tag); - } - }; - - return ( - <Alert - className="m-3" - variant={alert.type ?? "primary"} - onClick={cancelTimer} - onClose={close} - dismissible - > - {(() => { - const { message } = alert; - if (typeof message === "function") { - const Message = message; - return <Message />; - } else return convertI18nText(message, t); - })()} - </Alert> - ); -}; - -const AlertHost: React.FC = () => { - const [alerts, setAlerts] = React.useState<AlertInfoEx[]>([]); - - // react guarantee that state setters are stable, so we don't need to add it to dependency list - - React.useEffect(() => { - const consume = (alert: AlertInfoEx): void => { - setAlerts((old) => [...old, alert]); - }; - - alertService.registerConsumer(consume); - return () => { - alertService.unregisterConsumer(consume); - }; - }, []); - - return ( - <div id={kAlertHostId} className="alert-container"> - {alerts.map((alert) => { - return ( - <AutoCloseAlert - key={alert.id} - alert={alert} - close={() => { - setAlerts((old) => without(old, alert)); - }} - /> - ); - })} - </div> - ); -}; - -export default AlertHost; diff --git a/FrontEnd/src/app/views/common/alert/alert.sass b/FrontEnd/src/app/views/common/alert/alert.sass deleted file mode 100644 index c3560b87..00000000 --- a/FrontEnd/src/app/views/common/alert/alert.sass +++ /dev/null @@ -1,15 +0,0 @@ -.alert-container
- position: fixed
- z-index: $zindex-popover
-
-@include media-breakpoint-up(sm)
- .alert-container
- bottom: 0
- right: 0
-
-@include media-breakpoint-down(sm)
- .alert-container
- bottom: 0
- right: 0
- left: 0
- text-align: center
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass deleted file mode 100644 index cbf7292e..00000000 --- a/FrontEnd/src/app/views/common/common.sass +++ /dev/null @@ -1,191 +0,0 @@ -.image-cropper-container
- position: relative
- box-sizing: border-box
- user-select: none
-
-.image-cropper-container img
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
-
-.image-cropper-mask-container
- position: absolute
- left: 0
- top: 0
- right: 0
- bottom: 0
- overflow: hidden
-
-.image-cropper-mask
- position: absolute
- box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
- touch-action: none
-
-.image-cropper-handler
- position: absolute
- width: 26px
- height: 26px
- border: black solid 2px
- border-radius: 50%
- background: white
- touch-action: none
-
-.app-bar
- display: flex
- align-items: center
- height: 56px
-
- position: fixed
- z-index: 1030
- top: 0
- left: 0
- right: 0
-
- background-color: var(--tl-primary-color)
-
- transition: background-color 1s
-
- a
- color: var(--tl-text-on-primary-inactive-color)
- text-decoration: none
- margin: 0 1em
-
- &:hover
- color: var(--tl-text-on-primary-color)
-
- &.active
- color: var(--tl-text-on-primary-color)
-
-.app-bar-brand
- display: flex
- align-items: center
-
-.app-bar-brand-icon
- height: 2em
-
-.app-bar-main-area
- display: flex
- flex-grow: 1
-
-.app-bar-link-area
- display: flex
- align-items: center
- flex-shrink: 0
-
-.app-bar-user-area
- display: flex
- align-items: center
- flex-shrink: 0
- margin-left: auto
-
-.small-screen
- .app-bar-main-area
- position: absolute
- top: 56px
- left: 0
- right: 0
-
- transform-origin: top
- transition: transform 0.6s, background-color 1s
-
- background-color: var(--tl-primary-color)
-
- flex-direction: column
-
- &.app-bar-collapse
- transform: scale(1,0)
-
- a
- text-align: left
- padding: 0.5em 0.5em
-
- .app-bar-link-area
- flex-direction: column
- align-items: stretch
-
- .app-bar-user-area
- flex-direction: column
- align-items: stretch
- margin-left: unset
-
- .app-bar-avatar
- align-self: flex-end
-
-.app-bar-toggler
- margin-left: auto
- font-size: 2em
- margin-right: 1em
- color: var(--tl-text-on-primary-color)
- cursor: pointer
- user-select: none
-
-.cru-skeleton
- padding: 0 1em
-
-.cru-skeleton-line
- height: 1em
- background-color: #e6e6e6
- margin: 0.7em 0
- border-radius: 0.2em
-
- &.last
- width: 50%
-
-.cru-full-page
- position: fixed
- z-index: 1031
- left: 0
- top: 0
- right: 0
- bottom: 0
- background-color: white
- padding-top: 56px
-
-.cru-full-page-top-bar
- height: 56px
-
- position: absolute
- top: 0
- left: 0
- right: 0
- z-index: 1
-
- background-color: var(--tl-primary-color)
-
- display: flex
- align-items: center
-
-.cru-full-page-content-container
- overflow: scroll
-
-.cru-menu
- min-width: 200px
-
-.cru-menu-item
- font-size: 1.2em
- padding: 0.5em 1.5em
- cursor: pointer
-
- @each $color, $value in $theme-colors
- &.color-#{$color}
- color: $value
-
- &:hover
- color: white
- background-color: $value
-
-.cru-menu-item-icon
- margin-right: 1em
-
-.cru-menu-divider
- border-top: 1px solid $gray-200
-
-.cru-tab-pages-action-area
- display: flex
- align-items: center
-
-.cru-search-input
- display: flex
- flex-wrap: wrap
diff --git a/FrontEnd/src/app/views/common/user/UserAvatar.tsx b/FrontEnd/src/app/views/common/user/UserAvatar.tsx deleted file mode 100644 index 9e822528..00000000 --- a/FrontEnd/src/app/views/common/user/UserAvatar.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import { getHttpUserClient } from "@/http/user"; - -export interface UserAvatarProps - extends React.ImgHTMLAttributes<HTMLImageElement> { - username: string; -} - -const UserAvatar: React.FC<UserAvatarProps> = ({ username, ...otherProps }) => { - return ( - <img - src={getHttpUserClient().generateAvatarUrl(username)} - {...otherProps} - /> - ); -}; - -export default UserAvatar; diff --git a/FrontEnd/src/app/views/home/TimelineListView.tsx b/FrontEnd/src/app/views/home/TimelineListView.tsx deleted file mode 100644 index 95c3c367..00000000 --- a/FrontEnd/src/app/views/home/TimelineListView.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from "react"; - -import { convertI18nText, I18nText } from "@/common"; - -import { HttpTimelineInfo } from "@/http/timeline"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; - -interface TimelineListItemProps { - timeline: HttpTimelineInfo; -} - -const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => { - const url = React.useMemo( - () => - timeline.name.startsWith("@") - ? `/users/${timeline.owner.username}` - : `/timelines/${timeline.name}`, - [timeline] - ); - - return ( - <div className="home-timeline-list-item home-timeline-list-item-timeline"> - <svg className="home-timeline-list-item-line" viewBox="0 0 120 100"> - <path - d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z" - fillRule="evenodd" - fill="#007bff" - /> - </svg> - <div> - <div>{timeline.title}</div> - <div> - <small className="text-secondary">{timeline.description}</small> - </div> - </div> - <Link to={url}> - <i className="icon-button bi-arrow-right ms-3" /> - </Link> - </div> - ); -}; - -const TimelineListArrow: React.FC = () => { - return ( - <div> - <div className="home-timeline-list-item"> - <svg className="home-timeline-list-item-line" viewBox="0 0 120 60"> - <path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" /> - </svg> - </div> - <div className="home-timeline-list-item"> - <svg - className="home-timeline-list-item-line home-timeline-list-loading-head" - viewBox="0 0 120 40" - > - <path - d="M 60,10 l 20,20 l 20,-20" - fill="none" - stroke="#007bff" - strokeWidth="5" - /> - </svg> - </div> - </div> - ); -}; - -interface TimelineListViewProps { - headerText?: I18nText; - timelines?: HttpTimelineInfo[]; -} - -const TimelineListView: React.FC<TimelineListViewProps> = ({ - headerText, - timelines, -}) => { - const { t } = useTranslation(); - - return ( - <div className="home-timeline-list"> - <div className="home-timeline-list-item"> - <svg className="home-timeline-list-item-line" viewBox="0 0 120 120"> - <path - d="M 0,20 Q 80,20 80,80 l 0,40" - stroke="#007bff" - strokeWidth="40" - fill="none" - /> - </svg> - <h3>{convertI18nText(headerText, t)}</h3> - </div> - {timelines != null - ? timelines.map((t) => <TimelineListItem key={t.name} timeline={t} />) - : null} - <TimelineListArrow /> - </div> - ); -}; - -export default TimelineListView; diff --git a/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx b/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx deleted file mode 100644 index aea7b4b2..00000000 --- a/FrontEnd/src/app/views/home/WebsiteIntroduction.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; - -const WebsiteIntroduction: React.FC<{ - className?: string; - style?: React.CSSProperties; -}> = ({ className, style }) => { - const { i18n } = useTranslation(); - - if (i18n.language.startsWith("zh")) { - return ( - <div className={className} style={style}> - <h2> - 欢迎来到<strong>时间线</strong>！🎉🎉🎉 - </h2> - <p> - 本网站由无数个独立的时间线构成，每一个时间线都是一个消息列表，类似于一个聊天软件（比如QQ）。 - </p> - <p> - 如果你拥有一个账号，<Link to="/login">登陆</Link> - 后你可以自由地在属于你的时间线中发送内容，支持markdown和上传图片哦！你可以创建一个新的时间线来开启一个新的话题。你也可以设置相关权限，只让一部分人能看到时间线的内容。 - </p> - <p> - 如果你没有账号，那么你可以去浏览一下公开的时间线，比如下面这些站长设置的高光时间线。 - </p> - <p> - 鉴于这个网站在我的小型服务器上部署，所以没有开放注册。如果你也想把这个服务部署到自己的服务器上，你可以在 - <Link to="/about">关于</Link>页面找到一些信息。 - </p> - <p> - <small className="text-secondary"> - 这一段介绍是我的对象抱怨多次我的网站他根本看不明白之后加的，希望你能顺利看懂这个网站的逻辑！😅 - </small> - </p> - </div> - ); - } else { - return ( - <div className={className} style={style}> - <h2> - Welcome to <strong>Timeline</strong>!🎉🎉🎉 - </h2> - <p> - This website consists of many individual timelines. Each timeline is a - list of messages just like a chat app. - </p> - <p> - If you do have an account, you can <Link to="/login">login</Link> and - post messages, which supports Markdown and images, in your timelines. - You can also create a new timeline to open a new topic. You can set - the permission of a timeline to only allow specified people to see the - content of the timeline. - </p> - <p> - If you don't have an account, you can view some public timelines - like highlight timelines below set by website manager. - </p> - <p> - Since this website is hosted on my tiny server, so account registry is - not opened. If you want to host this service on your own server, you - can find some useful information on <Link to="/about">about</Link>{" "} - page. - </p> - <p> - <small className="text-secondary"> - This introduction is added after my lover complained a lot of times - about the obscuration of my website. May you understand the logic of - it!😅 - </small> - </p> - </div> - ); - } -}; - -export default WebsiteIntroduction; diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass deleted file mode 100644 index b4cda586..00000000 --- a/FrontEnd/src/app/views/home/home.sass +++ /dev/null @@ -1,29 +0,0 @@ -.home-timeline-list-item
- display: flex
- align-items: center
-
-.home-timeline-list-item-timeline
- transition: background 0.8s
- animation: 0.8s home-timeline-list-item-timeline-enter
- &:hover
- background: $gray-200
-
-@keyframes home-timeline-list-item-timeline-enter
- from
- transform: translate(-100%,0)
- opacity: 0
-
-.home-timeline-list-item-line
- width: 80px
- flex-shrink: 0
-
-@keyframes home-timeline-list-loading-head-animation
- from
- transform: translate(0,-30px)
- opacity: 1
-
- to
- opacity: 0
-
-.home-timeline-list-loading-head
- animation: 1s infinite home-timeline-list-loading-head-animation
diff --git a/FrontEnd/src/app/views/home/index.tsx b/FrontEnd/src/app/views/home/index.tsx deleted file mode 100644 index 0eca23ee..00000000 --- a/FrontEnd/src/app/views/home/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; - -import { HttpTimelineInfo } from "@/http/timeline"; -import { getHttpHighlightClient } from "@/http/highlight"; - -import SearchInput from "../common/SearchInput"; -import TimelineListView from "./TimelineListView"; -import WebsiteIntroduction from "./WebsiteIntroduction"; - -const highlightTimelineMessageMap = { - loading: "home.loadingHighlightTimelines", - done: "home.loadedHighlightTimelines", - error: "home.errorHighlightTimelines", -} as const; - -const HomeV2: React.FC = () => { - const history = useHistory(); - - const [navText, setNavText] = React.useState<string>(""); - - const [highlightTimelineState, setHighlightTimelineState] = React.useState< - "loading" | "done" | "error" - >("loading"); - const [highlightTimelines, setHighlightTimelines] = React.useState< - HttpTimelineInfo[] | undefined - >(); - - React.useEffect(() => { - if (highlightTimelineState === "loading") { - let subscribe = true; - void getHttpHighlightClient() - .list() - .then( - (data) => { - if (subscribe) { - setHighlightTimelineState("done"); - setHighlightTimelines(data); - } - }, - () => { - if (subscribe) { - setHighlightTimelineState("error"); - setHighlightTimelines(undefined); - } - } - ); - return () => { - subscribe = false; - }; - } - }, [highlightTimelineState]); - - return ( - <> - <SearchInput - className="mx-2 my-3 float-sm-end" - value={navText} - onChange={setNavText} - onButtonClick={() => { - history.push(`search?q=${navText}`); - }} - alwaysOneline - /> - <WebsiteIntroduction className="m-2" /> - <TimelineListView - headerText={highlightTimelineMessageMap[highlightTimelineState]} - timelines={highlightTimelines} - /> - </> - ); -}; - -export default HomeV2; diff --git a/FrontEnd/src/app/views/login/index.tsx b/FrontEnd/src/app/views/login/index.tsx deleted file mode 100644 index 6adcef39..00000000 --- a/FrontEnd/src/app/views/login/index.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Container, Form } from "react-bootstrap"; - -import { useUser, userService } from "@/services/user"; - -import AppBar from "../common/AppBar"; -import LoadingButton from "../common/LoadingButton"; - -const LoginPage: React.FC = (_) => { - const { t } = useTranslation(); - const history = useHistory(); - const [username, setUsername] = React.useState<string>(""); - const [usernameDirty, setUsernameDirty] = React.useState<boolean>(false); - const [password, setPassword] = React.useState<string>(""); - const [passwordDirty, setPasswordDirty] = React.useState<boolean>(false); - const [rememberMe, setRememberMe] = React.useState<boolean>(true); - const [process, setProcess] = React.useState<boolean>(false); - const [error, setError] = React.useState<string | null>(null); - - const user = useUser(); - - React.useEffect(() => { - if (user != null) { - const id = setTimeout(() => history.push("/"), 3000); - return () => { - clearTimeout(id); - }; - } - }, [history, user]); - - if (user != null) { - return ( - <> - <AppBar /> - <p>{t("login.alreadyLogin")}</p> - </> - ); - } - - const submit = (): void => { - if (username === "" || password === "") { - setUsernameDirty(true); - setPasswordDirty(true); - return; - } - - setProcess(true); - userService - .login( - { - username: username, - password: password, - }, - rememberMe - ) - .then( - () => { - if (history.length === 0) { - history.push("/"); - } else { - history.goBack(); - } - }, - (e: Error) => { - setProcess(false); - setError(e.message); - } - ); - }; - - const onEnterPressInPassword: React.KeyboardEventHandler = (e) => { - if (e.key === "Enter") { - submit(); - } - }; - - return ( - <Container fluid className="login-container mt-2"> - <h1 className="text-center">{t("welcome")}</h1> - <Form> - <Form.Group> - <Form.Label htmlFor="username">{t("user.username")}</Form.Label> - <Form.Control - id="username" - disabled={process} - onChange={(e) => { - setUsername(e.target.value); - setUsernameDirty(true); - }} - value={username} - isInvalid={usernameDirty && username === ""} - /> - {usernameDirty && username === "" && ( - <Form.Control.Feedback type="invalid"> - {t("login.emptyUsername")} - </Form.Control.Feedback> - )} - </Form.Group> - <Form.Group> - <Form.Label htmlFor="password">{t("user.password")}</Form.Label> - <Form.Control - id="password" - type="password" - disabled={process} - onChange={(e) => { - setPassword(e.target.value); - setPasswordDirty(true); - }} - value={password} - onKeyDown={onEnterPressInPassword} - isInvalid={passwordDirty && password === ""} - /> - {passwordDirty && password === "" && ( - <Form.Control.Feedback type="invalid"> - {t("login.emptyPassword")} - </Form.Control.Feedback> - )} - </Form.Group> - <Form.Group> - <Form.Check<"input"> - id="remember-me" - type="checkbox" - checked={rememberMe} - onChange={(e) => { - setRememberMe(e.currentTarget.checked); - }} - label={t("user.rememberMe")} - /> - </Form.Group> - {error ? <p className="text-danger">{t(error)}</p> : null} - <div className="text-end"> - <LoadingButton - loading={process} - variant="primary" - onClick={(e) => { - submit(); - e.preventDefault(); - }} - disabled={username === "" || password === "" ? true : undefined} - > - {t("user.login")} - </LoadingButton> - </div> - </Form> - </Container> - ); -}; - -export default LoginPage; diff --git a/FrontEnd/src/app/views/login/login.sass b/FrontEnd/src/app/views/login/login.sass deleted file mode 100644 index 0bf385f5..00000000 --- a/FrontEnd/src/app/views/login/login.sass +++ /dev/null @@ -1,2 +0,0 @@ -.login-container
- max-width: 600px
diff --git a/FrontEnd/src/app/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx deleted file mode 100644 index 966ca666..00000000 --- a/FrontEnd/src/app/views/search/index.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { Container, Row } from "react-bootstrap"; -import { useHistory, useLocation } from "react-router"; -import { Link } from "react-router-dom"; - -import { HttpNetworkError } from "@/http/common"; -import { getHttpSearchClient } from "@/http/search"; -import { HttpTimelineInfo } from "@/http/timeline"; - -import SearchInput from "../common/SearchInput"; -import UserAvatar from "../common/user/UserAvatar"; - -const TimelineSearchResultItemView: React.FC<{ - timeline: HttpTimelineInfo; -}> = ({ timeline }) => { - const link = timeline.name.startsWith("@") - ? `users/${timeline.owner.username}` - : `timelines/${timeline.name}`; - - return ( - <div className="timeline-search-result-item my-2 p-3"> - <h4> - <Link to={link} className="mb-2 text-primary"> - {timeline.title} - <small className="ms-3 text-secondary">{timeline.name}</small> - </Link> - </h4> - <div> - <UserAvatar - username={timeline.owner.username} - className="timeline-search-result-item-avatar me-2" - /> - {timeline.owner.nickname} - <small className="ms-3 text-secondary"> - @{timeline.owner.username} - </small> - </div> - </div> - ); -}; - -const SearchPage: React.FC = () => { - const { t } = useTranslation(); - - const history = useHistory(); - const location = useLocation(); - const searchParams = new URLSearchParams(location.search); - const queryParam = searchParams.get("q"); - - const [searchText, setSearchText] = React.useState<string>(""); - const [state, setState] = React.useState< - HttpTimelineInfo[] | "init" | "loading" | "network-error" | "error" - >("init"); - - const [forceResearchKey, setForceResearchKey] = React.useState<number>(0); - - React.useEffect(() => { - setState("init"); - if (queryParam != null && queryParam.length > 0) { - setSearchText(queryParam); - setState("loading"); - void getHttpSearchClient() - .searchTimelines(queryParam) - .then( - (ts) => { - setState(ts); - }, - (e) => { - if (e instanceof HttpNetworkError) { - setState("network-error"); - } else { - setState("error"); - } - } - ); - } - }, [queryParam, forceResearchKey]); - - return ( - <Container className="my-3"> - <Row className="justify-content-center"> - <SearchInput - className="col-12 col-sm-9 col-md-6" - value={searchText} - onChange={setSearchText} - loading={state === "loading"} - onButtonClick={() => { - if (queryParam === searchText) { - setForceResearchKey((old) => old + 1); - } else { - history.push(`/search?q=${searchText}`); - } - }} - /> - </Row> - {(() => { - switch (state) { - case "init": { - if (queryParam == null || queryParam.length === 0) { - return <div>{t("searchPage.input")}</div>; - } - break; - } - case "loading": { - return <div>{t("searchPage.loading")}</div>; - } - case "network-error": { - return <div className="text-danger">{t("error.network")}</div>; - } - case "error": { - return <div className="text-danger">{t("error.unknown")}</div>; - } - default: { - if (state.length === 0) { - return <div>{t("searchPage.noResult")}</div>; - } - return state.map((t) => ( - <TimelineSearchResultItemView key={t.name} timeline={t} /> - )); - } - } - })()} - </Container> - ); -}; - -export default SearchPage; diff --git a/FrontEnd/src/app/views/search/search.sass b/FrontEnd/src/app/views/search/search.sass deleted file mode 100644 index 83f297fe..00000000 --- a/FrontEnd/src/app/views/search/search.sass +++ /dev/null @@ -1,13 +0,0 @@ -.timeline-search-result-item
- @extend .rounded
- border: 1px solid
- border-color: $gray-200
- background: $gray-100
- transition: all 0.3s
- &:hover
- border-color: $primary
-
-.timeline-search-result-item-avatar
- width: 2em
- height: 2em
- border-radius: 50%
diff --git a/FrontEnd/src/app/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/app/views/settings/ChangeAvatarDialog.tsx deleted file mode 100644 index c4f6f492..00000000 --- a/FrontEnd/src/app/views/settings/ChangeAvatarDialog.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useTranslation } from "react-i18next"; -import { AxiosError } from "axios"; -import { Modal, Row, Button } from "react-bootstrap"; - -import { UiLogicError } from "@/common"; - -import { useUserLoggedIn } from "@/services/user"; - -import { getHttpUserClient } from "@/http/user"; - -import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper"; - -export interface ChangeAvatarDialogProps { - open: boolean; - close: () => void; -} - -const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { - const { t } = useTranslation(); - - const user = useUserLoggedIn(); - - const [file, setFile] = React.useState<File | null>(null); - const [fileUrl, setFileUrl] = React.useState<string | null>(null); - const [clip, setClip] = React.useState<Clip | null>(null); - const [cropImgElement, setCropImgElement] = - React.useState<HTMLImageElement | null>(null); - const [resultBlob, setResultBlob] = React.useState<Blob | null>(null); - const [resultUrl, setResultUrl] = React.useState<string | null>(null); - - const [state, setState] = React.useState< - | "select" - | "crop" - | "processcrop" - | "preview" - | "uploading" - | "success" - | "error" - >("select"); - - const [message, setMessage] = useState< - string | { type: "custom"; text: string } | null - >("settings.dialogChangeAvatar.prompt.select"); - - const trueMessage = - message == null - ? null - : typeof message === "string" - ? t(message) - : message.text; - - const closeDialog = props.close; - - const close = React.useCallback((): void => { - if (!(state === "uploading")) { - closeDialog(); - } - }, [state, closeDialog]); - - useEffect(() => { - if (file != null) { - const url = URL.createObjectURL(file); - setClip(null); - setFileUrl(url); - setState("crop"); - return () => { - URL.revokeObjectURL(url); - }; - } else { - setFileUrl(null); - setState("select"); - } - }, [file]); - - React.useEffect(() => { - if (resultBlob != null) { - const url = URL.createObjectURL(resultBlob); - setResultUrl(url); - setState("preview"); - return () => { - URL.revokeObjectURL(url); - }; - } else { - setResultUrl(null); - } - }, [resultBlob]); - - const onSelectFile = React.useCallback( - (e: React.ChangeEvent<HTMLInputElement>): void => { - const files = e.target.files; - if (files == null || files.length === 0) { - setFile(null); - } else { - setFile(files[0]); - } - }, - [] - ); - - const onCropNext = React.useCallback(() => { - if ( - cropImgElement == null || - clip == null || - clip.width === 0 || - file == null - ) { - throw new UiLogicError(); - } - - setState("processcrop"); - void applyClipToImage(cropImgElement, clip, file.type).then((b) => { - setResultBlob(b); - }); - }, [cropImgElement, clip, file]); - - const onCropPrevious = React.useCallback(() => { - setFile(null); - setState("select"); - }, []); - - const onPreviewPrevious = React.useCallback(() => { - setResultBlob(null); - setState("crop"); - }, []); - - const upload = React.useCallback(() => { - if (resultBlob == null) { - throw new UiLogicError(); - } - - setState("uploading"); - getHttpUserClient() - .putAvatar(user.username, resultBlob) - .then( - () => { - setState("success"); - }, - (e: unknown) => { - setState("error"); - setMessage({ type: "custom", text: (e as AxiosError).message }); - } - ); - }, [user.username, resultBlob]); - - const createPreviewRow = (): React.ReactElement => { - if (resultUrl == null) { - throw new UiLogicError(); - } - return ( - <Row className="justify-content-center"> - <img - className="change-avatar-img" - src={resultUrl} - alt={t("settings.dialogChangeAvatar.previewImgAlt")} - /> - </Row> - ); - }; - - return ( - <Modal show={props.open} onHide={close}> - <Modal.Header> - <Modal.Title> {t("settings.dialogChangeAvatar.title")}</Modal.Title> - </Modal.Header> - {(() => { - if (state === "select") { - return ( - <> - <Modal.Body className="container"> - <Row>{t("settings.dialogChangeAvatar.prompt.select")}</Row> - <Row> - <input type="file" accept="image/*" onChange={onSelectFile} /> - </Row> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - </Modal.Footer> - </> - ); - } else if (state === "crop") { - if (fileUrl == null) { - throw new UiLogicError(); - } - return ( - <> - <Modal.Body className="container"> - <Row className="justify-content-center"> - <ImageCropper - clip={clip} - onChange={setClip} - imageUrl={fileUrl} - imageElementCallback={setCropImgElement} - /> - </Row> - <Row>{t("settings.dialogChangeAvatar.prompt.crop")}</Row> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - <Button variant="secondary" onClick={onCropPrevious}> - {t("operationDialog.previousStep")} - </Button> - <Button - color="primary" - onClick={onCropNext} - disabled={ - cropImgElement == null || clip == null || clip.width === 0 - } - > - {t("operationDialog.nextStep")} - </Button> - </Modal.Footer> - </> - ); - } else if (state === "processcrop") { - return ( - <> - <Modal.Body className="container"> - <Row> - {t("settings.dialogChangeAvatar.prompt.processingCrop")} - </Row> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - <Button variant="secondary" onClick={onPreviewPrevious}> - {t("operationDialog.previousStep")} - </Button> - </Modal.Footer> - </> - ); - } else if (state === "preview") { - return ( - <> - <Modal.Body className="container"> - {createPreviewRow()} - <Row>{t("settings.dialogChangeAvatar.prompt.preview")}</Row> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - <Button variant="secondary" onClick={onPreviewPrevious}> - {t("operationDialog.previousStep")} - </Button> - <Button variant="primary" onClick={upload}> - {t("settings.dialogChangeAvatar.upload")} - </Button> - </Modal.Footer> - </> - ); - } else if (state === "uploading") { - return ( - <> - <Modal.Body className="container"> - {createPreviewRow()} - <Row>{t("settings.dialogChangeAvatar.prompt.uploading")}</Row> - </Modal.Body> - <Modal.Footer></Modal.Footer> - </> - ); - } else if (state === "success") { - return ( - <> - <Modal.Body className="container"> - <Row className="p-4 text-success"> - {t("operationDialog.success")} - </Row> - </Modal.Body> - <Modal.Footer> - <Button variant="success" onClick={close}> - {t("operationDialog.ok")} - </Button> - </Modal.Footer> - </> - ); - } else { - return ( - <> - <Modal.Body className="container"> - {createPreviewRow()} - <Row className="text-danger">{trueMessage}</Row> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> - <Button variant="primary" onClick={upload}> - {t("operationDialog.retry")} - </Button> - </Modal.Footer> - </> - ); - } - })()} - </Modal> - ); -}; - -export default ChangeAvatarDialog; diff --git a/FrontEnd/src/app/views/settings/ChangeNicknameDialog.tsx b/FrontEnd/src/app/views/settings/ChangeNicknameDialog.tsx deleted file mode 100644 index 4b44cdd6..00000000 --- a/FrontEnd/src/app/views/settings/ChangeNicknameDialog.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { getHttpUserClient } from "@/http/user"; -import { useUserLoggedIn } from "@/services/user"; -import React from "react"; - -import OperationDialog from "../common/OperationDialog"; - -export interface ChangeNicknameDialogProps { - open: boolean; - close: () => void; -} - -const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => { - const user = useUserLoggedIn(); - - return ( - <OperationDialog - open={props.open} - title="settings.dialogChangeNickname.title" - inputScheme={[ - { type: "text", label: "settings.dialogChangeNickname.inputLabel" }, - ]} - onProcess={([newNickname]) => { - return getHttpUserClient().patch(user.username, { - nickname: newNickname, - }); - }} - close={props.close} - /> - ); -}; - -export default ChangeNicknameDialog; diff --git a/FrontEnd/src/app/views/settings/ChangePasswordDialog.tsx b/FrontEnd/src/app/views/settings/ChangePasswordDialog.tsx deleted file mode 100644 index 21eeeb09..00000000 --- a/FrontEnd/src/app/views/settings/ChangePasswordDialog.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { useState } from "react"; -import { useHistory } from "react-router"; - -import { userService } from "@/services/user"; - -import OperationDialog from "../common/OperationDialog"; - -export interface ChangePasswordDialogProps { - open: boolean; - close: () => void; -} - -const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => { - const history = useHistory(); - - const [redirect, setRedirect] = useState<boolean>(false); - - return ( - <OperationDialog - open={props.open} - title="settings.dialogChangePassword.title" - themeColor="danger" - inputPrompt="settings.dialogChangePassword.prompt" - inputScheme={[ - { - type: "text", - label: "settings.dialogChangePassword.inputOldPassword", - password: true, - }, - { - type: "text", - label: "settings.dialogChangePassword.inputNewPassword", - password: true, - }, - { - type: "text", - label: "settings.dialogChangePassword.inputRetypeNewPassword", - password: true, - }, - ]} - inputValidator={([oldPassword, newPassword, retypedNewPassword]) => { - const result: Record<number, string> = {}; - if (oldPassword === "") { - result[0] = "settings.dialogChangePassword.errorEmptyOldPassword"; - } - if (newPassword === "") { - result[1] = "settings.dialogChangePassword.errorEmptyNewPassword"; - } - if (retypedNewPassword !== newPassword) { - result[2] = "settings.dialogChangePassword.errorRetypeNotMatch"; - } - return result; - }} - onProcess={async ([oldPassword, newPassword]) => { - await userService.changePassword(oldPassword, newPassword); - setRedirect(true); - }} - close={() => { - props.close(); - if (redirect) { - history.push("/login"); - } - }} - /> - ); -}; - -export default ChangePasswordDialog; diff --git a/FrontEnd/src/app/views/settings/index.tsx b/FrontEnd/src/app/views/settings/index.tsx deleted file mode 100644 index 04a2777a..00000000 --- a/FrontEnd/src/app/views/settings/index.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useState } from "react"; -import { useHistory } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Container, Form, Row, Col, Button, Modal } from "react-bootstrap"; - -import { useUser, userService } from "@/services/user"; - -import ChangePasswordDialog from "./ChangePasswordDialog"; -import ChangeAvatarDialog from "./ChangeAvatarDialog"; -import ChangeNicknameDialog from "./ChangeNicknameDialog"; - -const ConfirmLogoutDialog: React.FC<{ - onClose: () => void; - onConfirm: () => void; -}> = ({ onClose, onConfirm }) => { - const { t } = useTranslation(); - - return ( - <Modal show centered onHide={onClose}> - <Modal.Header> - <Modal.Title className="text-danger"> - {t("settings.dialogConfirmLogout.title")} - </Modal.Title> - </Modal.Header> - <Modal.Body>{t("settings.dialogConfirmLogout.prompt")}</Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={onClose}> - {t("operationDialog.cancel")} - </Button> - <Button variant="danger" onClick={onConfirm}> - {t("operationDialog.confirm")} - </Button> - </Modal.Footer> - </Modal> - ); -}; - -const SettingsPage: React.FC = (_) => { - const { i18n, t } = useTranslation(); - const user = useUser(); - const history = useHistory(); - - const [dialog, setDialog] = useState< - null | "changepassword" | "changeavatar" | "changenickname" | "logout" - >(null); - - const language = i18n.language.slice(0, 2); - - return ( - <> - <Container> - {user ? ( - <div className="cru-card my-3 py-3"> - <h3 className="px-3 mb-3 text-primary"> - {t("settings.subheaders.account")} - </h3> - <div - className="settings-item clickable first" - onClick={() => setDialog("changeavatar")} - > - {t("settings.changeAvatar")} - </div> - <div - className="settings-item clickable" - onClick={() => setDialog("changenickname")} - > - {t("settings.changeNickname")} - </div> - <div - className="settings-item clickable text-danger" - onClick={() => setDialog("changepassword")} - > - {t("settings.changePassword")} - </div> - <div - className="settings-item clickable text-danger" - onClick={() => { - setDialog("logout"); - }} - > - {t("settings.logout")} - </div> - </div> - ) : null} - <div className="cru-card my-3 py-3"> - <h3 className="px-3 mb-3 text-primary"> - {t("settings.subheaders.customization")} - </h3> - <Row className="settings-item first mx-0"> - <Col xs="12" sm="auto"> - <div>{t("settings.languagePrimary")}</div> - <small className="d-block text-secondary"> - {t("settings.languageSecondary")} - </small> - </Col> - <Col xs="auto" className="ms-auto"> - <Form.Control - as="select" - value={language} - onChange={(e) => { - void i18n.changeLanguage(e.target.value); - }} - > - <option value="zh">中文</option> - <option value="en">English</option> - </Form.Control> - </Col> - </Row> - </div> - </Container> - {(() => { - switch (dialog) { - case "changepassword": - return <ChangePasswordDialog open close={() => setDialog(null)} />; - case "logout": - return ( - <ConfirmLogoutDialog - onClose={() => setDialog(null)} - onConfirm={() => { - void userService.logout().then(() => { - history.push("/"); - }); - }} - /> - ); - case "changeavatar": - return <ChangeAvatarDialog open close={() => setDialog(null)} />; - case "changenickname": - return <ChangeNicknameDialog open close={() => setDialog(null)} />; - default: - return null; - } - })()} - </> - ); -}; - -export default SettingsPage; diff --git a/FrontEnd/src/app/views/settings/settings.sass b/FrontEnd/src/app/views/settings/settings.sass deleted file mode 100644 index 8c6d24b8..00000000 --- a/FrontEnd/src/app/views/settings/settings.sass +++ /dev/null @@ -1,14 +0,0 @@ -.settings-item
- padding: 0.5em 1em
- transition: background 0.3s
- border-bottom: 1px solid $gray-200
-
- &.first
- border-top: 1px solid $gray-200
-
- &.clickable
- cursor: pointer
-
- &:hover
- background: $gray-300
-
diff --git a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx deleted file mode 100644 index 12a3b710..00000000 --- a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -const CollapseButton: React.FC<{ - collapse: boolean; - onClick: () => void; - className?: string; - style?: React.CSSProperties; -}> = ({ collapse, onClick, className, style }) => { - return ( - <i - onClick={onClick} - className={classnames( - collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract", - "text-primary icon-button", - className - )} - style={style} - /> - ); -}; - -export default CollapseButton; diff --git a/FrontEnd/src/app/views/timeline-common/ConnectionStatusBadge.tsx b/FrontEnd/src/app/views/timeline-common/ConnectionStatusBadge.tsx deleted file mode 100644 index df43d8d2..00000000 --- a/FrontEnd/src/app/views/timeline-common/ConnectionStatusBadge.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { HubConnectionState } from "@microsoft/signalr"; -import { useTranslation } from "react-i18next"; - -export interface ConnectionStatusBadgeProps { - status: HubConnectionState; - className?: string; - style?: React.CSSProperties; -} - -const classNameMap: Record<HubConnectionState, string> = { - Connected: "success", - Connecting: "warning", - Disconnected: "danger", - Disconnecting: "warning", - Reconnecting: "warning", -}; - -const ConnectionStatusBadge: React.FC<ConnectionStatusBadgeProps> = (props) => { - const { status, className, style } = props; - - const { t } = useTranslation(); - - return ( - <div - className={classnames( - "connection-status-badge", - classNameMap[status], - className - )} - style={style} - > - {t(`connectionState.${status}`)} - </div> - ); -}; - -export default ConnectionStatusBadge; diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx deleted file mode 100644 index 685e17be..00000000 --- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { Form, Spinner } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; -import { Prompt } from "react-router"; - -import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; - -import FlatButton from "../common/FlatButton"; -import TabPages from "../common/TabPages"; -import TimelinePostBuilder from "@/services/TimelinePostBuilder"; -import ConfirmDialog from "../common/ConfirmDialog"; - -export interface MarkdownPostEditProps { - timeline: string; - onPosted: (post: HttpTimelinePostInfo) => void; - onPostError: () => void; - onClose: () => void; - className?: string; - style?: React.CSSProperties; -} - -const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ - timeline: timelineName, - onPosted, - onClose, - onPostError, - className, - style, -}) => { - const { t } = useTranslation(); - - const [canLeave, setCanLeave] = React.useState<boolean>(true); - - const [process, setProcess] = React.useState<boolean>(false); - - const [showLeaveConfirmDialog, setShowLeaveConfirmDialog] = - React.useState<boolean>(false); - - const [text, _setText] = React.useState<string>(""); - const [images, _setImages] = React.useState<{ file: File; url: string }[]>( - [] - ); - const [previewHtml, _setPreviewHtml] = React.useState<string>(""); - - const _builder = React.useRef<TimelinePostBuilder | null>(null); - - const getBuilder = (): TimelinePostBuilder => { - if (_builder.current == null) { - const builder = new TimelinePostBuilder(() => { - setCanLeave(builder.isEmpty); - _setText(builder.text); - _setImages(builder.images); - _setPreviewHtml(builder.renderHtml()); - }); - _builder.current = builder; - } - return _builder.current; - }; - - const canSend = text.length > 0; - - React.useEffect(() => { - return () => { - getBuilder().dispose(); - }; - }, []); - - React.useEffect(() => { - window.onbeforeunload = (): unknown => { - if (!canLeave) { - return t("timeline.confirmLeave"); - } - }; - - return () => { - window.onbeforeunload = null; - }; - }, [canLeave, t]); - - const send = async (): Promise<void> => { - setProcess(true); - try { - const dataList = await getBuilder().build(); - const post = await getHttpTimelineClient().postPost(timelineName, { - dataList, - }); - onPosted(post); - onClose(); - } catch (e) { - setProcess(false); - onPostError(); - } - }; - - return ( - <> - <Prompt when={!canLeave} message={t("timeline.confirmLeave")} /> - <TabPages - className={className} - style={style} - pageContainerClassName="py-2" - actions={ - process ? ( - <Spinner variant="primary" animation="border" size="sm" /> - ) : ( - <> - <FlatButton - className="me-2" - variant="danger" - onClick={() => { - if (canLeave) { - onClose(); - } else { - setShowLeaveConfirmDialog(true); - } - }} - > - {t("operationDialog.cancel")} - </FlatButton> - <FlatButton onClick={send} disabled={!canSend}> - {t("timeline.send")} - </FlatButton> - </> - ) - } - pages={[ - { - id: "text", - tabText: "edit", - page: ( - <Form.Control - as="textarea" - value={text} - disabled={process} - onChange={(event) => { - getBuilder().setMarkdownText(event.currentTarget.value); - }} - /> - ), - }, - { - id: "images", - tabText: "image", - page: ( - <div className="timeline-markdown-post-edit-page"> - {images.map((image, index) => ( - <div - key={image.url} - className="timeline-markdown-post-edit-image-container" - > - <img - src={image.url} - className="timeline-markdown-post-edit-image" - /> - <i - className={classnames( - "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button", - process && "d-none" - )} - onClick={() => { - getBuilder().deleteImage(index); - }} - /> - </div> - ))} - <Form.Control - type="file" - accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" - onChange={(event: React.ChangeEvent<HTMLInputElement>) => { - const { files } = event.currentTarget; - if (files != null && files.length !== 0) { - getBuilder().appendImage(files[0]); - } - }} - disabled={process} - /> - </div> - ), - }, - { - id: "preview", - tabText: "preview", - page: ( - <div - className="markdown-container timeline-markdown-post-edit-page" - dangerouslySetInnerHTML={{ __html: previewHtml }} - /> - ), - }, - ]} - /> - {showLeaveConfirmDialog && ( - <ConfirmDialog - onClose={() => setShowLeaveConfirmDialog(false)} - onConfirm={onClose} - title="timeline.dropDraft" - body="timeline.confirmLeave" - /> - )} - </> - ); -}; - -export default MarkdownPostEdit; diff --git a/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx deleted file mode 100644 index 001e52d7..00000000 --- a/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; - -import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; - -import OperationDialog from "../common/OperationDialog"; - -function PostPropertyChangeDialog(props: { - onClose: () => void; - post: HttpTimelinePostInfo; - onSuccess: (post: HttpTimelinePostInfo) => void; -}): React.ReactElement | null { - const { onClose, post, onSuccess } = props; - - return ( - <OperationDialog - title="timeline.changePostPropertyDialog.title" - close={onClose} - open - inputScheme={[ - { - label: "timeline.changePostPropertyDialog.time", - type: "datetime", - initValue: post.time, - }, - ]} - onProcess={([time]) => { - return getHttpTimelineClient().patchPost(post.timelineName, post.id, { - time: time === "" ? undefined : new Date(time).toISOString(), - }); - }} - onSuccessAndClose={onSuccess} - /> - ); -} - -export default PostPropertyChangeDialog; diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx deleted file mode 100644 index 589382b0..00000000 --- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React from "react"; -import { HubConnectionState } from "@microsoft/signalr"; - -import { - HttpForbiddenError, - HttpNetworkError, - HttpNotFoundError, -} from "@/http/common"; -import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; - -import { getTimelinePostUpdate$ } from "@/services/timeline"; - -import TimelinePagedPostListView from "./TimelinePagedPostListView"; -import TimelineTop from "./TimelineTop"; -import TimelineLoading from "./TimelineLoading"; - -export interface TimelineProps { - className?: string; - style?: React.CSSProperties; - timelineName?: string; - reloadKey: number; - onReload: () => void; - onConnectionStateChanged?: (state: HubConnectionState) => void; -} - -const Timeline: React.FC<TimelineProps> = (props) => { - const { timelineName, className, style, reloadKey } = props; - - const [state, setState] = React.useState< - "loading" | "loaded" | "offline" | "notexist" | "forbid" | "error" - >("loading"); - const [posts, setPosts] = React.useState<HttpTimelinePostInfo[]>([]); - - React.useEffect(() => { - setState("loading"); - setPosts([]); - }, [timelineName]); - - const onReload = React.useRef<() => void>(props.onReload); - - React.useEffect(() => { - onReload.current = props.onReload; - }, [props.onReload]); - - const onConnectionStateChanged = React.useRef< - ((state: HubConnectionState) => void) | null - >(null); - - React.useEffect(() => { - onConnectionStateChanged.current = props.onConnectionStateChanged ?? null; - }, [props.onConnectionStateChanged]); - - React.useEffect(() => { - if (timelineName != null && state === "loaded") { - const timelinePostUpdate$ = getTimelinePostUpdate$(timelineName); - const subscription = timelinePostUpdate$.subscribe( - ({ update, state }) => { - if (update) { - onReload.current(); - } - onConnectionStateChanged.current?.(state); - } - ); - return () => { - subscription.unsubscribe(); - }; - } - }, [timelineName, state]); - - React.useEffect(() => { - if (timelineName != null) { - let subscribe = true; - - void getHttpTimelineClient() - .listPost(timelineName) - .then( - (data) => { - if (subscribe) { - setState("loaded"); - setPosts(data); - } - }, - (error) => { - if (error instanceof HttpNetworkError) { - setState("offline"); - } else if (error instanceof HttpForbiddenError) { - setState("forbid"); - } else if (error instanceof HttpNotFoundError) { - setState("notexist"); - } else { - console.error(error); - setState("error"); - } - } - ); - - return () => { - subscribe = false; - }; - } - }, [timelineName, reloadKey]); - - switch (state) { - case "loading": - return <TimelineLoading />; - case "offline": - return ( - <div className={className} style={style}> - Offline. - </div> - ); - case "notexist": - return ( - <div className={className} style={style}> - Not exist. - </div> - ); - case "forbid": - return ( - <div className={className} style={style}> - Forbid. - </div> - ); - case "error": - return ( - <div className={className} style={style}> - Error. - </div> - ); - default: - return ( - <> - <TimelineTop height={40} /> - <TimelinePagedPostListView - posts={posts} - onReload={onReload.current} - /> - </> - ); - } -}; - -export default Timeline; diff --git a/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx b/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx deleted file mode 100644 index 80968ee2..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import TimelineLine from "./TimelineLine"; - -export interface TimelineDateItemProps { - date: Date; -} - -const TimelineDateLabel: React.FC<TimelineDateItemProps> = ({ date }) => { - return ( - <div className="timeline-date-item"> - <TimelineLine center="none" /> - <div className="timeline-date-item-badge"> - {date.toLocaleDateString()} - </div> - </div> - ); -}; - -export default TimelineDateLabel; diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx deleted file mode 100644 index 0a828b32..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -export interface TimelineLineProps { - current?: boolean; - startSegmentLength?: string | number; - center: "node" | "loading" | "none"; - className?: string; - style?: React.CSSProperties; -} - -const TimelineLine: React.FC<TimelineLineProps> = ({ - startSegmentLength, - center, - current, - className, - style, -}) => { - return ( - <div - className={classnames( - "timeline-line", - current && "current", - center === "loading" && "loading", - className - )} - style={style} - > - <div className="segment start" style={{ height: startSegmentLength }} /> - {center !== "none" ? ( - <div className="node-container"> - <div className="node"></div> - {center === "loading" ? ( - <svg className="node-loading-edge" viewBox="0 0 100 100"> - <path - d="M 50,10 A 40 40 45 0 1 78.28,21.72" - stroke="currentcolor" - strokeLinecap="square" - strokeWidth="8" - /> - </svg> - ) : null} - </div> - ) : null} - {center !== "loading" ? <div className="segment end"></div> : null} - {current && <div className="segment current-end" />} - </div> - ); -}; - -export default TimelineLine; diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLoading.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLoading.tsx deleted file mode 100644 index fc42f4b4..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelineLoading.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; - -import TimelineTop from "./TimelineTop"; - -const TimelineLoading: React.FC = () => { - return ( - <TimelineTop - className="timeline-top-loading-enter" - height={100} - lineProps={{ - center: "loading", - startSegmentLength: 56, - }} - /> - ); -}; - -export default TimelineLoading; diff --git a/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx deleted file mode 100644 index 299d6a53..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelineMember.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Container, ListGroup, Modal, Row, Col, Button } from "react-bootstrap"; - -import { convertI18nText, I18nText } from "@/common"; - -import { HttpUser } from "@/http/user"; -import { getHttpSearchClient } from "@/http/search"; - -import SearchInput from "../common/SearchInput"; -import UserAvatar from "../common/user/UserAvatar"; -import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; - -const TimelineMemberItem: React.FC<{ - user: HttpUser; - add?: boolean; - onAction?: (username: string) => void; -}> = ({ user, add, onAction }) => { - const { t } = useTranslation(); - - return ( - <ListGroup.Item className="container"> - <Row> - <Col xs="auto"> - <UserAvatar username={user.username} className="avatar small" /> - </Col> - <Col> - <Row>{user.nickname}</Row> - <Row> - <small>{"@" + user.username}</small> - </Row> - </Col> - {onAction ? ( - <Col xs="auto"> - <Button - variant={add ? "success" : "danger"} - onClick={() => { - onAction(user.username); - }} - > - {t(`timeline.member.${add ? "add" : "remove"}`)} - </Button> - </Col> - ) : null} - </Row> - </ListGroup.Item> - ); -}; - -const TimelineMemberUserSearch: React.FC<{ - timeline: HttpTimelineInfo; - onChange: () => void; -}> = ({ timeline, onChange }) => { - const { t } = useTranslation(); - - const [userSearchText, setUserSearchText] = useState<string>(""); - const [userSearchState, setUserSearchState] = useState< - | { - type: "users"; - data: HttpUser[]; - } - | { type: "error"; data: I18nText } - | { type: "loading" } - | { type: "init" } - >({ type: "init" }); - - return ( - <> - <SearchInput - className="mt-3" - value={userSearchText} - onChange={(v) => { - setUserSearchText(v); - }} - loading={userSearchState.type === "loading"} - onButtonClick={() => { - if (userSearchText === "") { - setUserSearchState({ - type: "error", - data: "login.emptyUsername", - }); - return; - } - setUserSearchState({ type: "loading" }); - getHttpSearchClient() - .searchUsers(userSearchText) - .then( - (users) => { - users = users.filter( - (user) => - timeline.members.findIndex( - (m) => m.username === user.username - ) === -1 && timeline.owner.username !== user.username - ); - setUserSearchState({ type: "users", data: users }); - }, - (e) => { - setUserSearchState({ - type: "error", - data: { type: "custom", value: String(e) }, - }); - } - ); - }} - /> - {(() => { - if (userSearchState.type === "users") { - const users = userSearchState.data; - if (users.length === 0) { - return <div>{t("timeline.member.noUserAvailableToAdd")}</div>; - } else { - return ( - <ListGroup className="mt-2"> - {users.map((user) => ( - <TimelineMemberItem - key={user.username} - user={user} - add - onAction={() => { - void getHttpTimelineClient() - .memberPut(timeline.name, user.username) - .then(() => { - setUserSearchText(""); - setUserSearchState({ type: "init" }); - onChange(); - }); - }} - /> - ))} - </ListGroup> - ); - } - } else if (userSearchState.type === "error") { - return ( - <div className="text-danger"> - {convertI18nText(userSearchState.data, t)} - </div> - ); - } - })()} - </> - ); -}; - -export interface TimelineMemberProps { - timeline: HttpTimelineInfo; - onChange: () => void; -} - -const TimelineMember: React.FC<TimelineMemberProps> = (props) => { - const { timeline, onChange } = props; - const members = [timeline.owner, ...timeline.members]; - - return ( - <Container className="px-4 py-3"> - <ListGroup> - {members.map((member, index) => ( - <TimelineMemberItem - key={member.username} - user={member} - onAction={ - timeline.manageable && index !== 0 - ? () => { - void getHttpTimelineClient() - .memberDelete(timeline.name, member.username) - .then(onChange); - } - : undefined - } - /> - ))} - </ListGroup> - {timeline.manageable ? ( - <TimelineMemberUserSearch timeline={timeline} onChange={onChange} /> - ) : null} - </Container> - ); -}; - -export default TimelineMember; - -export interface TimelineMemberDialogProps extends TimelineMemberProps { - open: boolean; - onClose: () => void; -} - -export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = ( - props -) => { - return ( - <Modal show centered onHide={props.onClose}> - <TimelineMember {...props} /> - </Modal> - ); -}; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx deleted file mode 100644 index 623d643f..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { useTranslation } from "react-i18next"; - -import { getHttpHighlightClient } from "@/http/highlight"; -import { getHttpBookmarkClient } from "@/http/bookmark"; - -import { useUser } from "@/services/user"; -import { pushAlert } from "@/services/alert"; -import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline"; - -import { useIsSmallScreen } from "@/utilities/mediaQuery"; - -import { TimelinePageCardProps } from "./TimelinePageTemplate"; - -import CollapseButton from "./CollapseButton"; -import { TimelineMemberDialog } from "./TimelineMember"; -import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog"; -import ConnectionStatusBadge from "./ConnectionStatusBadge"; -import { MenuItems, PopupMenu } from "../common/Menu"; -import FullPage from "../common/FullPage"; - -export interface TimelineCardTemplateProps extends TimelinePageCardProps { - infoArea: React.ReactElement; - manageItems?: MenuItems; - dialog: string | "property" | "member" | null; - setDialog: (dialog: "property" | "member" | null) => void; -} - -const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({ - timeline, - collapse, - toggleCollapse, - infoArea, - manageItems, - connectionStatus, - onReload, - className, - dialog, - setDialog, -}) => { - const { t } = useTranslation(); - - const isSmallScreen = useIsSmallScreen(); - - const user = useUser(); - - const content = ( - <> - {infoArea} - <p className="mb-0">{timeline.description}</p> - <small className="mt-1 d-block"> - {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])} - </small> - <div className="text-end mt-2"> - <i - className={classnames( - timeline.isHighlight ? "bi-star-fill" : "bi-star", - "icon-button text-yellow me-3" - )} - onClick={ - user?.hasHighlightTimelineAdministrationPermission - ? () => { - getHttpHighlightClient() - [timeline.isHighlight ? "delete" : "put"](timeline.name) - .then(onReload, () => { - pushAlert({ - message: timeline.isHighlight - ? "timeline.removeHighlightFail" - : "timeline.addHighlightFail", - type: "danger", - }); - }); - } - : undefined - } - /> - {user != null ? ( - <i - className={classnames( - timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark", - "icon-button text-yellow me-3" - )} - onClick={() => { - getHttpBookmarkClient() - [timeline.isBookmark ? "delete" : "put"](timeline.name) - .then(onReload, () => { - pushAlert({ - message: timeline.isBookmark - ? "timeline.removeBookmarkFail" - : "timeline.addBookmarkFail", - type: "danger", - }); - }); - }} - /> - ) : null} - <i - className={"icon-button bi-people text-primary me-3"} - onClick={() => setDialog("member")} - /> - {manageItems != null ? ( - <PopupMenu items={manageItems}> - <i className="icon-button bi-three-dots-vertical text-primary" /> - </PopupMenu> - ) : null} - </div> - </> - ); - - return ( - <> - <div - className={classnames("cru-card p-2 clearfix", className)} - style={{ zIndex: collapse ? 1029 : 1031 }} - > - <div className="float-end d-flex align-items-center"> - <ConnectionStatusBadge status={connectionStatus} className="me-2" /> - <CollapseButton collapse={collapse} onClick={toggleCollapse} /> - </div> - {isSmallScreen ? ( - <FullPage - onBack={toggleCollapse} - show={!collapse} - contentContainerClassName="p-2" - > - {content} - </FullPage> - ) : ( - <div style={{ display: collapse ? "none" : "block" }}>{content}</div> - )} - </div> - {(() => { - if (dialog === "member") { - return ( - <TimelineMemberDialog - timeline={timeline} - onClose={() => setDialog(null)} - open - onChange={onReload} - /> - ); - } else if (dialog === "property") { - return ( - <TimelinePropertyChangeDialog - timeline={timeline} - close={() => setDialog(null)} - open - onChange={onReload} - /> - ); - } - })()} - </> - ); -}; - -export default TimelinePageCardTemplate; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx deleted file mode 100644 index 658ce502..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { Container } from "react-bootstrap"; -import { HubConnectionState } from "@microsoft/signalr"; - -import { HttpNetworkError, HttpNotFoundError } from "@/http/common"; -import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; - -import { getAlertHost } from "@/services/alert"; - -import Timeline from "./Timeline"; -import TimelinePostEdit from "./TimelinePostEdit"; - -import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember"; -import { generatePalette, setPalette } from "@/palette"; - -export interface TimelinePageCardProps { - timeline: HttpTimelineInfo; - collapse: boolean; - toggleCollapse: () => void; - connectionStatus: HubConnectionState; - className?: string; - onReload: () => void; -} - -export interface TimelinePageTemplateProps { - timelineName: string; - notFoundI18nKey: string; - reloadKey: number; - onReload: () => void; - CardComponent: React.ComponentType<TimelinePageCardProps>; -} - -const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => { - const { timelineName, reloadKey, onReload, CardComponent } = props; - - const { t } = useTranslation(); - - const [state, setState] = React.useState< - "loading" | "done" | "offline" | "notexist" | "error" - >("loading"); - const [timeline, setTimeline] = React.useState<HttpTimelineInfo | null>(null); - - const [connectionStatus, setConnectionStatus] = - React.useState<HubConnectionState>(HubConnectionState.Connecting); - - useReverseScrollPositionRemember(); - - React.useEffect(() => { - setState("loading"); - setTimeline(null); - }, [timelineName]); - - React.useEffect(() => { - let subscribe = true; - void getHttpTimelineClient() - .getTimeline(timelineName) - .then( - (data) => { - if (subscribe) { - setState("done"); - setTimeline(data); - } - }, - (error) => { - if (subscribe) { - if (error instanceof HttpNetworkError) { - setState("offline"); - } else if (error instanceof HttpNotFoundError) { - setState("notexist"); - } else { - console.error(error); - setState("error"); - } - setTimeline(null); - } - } - ); - return () => { - subscribe = false; - }; - }, [timelineName, reloadKey]); - - React.useEffect(() => { - if (timeline != null && timeline.color != null) { - return setPalette(generatePalette({ primary: timeline.color })); - } - }, [timeline]); - - const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0); - - const [timelineReloadKey, setTimelineReloadKey] = React.useState<number>(0); - - const reloadTimeline = (): void => { - setTimelineReloadKey((old) => old + 1); - }; - - const onPostEditHeightChange = React.useCallback((height: number): void => { - setBottomSpaceHeight(height); - if (height === 0) { - const alertHost = getAlertHost(); - if (alertHost != null) { - alertHost.style.removeProperty("margin-bottom"); - } - } else { - const alertHost = getAlertHost(); - if (alertHost != null) { - alertHost.style.marginBottom = `${height}px`; - } - } - }, []); - - const cardCollapseLocalStorageKey = `timeline.${timelineName}.cardCollapse`; - - const [cardCollapse, setCardCollapse] = React.useState<boolean>(true); - - React.useEffect(() => { - const savedCollapse = window.localStorage.getItem( - cardCollapseLocalStorageKey - ); - setCardCollapse(savedCollapse == null ? true : savedCollapse === "true"); - }, [cardCollapseLocalStorageKey]); - - const toggleCardCollapse = (): void => { - const newState = !cardCollapse; - setCardCollapse(newState); - window.localStorage.setItem( - cardCollapseLocalStorageKey, - newState.toString() - ); - }; - - return ( - <> - {timeline != null ? ( - <CardComponent - className="timeline-template-card" - timeline={timeline} - collapse={cardCollapse} - toggleCollapse={toggleCardCollapse} - onReload={onReload} - connectionStatus={connectionStatus} - /> - ) : null} - <Container - className="px-0" - style={{ - minHeight: `calc(100vh - ${56 + bottomSpaceHeight}px)`, - }} - > - {(() => { - if (state === "offline") { - // TODO: i18n - return <p className="text-danger">Offline!</p>; - } else if (state === "notexist") { - return <p className="text-danger">{t(props.notFoundI18nKey)}</p>; - } else if (state === "error") { - // TODO: i18n - return <p className="text-danger">Error!</p>; - } else { - return ( - <Timeline - timelineName={timeline?.name} - reloadKey={timelineReloadKey} - onReload={reloadTimeline} - onConnectionStateChanged={setConnectionStatus} - /> - ); - } - })()} - </Container> - {timeline != null && timeline.postable ? ( - <> - <div - style={{ height: bottomSpaceHeight }} - className="flex-fix-length" - /> - <TimelinePostEdit - className="fixed-bottom" - timeline={timeline} - onHeightChange={onPostEditHeightChange} - onPosted={reloadTimeline} - /> - </> - ) : null} - </> - ); -}; - -export default TimelinePageTemplate; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx deleted file mode 100644 index 37f02a82..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; - -import { HttpTimelinePostInfo } from "@/http/timeline"; - -import useScrollToTop from "@/utilities/useScrollToTop"; - -import TimelinePostListView from "./TimelinePostListView"; - -export interface TimelinePagedPostListViewProps { - className?: string; - style?: React.CSSProperties; - posts: HttpTimelinePostInfo[]; - onReload: () => void; -} - -const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = ( - props -) => { - const { className, style, posts, onReload } = props; - - const [lastViewCount, setLastViewCount] = React.useState<number>(10); - - const viewingPosts = React.useMemo(() => { - return lastViewCount >= posts.length - ? posts.slice() - : posts.slice(-lastViewCount); - }, [posts, lastViewCount]); - - useScrollToTop(() => { - setLastViewCount(lastViewCount + 10); - }, lastViewCount < posts.length); - - return ( - <TimelinePostListView - className={className} - style={style} - posts={viewingPosts} - onReload={onReload} - /> - ); -}; - -export default TimelinePagedPostListView; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx deleted file mode 100644 index 607b72c9..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { Remarkable } from "remarkable"; - -import { UiLogicError } from "@/common"; - -import { HttpNetworkError } from "@/http/common"; -import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; - -import { useUser } from "@/services/user"; - -import Skeleton from "../common/Skeleton"; -import LoadFailReload from "../common/LoadFailReload"; - -const TextView: React.FC<TimelinePostContentViewProps> = (props) => { - const { post, className, style } = props; - - const [text, setText] = React.useState<string | null>(null); - const [error, setError] = React.useState<"offline" | "error" | null>(null); - - const [reloadKey, setReloadKey] = React.useState<number>(0); - - React.useEffect(() => { - let subscribe = true; - - setText(null); - setError(null); - - void getHttpTimelineClient() - .getPostDataAsString(post.timelineName, post.id) - .then( - (data) => { - if (subscribe) setText(data); - }, - (error) => { - if (subscribe) { - if (error instanceof HttpNetworkError) { - setError("offline"); - } else { - setError("error"); - } - } - } - ); - - return () => { - subscribe = false; - }; - }, [post.timelineName, post.id, reloadKey]); - - if (error != null) { - return ( - <LoadFailReload - className={className} - style={style} - onReload={() => setReloadKey(reloadKey + 1)} - /> - ); - } else if (text == null) { - return <Skeleton />; - } else { - return ( - <div className={className} style={style}> - {text} - </div> - ); - } -}; - -const ImageView: React.FC<TimelinePostContentViewProps> = (props) => { - const { post, className, style } = props; - - useUser(); - - return ( - <img - src={getHttpTimelineClient().generatePostDataUrl( - post.timelineName, - post.id - )} - className={classnames(className, "timeline-content-image")} - style={style} - /> - ); -}; - -const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => { - const { post, className, style } = props; - - const _remarkable = React.useRef<Remarkable>(); - - const getRemarkable = (): Remarkable => { - if (_remarkable.current) { - return _remarkable.current; - } else { - _remarkable.current = new Remarkable(); - return _remarkable.current; - } - }; - - const [markdown, setMarkdown] = React.useState<string | null>(null); - const [error, setError] = React.useState<"offline" | "error" | null>(null); - - const [reloadKey, setReloadKey] = React.useState<number>(0); - - React.useEffect(() => { - let subscribe = true; - - setMarkdown(null); - setError(null); - - void getHttpTimelineClient() - .getPostDataAsString(post.timelineName, post.id) - .then( - (data) => { - if (subscribe) setMarkdown(data); - }, - (error) => { - if (subscribe) { - if (error instanceof HttpNetworkError) { - setError("offline"); - } else { - setError("error"); - } - } - } - ); - - return () => { - subscribe = false; - }; - }, [post.timelineName, post.id, reloadKey]); - - const markdownHtml = React.useMemo<string | null>(() => { - if (markdown == null) return null; - return getRemarkable().render(markdown); - }, [markdown]); - - if (error != null) { - return ( - <LoadFailReload - className={className} - style={style} - onReload={() => setReloadKey(reloadKey + 1)} - /> - ); - } else if (markdown == null) { - return <Skeleton />; - } else { - if (markdownHtml == null) { - throw new UiLogicError("Markdown is not null but markdown html is."); - } - return ( - <div - className={classnames(className, "markdown-container")} - style={style} - dangerouslySetInnerHTML={{ - __html: markdownHtml, - }} - /> - ); - } -}; - -export interface TimelinePostContentViewProps { - post: HttpTimelinePostInfo; - className?: string; - style?: React.CSSProperties; -} - -const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = { - "text/plain": TextView, - "text/markdown": MarkdownView, - "image/png": ImageView, - "image/jpeg": ImageView, - "image/gif": ImageView, - "image/webp": ImageView, -}; - -const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = ( - props -) => { - const { post, className, style } = props; - - const type = post.dataList[0].kind; - - if (type in viewMap) { - const View = viewMap[type]; - return <View post={post} className={className} style={style} />; - } else { - // TODO: i18n - console.error("Unknown post type", post); - return <div>Error, unknown post type!</div>; - } -}; - -export default TimelinePostContentView; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx deleted file mode 100644 index b2c7a470..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Modal, Button } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -const TimelinePostDeleteConfirmDialog: React.FC<{ - onClose: () => void; - onConfirm: () => void; -}> = ({ onClose, onConfirm }) => { - const { t } = useTranslation(); - - return ( - <Modal onHide={onClose} show centered> - <Modal.Header> - <Modal.Title className="text-danger"> - {t("timeline.post.deleteDialog.title")} - </Modal.Title> - </Modal.Header> - <Modal.Body>{t("timeline.post.deleteDialog.prompt")}</Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={onClose}> - {t("operationDialog.cancel")} - </Button> - <Button - variant="danger" - onClick={() => { - onConfirm(); - onClose(); - }} - > - {t("operationDialog.confirm")} - </Button> - </Modal.Footer> - </Modal> - ); -}; - -export default TimelinePostDeleteConfirmDialog; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx deleted file mode 100644 index 5f3f0345..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx +++ /dev/null @@ -1,291 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { useTranslation } from "react-i18next"; -import { Row, Col, Form } from "react-bootstrap"; - -import { UiLogicError } from "@/common"; - -import { - getHttpTimelineClient, - HttpTimelineInfo, - HttpTimelinePostInfo, - HttpTimelinePostPostRequestData, -} from "@/http/timeline"; - -import { pushAlert } from "@/services/alert"; -import { base64 } from "@/http/common"; - -import BlobImage from "../common/BlobImage"; -import LoadingButton from "../common/LoadingButton"; -import { PopupMenu } from "../common/Menu"; -import MarkdownPostEdit from "./MarkdownPostEdit"; - -interface TimelinePostEditTextProps { - text: string; - disabled: boolean; - onChange: (text: string) => void; - className?: string; - style?: React.CSSProperties; -} - -const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => { - const { text, disabled, onChange, className, style } = props; - - return ( - <Form.Control - as="textarea" - value={text} - disabled={disabled} - onChange={(event) => { - onChange(event.target.value); - }} - className={className} - style={style} - /> - ); -}; - -interface TimelinePostEditImageProps { - onSelect: (file: File | null) => void; - disabled: boolean; -} - -const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => { - const { onSelect, disabled } = props; - - const { t } = useTranslation(); - - const [file, setFile] = React.useState<File | null>(null); - const [error, setError] = React.useState<boolean>(false); - - const onInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { - setError(false); - const files = e.target.files; - if (files == null || files.length === 0) { - setFile(null); - onSelect(null); - } else { - setFile(files[0]); - } - }; - - React.useEffect(() => { - return () => { - onSelect(null); - }; - }, [onSelect]); - - return ( - <> - <Form.Control - type="file" - onChange={onInputChange} - accept="image/*" - disabled={disabled} - className="mx-3 my-1" - /> - {file != null && !error && ( - <BlobImage - blob={file} - className="timeline-post-edit-image" - onLoad={() => onSelect(file)} - onError={() => { - onSelect(null); - setError(true); - }} - /> - )} - {error ? <div className="text-danger">{t("loadImageError")}</div> : null} - </> - ); -}; - -type PostKind = "text" | "markdown" | "image"; - -const postKindIconClassNameMap: Record<PostKind, string> = { - text: "bi-fonts", - markdown: "bi-markdown", - image: "bi-image", -}; - -export interface TimelinePostEditProps { - className?: string; - timeline: HttpTimelineInfo; - onPosted: (newPost: HttpTimelinePostInfo) => void; - onHeightChange?: (height: number) => void; -} - -const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { - const { timeline, onHeightChange, className, onPosted } = props; - - const { t } = useTranslation(); - - const [process, setProcess] = React.useState<boolean>(false); - - const [kind, setKind] = React.useState<Exclude<PostKind, "markdown">>("text"); - const [showMarkdown, setShowMarkdown] = React.useState<boolean>(false); - - const [text, setText] = React.useState<string>(""); - const [image, setImage] = React.useState<File | null>(null); - - const draftTextLocalStorageKey = `timeline.${timeline.name}.postDraft.text`; - - React.useEffect(() => { - setText(window.localStorage.getItem(draftTextLocalStorageKey) ?? ""); - }, [draftTextLocalStorageKey]); - - const canSend = - (kind === "text" && text.length !== 0) || - (kind === "image" && image != null); - - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const containerRef = React.useRef<HTMLDivElement>(null!); - - const notifyHeightChange = (): void => { - if (onHeightChange) { - onHeightChange(containerRef.current.clientHeight); - } - }; - - React.useEffect(() => { - notifyHeightChange(); - return () => { - if (onHeightChange) { - onHeightChange(0); - } - }; - }); - - const onPostError = (): void => { - pushAlert({ - type: "danger", - message: "timeline.sendPostFailed", - }); - }; - - const onSend = async (): Promise<void> => { - setProcess(true); - - let requestData: HttpTimelinePostPostRequestData; - switch (kind) { - case "text": - requestData = { - contentType: "text/plain", - data: await base64(text), - }; - break; - case "image": - if (image == null) { - throw new UiLogicError( - "Content type is image but image blob is null." - ); - } - requestData = { - contentType: image.type, - data: await base64(image), - }; - break; - default: - throw new UiLogicError("Unknown content type."); - } - - getHttpTimelineClient() - .postPost(timeline.name, { - dataList: [requestData], - }) - .then( - (data) => { - if (kind === "text") { - setText(""); - window.localStorage.removeItem(draftTextLocalStorageKey); - } - setProcess(false); - setKind("text"); - onPosted(data); - }, - (_) => { - setProcess(false); - onPostError(); - } - ); - }; - - return ( - <div - ref={containerRef} - className={classnames("container-fluid bg-light", className)} - > - {showMarkdown ? ( - <MarkdownPostEdit - className="w-100" - onClose={() => setShowMarkdown(false)} - timeline={timeline.name} - onPosted={onPosted} - onPostError={onPostError} - /> - ) : ( - <Row> - <Col className="px-1 py-1"> - {(() => { - if (kind === "text") { - return ( - <TimelinePostEditText - className="w-100 h-100 timeline-post-edit" - text={text} - disabled={process} - onChange={(t) => { - setText(t); - window.localStorage.setItem(draftTextLocalStorageKey, t); - }} - /> - ); - } else if (kind === "image") { - return ( - <TimelinePostEditImage - onSelect={setImage} - disabled={process} - /> - ); - } - })()} - </Col> - <Col xs="auto" className="align-self-end m-1"> - <div className="d-block text-center mt-1 mb-2"> - <PopupMenu - items={(["text", "image", "markdown"] as const).map((kind) => ({ - type: "button", - text: `timeline.post.type.${kind}`, - iconClassName: postKindIconClassNameMap[kind], - onClick: () => { - if (kind === "markdown") { - setShowMarkdown(true); - } else { - setKind(kind); - } - }, - }))} - > - <i - className={classnames( - postKindIconClassNameMap[kind], - "icon-button large" - )} - /> - </PopupMenu> - </div> - <LoadingButton - variant="primary" - onClick={onSend} - disabled={!canSend} - loading={process} - > - {t("timeline.send")} - </LoadingButton> - </Col> - </Row> - )} - </div> - ); -}; - -export default TimelinePostEdit; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx deleted file mode 100644 index ba204b72..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { Fragment } from "react"; -import classnames from "classnames"; - -import { HttpTimelinePostInfo } from "@/http/timeline"; - -import TimelinePostView from "./TimelinePostView"; -import TimelineDateLabel from "./TimelineDateLabel"; - -function dateEqual(left: Date, right: Date): boolean { - return ( - left.getDate() == right.getDate() && - left.getMonth() == right.getMonth() && - left.getFullYear() == right.getFullYear() - ); -} - -export interface TimelinePostListViewProps { - className?: string; - style?: React.CSSProperties; - posts: HttpTimelinePostInfo[]; - onReload: () => void; -} - -const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => { - const { className, style, posts, onReload } = props; - - const groupedPosts = React.useMemo< - { - date: Date; - posts: (HttpTimelinePostInfo & { index: number })[]; - }[] - >(() => { - const result: { - date: Date; - posts: (HttpTimelinePostInfo & { index: number })[]; - }[] = []; - let index = 0; - for (const post of posts) { - const time = new Date(post.time); - if (result.length === 0) { - result.push({ date: time, posts: [{ ...post, index }] }); - } else { - const lastGroup = result[result.length - 1]; - if (dateEqual(lastGroup.date, time)) { - lastGroup.posts.push({ ...post, index }); - } else { - result.push({ date: time, posts: [{ ...post, index }] }); - } - } - index++; - } - return result; - }, [posts]); - - return ( - <div style={style} className={classnames("timeline", className)}> - {groupedPosts.map((group) => { - return ( - <Fragment key={group.date.toDateString()}> - <TimelineDateLabel date={group.date} /> - {group.posts.map((post) => { - return ( - <TimelinePostView - key={post.id} - post={post} - current={posts.length - 1 === post.index} - onChanged={onReload} - onDeleted={onReload} - /> - ); - })} - </Fragment> - ); - })} - </div> - ); -}; - -export default TimelinePostListView; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx deleted file mode 100644 index f7b81478..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from "react"; -import classnames from "classnames"; -import { Link } from "react-router-dom"; -import { useTranslation } from "react-i18next"; - -import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; - -import { pushAlert } from "@/services/alert"; - -import UserAvatar from "../common/user/UserAvatar"; -import TimelineLine from "./TimelineLine"; -import TimelinePostContentView from "./TimelinePostContentView"; -import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog"; -import PostPropertyChangeDialog from "./PostPropertyChangeDialog"; - -export interface TimelinePostViewProps { - post: HttpTimelinePostInfo; - current?: boolean; - className?: string; - style?: React.CSSProperties; - cardStyle?: React.CSSProperties; - onChanged: (post: HttpTimelinePostInfo) => void; - onDeleted: () => void; -} - -const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => { - const { post, className, style, cardStyle, onChanged, onDeleted } = props; - const current = props.current === true; - - const { t } = useTranslation(); - - const [operationMaskVisible, setOperationMaskVisible] = - React.useState<boolean>(false); - const [dialog, setDialog] = React.useState< - "delete" | "changeproperty" | null - >(null); - - const cardRef = React.useRef<HTMLDivElement>(null); - React.useEffect(() => { - const cardIntersectionObserver = new IntersectionObserver(([e]) => { - if (e.intersectionRatio > 0) { - if (cardRef.current != null) { - cardRef.current.style.animationName = "timeline-post-enter"; - } - } - }); - if (cardRef.current) { - cardIntersectionObserver.observe(cardRef.current); - } - - return () => { - cardIntersectionObserver.disconnect(); - }; - }, []); - - return ( - <div - id={`timeline-post-${post.id}`} - className={classnames("timeline-item", current && "current", className)} - style={style} - > - <TimelineLine center="node" current={current} /> - <div ref={cardRef} className="timeline-item-card" style={cardStyle}> - {post.editable ? ( - <i - className="bi-chevron-down text-info icon-button float-end" - onClick={(e) => { - setOperationMaskVisible(true); - e.stopPropagation(); - }} - /> - ) : null} - <div className="timeline-item-header"> - <span className="me-2"> - <span> - <Link to={"/users/" + props.post.author.username}> - <UserAvatar - username={post.author.username} - className="timeline-avatar me-1" - /> - </Link> - <small className="text-dark me-2">{post.author.nickname}</small> - <small className="text-secondary white-space-no-wrap"> - {new Date(post.time).toLocaleTimeString()} - </small> - </span> - </span> - </div> - <div className="timeline-content"> - <TimelinePostContentView post={post} /> - </div> - {operationMaskVisible ? ( - <div - className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-around align-items-center" - onClick={() => { - setOperationMaskVisible(false); - }} - > - <span - className="tl-color-primary" - onClick={(e) => { - setDialog("changeproperty"); - e.stopPropagation(); - }} - > - {t("changeProperty")} - </span> - <span - className="tl-color-danger" - onClick={(e) => { - setDialog("delete"); - e.stopPropagation(); - }} - > - {t("delete")} - </span> - </div> - ) : null} - </div> - {dialog === "delete" ? ( - <TimelinePostDeleteConfirmDialog - onClose={() => { - setDialog(null); - setOperationMaskVisible(false); - }} - onConfirm={() => { - void getHttpTimelineClient() - .deletePost(post.timelineName, post.id) - .then(onDeleted, () => { - pushAlert({ - type: "danger", - message: "timeline.deletePostFailed", - }); - }); - }} - /> - ) : dialog === "changeproperty" ? ( - <PostPropertyChangeDialog - onClose={() => { - setDialog(null); - setOperationMaskVisible(false); - }} - post={post} - onSuccess={onChanged} - /> - ) : null} - </div> - ); -}; - -export default TimelinePostView; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx deleted file mode 100644 index 70f72025..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React from "react"; - -import { - getHttpTimelineClient, - HttpTimelineInfo, - HttpTimelinePatchRequest, - kTimelineVisibilities, - TimelineVisibility, -} from "@/http/timeline"; - -import OperationDialog from "../common/OperationDialog"; - -export interface TimelinePropertyChangeDialogProps { - open: boolean; - close: () => void; - timeline: HttpTimelineInfo; - onChange: () => void; -} - -const labelMap: { [key in TimelineVisibility]: string } = { - Private: "timeline.visibility.private", - Public: "timeline.visibility.public", - Register: "timeline.visibility.register", -}; - -const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> = - (props) => { - const { timeline, onChange } = props; - - return ( - <OperationDialog - title={"timeline.dialogChangeProperty.title"} - inputScheme={ - [ - { - type: "text", - label: "timeline.dialogChangeProperty.titleField", - initValue: timeline.title, - }, - { - type: "select", - label: "timeline.dialogChangeProperty.visibility", - options: kTimelineVisibilities.map((v) => ({ - label: labelMap[v], - value: v, - })), - initValue: timeline.visibility, - }, - { - type: "text", - label: "timeline.dialogChangeProperty.description", - initValue: timeline.description, - }, - { - type: "color", - label: "timeline.dialogChangeProperty.color", - initValue: timeline.color ?? null, - canBeNull: true, - }, - ] as const - } - open={props.open} - close={props.close} - onProcess={([newTitle, newVisibility, newDescription, newColor]) => { - const req: HttpTimelinePatchRequest = {}; - if (newTitle !== timeline.title) { - req.title = newTitle; - } - if (newVisibility !== timeline.visibility) { - req.visibility = newVisibility as TimelineVisibility; - } - if (newDescription !== timeline.description) { - req.description = newDescription; - } - const nc = newColor ?? ""; - if (nc !== timeline.color) { - req.color = nc; - } - return getHttpTimelineClient() - .patchTimeline(timeline.name, req) - .then(onChange); - }} - /> - ); - }; - -export default TimelinePropertyChangeDialog; diff --git a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx deleted file mode 100644 index dabbdf1e..00000000 --- a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -import TimelineLine, { TimelineLineProps } from "./TimelineLine"; - -export interface TimelineTopProps { - height?: number | string; - lineProps?: TimelineLineProps; - className?: string; - style?: React.CSSProperties; -} - -const TimelineTop: React.FC<TimelineTopProps> = (props) => { - const { height, style, className } = props; - const lineProps = props.lineProps ?? { center: "none" }; - - return ( - <div - style={{ ...style, height: height }} - className={classnames("timeline-top", className)} - > - <TimelineLine {...lineProps} /> - </div> - ); -}; - -export default TimelineTop; diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass deleted file mode 100644 index 4400fead..00000000 --- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass +++ /dev/null @@ -1,259 +0,0 @@ -@use 'sass:color' - -.timeline - z-index: 0 - position: relative - width: 100% - overflow-wrap: break-word - animation: 1s timeline-enter - -$timeline-line-width: 7px -$timeline-line-node-radius: 18px -$timeline-line-color: var(--tl-primary-color) -$timeline-line-color-current: var(--tl-primary-enhance-color) - -@keyframes timeline-line-node-noncurrent - to - box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color) - -@keyframes timeline-line-node-current - to - box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color) - -@keyframes timeline-line-node-loading - to - box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color) - -@keyframes timeline-line-node-loading-edge - from - transform: rotate(0turn) - to - transform: rotate(1turn) - -@keyframes timeline-enter - from - transform: translate(0, -100vh) - -@keyframes timeline-top-loading-enter - from - transform: translate(0, -100%) - -@keyframes timeline-post-enter - from - transform: translate(0, -100%) - opacity: 0 - - to - opacity: 1 - -.timeline-top-loading-enter - animation: 1s timeline-top-loading-enter - -.timeline-line - display: flex - flex-direction: column - align-items: center - width: 30px - - position: absolute - z-index: 1 - left: 2em - top: 0 - bottom: 0 - - transition: left 0.5s - - @include media-breakpoint-down(sm) - left: 1em - - .segment - width: $timeline-line-width - background: $timeline-line-color - - &.start - height: 1.8em - flex: 0 0 auto - - &.end - flex: 1 1 auto - - &.current-end - height: 2em - flex: 0 0 auto - background: linear-gradient($timeline-line-color-current, white) - - .node-container - flex: 0 0 auto - position: relative - width: $timeline-line-node-radius - height: $timeline-line-node-radius - - .node - width: $timeline-line-node-radius + 2 - height: $timeline-line-node-radius + 2 - position: absolute - background: $timeline-line-color - left: -1px - top: -1px - border-radius: 50% - box-sizing: border-box - z-index: 1 - animation: 1s infinite alternate - animation-name: timeline-line-node-noncurrent - - .node-loading-edge - color: $timeline-line-color - width: $timeline-line-node-radius + 20 - height: $timeline-line-node-radius + 20 - position: absolute - left: -10px - top: -10px - box-sizing: border-box - z-index: 2 - animation: 1.5s linear infinite timeline-line-node-loading-edge - - &.current - .segment - &.start - background: linear-gradient($timeline-line-color, $timeline-line-color-current) - &.end - background: $timeline-line-color-current - .node - background: $timeline-line-color-current - animation-name: timeline-line-node-current - - &.loading - .node - background: $timeline-line-color - animation-name: timeline-line-node-loading - -.timeline-item.current - padding-bottom: 2.5em - -.timeline-top - position: relative - text-align: right - -.timeline-item - position: relative - padding: 0.5em - -.timeline-item-card - @extend .cru-card - position: relative - padding: 0.3em 0.5em 1em 4em - transition: background 0.5s, padding-left 0.5s - animation: 0.6s forwards - opacity: 0 - - @include media-breakpoint-down(sm) - padding-left: 3em - -.timeline-item-header - display: flex - align-items: center - @extend .my-2 - -.timeline-avatar - border-radius: 50% - width: 2em - height: 2em - -.timeline-item-delete-button - position: absolute - right: 0 - bottom: 0 - -.timeline-content - white-space: pre-line - -.timeline-content-image - max-width: 80% - max-height: 200px - -.timeline-date-item - position: relative - padding: 0.3em 0 0.3em 4em - -.timeline-date-item-badge - display: inline-block - padding: 0.1em 0.4em - border-radius: 0.4em - background: #7c7c7c - color: white - font-size: 0.8em - -.timeline-post-edit-image - max-width: 100px - max-height: 100px - -.mask - background: change-color($color: white, $alpha: 0.8) - z-index: 100 - -.timeline-sync-state-badge - font-size: 0.8em - padding: 3px 8px - border-radius: 5px - background: #e8fbff - -.timeline-sync-state-badge-pin - display: inline-block - width: 0.4em - height: 0.4em - border-radius: 50% - vertical-align: middle - margin-right: 0.6em - -.timeline-template-card - position: fixed - top: 56px - right: 0 - margin: 0.5em - -.timeline-markdown-post-edit-page - overflow: scroll - max-height: 300px - -.timeline-markdown-post-edit-image-container - position: relative - text-align: center - margin-bottom: 1em - -.timeline-markdown-post-edit-image - max-width: 100% - max-height: 200px - -.timeline-markdown-post-edit-image-delete-button - position: absolute - right: 10px - top: 2px - -.connection-status-badge - font-size: 0.8em - border-radius: 5px - padding: 0.1em 1em - background-color: rgb(234 242 255) - - &::before - width: 10px - height: 10px - border-radius: 50% - display: inline-block - content: '' - margin-right: 0.6em - - &.success - color: #006100 - &::before - background-color: #006100 - - &.warning - color: #e4a700 - &::before - background-color: #e4a700 - - &.danger - color: #fd1616 - &::before - background-color: #fd1616 diff --git a/FrontEnd/src/app/views/timeline/TimelineCard.tsx b/FrontEnd/src/app/views/timeline/TimelineCard.tsx deleted file mode 100644 index e031b565..00000000 --- a/FrontEnd/src/app/views/timeline/TimelineCard.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; - -import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate"; -import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate"; - -import UserAvatar from "../common/user/UserAvatar"; -import TimelineDeleteDialog from "./TimelineDeleteDialog"; - -const TimelineCard: React.FC<TimelinePageCardProps> = (props) => { - const { timeline } = props; - - const [dialog, setDialog] = React.useState< - "member" | "property" | "delete" | null - >(null); - - return ( - <> - <TimelinePageCardTemplate - infoArea={ - <> - <h3 className="tl-color-primary d-inline-block align-middle"> - {timeline.title} - <small className="ms-3 text-secondary">{timeline.name}</small> - </h3> - <div className="align-middle"> - <UserAvatar - username={timeline.owner.username} - className="avatar small rounded-circle me-3" - /> - {timeline.owner.nickname} - <small className="ms-3 text-secondary"> - @{timeline.owner.username} - </small> - </div> - </> - } - manageItems={ - timeline.manageable - ? [ - { - type: "button", - text: "timeline.manageItem.property", - onClick: () => setDialog("property"), - }, - { type: "divider" }, - { - type: "button", - onClick: () => setDialog("delete"), - color: "danger", - text: "timeline.manageItem.delete", - }, - ] - : undefined - } - dialog={dialog} - setDialog={setDialog} - {...props} - /> - {(() => { - if (dialog === "delete") { - return ( - <TimelineDeleteDialog - timeline={timeline} - open - close={() => setDialog(null)} - /> - ); - } - })()} - </> - ); -}; - -export default TimelineCard; diff --git a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx deleted file mode 100644 index dbca62ca..00000000 --- a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; -import { Trans } from "react-i18next"; - -import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; - -import OperationDialog from "../common/OperationDialog"; - -interface TimelineDeleteDialog { - timeline: HttpTimelineInfo; - open: boolean; - close: () => void; -} - -const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => { - const history = useHistory(); - - const { timeline } = props; - - return ( - <OperationDialog - open={props.open} - close={props.close} - title="timeline.deleteDialog.title" - themeColor="danger" - inputPrompt={() => { - return ( - <Trans i18nKey="timeline.deleteDialog.inputPrompt"> - 0<code className="mx-2">{{ name }}</code>2 - </Trans> - ); - }} - inputScheme={[ - { - type: "text", - }, - ]} - inputValidator={([value]) => { - if (value !== timeline.name) { - return { 0: "timeline.deleteDialog.notMatch" }; - } else { - return null; - } - }} - onProcess={() => { - return getHttpTimelineClient().deleteTimeline(timeline.name); - }} - onSuccessAndClose={() => { - history.replace("/"); - }} - /> - ); -}; - -export default TimelineDeleteDialog; diff --git a/FrontEnd/src/app/views/timeline/index.tsx b/FrontEnd/src/app/views/timeline/index.tsx deleted file mode 100644 index c5bfd7ab..00000000 --- a/FrontEnd/src/app/views/timeline/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { useParams } from "react-router"; - -import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate"; -import TimelineCard from "./TimelineCard"; - -const TimelinePage: React.FC = () => { - const { name } = useParams<{ name: string }>(); - - const [reloadKey, setReloadKey] = React.useState<number>(0); - - return ( - <TimelinePageTemplate - timelineName={name} - notFoundI18nKey="timeline.timelineNotExist" - reloadKey={reloadKey} - CardComponent={TimelineCard} - onReload={() => setReloadKey(reloadKey + 1)} - /> - ); -}; - -export default TimelinePage; diff --git a/FrontEnd/src/app/views/timeline/timeline.sass b/FrontEnd/src/app/views/timeline/timeline.sass deleted file mode 100644 index e69de29b..00000000 --- a/FrontEnd/src/app/views/timeline/timeline.sass +++ /dev/null diff --git a/FrontEnd/src/app/views/user/UserCard.tsx b/FrontEnd/src/app/views/user/UserCard.tsx deleted file mode 100644 index e7e4252e..00000000 --- a/FrontEnd/src/app/views/user/UserCard.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; - -import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate"; -import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate"; -import UserAvatar from "../common/user/UserAvatar"; - -const UserCard: React.FC<TimelinePageCardProps> = (props) => { - const { timeline } = props; - - const [dialog, setDialog] = React.useState<"member" | "property" | null>( - null - ); - - return ( - <> - <TimelinePageCardTemplate - infoArea={ - <> - <h3 className="tl-color-primary d-inline-block align-middle"> - {timeline.title} - <small className="ms-3 text-secondary">{timeline.name}</small> - </h3> - <div className="align-middle"> - <UserAvatar - username={timeline.owner.username} - className="avatar small rounded-circle me-3" - /> - {timeline.owner.nickname} - </div> - </> - } - manageItems={ - timeline.manageable - ? [ - { - type: "button", - text: "timeline.manageItem.property", - onClick: () => setDialog("property"), - }, - ] - : undefined - } - dialog={dialog} - setDialog={setDialog} - {...props} - /> - </> - ); -}; - -export default UserCard; diff --git a/FrontEnd/src/app/views/user/index.tsx b/FrontEnd/src/app/views/user/index.tsx deleted file mode 100644 index 57454d0d..00000000 --- a/FrontEnd/src/app/views/user/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import { useParams } from "react-router"; - -import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate"; -import UserCard from "./UserCard"; - -const UserPage: React.FC = () => { - const { username } = useParams<{ username: string }>(); - - const [reloadKey, setReloadKey] = React.useState<number>(0); - - let dialogElement: React.ReactElement | undefined; - - return ( - <> - <TimelinePageTemplate - timelineName={`@${username}`} - notFoundI18nKey="timeline.userNotExist" - reloadKey={reloadKey} - onReload={() => setReloadKey(reloadKey + 1)} - CardComponent={UserCard} - /> - {dialogElement} - </> - ); -}; - -export default UserPage; diff --git a/FrontEnd/src/app/views/user/user.sass b/FrontEnd/src/app/views/user/user.sass deleted file mode 100644 index 63a28e05..00000000 --- a/FrontEnd/src/app/views/user/user.sass +++ /dev/null @@ -1,7 +0,0 @@ -.change-avatar-cropper-row
- max-height: 400px
-
-.change-avatar-img
- min-width: 50%
- max-width: 100%
- max-height: 400px
|
