aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/search
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/search')
-rw-r--r--FrontEnd/src/views/search/index.css15
-rw-r--r--FrontEnd/src/views/search/index.tsx131
2 files changed, 0 insertions, 146 deletions
diff --git a/FrontEnd/src/views/search/index.css b/FrontEnd/src/views/search/index.css
deleted file mode 100644
index 6ff4d9fa..00000000
--- a/FrontEnd/src/views/search/index.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.timeline-search-result-item {
- border: 1px solid;
- border-color: #e9ecef;
- background: #f8f9fa;
- transition: all 0.3s;
-}
-.timeline-search-result-item:hover {
- border-color: #0d6efd;
-}
-
-.timeline-search-result-item-avatar {
- width: 2em;
- height: 2em;
- border-radius: 50%;
-}
diff --git a/FrontEnd/src/views/search/index.tsx b/FrontEnd/src/views/search/index.tsx
deleted file mode 100644
index 58257465..00000000
--- a/FrontEnd/src/views/search/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate, useLocation } from "react-router-dom";
-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";
-
-import "./index.css";
-
-const TimelineSearchResultItemView: React.FC<{
- timeline: HttpTimelineInfo;
-}> = ({ timeline }) => {
- return (
- <div className="timeline-search-result-item my-2 p-3">
- <h4>
- <Link
- to={`/${timeline.owner.username}/${timeline.nameV2}`}
- className="mb-2 text-primary"
- >
- {timeline.title}
- <small className="ms-3 text-secondary">{timeline.nameV2}</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 navigate = useNavigate();
- 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 (
- <div className="container my-3">
- <div className="row 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 {
- navigate(`/search?q=${searchText}`);
- }
- }}
- />
- </div>
- {(() => {
- 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.owner.username}/${t.nameV2}`}
- timeline={t}
- />
- ));
- }
- }
- })()}
- </div>
- );
-};
-
-export default SearchPage;