diff --git a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx b/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx index 1dd5e40b9..8aafed274 100644 --- a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx +++ b/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx @@ -1,5 +1,6 @@ import { WebApplication } from '@/ui_models/application'; import { + Action, ActionVerb, HistoryEntry, NoteHistoryEntry, @@ -8,14 +9,13 @@ import { } from '@standardnotes/snjs'; import { observer } from 'mobx-react-lite'; import { FunctionComponent } from 'preact'; -import { StateUpdater, useCallback, useMemo, useState } from 'preact/hooks'; +import { StateUpdater, useCallback, useState } from 'preact/hooks'; import { useEffect } from 'react'; import { LegacyHistoryList } from './LegacyHistoryList'; import { RemoteHistoryList } from './RemoteHistoryList'; import { SessionHistoryList } from './SessionHistoryList'; import { LegacyHistoryEntry, - ListGroup, RemoteRevisionListGroup, sortRevisionListIntoGroups, } from './utils'; @@ -55,19 +55,45 @@ export const HistoryListContainer: FunctionComponent = observer( note ) as NoteHistoryEntry[] ); - const [isFetchingLegacyHistory, setIsFetchingLegacyHistory] = - useState(false); - const [legacyHistory, setLegacyHistory] = - useState[]>(); - const legacyHistoryLength = useMemo( - () => legacyHistory?.map((group) => group.entries).flat().length ?? 0, - [legacyHistory] - ); + const [legacyHistory, setLegacyHistory] = useState(); const [selectedTab, setSelectedTab] = useState( RevisionListTabType.Remote ); + useEffect(() => { + const fetchLegacyHistory = async () => { + const actionExtensions = application.actionsManager.getExtensions(); + actionExtensions.forEach(async (ext) => { + const actionExtension = + await application.actionsManager.loadExtensionInContextOfItem( + ext, + note + ); + + if (!actionExtension) { + return; + } + + const isLegacyNoteHistoryExt = actionExtension?.actions.some( + (action) => action.verb === ActionVerb.Nested + ); + + if (!isLegacyNoteHistoryExt) { + return; + } + + const legacyHistoryEntries = actionExtension.actions.filter( + (action) => action.subactions?.[0] + ); + + setLegacyHistory(legacyHistoryEntries); + }); + }; + + fetchLegacyHistory(); + }, [application.actionsManager, note]); + const TabButton: FunctionComponent<{ type: RevisionListTabType; }> = ({ type }) => { @@ -88,6 +114,43 @@ export const HistoryListContainer: FunctionComponent = observer( ); }; + const fetchAndSetLegacyRevision = useCallback( + async (revisionListEntry: Action) => { + setSelectedRemoteEntry(undefined); + setSelectedRevision(undefined); + setIsFetchingSelectedRevision(true); + + try { + if (!revisionListEntry.subactions?.[0]) { + throw new Error('Could not find revision action url'); + } + + const response = await application.actionsManager.runAction( + revisionListEntry.subactions[0], + note + ); + + if (!response) { + throw new Error('Could not fetch revision'); + } + + setSelectedRevision(response.item as HistoryEntry); + } catch (error) { + console.error(error); + setSelectedRevision(undefined); + } finally { + setIsFetchingSelectedRevision(false); + } + }, + [ + application.actionsManager, + note, + setIsFetchingSelectedRevision, + setSelectedRemoteEntry, + setSelectedRevision, + ] + ); + const fetchAndSetRemoteRevision = useCallback( async (revisionListEntry: RevisionListEntry) => { setShowContentLockedScreen(false); @@ -132,12 +195,7 @@ export const HistoryListContainer: FunctionComponent = observer(
- {isFetchingLegacyHistory && ( -
-
-
- )} - {legacyHistory && legacyHistoryLength > 0 && ( + {legacyHistory && legacyHistory.length > 0 && ( )}
@@ -165,6 +223,7 @@ export const HistoryListContainer: FunctionComponent = observer( legacyHistory={legacyHistory} setSelectedRevision={setSelectedRevision} setSelectedRemoteEntry={setSelectedRemoteEntry} + fetchAndSetLegacyRevision={fetchAndSetLegacyRevision} /> )}
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx b/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx index 3cc6ca2d9..30ddc96ce 100644 --- a/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx +++ b/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx @@ -1,5 +1,5 @@ -import { HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'; -import { Fragment, FunctionComponent } from 'preact'; +import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'; +import { FunctionComponent } from 'preact'; import { StateUpdater, useCallback, @@ -11,19 +11,16 @@ import { import { useListKeyboardNavigation } from '../utils'; import { RevisionListTabType } from './HistoryListContainer'; import { HistoryListItem } from './HistoryListItem'; -import { - LegacyHistoryEntry, - ListGroup, - previewHistoryEntryTitle, -} from './utils'; +import { LegacyHistoryEntry } from './utils'; type Props = { selectedTab: RevisionListTabType; - legacyHistory: ListGroup[] | undefined; + legacyHistory: Action[] | undefined; setSelectedRevision: StateUpdater< HistoryEntry | LegacyHistoryEntry | undefined >; setSelectedRemoteEntry: StateUpdater; + fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise; }; export const LegacyHistoryList: FunctionComponent = ({ @@ -31,44 +28,36 @@ export const LegacyHistoryList: FunctionComponent = ({ selectedTab, setSelectedRevision, setSelectedRemoteEntry, + fetchAndSetLegacyRevision, }) => { const legacyHistoryListRef = useRef(null); useListKeyboardNavigation(legacyHistoryListRef); - const legacyHistoryLength = useMemo( - () => legacyHistory?.map((group) => group.entries).flat().length, - [legacyHistory] - ); - - const [selectedItemCreatedAt, setSelectedItemCreatedAt] = useState(); + const [selectedItemUrl, setSelectedItemUrl] = useState(); const firstEntry = useMemo(() => { - return legacyHistory?.find((group) => group.entries?.length)?.entries?.[0]; + return legacyHistory?.[0]; }, [legacyHistory]); const selectFirstEntry = useCallback(() => { if (firstEntry) { - setSelectedItemCreatedAt(firstEntry.payload?.created_at); - setSelectedRevision(firstEntry); + setSelectedItemUrl(firstEntry.subactions?.[0].url); + setSelectedRevision(undefined); + fetchAndSetLegacyRevision(firstEntry); } - }, [firstEntry, setSelectedRevision]); + }, [fetchAndSetLegacyRevision, firstEntry, setSelectedRevision]); useEffect(() => { - if (firstEntry && !selectedItemCreatedAt) { + if (firstEntry && !selectedItemUrl) { selectFirstEntry(); } else if (!firstEntry) { setSelectedRevision(undefined); } - }, [ - firstEntry, - selectFirstEntry, - selectedItemCreatedAt, - setSelectedRevision, - ]); + }, [firstEntry, selectFirstEntry, selectedItemUrl, setSelectedRevision]); useEffect(() => { - if (selectedTab === RevisionListTabType.Session) { + if (selectedTab === RevisionListTabType.Legacy) { selectFirstEntry(); legacyHistoryListRef.current?.focus(); } @@ -77,33 +66,28 @@ export const LegacyHistoryList: FunctionComponent = ({ return (
- {legacyHistory?.map((group) => - group.entries && group.entries.length ? ( - -
- {group.title} -
- {group.entries.map((entry, index) => ( - { - setSelectedItemCreatedAt(entry.payload.created_at); - setSelectedRevision(entry); - setSelectedRemoteEntry(undefined); - }} - > - {previewHistoryEntryTitle(entry)} - - ))} -
- ) : null - )} - {!legacyHistoryLength && ( + {legacyHistory?.map((entry) => { + const url = entry.subactions?.[0].url; + + return ( + { + setSelectedItemUrl(url); + setSelectedRemoteEntry(undefined); + fetchAndSetLegacyRevision(entry); + }} + > + {entry.label} + + ); + })} + {!legacyHistory?.length && (
No legacy history found
)}