From 47587812b809fee2a95c76266d9d0e42fc4ac1ca Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 15 Jun 2021 14:14:28 +0800 Subject: ... --- FrontEnd/src/views/search/index.tsx | 128 ++++++++++++++++++++++++++++++++++ FrontEnd/src/views/search/search.sass | 13 ++++ 2 files changed, 141 insertions(+) create mode 100644 FrontEnd/src/views/search/index.tsx create mode 100644 FrontEnd/src/views/search/search.sass (limited to 'FrontEnd/src/views/search') diff --git a/FrontEnd/src/views/search/index.tsx b/FrontEnd/src/views/search/index.tsx new file mode 100644 index 00000000..14a9709c --- /dev/null +++ b/FrontEnd/src/views/search/index.tsx @@ -0,0 +1,128 @@ +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 ( +
+

+ + {timeline.title} + {timeline.name} + +

+
+ + {timeline.owner.nickname} + + @{timeline.owner.username} + +
+
+ ); +}; + +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(""); + const [state, setState] = React.useState< + HttpTimelineInfo[] | "init" | "loading" | "network-error" | "error" + >("init"); + + const [forceResearchKey, setForceResearchKey] = React.useState(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 ( + + + { + if (queryParam === searchText) { + setForceResearchKey((old) => old + 1); + } else { + history.push(`/search?q=${searchText}`); + } + }} + /> + + {(() => { + switch (state) { + case "init": { + if (queryParam == null || queryParam.length === 0) { + return
{t("searchPage.input")}
; + } + break; + } + case "loading": { + return
{t("searchPage.loading")}
; + } + case "network-error": { + return
{t("error.network")}
; + } + case "error": { + return
{t("error.unknown")}
; + } + default: { + if (state.length === 0) { + return
{t("searchPage.noResult")}
; + } + return state.map((t) => ( + + )); + } + } + })()} +
+ ); +}; + +export default SearchPage; diff --git a/FrontEnd/src/views/search/search.sass b/FrontEnd/src/views/search/search.sass new file mode 100644 index 00000000..83f297fe --- /dev/null +++ b/FrontEnd/src/views/search/search.sass @@ -0,0 +1,13 @@ +.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% -- cgit v1.2.3