diff options
Diffstat (limited to 'FrontEnd')
| -rw-r--r-- | FrontEnd/src/http/bookmark.ts | 95 | ||||
| -rw-r--r-- | FrontEnd/src/http/common.ts | 8 | ||||
| -rw-r--r-- | FrontEnd/src/http/highlight.ts | 49 | ||||
| -rw-r--r-- | FrontEnd/src/http/timeline.ts | 7 | ||||
| -rw-r--r-- | FrontEnd/src/views/home/TimelineListView.tsx | 24 | ||||
| -rw-r--r-- | FrontEnd/src/views/home/index.tsx | 14 |
6 files changed, 109 insertions, 88 deletions
diff --git a/FrontEnd/src/http/bookmark.ts b/FrontEnd/src/http/bookmark.ts index 3e5be229..382543ff 100644 --- a/FrontEnd/src/http/bookmark.ts +++ b/FrontEnd/src/http/bookmark.ts @@ -1,36 +1,93 @@ -import { axios, apiBaseUrl, extractResponseData } from "./common"; +import { applyQueryParameters } from "@/utilities/url"; +import { axios, apiBaseUrl, extractResponseData, Page } from "./common"; -import { HttpTimelineInfo } from "./timeline"; - -export interface HttpHighlightMoveRequest { - timeline: string; - newPosition: number; +export interface TimelineBookmark { + timelineOwner: string; + timelineName: string; + position: number; } export interface IHttpBookmarkClient { - list(): Promise<HttpTimelineInfo[]>; - put(timeline: string): Promise<void>; - delete(timeline: string): Promise<void>; - move(req: HttpHighlightMoveRequest): Promise<void>; + list( + username: string, + page?: number, + pageSize?: number + ): Promise<Page<TimelineBookmark>>; + post( + username: string, + timelineOwner: string, + timelineName: string + ): Promise<TimelineBookmark>; + delete( + username: string, + timelineOwner: string, + timelineName: string + ): Promise<void>; + move( + username: string, + timelineOwner: string, + timelineName: string, + position: number + ): Promise<TimelineBookmark>; } export class HttpHighlightClient implements IHttpBookmarkClient { - list(): Promise<HttpTimelineInfo[]> { + list( + username: string, + page?: number, + pageSize?: number + ): Promise<Page<TimelineBookmark>> { + const url = applyQueryParameters( + `${apiBaseUrl}/v2/users/${username}/bookmarks`, + { page, pageSize } + ); + + return axios.get<Page<TimelineBookmark>>(url).then(extractResponseData); + } + + post( + username: string, + timelineOwner: string, + timelineName: string + ): Promise<TimelineBookmark> { + const url = `${apiBaseUrl}/v2/users/${username}/bookmarks`; + return axios - .get<HttpTimelineInfo[]>(`${apiBaseUrl}/bookmarks`) + .post<TimelineBookmark>(url, { + timelineOwner, + timelineName, + }) .then(extractResponseData); } - put(timeline: string): Promise<void> { - return axios.put(`${apiBaseUrl}/bookmarks/${timeline}`).then(); - } + delete( + username: string, + timelineOwner: string, + timelineName: string + ): Promise<void> { + const url = `${apiBaseUrl}/v2/users/${username}/bookmarks/delete`; - delete(timeline: string): Promise<void> { - return axios.delete(`${apiBaseUrl}/bookmarks/${timeline}`).then(); + return axios.post(url, { + timelineOwner, + timelineName, + }); } - move(req: HttpHighlightMoveRequest): Promise<void> { - return axios.post(`${apiBaseUrl}/bookmarkop/move`, req).then(); + move( + username: string, + timelineOwner: string, + timelineName: string, + position: number + ): Promise<TimelineBookmark> { + const url = `${apiBaseUrl}/v2/users/${username}/bookmarks/move`; + + return axios + .post<TimelineBookmark>(url, { + timelineOwner, + timelineName, + position, + }) + .then(extractResponseData); } } diff --git a/FrontEnd/src/http/common.ts b/FrontEnd/src/http/common.ts index e1672985..0a27b908 100644 --- a/FrontEnd/src/http/common.ts +++ b/FrontEnd/src/http/common.ts @@ -212,3 +212,11 @@ export function convertToBlobWithEtag(res: AxiosResponse<Blob>): BlobWithEtag { export function extractEtag(res: AxiosResponse): string { return (res.headers as Record<"etag", string>)["etag"]; } + +export interface Page<T> { + pageNumber: number; + pageSize: number; + totalPageCount: number; + totalCount: number; + items: T[]; +} diff --git a/FrontEnd/src/http/highlight.ts b/FrontEnd/src/http/highlight.ts deleted file mode 100644 index fddf0729..00000000 --- a/FrontEnd/src/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/http/timeline.ts b/FrontEnd/src/http/timeline.ts index 49a7b8f2..65717a83 100644 --- a/FrontEnd/src/http/timeline.ts +++ b/FrontEnd/src/http/timeline.ts @@ -8,6 +8,7 @@ import { extractResponseData, convertToIfStatusCodeIs, getHttpToken, + Page, } from "./common"; import { HttpUser } from "./user"; @@ -115,7 +116,7 @@ export interface IHttpTimelineClient { listPost( ownerUsername: string, timelineName: string - ): Promise<HttpTimelinePostInfo[]>; + ): Promise<Page<HttpTimelinePostInfo>>; generatePostDataUrl( ownerUsername: string, timelineName: string, @@ -217,9 +218,9 @@ export class HttpTimelineClient implements IHttpTimelineClient { listPost( ownerUsername: string, timelineName: string - ): Promise<HttpTimelinePostInfo[]> { + ): Promise<Page<HttpTimelinePostInfo>> { return axios - .get<HttpTimelinePostInfo[]>( + .get<Page<HttpTimelinePostInfo>>( `${apiBaseUrl}/v2/timelines/${ownerUsername}/${timelineName}/posts` ) .then(extractResponseData); diff --git a/FrontEnd/src/views/home/TimelineListView.tsx b/FrontEnd/src/views/home/TimelineListView.tsx index 2f283e1c..b26f1f70 100644 --- a/FrontEnd/src/views/home/TimelineListView.tsx +++ b/FrontEnd/src/views/home/TimelineListView.tsx @@ -1,13 +1,13 @@ import React from "react"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; import { convertI18nText, I18nText } from "@/common"; -import { HttpTimelineInfo } from "@/http/timeline"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; +import { TimelineBookmark } from "@/http/bookmark"; interface TimelineListItemProps { - timeline: HttpTimelineInfo; + timeline: TimelineBookmark; } const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => { @@ -21,12 +21,9 @@ const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => { /> </svg> <div> - <div>{timeline.title}</div> - <div> - <small className="text-secondary">{timeline.description}</small> - </div> + {timeline.timelineOwner}/{timeline.timelineName} </div> - <Link to={`${timeline.owner.username}/${timeline.nameV2}`}> + <Link to={`${timeline.timelineOwner}/${timeline.timelineName}`}> <i className="icon-button bi-arrow-right ms-3" /> </Link> </div> @@ -60,7 +57,7 @@ const TimelineListArrow: React.FC = () => { interface TimelineListViewProps { headerText?: I18nText; - timelines?: HttpTimelineInfo[]; + timelines?: TimelineBookmark[]; } const TimelineListView: React.FC<TimelineListViewProps> = ({ @@ -83,7 +80,12 @@ const TimelineListView: React.FC<TimelineListViewProps> = ({ <h3>{convertI18nText(headerText, t)}</h3> </div> {timelines != null - ? timelines.map((t) => <TimelineListItem key={t.nameV2} timeline={t} />) + ? timelines.map((t) => ( + <TimelineListItem + key={`${t.timelineOwner}/${t.timelineName}`} + timeline={t} + /> + )) : null} <TimelineListArrow /> </div> diff --git a/FrontEnd/src/views/home/index.tsx b/FrontEnd/src/views/home/index.tsx index 9533ea5a..0eeb4b77 100644 --- a/FrontEnd/src/views/home/index.tsx +++ b/FrontEnd/src/views/home/index.tsx @@ -1,8 +1,8 @@ import React from "react"; import { useNavigate } from "react-router-dom"; -import { HttpTimelineInfo } from "@/http/timeline"; -import { getHttpHighlightClient } from "@/http/highlight"; +import { Page } from "@/http/common"; +import { getHttpBookmarkClient, TimelineBookmark } from "@/http/bookmark"; import SearchInput from "../common/SearchInput"; import TimelineListView from "./TimelineListView"; @@ -10,6 +10,8 @@ import WebsiteIntroduction from "./WebsiteIntroduction"; import "./index.css"; +const highlightTimelineUsername = "crupest"; + const highlightTimelineMessageMap = { loading: "home.loadingHighlightTimelines", done: "home.loadedHighlightTimelines", @@ -25,14 +27,14 @@ const HomeV2: React.FC = () => { "loading" | "done" | "error" >("loading"); const [highlightTimelines, setHighlightTimelines] = React.useState< - HttpTimelineInfo[] | undefined + Page<TimelineBookmark> | undefined >(); React.useEffect(() => { if (highlightTimelineState === "loading") { let subscribe = true; - void getHttpHighlightClient() - .list() + void getHttpBookmarkClient() + .list(highlightTimelineUsername) .then( (data) => { if (subscribe) { @@ -67,7 +69,7 @@ const HomeV2: React.FC = () => { <WebsiteIntroduction className="m-2" /> <TimelineListView headerText={highlightTimelineMessageMap[highlightTimelineState]} - timelines={highlightTimelines} + timelines={highlightTimelines?.items} /> </> ); |