From de1d582bf2ed7062fd400459f30d463d47ef9982 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 24 Aug 2020 22:59:45 +0800 Subject: ... --- Timeline/ClientApp/src/app/home/BoardWithUser.tsx | 204 ++++++++++----------- .../ClientApp/src/app/home/BoardWithoutUser.tsx | 122 ++++++------ Timeline/ClientApp/src/app/home/Home.tsx | 204 ++++++++++----------- Timeline/ClientApp/src/app/home/OfflineBoard.tsx | 124 ++++++------- Timeline/ClientApp/src/app/home/TimelineBoard.tsx | 148 +++++++-------- .../src/app/home/TimelineCreateDialog.tsx | 108 +++++------ Timeline/ClientApp/src/app/home/home.sass | 26 +-- 7 files changed, 468 insertions(+), 468 deletions(-) (limited to 'Timeline/ClientApp/src/app/home') diff --git a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx b/Timeline/ClientApp/src/app/home/BoardWithUser.tsx index 3830104f..4910aebe 100644 --- a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx +++ b/Timeline/ClientApp/src/app/home/BoardWithUser.tsx @@ -1,102 +1,102 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -import { UserWithToken } from '../data/user'; -import { TimelineInfo } from '../data/timeline'; - -import { getHttpTimelineClient } from '../http/timeline'; - -import TimelineBoard from './TimelineBoard'; -import OfflineBoard from './OfflineBoard'; - -const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { - const { t } = useTranslation(); - - const [ownTimelines, setOwnTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - const [joinTimelines, setJoinTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - - React.useEffect(() => { - let subscribe = true; - if (ownTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ relate: user.username, relateType: 'own' }) - .then( - (timelines) => { - if (subscribe) { - setOwnTimelines(timelines); - } - }, - () => { - setOwnTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [user, ownTimelines]); - - React.useEffect(() => { - let subscribe = true; - if (joinTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ relate: user.username, relateType: 'join' }) - .then( - (timelines) => { - if (subscribe) { - setJoinTimelines(timelines); - } - }, - () => { - setJoinTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [user, joinTimelines]); - - return ( - - {ownTimelines === 'offline' && joinTimelines === 'offline' ? ( - - { - setOwnTimelines('loading'); - setJoinTimelines('loading'); - }} - /> - - ) : ( - <> - - { - setOwnTimelines('loading'); - }} - /> - - - { - setJoinTimelines('loading'); - }} - /> - - - )} - - ); -}; - -export default BoardWithUser; +import React from "react"; +import { Row, Col } from "reactstrap"; +import { useTranslation } from "react-i18next"; + +import { UserWithToken } from "../data/user"; +import { TimelineInfo } from "../data/timeline"; + +import { getHttpTimelineClient } from "../http/timeline"; + +import TimelineBoard from "./TimelineBoard"; +import OfflineBoard from "./OfflineBoard"; + +const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { + const { t } = useTranslation(); + + const [ownTimelines, setOwnTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + const [joinTimelines, setJoinTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + + React.useEffect(() => { + let subscribe = true; + if (ownTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ relate: user.username, relateType: "own" }) + .then( + (timelines) => { + if (subscribe) { + setOwnTimelines(timelines); + } + }, + () => { + setOwnTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [user, ownTimelines]); + + React.useEffect(() => { + let subscribe = true; + if (joinTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ relate: user.username, relateType: "join" }) + .then( + (timelines) => { + if (subscribe) { + setJoinTimelines(timelines); + } + }, + () => { + setJoinTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [user, joinTimelines]); + + return ( + + {ownTimelines === "offline" && joinTimelines === "offline" ? ( + + { + setOwnTimelines("loading"); + setJoinTimelines("loading"); + }} + /> + + ) : ( + <> + + { + setOwnTimelines("loading"); + }} + /> + + + { + setJoinTimelines("loading"); + }} + /> + + + )} + + ); +}; + +export default BoardWithUser; diff --git a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx b/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx index 4b30fcc4..a7dc36be 100644 --- a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx +++ b/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx @@ -1,61 +1,61 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; - -import { TimelineInfo } from '../data/timeline'; - -import { getHttpTimelineClient } from '../http/timeline'; - -import TimelineBoard from './TimelineBoard'; -import OfflineBoard from './OfflineBoard'; - -const BoardWithoutUser: React.FC = () => { - const [publicTimelines, setPublicTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - - React.useEffect(() => { - let subscribe = true; - if (publicTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ visibility: 'Public' }) - .then( - (timelines) => { - if (subscribe) { - setPublicTimelines(timelines); - } - }, - () => { - setPublicTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [publicTimelines]); - - return ( - - {publicTimelines === 'offline' ? ( - - { - setPublicTimelines('loading'); - }} - /> - - ) : ( - - { - setPublicTimelines('loading'); - }} - /> - - )} - - ); -}; - -export default BoardWithoutUser; +import React from "react"; +import { Row, Col } from "reactstrap"; + +import { TimelineInfo } from "../data/timeline"; + +import { getHttpTimelineClient } from "../http/timeline"; + +import TimelineBoard from "./TimelineBoard"; +import OfflineBoard from "./OfflineBoard"; + +const BoardWithoutUser: React.FC = () => { + const [publicTimelines, setPublicTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + + React.useEffect(() => { + let subscribe = true; + if (publicTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ visibility: "Public" }) + .then( + (timelines) => { + if (subscribe) { + setPublicTimelines(timelines); + } + }, + () => { + setPublicTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [publicTimelines]); + + return ( + + {publicTimelines === "offline" ? ( + + { + setPublicTimelines("loading"); + }} + /> + + ) : ( + + { + setPublicTimelines("loading"); + }} + /> + + )} + + ); +}; + +export default BoardWithoutUser; 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(''); - - 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 ( - <> - - - - - { - setDialog('create'); - }} - > - {t('home.createButton')} - - ) - } - /> - - - {(() => { - if (user == null) { - return ; - } else { - return ; - } - })()} - - - {dialog === 'create' && ( - { - 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(""); + + 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 ( + <> + + + + + { + setDialog("create"); + }} + > + {t("home.createButton")} + + ) + } + /> + + + {(() => { + if (user == null) { + return ; + } else { + return ; + } + })()} + + + {dialog === "create" && ( + { + setDialog(null); + }} + /> + )} + + ); +}; + +export default Home; diff --git a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx index ca6d2a26..458166ac 100644 --- a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx +++ b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx @@ -1,62 +1,62 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import { Trans } from 'react-i18next'; - -import { getAllCachedTimelineNames } from '../data/timeline'; - -import UserTimelineLogo from '../common/UserTimelineLogo'; -import TimelineLogo from '../common/TimelineLogo'; - -export interface OfflineBoardProps { - onReload: () => void; -} - -const OfflineBoard: React.FC = ({ onReload }) => { - const [timelines, setTimelines] = React.useState([]); - - React.useEffect(() => { - let subscribe = true; - void getAllCachedTimelineNames().then((t) => { - if (subscribe) setTimelines(t); - }); - return () => { - subscribe = false; - }; - }); - - return ( - <> - - 0 - { - onReload(); - e.preventDefault(); - }} - > - 1 - - 2 - - {timelines.map((timeline) => { - const isPersonal = timeline.startsWith('@'); - const url = isPersonal - ? `/users/${timeline.slice(1)}` - : `/timelines/${timeline}`; - return ( -
- {isPersonal ? ( - - ) : ( - - )} - {timeline} -
- ); - })} - - ); -}; - -export default OfflineBoard; +import React from "react"; +import { Link } from "react-router-dom"; +import { Trans } from "react-i18next"; + +import { getAllCachedTimelineNames } from "../data/timeline"; + +import UserTimelineLogo from "../common/UserTimelineLogo"; +import TimelineLogo from "../common/TimelineLogo"; + +export interface OfflineBoardProps { + onReload: () => void; +} + +const OfflineBoard: React.FC = ({ onReload }) => { + const [timelines, setTimelines] = React.useState([]); + + React.useEffect(() => { + let subscribe = true; + void getAllCachedTimelineNames().then((t) => { + if (subscribe) setTimelines(t); + }); + return () => { + subscribe = false; + }; + }); + + return ( + <> + + 0 + { + onReload(); + e.preventDefault(); + }} + > + 1 + + 2 + + {timelines.map((timeline) => { + const isPersonal = timeline.startsWith("@"); + const url = isPersonal + ? `/users/${timeline.slice(1)}` + : `/timelines/${timeline}`; + return ( +
+ {isPersonal ? ( + + ) : ( + + )} + {timeline} +
+ ); + })} + + ); +}; + +export default OfflineBoard; diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx index 8f8f6387..91bf2b77 100644 --- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx +++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx @@ -1,74 +1,74 @@ -import React from 'react'; -import clsx from 'clsx'; -import { Link } from 'react-router-dom'; -import { Spinner } from 'reactstrap'; -import { Trans } from 'react-i18next'; - -import { TimelineInfo } from '../data/timeline'; - -import TimelineLogo from '../common/TimelineLogo'; -import UserTimelineLogo from '../common/UserTimelineLogo'; - -export interface TimelineBoardProps { - title?: string; - timelines: TimelineInfo[] | 'offline' | 'loading'; - onReload: () => void; - className?: string; -} - -const TimelineBoard: React.FC = (props) => { - const { title, timelines, className } = props; - - return ( -
- {title != null &&

{title}

} - {(() => { - if (timelines === 'loading') { - return ( -
- -
- ); - } else if (timelines === 'offline') { - return ( - - ); - } else { - return timelines.map((timeline) => { - const { name } = timeline; - const isPersonal = name.startsWith('@'); - const url = isPersonal - ? `/users/${timeline.owner.username}` - : `/timelines/${name}`; - return ( -
- {isPersonal ? ( - - ) : ( - - )} - {name} -
- ); - }); - } - })()} -
- ); -}; - -export default TimelineBoard; +import React from "react"; +import clsx from "clsx"; +import { Link } from "react-router-dom"; +import { Spinner } from "reactstrap"; +import { Trans } from "react-i18next"; + +import { TimelineInfo } from "../data/timeline"; + +import TimelineLogo from "../common/TimelineLogo"; +import UserTimelineLogo from "../common/UserTimelineLogo"; + +export interface TimelineBoardProps { + title?: string; + timelines: TimelineInfo[] | "offline" | "loading"; + onReload: () => void; + className?: string; +} + +const TimelineBoard: React.FC = (props) => { + const { title, timelines, className } = props; + + return ( +
+ {title != null &&

{title}

} + {(() => { + if (timelines === "loading") { + return ( +
+ +
+ ); + } else if (timelines === "offline") { + return ( + + ); + } else { + return timelines.map((timeline) => { + const { name } = timeline; + const isPersonal = name.startsWith("@"); + const url = isPersonal + ? `/users/${timeline.owner.username}` + : `/timelines/${name}`; + return ( +
+ {isPersonal ? ( + + ) : ( + + )} + {name} +
+ ); + }); + } + })()} +
+ ); +}; + +export default TimelineBoard; diff --git a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx index 06f908f9..c5ba64e7 100644 --- a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx +++ b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx @@ -1,54 +1,54 @@ -import React from 'react'; -import { useHistory } from 'react-router'; - -import { validateTimelineName, timelineService } from '../data/timeline'; - -import OperationDialog from '../common/OperationDialog'; - -interface TimelineCreateDialogProps { - open: boolean; - close: () => void; -} - -const TimelineCreateDialog: React.FC = (props) => { - const history = useHistory(); - - let nameSaved: string; - - return ( - { - 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 timelineService.createTimeline(nameSaved).toPromise(); - }} - onSuccessAndClose={() => { - history.push(`timelines/${nameSaved}`); - }} - failurePrompt={(e) => `${e as string}`} - /> - ); -}; - -export default TimelineCreateDialog; +import React from "react"; +import { useHistory } from "react-router"; + +import { validateTimelineName, timelineService } from "../data/timeline"; + +import OperationDialog from "../common/OperationDialog"; + +interface TimelineCreateDialogProps { + open: boolean; + close: () => void; +} + +const TimelineCreateDialog: React.FC = (props) => { + const history = useHistory(); + + let nameSaved: string; + + return ( + { + 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 timelineService.createTimeline(nameSaved).toPromise(); + }} + 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 index 28a2e5f3..f5d6ffc3 100644 --- a/Timeline/ClientApp/src/app/home/home.sass +++ b/Timeline/ClientApp/src/app/home/home.sass @@ -1,13 +1,13 @@ -.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 +.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 -- cgit v1.2.3