diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/home/Home.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/home/Home.tsx | 155 |
1 files changed, 0 insertions, 155 deletions
diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx deleted file mode 100644 index 775a1a87..00000000 --- a/Timeline/ClientApp/src/app/home/Home.tsx +++ /dev/null @@ -1,155 +0,0 @@ -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; |