diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/home')
-rw-r--r-- | Timeline/ClientApp/src/app/home/Home.tsx | 155 | ||||
-rw-r--r-- | Timeline/ClientApp/src/app/home/TimelineBoard.tsx | 54 | ||||
-rw-r--r-- | Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx | 36 | ||||
-rw-r--r-- | Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx | 26 | ||||
-rw-r--r-- | Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx | 60 | ||||
-rw-r--r-- | Timeline/ClientApp/src/app/home/home.sass | 13 |
6 files changed, 0 insertions, 344 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; diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx deleted file mode 100644 index ca77ab43..00000000 --- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import { Link } from 'react-router-dom'; -import { Spinner } from 'reactstrap'; - -import { TimelineInfo } from '../data/timeline'; - -import TimelineLogo from '../common/TimelineLogo'; -import UserTimelineLogo from '../common/UserTimelineLogo'; - -export interface TimelineBoardProps { - title?: string; - timelines?: TimelineInfo[]; - className?: string; -} - -const TimelineBoard: React.FC<TimelineBoardProps> = props => { - const { title, timelines, className } = props; - - return ( - <div className={clsx('timeline-board', className)}> - {title != null && <h3 className="text-center">{title}</h3>} - {(() => { - if (timelines == null) { - return ( - <div className="d-flex flex-grow-1 justify-content-center align-items-center"> - <Spinner color="primary" /> - </div> - ); - } else { - return timelines.map(timeline => { - const { name } = timeline; - const isPersonal = name.startsWith('@'); - const url = isPersonal - ? `/users/${timeline.owner.username}` - : `/timelines/${name}`; - return ( - <div key={name} className="timeline-board-item"> - {isPersonal ? ( - <UserTimelineLogo className="icon" /> - ) : ( - <TimelineLogo className="icon" /> - )} - <Link to={url}>{name}</Link> - </div> - ); - }); - } - })()} - </div> - ); -}; - -export default TimelineBoard; diff --git a/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx deleted file mode 100644 index ea1c6beb..00000000 --- a/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithUser.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -import TimelineBoard from './TimelineBoard'; -import { TimelineInfo } from '../data/timeline'; - -interface TimelineBoardAreaWithUserProps { - ownTimelines?: TimelineInfo[]; - joinTimelines?: TimelineInfo[]; -} - -const TimelineBoardAreaWithUser: React.FC<TimelineBoardAreaWithUserProps> = ( - props -) => { - const { t } = useTranslation(); - - return ( - <Row className="my-2 justify-content-center"> - <Col sm="6" lg="5" className="py-2"> - <TimelineBoard - title={t('home.ownTimeline')} - timelines={props.ownTimelines} - /> - </Col> - <Col sm="6" lg="5" className="py-2"> - <TimelineBoard - title={t('home.joinTimeline')} - timelines={props.joinTimelines} - /> - </Col> - </Row> - ); -}; - -export default TimelineBoardAreaWithUser; diff --git a/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx b/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx deleted file mode 100644 index c79558b6..00000000 --- a/Timeline/ClientApp/src/app/home/TimelineBoardAreaWithoutUser.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; - -import { TimelineInfo } from '../data/timeline'; - -import TimelineBoard from './TimelineBoard'; - -interface TimelineBoardAreaWithoutUserProps { - publicTimelines?: TimelineInfo[]; -} - -const TimelineBoardAreaWithoutUser: React.FC<TimelineBoardAreaWithoutUserProps> = ( - props -) => { - const { publicTimelines } = props; - - return ( - <Row className="my-2 justify-content-center"> - <Col sm="8" lg="6"> - <TimelineBoard timelines={publicTimelines} /> - </Col> - </Row> - ); -}; - -export default TimelineBoardAreaWithoutUser; diff --git a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx deleted file mode 100644 index 925c6c76..00000000 --- a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router'; -import axios from 'axios'; - -import { apiBaseUrl } from '../config'; -import { useUserLoggedIn } from '../data/user'; -import { validateTimelineName } from '../data/timeline'; - -import OperationDialog from '../common/OperationDialog'; - -interface TimelineCreateDialogProps { - open: boolean; - close: () => void; -} - -const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => { - const history = useHistory(); - const user = useUserLoggedIn(); - - let nameSaved: string; - - return ( - <OperationDialog - open={props.open} - close={props.close} - titleColor="success" - title="home.createDialog.title" - inputScheme={[ - { - type: 'text', - label: 'home.createDialog.name', - helperText: 'home.createDialog.nameFormat', - validator: (name) => { - if (name.length === 0) { - return 'home.createDialog.noEmpty'; - } else if (name.length > 26) { - return 'home.createDialog.tooLong'; - } else if (!validateTimelineName(name)) { - return 'home.createDialog.badFormat'; - } else { - return null; - } - }, - }, - ]} - onProcess={([name]) => { - nameSaved = name as string; - return axios.post(`${apiBaseUrl}/timelines?token=${user.token}`, { - name, - }); - }} - onSuccessAndClose={() => { - history.push(`timelines/${nameSaved}`); - }} - failurePrompt={(e) => `${e as string}`} - /> - ); -}; - -export default TimelineCreateDialog; diff --git a/Timeline/ClientApp/src/app/home/home.sass b/Timeline/ClientApp/src/app/home/home.sass deleted file mode 100644 index f5d6ffc3..00000000 --- a/Timeline/ClientApp/src/app/home/home.sass +++ /dev/null @@ -1,13 +0,0 @@ -.timeline-board-item - font-size: 1.1em - @extend .my-2 - .icon - height: 1.3em - @extend .mr-2 - -.timeline-board - @extend .cru-card - @extend .d-flex - @extend .flex-column - @extend .p-3 - min-height: 200px |