diff options
author | crupest <crupest@outlook.com> | 2021-01-21 20:00:29 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2021-01-21 20:00:29 +0800 |
commit | 011761c5603e7275a20a2597f9f0b03c18c7d0fd (patch) | |
tree | 2e93a525db0f8ee5c614681f5a95b40a5e70920a | |
parent | 91ef5098e57ca4824ae4adc95c23d3689583f6a8 (diff) | |
download | timeline-011761c5603e7275a20a2597f9f0b03c18c7d0fd.tar.gz timeline-011761c5603e7275a20a2597f9f0b03c18c7d0fd.tar.bz2 timeline-011761c5603e7275a20a2597f9f0b03c18c7d0fd.zip |
chore: Fix crlf.
-rw-r--r-- | FrontEnd/src/app/http/search.ts | 96 | ||||
-rw-r--r-- | FrontEnd/src/app/views/search/index.tsx | 234 |
2 files changed, 165 insertions, 165 deletions
diff --git a/FrontEnd/src/app/http/search.ts b/FrontEnd/src/app/http/search.ts index 8ff1c499..2da9295e 100644 --- a/FrontEnd/src/app/http/search.ts +++ b/FrontEnd/src/app/http/search.ts @@ -1,48 +1,48 @@ -import {
- apiBaseUrl,
- axios,
- convertToNetworkError,
- extractResponseData,
-} from "./common";
-import {
- HttpTimelineInfo,
- processRawTimelineInfo,
- RawHttpTimelineInfo,
-} 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<RawHttpTimelineInfo[]>(`${apiBaseUrl}/search/timelines?q=${query}`)
- .then(extractResponseData)
- .then((ts) => ts.map(processRawTimelineInfo))
- .catch(convertToNetworkError);
- }
-
- searchUsers(query: string): Promise<HttpUser[]> {
- return axios
- .get<HttpUser[]>(`${apiBaseUrl}/search/users?q=${query}`)
- .then(extractResponseData)
- .catch(convertToNetworkError);
- }
-}
-
-let client: IHttpSearchClient = new HttpSearchClient();
-
-export function getHttpSearchClient(): IHttpSearchClient {
- return client;
-}
-
-export function setHttpSearchClient(
- newClient: IHttpSearchClient
-): IHttpSearchClient {
- const old = client;
- client = newClient;
- return old;
-}
+import { + apiBaseUrl, + axios, + convertToNetworkError, + extractResponseData, +} from "./common"; +import { + HttpTimelineInfo, + processRawTimelineInfo, + RawHttpTimelineInfo, +} 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<RawHttpTimelineInfo[]>(`${apiBaseUrl}/search/timelines?q=${query}`) + .then(extractResponseData) + .then((ts) => ts.map(processRawTimelineInfo)) + .catch(convertToNetworkError); + } + + searchUsers(query: string): Promise<HttpUser[]> { + return axios + .get<HttpUser[]>(`${apiBaseUrl}/search/users?q=${query}`) + .then(extractResponseData) + .catch(convertToNetworkError); + } +} + +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/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx index d7b1ac53..3cd3da58 100644 --- a/FrontEnd/src/app/views/search/index.tsx +++ b/FrontEnd/src/app/views/search/index.tsx @@ -1,117 +1,117 @@ -import { TimelineInfo } from "@/services/timeline";
-import React from "react";
-import { Container, Row } from "react-bootstrap";
-import { useHistory, useLocation } from "react-router";
-import { Link } from "react-router-dom";
-
-import { getHttpSearchClient } from "@/http/search";
-
-import SearchInput from "../common/SearchInput";
-import { HttpNetworkError } from "@/http/common";
-import { useAvatar } from "@/services/user";
-import BlobImage from "../common/BlobImage";
-
-const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({
- timeline,
-}) => {
- const link = timeline.name.startsWith("@")
- ? `users/${timeline.owner.username}`
- : `timelines/${timeline.name}`;
-
- const avatar = useAvatar(timeline.owner.username);
-
- return (
- <div className="timeline-search-result-item my-2 p-3">
- <h4>
- <Link to={link} className="mb-2 text-primary">
- {timeline.title}
- <small className="ml-3 text-secondary">{timeline.name}</small>
- </Link>
- </h4>
- <div>
- <BlobImage
- blob={avatar}
- className="timeline-search-result-item-avatar mr-2"
- />
- {timeline.owner.nickname}
- <small className="ml-3 text-secondary">
- @{timeline.owner.username}
- </small>
- </div>
- </div>
- );
-};
-
-const SearchPage: React.FC = () => {
- 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<
- TimelineInfo[] | "init" | "loading" | "network-error" | "error"
- >("init");
-
- React.useEffect(() => {
- 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]);
-
- 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 (searchText.length > 0) {
- history.push(`/search?q=${searchText}`);
- }
- }}
- />
- </Row>
- {(() => {
- switch (state) {
- case "init": {
- return "Input something and search!";
- }
- case "loading": {
- return "Loading!";
- }
- case "network-error": {
- return "Network error!";
- }
- case "error": {
- return "Unknown error!";
- }
- default: {
- return state.map((t) => (
- <TimelineSearchResultItemView key={t.name} timeline={t} />
- ));
- }
- }
- })()}
- </Container>
- );
-};
-
-export default SearchPage;
+import { TimelineInfo } from "@/services/timeline"; +import React from "react"; +import { Container, Row } from "react-bootstrap"; +import { useHistory, useLocation } from "react-router"; +import { Link } from "react-router-dom"; + +import { getHttpSearchClient } from "@/http/search"; + +import SearchInput from "../common/SearchInput"; +import { HttpNetworkError } from "@/http/common"; +import { useAvatar } from "@/services/user"; +import BlobImage from "../common/BlobImage"; + +const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({ + timeline, +}) => { + const link = timeline.name.startsWith("@") + ? `users/${timeline.owner.username}` + : `timelines/${timeline.name}`; + + const avatar = useAvatar(timeline.owner.username); + + return ( + <div className="timeline-search-result-item my-2 p-3"> + <h4> + <Link to={link} className="mb-2 text-primary"> + {timeline.title} + <small className="ml-3 text-secondary">{timeline.name}</small> + </Link> + </h4> + <div> + <BlobImage + blob={avatar} + className="timeline-search-result-item-avatar mr-2" + /> + {timeline.owner.nickname} + <small className="ml-3 text-secondary"> + @{timeline.owner.username} + </small> + </div> + </div> + ); +}; + +const SearchPage: React.FC = () => { + 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< + TimelineInfo[] | "init" | "loading" | "network-error" | "error" + >("init"); + + React.useEffect(() => { + 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]); + + 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 (searchText.length > 0) { + history.push(`/search?q=${searchText}`); + } + }} + /> + </Row> + {(() => { + switch (state) { + case "init": { + return "Input something and search!"; + } + case "loading": { + return "Loading!"; + } + case "network-error": { + return "Network error!"; + } + case "error": { + return "Unknown error!"; + } + default: { + return state.map((t) => ( + <TimelineSearchResultItemView key={t.name} timeline={t} /> + )); + } + } + })()} + </Container> + ); +}; + +export default SearchPage; |