refactor: repo (#1070)
This commit is contained in:
Mo
@@ -0,0 +1,186 @@
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { FunctionComponent, useCallback, useState, useEffect, SetStateAction, Dispatch } from 'react'
|
||||
import LegacyHistoryList from './LegacyHistoryList'
|
||||
import RemoteHistoryList from './RemoteHistoryList'
|
||||
import SessionHistoryList from './SessionHistoryList'
|
||||
import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
|
||||
|
||||
export enum RevisionListTabType {
|
||||
Session = 'Session',
|
||||
Remote = 'Remote',
|
||||
Legacy = 'Legacy',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
application: WebApplication
|
||||
isFetchingRemoteHistory: boolean
|
||||
note: SNNote
|
||||
remoteHistory: RemoteRevisionListGroup[] | undefined
|
||||
setIsFetchingSelectedRevision: Dispatch<SetStateAction<boolean>>
|
||||
setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
|
||||
setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
|
||||
setShowContentLockedScreen: Dispatch<SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
const HistoryListContainer: FunctionComponent<Props> = ({
|
||||
application,
|
||||
isFetchingRemoteHistory,
|
||||
note,
|
||||
remoteHistory,
|
||||
setIsFetchingSelectedRevision,
|
||||
setSelectedRemoteEntry,
|
||||
setSelectedRevision,
|
||||
setShowContentLockedScreen,
|
||||
}) => {
|
||||
const sessionHistory = sortRevisionListIntoGroups<NoteHistoryEntry>(
|
||||
application.historyManager.sessionHistoryForItem(note) as NoteHistoryEntry[],
|
||||
)
|
||||
const [legacyHistory, setLegacyHistory] = useState<Action[]>()
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(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().catch(console.error)
|
||||
}, [application, note])
|
||||
|
||||
const TabButton: FunctionComponent<{
|
||||
type: RevisionListTabType
|
||||
}> = ({ type }) => {
|
||||
const isSelected = selectedTab === type
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner ${
|
||||
isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedTab(type)
|
||||
setSelectedRemoteEntry(undefined)
|
||||
}}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
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 unknown 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)
|
||||
|
||||
if (application.features.hasMinimumRole(revisionListEntry.required_role)) {
|
||||
setIsFetchingSelectedRevision(true)
|
||||
setSelectedRevision(undefined)
|
||||
setSelectedRemoteEntry(undefined)
|
||||
|
||||
try {
|
||||
const remoteRevision = await application.historyManager.fetchRemoteRevision(note, revisionListEntry)
|
||||
setSelectedRevision(remoteRevision)
|
||||
setSelectedRemoteEntry(revisionListEntry)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsFetchingSelectedRevision(false)
|
||||
}
|
||||
} else {
|
||||
setShowContentLockedScreen(true)
|
||||
setSelectedRevision(undefined)
|
||||
}
|
||||
},
|
||||
[
|
||||
application,
|
||||
note,
|
||||
setIsFetchingSelectedRevision,
|
||||
setSelectedRemoteEntry,
|
||||
setSelectedRevision,
|
||||
setShowContentLockedScreen,
|
||||
],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
|
||||
<div className="flex border-0 border-b-1 border-solid border-main">
|
||||
<TabButton type={RevisionListTabType.Remote} />
|
||||
<TabButton type={RevisionListTabType.Session} />
|
||||
{legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
|
||||
</div>
|
||||
<div className={'min-h-0 overflow-auto py-1.5 h-full'}>
|
||||
{selectedTab === RevisionListTabType.Session && (
|
||||
<SessionHistoryList
|
||||
sessionHistory={sessionHistory}
|
||||
setSelectedRevision={setSelectedRevision}
|
||||
setSelectedRemoteEntry={setSelectedRemoteEntry}
|
||||
/>
|
||||
)}
|
||||
{selectedTab === RevisionListTabType.Remote && (
|
||||
<RemoteHistoryList
|
||||
application={application}
|
||||
remoteHistory={remoteHistory}
|
||||
isFetchingRemoteHistory={isFetchingRemoteHistory}
|
||||
fetchAndSetRemoteRevision={fetchAndSetRemoteRevision}
|
||||
/>
|
||||
)}
|
||||
{selectedTab === RevisionListTabType.Legacy && (
|
||||
<LegacyHistoryList
|
||||
legacyHistory={legacyHistory}
|
||||
setSelectedRevision={setSelectedRevision}
|
||||
setSelectedRemoteEntry={setSelectedRemoteEntry}
|
||||
fetchAndSetLegacyRevision={fetchAndSetLegacyRevision}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(HistoryListContainer)
|
||||
@@ -0,0 +1,23 @@
|
||||
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
|
||||
import { FunctionComponent } from 'react'
|
||||
|
||||
type HistoryListItemProps = {
|
||||
isSelected: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, isSelected, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
|
||||
className={`sn-dropdown-item py-2.5 focus:bg-contrast focus:shadow-none ${isSelected ? 'bg-info-backdrop' : ''}`}
|
||||
onClick={onClick}
|
||||
data-selected={isSelected}
|
||||
>
|
||||
<div className={`pseudo-radio-btn ${isSelected ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default HistoryListItem
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
|
||||
import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
|
||||
import HistoryListItem from './HistoryListItem'
|
||||
import { LegacyHistoryEntry } from './utils'
|
||||
|
||||
type Props = {
|
||||
legacyHistory: Action[] | undefined
|
||||
setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
|
||||
setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
|
||||
fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>
|
||||
}
|
||||
|
||||
const LegacyHistoryList: FunctionComponent<Props> = ({
|
||||
legacyHistory,
|
||||
setSelectedRevision,
|
||||
setSelectedRemoteEntry,
|
||||
fetchAndSetLegacyRevision,
|
||||
}) => {
|
||||
const legacyHistoryListRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useListKeyboardNavigation(legacyHistoryListRef)
|
||||
|
||||
const [selectedItemUrl, setSelectedItemUrl] = useState<string>()
|
||||
|
||||
const firstEntry = useMemo(() => {
|
||||
return legacyHistory?.[0]
|
||||
}, [legacyHistory])
|
||||
|
||||
const selectFirstEntry = useCallback(() => {
|
||||
if (firstEntry) {
|
||||
setSelectedItemUrl(firstEntry.subactions?.[0].url)
|
||||
setSelectedRevision(undefined)
|
||||
fetchAndSetLegacyRevision(firstEntry).catch(console.error)
|
||||
}
|
||||
}, [fetchAndSetLegacyRevision, firstEntry, setSelectedRevision])
|
||||
|
||||
useEffect(() => {
|
||||
if (firstEntry && !selectedItemUrl) {
|
||||
selectFirstEntry()
|
||||
} else if (!firstEntry) {
|
||||
setSelectedRevision(undefined)
|
||||
}
|
||||
}, [firstEntry, selectFirstEntry, selectedItemUrl, setSelectedRevision])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col w-full h-full focus:shadow-none ${
|
||||
!legacyHistory?.length ? 'items-center justify-center' : ''
|
||||
}`}
|
||||
ref={legacyHistoryListRef}
|
||||
>
|
||||
{legacyHistory?.map((entry) => {
|
||||
const url = entry.subactions?.[0].url
|
||||
|
||||
return (
|
||||
<HistoryListItem
|
||||
key={url}
|
||||
isSelected={selectedItemUrl === url}
|
||||
onClick={() => {
|
||||
setSelectedItemUrl(url)
|
||||
setSelectedRemoteEntry(undefined)
|
||||
fetchAndSetLegacyRevision(entry).catch(console.error)
|
||||
}}
|
||||
>
|
||||
{entry.label}
|
||||
</HistoryListItem>
|
||||
)
|
||||
})}
|
||||
{!legacyHistory?.length && <div className="color-passive-0 select-none">No legacy history found</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LegacyHistoryList
|
||||
@@ -0,0 +1,91 @@
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { RevisionListEntry } from '@standardnotes/snjs'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Icon from '@/Components/Icon/Icon'
|
||||
import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
|
||||
import HistoryListItem from './HistoryListItem'
|
||||
import { previewHistoryEntryTitle, RemoteRevisionListGroup } from './utils'
|
||||
|
||||
type RemoteHistoryListProps = {
|
||||
application: WebApplication
|
||||
remoteHistory: RemoteRevisionListGroup[] | undefined
|
||||
isFetchingRemoteHistory: boolean
|
||||
fetchAndSetRemoteRevision: (revisionListEntry: RevisionListEntry) => Promise<void>
|
||||
}
|
||||
|
||||
const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
|
||||
application,
|
||||
remoteHistory,
|
||||
isFetchingRemoteHistory,
|
||||
fetchAndSetRemoteRevision,
|
||||
}) => {
|
||||
const remoteHistoryListRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useListKeyboardNavigation(remoteHistoryListRef)
|
||||
|
||||
const remoteHistoryLength = useMemo(() => remoteHistory?.map((group) => group.entries).flat().length, [remoteHistory])
|
||||
|
||||
const [selectedEntryUuid, setSelectedEntryUuid] = useState('')
|
||||
|
||||
const firstEntry = useMemo(() => {
|
||||
return remoteHistory?.find((group) => group.entries?.length)?.entries?.[0]
|
||||
}, [remoteHistory])
|
||||
|
||||
const selectFirstEntry = useCallback(() => {
|
||||
if (firstEntry) {
|
||||
setSelectedEntryUuid(firstEntry.uuid)
|
||||
fetchAndSetRemoteRevision(firstEntry).catch(console.error)
|
||||
}
|
||||
}, [fetchAndSetRemoteRevision, firstEntry])
|
||||
|
||||
useEffect(() => {
|
||||
if (firstEntry && !selectedEntryUuid.length) {
|
||||
selectFirstEntry()
|
||||
}
|
||||
}, [fetchAndSetRemoteRevision, firstEntry, remoteHistory, selectFirstEntry, selectedEntryUuid.length])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col w-full h-full focus:shadow-none ${
|
||||
isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
|
||||
}`}
|
||||
ref={remoteHistoryListRef}
|
||||
>
|
||||
{isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
|
||||
{remoteHistory?.map((group) => {
|
||||
if (group.entries && group.entries.length) {
|
||||
return (
|
||||
<Fragment key={group.title}>
|
||||
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
|
||||
{group.title}
|
||||
</div>
|
||||
{group.entries.map((entry) => (
|
||||
<HistoryListItem
|
||||
key={entry.uuid}
|
||||
isSelected={selectedEntryUuid === entry.uuid}
|
||||
onClick={() => {
|
||||
setSelectedEntryUuid(entry.uuid)
|
||||
fetchAndSetRemoteRevision(entry).catch(console.error)
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-grow items-center justify-between">
|
||||
<div>{previewHistoryEntryTitle(entry)}</div>
|
||||
{!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
|
||||
</div>
|
||||
</HistoryListItem>
|
||||
))}
|
||||
</Fragment>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
{!remoteHistoryLength && !isFetchingRemoteHistory && (
|
||||
<div className="color-passive-0 select-none">No remote history found</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(RemoteHistoryList)
|
||||
@@ -0,0 +1,57 @@
|
||||
import { ViewControllerManager } from '@/Services/ViewControllerManager'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { FunctionComponent } from 'react'
|
||||
import { HistoryLockedIllustration } from '@standardnotes/icons'
|
||||
import Button from '@/Components/Button/Button'
|
||||
|
||||
const getPlanHistoryDuration = (planName: string | undefined) => {
|
||||
switch (planName) {
|
||||
case 'Core':
|
||||
return '30 days'
|
||||
case 'Plus':
|
||||
return '365 days'
|
||||
default:
|
||||
return "the current session's changes"
|
||||
}
|
||||
}
|
||||
|
||||
const getPremiumContentCopy = (planName: string | undefined) => {
|
||||
return `Version history is limited to ${getPlanHistoryDuration(planName)} in the ${planName} plan`
|
||||
}
|
||||
|
||||
type Props = {
|
||||
viewControllerManager: ViewControllerManager
|
||||
}
|
||||
|
||||
const RevisionContentLocked: FunctionComponent<Props> = ({ viewControllerManager }) => {
|
||||
const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } =
|
||||
viewControllerManager.subscriptionController
|
||||
|
||||
return (
|
||||
<div className="flex w-full h-full items-center justify-center">
|
||||
<div className="flex flex-col items-center text-center max-w-40%">
|
||||
<HistoryLockedIllustration />
|
||||
<div className="text-lg font-bold mt-2 mb-1">Can't access this version</div>
|
||||
<div className="mb-4 color-passive-0 leading-140%">
|
||||
{getPremiumContentCopy(
|
||||
!isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
|
||||
? userSubscriptionName
|
||||
: 'free',
|
||||
)}
|
||||
. Learn more about our other plans to upgrade your history capacity.
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
label="Discover plans"
|
||||
onClick={() => {
|
||||
if (window.plansUrl) {
|
||||
window.location.assign(window.plansUrl)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(RevisionContentLocked)
|
||||
@@ -0,0 +1,315 @@
|
||||
import { confirmDialog } from '@/Services/AlertService'
|
||||
import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/Constants/Strings'
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { ViewControllerManager } from '@/Services/ViewControllerManager'
|
||||
import { getPlatformString } from '@/Utils'
|
||||
import { DialogContent, DialogOverlay } from '@reach/dialog'
|
||||
import {
|
||||
ButtonType,
|
||||
ContentType,
|
||||
HistoryEntry,
|
||||
PayloadEmitSource,
|
||||
RevisionListEntry,
|
||||
SNNote,
|
||||
} from '@standardnotes/snjs'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Button from '@/Components/Button/Button'
|
||||
import HistoryListContainer from './HistoryListContainer'
|
||||
import RevisionContentLocked from './RevisionContentLocked'
|
||||
import SelectedRevisionContent from './SelectedRevisionContent'
|
||||
import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
|
||||
|
||||
type RevisionHistoryModalProps = {
|
||||
application: WebApplication
|
||||
viewControllerManager: ViewControllerManager
|
||||
}
|
||||
|
||||
const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
|
||||
|
||||
type RevisionContentPlaceholderProps = {
|
||||
isFetchingSelectedRevision: boolean
|
||||
selectedRevision: HistoryEntry | LegacyHistoryEntry | undefined
|
||||
showContentLockedScreen: boolean
|
||||
}
|
||||
|
||||
const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderProps> = ({
|
||||
isFetchingSelectedRevision,
|
||||
selectedRevision,
|
||||
showContentLockedScreen,
|
||||
}) => (
|
||||
<div
|
||||
className={`absolute w-full h-full top-0 left-0 ${
|
||||
(isFetchingSelectedRevision || !selectedRevision) && !showContentLockedScreen
|
||||
? 'z-index-1 bg-default'
|
||||
: '-z-index-1'
|
||||
}`}
|
||||
>
|
||||
{isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
|
||||
{!isFetchingSelectedRevision && !selectedRevision ? (
|
||||
<div className={`color-passive-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = observer(
|
||||
({ application, viewControllerManager }) => {
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
const dismissModal = useCallback(() => {
|
||||
viewControllerManager.notesController.setShowRevisionHistoryModal(false)
|
||||
}, [viewControllerManager.notesController])
|
||||
|
||||
const note = viewControllerManager.notesController.firstSelectedNote
|
||||
const editorForCurrentNote = useMemo(() => {
|
||||
if (note) {
|
||||
return application.componentManager.editorForNote(note)
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}, [application, note])
|
||||
|
||||
const [isFetchingSelectedRevision, setIsFetchingSelectedRevision] = useState(false)
|
||||
const [selectedRevision, setSelectedRevision] = useState<HistoryEntry | LegacyHistoryEntry>()
|
||||
const [selectedRemoteEntry, setSelectedRemoteEntry] = useState<RevisionListEntry>()
|
||||
const [isDeletingRevision, setIsDeletingRevision] = useState(false)
|
||||
const [templateNoteForRevision, setTemplateNoteForRevision] = useState<SNNote>()
|
||||
const [showContentLockedScreen, setShowContentLockedScreen] = useState(false)
|
||||
|
||||
const [remoteHistory, setRemoteHistory] = useState<RemoteRevisionListGroup[]>()
|
||||
const [isFetchingRemoteHistory, setIsFetchingRemoteHistory] = useState(false)
|
||||
|
||||
const fetchRemoteHistory = useCallback(async () => {
|
||||
if (note) {
|
||||
setRemoteHistory(undefined)
|
||||
setIsFetchingRemoteHistory(true)
|
||||
try {
|
||||
const initialRemoteHistory = await application.historyManager.remoteHistoryForItem(note)
|
||||
|
||||
const remoteHistoryAsGroups = sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory)
|
||||
|
||||
setRemoteHistory(remoteHistoryAsGroups)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsFetchingRemoteHistory(false)
|
||||
}
|
||||
}
|
||||
}, [application, note])
|
||||
|
||||
useEffect(() => {
|
||||
if (!remoteHistory?.length) {
|
||||
fetchRemoteHistory().catch(console.error)
|
||||
}
|
||||
}, [fetchRemoteHistory, remoteHistory?.length])
|
||||
|
||||
const restore = useCallback(() => {
|
||||
if (selectedRevision) {
|
||||
const originalNote = application.items.findItem(selectedRevision.payload.uuid) as SNNote
|
||||
|
||||
if (originalNote.locked) {
|
||||
application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT).catch(console.error)
|
||||
return
|
||||
}
|
||||
|
||||
confirmDialog({
|
||||
text: "Are you sure you want to replace the current note's contents with what you see in this preview?",
|
||||
confirmButtonStyle: 'danger',
|
||||
})
|
||||
.then((confirmed) => {
|
||||
if (confirmed) {
|
||||
application.mutator
|
||||
.changeAndSaveItem(
|
||||
originalNote,
|
||||
(mutator) => {
|
||||
mutator.setCustomContent(selectedRevision.payload.content)
|
||||
},
|
||||
true,
|
||||
PayloadEmitSource.RemoteRetrieved,
|
||||
)
|
||||
.catch(console.error)
|
||||
dismissModal()
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
}
|
||||
}, [application.alertService, application.items, application.mutator, dismissModal, selectedRevision])
|
||||
|
||||
const restoreAsCopy = useCallback(async () => {
|
||||
if (selectedRevision) {
|
||||
const originalNote = application.items.findSureItem<SNNote>(selectedRevision.payload.uuid)
|
||||
|
||||
const duplicatedItem = await application.mutator.duplicateItem(originalNote, {
|
||||
...selectedRevision.payload.content,
|
||||
title: selectedRevision.payload.content.title
|
||||
? selectedRevision.payload.content.title + ' (copy)'
|
||||
: undefined,
|
||||
})
|
||||
|
||||
viewControllerManager.selectionController.selectItem(duplicatedItem.uuid).catch(console.error)
|
||||
|
||||
dismissModal()
|
||||
}
|
||||
}, [
|
||||
viewControllerManager.selectionController,
|
||||
application.items,
|
||||
application.mutator,
|
||||
dismissModal,
|
||||
selectedRevision,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTemplateNote = async () => {
|
||||
if (selectedRevision) {
|
||||
const newTemplateNote = application.mutator.createTemplateItem(
|
||||
ContentType.Note,
|
||||
selectedRevision.payload.content,
|
||||
) as SNNote
|
||||
|
||||
setTemplateNoteForRevision(newTemplateNote)
|
||||
}
|
||||
}
|
||||
|
||||
fetchTemplateNote().catch(console.error)
|
||||
}, [application, selectedRevision])
|
||||
|
||||
const deleteSelectedRevision = useCallback(() => {
|
||||
if (!selectedRemoteEntry) {
|
||||
return
|
||||
}
|
||||
|
||||
application.alertService
|
||||
.confirm(
|
||||
'Are you sure you want to delete this revision?',
|
||||
'Delete revision?',
|
||||
'Delete revision',
|
||||
ButtonType.Danger,
|
||||
'Cancel',
|
||||
)
|
||||
.then((shouldDelete) => {
|
||||
if (shouldDelete && note) {
|
||||
setIsDeletingRevision(true)
|
||||
|
||||
application.historyManager
|
||||
.deleteRemoteRevision(note, selectedRemoteEntry)
|
||||
.then((res) => {
|
||||
if (res.error?.message) {
|
||||
throw new Error(res.error.message)
|
||||
}
|
||||
|
||||
fetchRemoteHistory().catch(console.error)
|
||||
setIsDeletingRevision(false)
|
||||
})
|
||||
.catch(console.error)
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
}, [application.alertService, application.historyManager, fetchRemoteHistory, note, selectedRemoteEntry])
|
||||
|
||||
return (
|
||||
<DialogOverlay
|
||||
className={`sn-component ${getPlatformString()}`}
|
||||
onDismiss={dismissModal}
|
||||
initialFocusRef={closeButtonRef}
|
||||
aria-label="Note revision history"
|
||||
>
|
||||
<DialogContent
|
||||
aria-label="Note revision history"
|
||||
className="rounded shadow-overlay"
|
||||
style={{
|
||||
width: '90%',
|
||||
maxWidth: '90%',
|
||||
minHeight: '90%',
|
||||
background: 'var(--modal-background-color)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`bg-default flex flex-col h-full overflow-hidden ${
|
||||
isDeletingRevision ? 'pointer-events-none cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-grow min-h-0">
|
||||
{note && (
|
||||
<HistoryListContainer
|
||||
application={application}
|
||||
note={note}
|
||||
remoteHistory={remoteHistory}
|
||||
isFetchingRemoteHistory={isFetchingRemoteHistory}
|
||||
setSelectedRevision={setSelectedRevision}
|
||||
setSelectedRemoteEntry={setSelectedRemoteEntry}
|
||||
setShowContentLockedScreen={setShowContentLockedScreen}
|
||||
setIsFetchingSelectedRevision={setIsFetchingSelectedRevision}
|
||||
/>
|
||||
)}
|
||||
<div className={'flex flex-col flex-grow relative'}>
|
||||
<RevisionContentPlaceholder
|
||||
selectedRevision={selectedRevision}
|
||||
isFetchingSelectedRevision={isFetchingSelectedRevision}
|
||||
showContentLockedScreen={showContentLockedScreen}
|
||||
/>
|
||||
{showContentLockedScreen && !selectedRevision && (
|
||||
<RevisionContentLocked viewControllerManager={viewControllerManager} />
|
||||
)}
|
||||
{selectedRevision && templateNoteForRevision && (
|
||||
<SelectedRevisionContent
|
||||
application={application}
|
||||
viewControllerManager={viewControllerManager}
|
||||
selectedRevision={selectedRevision}
|
||||
editorForCurrentNote={editorForCurrentNote}
|
||||
templateNoteForRevision={templateNoteForRevision}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-0 border-t-1px border-solid border-main">
|
||||
<div>
|
||||
<Button
|
||||
className="py-1.35"
|
||||
label="Close"
|
||||
onClick={dismissModal}
|
||||
ref={closeButtonRef}
|
||||
variant="normal"
|
||||
/>
|
||||
</div>
|
||||
{selectedRevision && (
|
||||
<div className="flex items-center">
|
||||
{selectedRemoteEntry && (
|
||||
<Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
|
||||
{isDeletingRevision ? (
|
||||
<div className="sk-spinner my-1 w-3 h-3 spinner-info" />
|
||||
) : (
|
||||
'Delete this revision'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
className="py-1.35 mr-2.5"
|
||||
label="Restore as a copy"
|
||||
onClick={restoreAsCopy}
|
||||
variant="normal"
|
||||
/>
|
||||
<Button className="py-1.35" label="Restore version" onClick={restore} variant="primary" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
RevisionHistoryModal.displayName = 'RevisionHistoryModal'
|
||||
|
||||
const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> = ({
|
||||
application,
|
||||
viewControllerManager,
|
||||
}) => {
|
||||
if (!viewControllerManager.notesController.showRevisionHistoryModal) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <RevisionHistoryModal application={application} viewControllerManager={viewControllerManager} />
|
||||
}
|
||||
|
||||
export default observer(RevisionHistoryModalWrapper)
|
||||
@@ -0,0 +1,79 @@
|
||||
import { WebApplication } from '@/Application/Application'
|
||||
import { ViewControllerManager } from '@/Services/ViewControllerManager'
|
||||
import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { FunctionComponent, useEffect, useMemo } from 'react'
|
||||
import ComponentView from '@/Components/ComponentView/ComponentView'
|
||||
import { LegacyHistoryEntry } from './utils'
|
||||
|
||||
const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
|
||||
|
||||
type SelectedRevisionContentProps = {
|
||||
application: WebApplication
|
||||
viewControllerManager: ViewControllerManager
|
||||
selectedRevision: HistoryEntry | LegacyHistoryEntry
|
||||
editorForCurrentNote: SNComponent | undefined
|
||||
templateNoteForRevision: SNNote
|
||||
}
|
||||
|
||||
const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = ({
|
||||
application,
|
||||
viewControllerManager,
|
||||
selectedRevision,
|
||||
editorForCurrentNote,
|
||||
templateNoteForRevision,
|
||||
}) => {
|
||||
const componentViewer = useMemo(() => {
|
||||
if (!editorForCurrentNote) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
|
||||
componentViewer.setReadonly(true)
|
||||
componentViewer.lockReadonly = true
|
||||
componentViewer.overrideContextItem = templateNoteForRevision
|
||||
return componentViewer
|
||||
}, [application, editorForCurrentNote, templateNoteForRevision])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (componentViewer) {
|
||||
application.componentManager.destroyComponentViewer(componentViewer)
|
||||
}
|
||||
}
|
||||
}, [application, componentViewer])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="p-4 text-base font-bold w-full">
|
||||
<div className="title">{selectedRevision.payload.content.title}</div>
|
||||
</div>
|
||||
{!componentViewer && (
|
||||
<div className="relative flex-grow min-h-0 overflow-hidden">
|
||||
{selectedRevision.payload.content.text.length ? (
|
||||
<textarea
|
||||
readOnly={true}
|
||||
className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
|
||||
>
|
||||
{selectedRevision.payload.content.text}
|
||||
</textarea>
|
||||
) : (
|
||||
<div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{componentViewer && (
|
||||
<div className="component-view">
|
||||
<ComponentView
|
||||
key={componentViewer.identifier}
|
||||
componentViewer={componentViewer}
|
||||
application={application}
|
||||
viewControllerManager={viewControllerManager}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(SelectedRevisionContent)
|
||||
@@ -0,0 +1,96 @@
|
||||
import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
|
||||
import {
|
||||
Dispatch,
|
||||
Fragment,
|
||||
FunctionComponent,
|
||||
SetStateAction,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
|
||||
import HistoryListItem from './HistoryListItem'
|
||||
import { LegacyHistoryEntry, ListGroup } from './utils'
|
||||
|
||||
type Props = {
|
||||
sessionHistory: ListGroup<NoteHistoryEntry>[]
|
||||
setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
|
||||
setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
|
||||
}
|
||||
|
||||
const SessionHistoryList: FunctionComponent<Props> = ({
|
||||
sessionHistory,
|
||||
setSelectedRevision,
|
||||
setSelectedRemoteEntry,
|
||||
}) => {
|
||||
const sessionHistoryListRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useListKeyboardNavigation(sessionHistoryListRef)
|
||||
|
||||
const sessionHistoryLength = useMemo(
|
||||
() => sessionHistory.map((group) => group.entries).flat().length,
|
||||
[sessionHistory],
|
||||
)
|
||||
|
||||
const [selectedItemCreatedAt, setSelectedItemCreatedAt] = useState<Date>()
|
||||
|
||||
const firstEntry = useMemo(() => {
|
||||
return sessionHistory?.find((group) => group.entries?.length)?.entries?.[0]
|
||||
}, [sessionHistory])
|
||||
|
||||
const selectFirstEntry = useCallback(() => {
|
||||
if (firstEntry) {
|
||||
setSelectedItemCreatedAt(firstEntry.payload.created_at)
|
||||
setSelectedRevision(firstEntry)
|
||||
}
|
||||
}, [firstEntry, setSelectedRevision])
|
||||
|
||||
useEffect(() => {
|
||||
if (firstEntry && !selectedItemCreatedAt) {
|
||||
selectFirstEntry()
|
||||
} else if (!firstEntry) {
|
||||
setSelectedRevision(undefined)
|
||||
}
|
||||
}, [firstEntry, selectFirstEntry, selectedItemCreatedAt, setSelectedRevision])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col w-full h-full focus:shadow-none ${
|
||||
!sessionHistoryLength ? 'items-center justify-center' : ''
|
||||
}`}
|
||||
ref={sessionHistoryListRef}
|
||||
>
|
||||
{sessionHistory?.map((group) => {
|
||||
if (group.entries && group.entries.length) {
|
||||
return (
|
||||
<Fragment key={group.title}>
|
||||
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
|
||||
{group.title}
|
||||
</div>
|
||||
{group.entries.map((entry, index) => (
|
||||
<HistoryListItem
|
||||
key={index}
|
||||
isSelected={selectedItemCreatedAt === entry.payload.created_at}
|
||||
onClick={() => {
|
||||
setSelectedItemCreatedAt(entry.payload.created_at)
|
||||
setSelectedRevision(entry)
|
||||
setSelectedRemoteEntry(undefined)
|
||||
}}
|
||||
>
|
||||
{entry.previewTitle()}
|
||||
</HistoryListItem>
|
||||
))}
|
||||
</Fragment>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
{!sessionHistoryLength && <div className="color-passive-0 select-none">No session history found</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SessionHistoryList
|
||||
@@ -0,0 +1,93 @@
|
||||
import { DAYS_IN_A_WEEK, DAYS_IN_A_YEAR } from '@/Constants/Constants'
|
||||
import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
|
||||
import { calculateDifferenceBetweenDatesInDays } from '../../Utils/CalculateDifferenceBetweenDatesInDays'
|
||||
|
||||
export type LegacyHistoryEntry = {
|
||||
payload: HistoryEntry['payload']
|
||||
created_at: string
|
||||
}
|
||||
|
||||
type RevisionEntry = RevisionListEntry | NoteHistoryEntry | LegacyHistoryEntry
|
||||
|
||||
export type ListGroup<EntryType extends RevisionEntry> = {
|
||||
title: string
|
||||
entries: EntryType[] | undefined
|
||||
}
|
||||
|
||||
export type RemoteRevisionListGroup = ListGroup<RevisionListEntry>
|
||||
export type SessionRevisionListGroup = ListGroup<NoteHistoryEntry>
|
||||
|
||||
export const formatDateAsMonthYearString = (date: Date) =>
|
||||
date.toLocaleDateString(undefined, {
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
export const getGroupIndexForEntry = (entry: RevisionEntry, groups: ListGroup<RevisionEntry>[]) => {
|
||||
const todayAsDate = new Date()
|
||||
const entryDate = new Date((entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at)
|
||||
|
||||
const differenceBetweenDatesInDays = calculateDifferenceBetweenDatesInDays(todayAsDate, entryDate)
|
||||
|
||||
if (differenceBetweenDatesInDays === 0) {
|
||||
return groups.findIndex((group) => group.title === GROUP_TITLE_TODAY)
|
||||
}
|
||||
|
||||
if (differenceBetweenDatesInDays > 0 && differenceBetweenDatesInDays < DAYS_IN_A_WEEK) {
|
||||
return groups.findIndex((group) => group.title === GROUP_TITLE_WEEK)
|
||||
}
|
||||
|
||||
if (differenceBetweenDatesInDays > DAYS_IN_A_YEAR) {
|
||||
return groups.findIndex((group) => group.title === GROUP_TITLE_YEAR)
|
||||
}
|
||||
|
||||
const formattedEntryMonthYear = formatDateAsMonthYearString(entryDate)
|
||||
|
||||
return groups.findIndex((group) => group.title === formattedEntryMonthYear)
|
||||
}
|
||||
|
||||
const GROUP_TITLE_TODAY = 'Today'
|
||||
const GROUP_TITLE_WEEK = 'This Week'
|
||||
const GROUP_TITLE_YEAR = 'More Than A Year Ago'
|
||||
|
||||
export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(revisionList: EntryType[] | undefined) => {
|
||||
const sortedGroups: ListGroup<EntryType>[] = [
|
||||
{
|
||||
title: GROUP_TITLE_TODAY,
|
||||
entries: [],
|
||||
},
|
||||
{
|
||||
title: GROUP_TITLE_WEEK,
|
||||
entries: [],
|
||||
},
|
||||
{
|
||||
title: GROUP_TITLE_YEAR,
|
||||
entries: [],
|
||||
},
|
||||
]
|
||||
|
||||
const addBeforeLastGroup = (group: ListGroup<EntryType>) => {
|
||||
sortedGroups.splice(sortedGroups.length - 1, 0, group)
|
||||
}
|
||||
|
||||
revisionList?.forEach((entry) => {
|
||||
const groupIndex = getGroupIndexForEntry(entry, sortedGroups)
|
||||
|
||||
if (groupIndex > -1) {
|
||||
sortedGroups[groupIndex]?.entries?.push(entry)
|
||||
} else {
|
||||
addBeforeLastGroup({
|
||||
title: formatDateAsMonthYearString(
|
||||
new Date((entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at),
|
||||
),
|
||||
entries: [entry],
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return sortedGroups
|
||||
}
|
||||
|
||||
export const previewHistoryEntryTitle = (revision: RevisionListEntry | LegacyHistoryEntry) => {
|
||||
return new Date(revision.created_at).toLocaleString()
|
||||
}
|
||||
Reference in New Issue
Block a user