1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React from "react";
import { useHistory } from "react-router";
import { useTranslation } from "react-i18next";
import { Container, Button, Row, Col } from "react-bootstrap";
import { HttpTimelineInfo } from "@/http/timeline";
import { getHttpHighlightClient } from "@/http/highlight";
import { useUser } from "@/services/user";
import SearchInput from "../common/SearchInput";
import TimelineCreateDialog from "../center/TimelineCreateDialog";
import TimelineListView from "./TimelineListView";
import WebsiteIntroduction from "./WebsiteIntroduction";
const highlightTimelineMessageMap = {
loading: "home.loadingHighlightTimelines",
done: "home.loadedHighlightTimelines",
error: "home.errorHighlightTimelines",
} as const;
const HomeV2: React.FC = () => {
const history = useHistory();
const { t } = useTranslation();
const user = useUser();
const [navText, setNavText] = React.useState<string>("");
const [dialog, setDialog] = React.useState<"create" | null>(null);
const [highlightTimelineState, setHighlightTimelineState] = React.useState<
"loading" | "done" | "error"
>("loading");
const [highlightTimelines, setHighlightTimelines] = React.useState<
HttpTimelineInfo[] | undefined
>();
React.useEffect(() => {
if (highlightTimelineState === "loading") {
let subscribe = true;
void getHttpHighlightClient()
.list()
.then(
(data) => {
if (subscribe) {
setHighlightTimelineState("done");
setHighlightTimelines(data);
}
},
() => {
if (subscribe) {
setHighlightTimelineState("error");
setHighlightTimelines(undefined);
}
}
);
return () => {
subscribe = false;
};
}
}, [highlightTimelineState]);
return (
<>
<Container fluid className="px-0">
<Row className="mx-0 my-3 px-2 justify-content-end">
<Col xs="12" sm="auto">
<SearchInput
value={navText}
onChange={setNavText}
onButtonClick={() => {
history.push(`search?q=${navText}`);
}}
additionalButton={
user != null && (
<Button
variant="outline-success"
onClick={() => {
setDialog("create");
}}
>
{t("home.createButton")}
</Button>
)
}
/>
</Col>
</Row>
<WebsiteIntroduction className="p-2" />
<TimelineListView
headerText={highlightTimelineMessageMap[highlightTimelineState]}
timelines={highlightTimelines}
/>
</Container>
{dialog === "create" && (
<TimelineCreateDialog open close={() => setDialog(null)} />
)}
</>
);
};
export default HomeV2;
|
