diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx | 275 |
1 files changed, 0 insertions, 275 deletions
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx deleted file mode 100644 index 38ecd8f9..00000000 --- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx +++ /dev/null @@ -1,275 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { AxiosError } from 'axios'; -import concat from 'lodash/concat'; -import without from 'lodash/without'; - -import { ExcludeKey } from '../type-utilities'; -import { useUser, fetchUser } from '../data/user'; -import { pushAlert } from '../common/alert-service'; -import { extractStatusCode, extractErrorCode } from '../data/common'; -import { - TimelineServiceTemplate, - TimelineInfo, - TimelineChangePropertyRequest, -} from '../data/timeline'; - -import { TimelinePostInfoEx, TimelineDeleteCallback } from './Timeline'; -import { TimelineMemberDialog } from './TimelineMember'; -import TimelinePropertyChangeDialog from './TimelinePropertyChangeDialog'; -import { TimelinePageTemplateUIProps } from './TimelinePageTemplateUI'; -import { TimelinePostSendCallback } from './TimelinePostEdit'; -import { UiLogicError } from '../common'; - -export interface TimelinePageTemplateProps< - TManageItem, - TTimeline extends TimelineInfo -> { - name: string; - onManage: (item: TManageItem) => void; - service: TimelineServiceTemplate<TTimeline, TimelineChangePropertyRequest>; - UiComponent: React.ComponentType< - ExcludeKey< - TimelinePageTemplateUIProps<TTimeline, TManageItem>, - 'CardComponent' - > - >; - dataVersion?: number; - notFoundI18nKey: string; -} - -export default function TimelinePageTemplate< - TManageItem, - TTimeline extends TimelineInfo ->( - props: TimelinePageTemplateProps<TManageItem, TTimeline> -): React.ReactElement | null { - const { t } = useTranslation(); - - const { name } = props; - - const user = useUser(); - - const [dialog, setDialog] = React.useState<null | 'property' | 'member'>( - null - ); - const [timeline, setTimeline] = React.useState<TTimeline | undefined>( - undefined - ); - const [posts, setPosts] = React.useState< - TimelinePostInfoEx[] | 'forbid' | undefined - >(undefined); - const [error, setError] = React.useState<string | undefined>(undefined); - - const service = props.service; - - React.useEffect(() => { - let subscribe = true; - service.fetch(name).then( - (ti) => { - if (subscribe) { - setTimeline(ti); - if (!service.hasReadPermission(user, ti)) { - setPosts('forbid'); - } else { - service.fetchPosts(name).then( - (data) => { - if (subscribe) { - setPosts( - data.map((post) => ({ - ...post, - deletable: service.hasModifyPostPermission( - user, - ti, - post - ), - })) - ); - } - }, - (error) => { - if (subscribe) { - setError(`${error as string}`); - } - } - ); - } - } - }, - (error: AxiosError) => { - if (subscribe) { - if ( - extractStatusCode(error) === 404 || - extractErrorCode(error) === 11020101 - ) { - setError(t(props.notFoundI18nKey)); - } else { - setError(error.toString()); - } - } - } - ); - return () => { - subscribe = false; - }; - }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]); - - const closeDialog = React.useCallback((): void => { - setDialog(null); - }, []); - - let dialogElement: React.ReactElement | undefined; - - if (dialog === 'property') { - if (timeline == null) { - throw new UiLogicError( - 'Timeline is null but attempt to open change property dialog.' - ); - } - - dialogElement = ( - <TimelinePropertyChangeDialog - open - close={closeDialog} - oldInfo={{ - visibility: timeline.visibility, - description: timeline.description, - }} - onProcess={(req) => { - return service.changeProperty(name, req).then((newTimeline) => { - setTimeline(newTimeline); - }); - }} - /> - ); - } else if (dialog === 'member') { - if (timeline == null) { - throw new UiLogicError( - 'Timeline is null but attempt to open change property dialog.' - ); - } - - dialogElement = ( - <TimelineMemberDialog - open - onClose={closeDialog} - members={[timeline.owner, ...timeline.members]} - edit={ - service.hasManagePermission(user, timeline) - ? { - onCheckUser: (u) => { - return fetchUser(u).catch((e) => { - if ( - extractStatusCode(e) === 404 || - extractErrorCode(e) === 11020101 - ) { - return Promise.resolve(null); - } else { - return Promise.reject(e); - } - }); - }, - onAddUser: (u) => { - return service.addMember(name, u.username).then((_) => { - setTimeline({ - ...timeline, - members: concat(timeline.members, u), - }); - }); - }, - onRemoveUser: (u) => { - void service.removeMember(name, u).then((_) => { - setTimeline({ - ...timeline, - members: without( - timeline.members, - timeline.members.find((m) => m.username === u) - ), - }); - }); - }, - } - : null - } - /> - ); - } - - const { UiComponent } = props; - - const onDelete: TimelineDeleteCallback = React.useCallback( - (index, id) => { - service.deletePost(name, id).then( - (_) => { - setPosts((oldPosts) => - without( - oldPosts as TimelinePostInfoEx[], - (oldPosts as TimelinePostInfoEx[])[index] - ) - ); - }, - () => { - pushAlert({ - type: 'danger', - message: t('timeline.deletePostFailed'), - }); - } - ); - }, - [service, name, t] - ); - - const onPost: TimelinePostSendCallback = React.useCallback( - (req) => { - return service.createPost(name, req).then((newPost) => { - setPosts((oldPosts) => - concat(oldPosts as TimelinePostInfoEx[], { - ...newPost, - deletable: true, - }) - ); - }); - }, - [service, name] - ); - - const onManageProp = props.onManage; - - const onManage = React.useCallback( - (item: 'property' | TManageItem) => { - if (item === 'property') { - setDialog(item); - } else { - onManageProp(item); - } - }, - [onManageProp] - ); - - const onMember = React.useCallback(() => { - setDialog('member'); - }, []); - - return ( - <> - <UiComponent - error={error} - timeline={timeline} - posts={posts} - onDelete={onDelete} - onPost={ - timeline != null && service.hasPostPermission(user, timeline) - ? onPost - : undefined - } - onManage={ - timeline != null && service.hasManagePermission(user, timeline) - ? onManage - : undefined - } - onMember={onMember} - /> - {dialogElement} - </> - ); -} |