diff --git a/web/modals/history/history-entry.react.js b/web/modals/history/history-entry.react.js index 2f017e2f8..4571a8c3d 100644 --- a/web/modals/history/history-entry.react.js +++ b/web/modals/history/history-entry.react.js @@ -1,187 +1,189 @@ // @flow import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import { restoreEntryActionTypes, restoreEntry, } from 'lib/actions/entry-actions'; import { useENSNames } from 'lib/hooks/ens-cache'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { colorIsDark } from 'lib/shared/thread-utils'; import { type EntryInfo, type RestoreEntryInfo, type RestoreEntryResult, type CalendarQuery, } from 'lib/types/entry-types'; import type { LoadingStatus } from 'lib/types/loading-types'; -import type { ThreadInfo } from 'lib/types/thread-types'; +import type { ResolvedThreadInfo } from 'lib/types/thread-types'; import type { UserInfo } from 'lib/types/user-types'; import { type DispatchActionPromise, useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; +import { useResolvedThreadInfo } from 'lib/utils/entity-helpers'; import LoadingIndicator from '../../loading-indicator.react'; import { useSelector } from '../../redux/redux-utils'; import { nonThreadCalendarQuery } from '../../selectors/nav-selectors'; import css from './history.css'; type BaseProps = { +entryInfo: EntryInfo, +onClick: (entryID: string) => void, +animateAndLoadEntry: (entryID: string) => void, }; type Props = { ...BaseProps, - +threadInfo: ThreadInfo, + +threadInfo: ResolvedThreadInfo, +loggedIn: boolean, +restoreLoadingStatus: LoadingStatus, +calendarQuery: () => CalendarQuery, +dispatchActionPromise: DispatchActionPromise, +restoreEntry: (info: RestoreEntryInfo) => Promise, +creator: ?UserInfo, }; class HistoryEntry extends React.PureComponent { render() { let deleted = null; if (this.props.entryInfo.deleted) { let restore = null; if (this.props.loggedIn) { restore = ( ( restore ) ); } deleted = ( deleted {restore} ); } const textClasses = classNames({ [css.entry]: true, [css.darkEntry]: colorIsDark(this.props.threadInfo.color), }); const textStyle = { backgroundColor: '#' + this.props.threadInfo.color }; const creator = this.props.creator?.username ? ( {this.props.creator.username} ) : ( 'anonymous' ); return (
  • {this.props.entryInfo.text}
    {'created by '} {creator} {this.props.threadInfo.uiName}
    {deleted} revision history >
  • ); } onRestore = (event: SyntheticEvent) => { event.preventDefault(); const entryID = this.props.entryInfo.id; invariant(entryID, 'entryInfo.id (serverID) should be set'); this.props.dispatchActionPromise( restoreEntryActionTypes, this.restoreEntryAction(), { customKeyName: `${restoreEntryActionTypes.started}:${entryID}` }, ); }; onClick = (event: SyntheticEvent) => { event.preventDefault(); const entryID = this.props.entryInfo.id; invariant(entryID, 'entryInfo.id (serverID) should be set'); this.props.onClick(entryID); }; async restoreEntryAction() { const entryID = this.props.entryInfo.id; invariant(entryID, 'entry should have ID'); const result = await this.props.restoreEntry({ entryID, calendarQuery: this.props.calendarQuery(), }); this.props.animateAndLoadEntry(entryID); return { ...result, threadID: this.props.threadInfo.id }; } } const ConnectedHistoryEntry: React.ComponentType = React.memo( function ConnectedHistoryEntry(props) { const entryID = props.entryInfo.id; invariant(entryID, 'entryInfo.id (serverID) should be set'); - const threadInfo = useSelector( + const unresolvedThreadInfo = useSelector( state => threadInfoSelector(state)[props.entryInfo.threadID], ); + const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo); const loggedIn = useSelector( state => !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true), ); const restoreLoadingStatus = useSelector( createLoadingStatusSelector( restoreEntryActionTypes, `${restoreEntryActionTypes.started}:${entryID}`, ), ); const calenderQuery = useSelector(nonThreadCalendarQuery); const callRestoreEntry = useServerCall(restoreEntry); const dispatchActionPromise = useDispatchActionPromise(); const { creator } = props.entryInfo; const [creatorWithENSName] = useENSNames([creator]); return ( ); }, ); export default ConnectedHistoryEntry;