diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/home/Home.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/home/Home.tsx | 204 |
1 files changed, 102 insertions, 102 deletions
diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx index b759fa50..00e6ff5a 100644 --- a/Timeline/ClientApp/src/app/home/Home.tsx +++ b/Timeline/ClientApp/src/app/home/Home.tsx @@ -1,102 +1,102 @@ -import React from 'react';
-import { useHistory } from 'react-router';
-import { Row, Container, Button, Col } from 'reactstrap';
-import { useTranslation } from 'react-i18next';
-
-import { useUser } from '../data/user';
-
-import AppBar from '../common/AppBar';
-import SearchInput from '../common/SearchInput';
-import BoardWithoutUser from './BoardWithoutUser';
-import BoardWithUser from './BoardWithUser';
-import TimelineCreateDialog from './TimelineCreateDialog';
-
-const Home: 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 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]);
-
- 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={() => {
- setDialog('create');
- }}
- >
- {t('home.createButton')}
- </Button>
- )
- }
- />
- </Col>
- </Row>
- {(() => {
- if (user == null) {
- return <BoardWithoutUser />;
- } else {
- return <BoardWithUser user={user} />;
- }
- })()}
- </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={() => {
- setDialog(null);
- }}
- />
- )}
- </>
- );
-};
-
-export default Home;
+import React from "react"; +import { useHistory } from "react-router"; +import { Row, Container, Button, Col } from "reactstrap"; +import { useTranslation } from "react-i18next"; + +import { useUser } from "../data/user"; + +import AppBar from "../common/AppBar"; +import SearchInput from "../common/SearchInput"; +import BoardWithoutUser from "./BoardWithoutUser"; +import BoardWithUser from "./BoardWithUser"; +import TimelineCreateDialog from "./TimelineCreateDialog"; + +const Home: 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 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]); + + 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={() => { + setDialog("create"); + }} + > + {t("home.createButton")} + </Button> + ) + } + /> + </Col> + </Row> + {(() => { + if (user == null) { + return <BoardWithoutUser />; + } else { + return <BoardWithUser user={user} />; + } + })()} + </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={() => { + setDialog(null); + }} + /> + )} + </> + ); +}; + +export default Home; |