1 files changed, 155 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx
new file mode 100644
index 00000000..775a1a87
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/Home.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Row, Container, Button, Col } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+
+import { apiBaseUrl } from '../config';
+import { useUser } from '../data/user';
+import { TimelineInfo } from '../data/timeline';
+
+import AppBar from '../common/AppBar';
+import SearchInput from '../common/SearchInput';
+import TimelineBoardAreaWithoutUser from './TimelineBoardAreaWithoutUser';
+import TimelineBoardAreaWithUser from './TimelineBoardAreaWithUser';
+import TimelineCreateDialog from './TimelineCreateDialog';
+
+const Home: React.FC = (_) => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const user = useUser();
+
+  const [navText, setNavText] = React.useState<string>('');
+
+  const [publicTimelines, setPublicTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+  const [ownTimelines, setOwnTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+  const [joinTimelines, setJoinTimelines] = React.useState<
+    TimelineInfo[] | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    let subscribe = true;
+    if (user == null) {
+      setOwnTimelines(undefined);
+      setJoinTimelines(undefined);
+      void axios
+        .get<TimelineInfo[]>(`${apiBaseUrl}/timelines?visibility=public`)
+        .then((res) => {
+          if (subscribe) {
+            setPublicTimelines(res.data);
+          }
+        });
+    } else {
+      setPublicTimelines(undefined);
+      void axios
+        .get<TimelineInfo[]>(
+          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=own`
+        )
+        .then((res) => {
+          if (subscribe) {
+            setOwnTimelines(res.data);
+          }
+        });
+      void axios
+        .get<TimelineInfo[]>(
+          `${apiBaseUrl}/timelines?relate=${user.username}&relateType=join`
+        )
+        .then((res) => {
+          if (subscribe) {
+            setJoinTimelines(res.data);
+          }
+        });
+    }
+    return () => {
+      subscribe = false;
+    };
+  }, [user]);
+
+  const [dialog, setDialog] = React.useState<'create' | null>(null);
+
+  const goto = React.useCallback((): void => {
+    if (navText === '') {
+      history.push('users/crupest');
+    } else if (navText.startsWith('@')) {
+      history.push(`users/${navText.slice(1)}`);
+    } else {
+      history.push(`timelines/${navText}`);
+    }
+  }, [navText, history]);
+
+  const openCreateDialog = React.useCallback(() => {
+    setDialog('create');
+  }, []);
+
+  const closeDialog = React.useCallback(() => {
+    setDialog(null);
+  }, []);
+
+  return (
+    <>
+      <AppBar />
+      <Container fluid style={{ marginTop: '56px' }}>
+        <Row>
+          <Col>
+            <SearchInput
+              className="justify-content-center"
+              value={navText}
+              onChange={setNavText}
+              onButtonClick={goto}
+              buttonText={t('home.go')}
+              placeholder="@crupest"
+              additionalButton={
+                user != null && (
+                  <Button color="success" outline onClick={openCreateDialog}>
+                    {t('home.createButton')}
+                  </Button>
+                )
+              }
+            />
+          </Col>
+        </Row>
+        {(() => {
+          if (user == null) {
+            return (
+              <TimelineBoardAreaWithoutUser publicTimelines={publicTimelines} />
+            );
+          } else {
+            return (
+              <TimelineBoardAreaWithUser
+                ownTimelines={ownTimelines}
+                joinTimelines={joinTimelines}
+              />
+            );
+          }
+        })()}
+      </Container>
+      <footer className="text-right">
+        <a
+          className="mx-3 text-muted"
+          href="http://beian.miit.gov.cn/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <small>鄂ICP备18030913号-1</small>
+        </a>
+        <a
+          className="mx-3 text-muted"
+          href="http://www.beian.gov.cn/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <small className="white-space-no-wrap">公安备案 42112102000124</small>
+        </a>
+      </footer>
+      {dialog === 'create' && <TimelineCreateDialog open close={closeDialog} />}
+    </>
+  );
+};
+
+export default Home;