diff options
| author | crupest <crupest@outlook.com> | 2021-01-21 19:44:47 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-01-21 19:44:47 +0800 |
| commit | 24b944f1058bbd849953385e714f093021b406aa (patch) | |
| tree | a796aa92588c4dfea31b03dda902531fd9758283 /FrontEnd/src/app/views | |
| parent | fca1b6bf2ef01990915a892c2ad4dc27aca4f211 (diff) | |
| download | timeline-24b944f1058bbd849953385e714f093021b406aa.tar.gz timeline-24b944f1058bbd849953385e714f093021b406aa.tar.bz2 timeline-24b944f1058bbd849953385e714f093021b406aa.zip | |
feat: Add search page.
Diffstat (limited to 'FrontEnd/src/app/views')
| -rw-r--r-- | FrontEnd/src/app/views/search/index.tsx | 117 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/search/search.sass | 13 |
2 files changed, 130 insertions, 0 deletions
diff --git a/FrontEnd/src/app/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx new file mode 100644 index 00000000..d7b1ac53 --- /dev/null +++ b/FrontEnd/src/app/views/search/index.tsx @@ -0,0 +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;
diff --git a/FrontEnd/src/app/views/search/search.sass b/FrontEnd/src/app/views/search/search.sass new file mode 100644 index 00000000..83f297fe --- /dev/null +++ b/FrontEnd/src/app/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%
|