From f2810412217afdaa05d5012db37276c843d360b4 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 22 Sep 2022 08:15:08 +0530 Subject: [PATCH] feat: on mobile goto content tab after selecting revision (#1611) --- .../HistoryListContainer.tsx | 28 +++++++++++++++---- .../HistoryModalDialogContent.tsx | 9 ++++-- .../LegacyHistoryList.tsx | 4 ++- .../RemoteHistoryList.tsx | 8 +++++- .../SessionHistoryList.tsx | 4 ++- .../Components/RevisionHistoryModal/utils.ts | 2 ++ 6 files changed, 45 insertions(+), 10 deletions(-) diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx index 0fbb28cc5..9d49739ed 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx @@ -1,18 +1,20 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController' import { FeaturesClientInterface } from '@standardnotes/snjs' import { observer } from 'mobx-react-lite' -import { FunctionComponent } from 'react' +import { FunctionComponent, useCallback } from 'react' import LegacyHistoryList from './LegacyHistoryList' import RemoteHistoryList from './RemoteHistoryList' import { RevisionType } from './RevisionType' import SessionHistoryList from './SessionHistoryList' +import { HistoryModalMobileTab } from './utils' type Props = { features: FeaturesClientInterface noteHistoryController: NoteHistoryController + selectMobileModalTab: (tab: HistoryModalMobileTab) => void } -const HistoryListContainer: FunctionComponent = ({ features, noteHistoryController }) => { +const HistoryListContainer: FunctionComponent = ({ features, noteHistoryController, selectMobileModalTab }) => { const { legacyHistory, currentTab, selectTab } = noteHistoryController const TabButton: FunctionComponent<{ @@ -34,14 +36,30 @@ const HistoryListContainer: FunctionComponent = ({ features, noteHistoryC ) } + const onSelectRevision = useCallback(() => { + selectMobileModalTab('Content') + }, [selectMobileModalTab]) + const CurrentTabList = () => { switch (currentTab) { case RevisionType.Remote: - return + return ( + + ) case RevisionType.Session: - return + return case RevisionType.Legacy: - return + return ( + + ) } } diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx index e096d5786..25352934b 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx @@ -7,6 +7,7 @@ import HistoryModalContentPane from './HistoryModalContentPane' import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController' import Icon from '../Icon/Icon' import { classNames } from '@/Utils/ConcatenateClassNames' +import { HistoryModalMobileTab } from './utils' const HistoryModalDialogContent = ({ application, @@ -18,7 +19,7 @@ const HistoryModalDialogContent = ({ }: RevisionHistoryModalContentProps) => { const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController)) - const [selectedMobileTab, setSelectedMobileTab] = useState<'List' | 'Content'>('Content') + const [selectedMobileTab, setSelectedMobileTab] = useState('Content') return ( <> @@ -56,7 +57,11 @@ const HistoryModalDialogContent = ({ selectedMobileTab === 'List' ? 'flex' : 'hidden', )} > - +
void } -const LegacyHistoryList: FunctionComponent = ({ legacyHistory, noteHistoryController }) => { +const LegacyHistoryList: FunctionComponent = ({ legacyHistory, noteHistoryController, onSelectRevision }) => { const { selectLegacyRevision, selectedEntry } = noteHistoryController const legacyHistoryListRef = useRef(null) @@ -33,6 +34,7 @@ const LegacyHistoryList: FunctionComponent = ({ legacyHistory, noteHistor isSelected={selectedEntryUrl === url} onClick={() => { selectLegacyRevision(entry) + onSelectRevision() }} > {entry.label} diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx index 0d84e84db..7452865bb 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx @@ -12,9 +12,14 @@ import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/Premium type RemoteHistoryListProps = { features: FeaturesClientInterface noteHistoryController: NoteHistoryController + onSelectRevision: () => void } -const RemoteHistoryList: FunctionComponent = ({ features, noteHistoryController }) => { +const RemoteHistoryList: FunctionComponent = ({ + features, + noteHistoryController, + onSelectRevision, +}) => { const { remoteHistory, isFetchingRemoteHistory, selectRemoteRevision, selectedEntry } = noteHistoryController const remoteHistoryListRef = useRef(null) @@ -44,6 +49,7 @@ const RemoteHistoryList: FunctionComponent = ({ features isSelected={(selectedEntry as RevisionListEntry)?.uuid === entry.uuid} onClick={() => { selectRemoteRevision(entry) + onSelectRevision() }} >
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx index ceb0d8a4f..144cde6b0 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx @@ -6,9 +6,10 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont type Props = { noteHistoryController: NoteHistoryController + onSelectRevision: () => void } -const SessionHistoryList: FunctionComponent = ({ noteHistoryController }) => { +const SessionHistoryList: FunctionComponent = ({ noteHistoryController, onSelectRevision }) => { const { sessionHistory, selectedRevision, selectSessionRevision } = noteHistoryController const sessionHistoryListRef = useRef(null) @@ -40,6 +41,7 @@ const SessionHistoryList: FunctionComponent = ({ noteHistoryController }) isSelected={selectedRevision?.payload.updated_at === entry.payload.updated_at} onClick={() => { selectSessionRevision(entry) + onSelectRevision() }} > {entry.previewTitle()} diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/utils.ts b/packages/web/src/javascripts/Components/RevisionHistoryModal/utils.ts index 4b329da67..af67581b7 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/utils.ts +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/utils.ts @@ -2,6 +2,8 @@ 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 HistoryModalMobileTab = 'Content' | 'List' + export type LegacyHistoryEntry = { payload: HistoryEntry['payload'] created_at: string