From 75383227203d47345bf2c99d222ec70723dc22f5 Mon Sep 17 00:00:00 2001 From: Montassar Ghanmy Date: Wed, 12 Jul 2023 09:45:25 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Persist=20the=20current=20view=20on?= =?UTF-8?q?=20page=20refresh=20(#151)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search-popup/parts/drive-item-result.tsx | 7 ++++++- .../features/drive/hooks/use-drive-preview.ts | 10 +++++++++- .../features/router/services/router-service.ts | 5 +++++ .../router/state/selectors/router-selector.ts | 5 +++++ .../client/body/drive/documents/document-row.tsx | 16 +++++++++++++++- .../src/app/views/client/side-bar/index.tsx | 15 +++++++++------ 6 files changed, 49 insertions(+), 9 deletions(-) diff --git a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx index 8e0b3ad4..f85f2f66 100644 --- a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx +++ b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx @@ -15,6 +15,7 @@ import { } from '@atoms/icons-colored'; import * as Text from '@atoms/text'; import { useCompanyApplications } from '@features/applications/hooks/use-company-applications'; +import useRouterCompany from '@features/router/hooks/use-router-company'; import { DriveItem } from '@features/drive/types'; import FileUploadAPIClient from '@features/files/api/file-upload-api-client'; import { formatDate } from '@features/global/utils/format-date'; @@ -27,8 +28,11 @@ import { useFileViewerModal } from '@features/viewer/hooks/use-viewer'; import { useDrivePreview } from '@features/drive/hooks/use-drive-preview'; import Media from '@molecules/media'; import { DriveCurrentFolderAtom } from '@views/client/body/drive/browser'; +import { useHistory } from 'react-router-dom'; +import RouterServices from '@features/router/services/router-service'; export default (props: { driveItem: DriveItem & { user?: UserType } }) => { + const history = useHistory(); const input = useRecoilValue(SearchInputState); const currentWorkspaceId = useRouterWorkspace(); const companyApplications = useCompanyApplications(); @@ -44,11 +48,12 @@ export default (props: { driveItem: DriveItem & { user?: UserType } }) => { const { setOpen } = useSearchModal(); const { open: openViewer } = useFileViewerModal(); const { open } = useDrivePreview(); + const company = useRouterCompany(); return (
open(file)} + onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); open(file)}} >
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts index 8238182c..dd4d751d 100644 --- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts +++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts @@ -6,8 +6,13 @@ import { useRecoilState } from 'recoil'; import { DriveApiClient } from '../api-client/api-client'; import { DriveViewerState } from '../state/viewer'; import { DriveItem } from '../types'; +import { useHistory } from 'react-router-dom'; +import RouterServices from '@features/router/services/router-service'; +import useRouterCompany from '@features/router/hooks/use-router-company'; export const useDrivePreviewModal = () => { + const history = useHistory(); + const company = useRouterCompany(); const [status, setStatus] = useRecoilState(DriveViewerState); const open: (item: DriveItem) => void = (item: DriveItem) => { @@ -16,7 +21,10 @@ export const useDrivePreviewModal = () => { } }; - const close = () => setStatus({ item: null, loading: true }); + const close = () => { + setStatus({ item: null, loading: true }); + history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "", itemId: ""})); + } return { open, close, isOpen: !!status.item }; }; diff --git a/tdrive/frontend/src/app/features/router/services/router-service.ts b/tdrive/frontend/src/app/features/router/services/router-service.ts index 2e70c678..06235326 100644 --- a/tdrive/frontend/src/app/features/router/services/router-service.ts +++ b/tdrive/frontend/src/app/features/router/services/router-service.ts @@ -26,6 +26,7 @@ export type RouteType = { export type ClientStateType = { companyId?: string; viewId?: string; + itemId?: string; workspaceId?: string; channelId?: string; messageId?: string; @@ -49,6 +50,7 @@ class RouterServices extends Observable { clientSubPathnames: Readonly = [ '/client/:companyId', '/client/:companyId/v/:viewId', + '/client/:companyId/preview/:itemId', '/client/:companyId/w/:workspaceId', '/client/:companyId/w/:workspaceId/c/:channelId', '/client/:companyId/w/:workspaceId/c/:channelId/t/:threadId', @@ -73,6 +75,7 @@ class RouterServices extends Observable { UUIDsToTranslate: Readonly = [ 'companyId', + 'itemId', 'workspaceId', 'channelId', 'messageId', @@ -180,6 +183,7 @@ class RouterServices extends Observable { const reducedState: any = { companyId: match?.params?.companyId || '', viewId: match?.params?.viewId || '', + itemId: match?.params?.itemId || '', workspaceId: match?.params?.workspaceId || '', channelId: match?.params?.channelId || '', messageId: match?.params?.messageId || '', @@ -285,6 +289,7 @@ class RouterServices extends Observable { `${this.pathnames.CLIENT}` + (state.companyId ? `/${state.companyId}` : '') + (state.viewId ? `/v/${state.viewId}` : '') + + (state.itemId ? `/preview/${state.itemId}` : '') + (state.sharedWithMe ? `/shared-with-me` : '') + (state.workspaceId ? `/w/${state.workspaceId}` : '') + (state.channelId ? `/c/${state.channelId}` : '') + diff --git a/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts b/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts index 940b7eca..0464fcef 100644 --- a/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts +++ b/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts @@ -11,6 +11,11 @@ export const RouteViewSelector = selector({ get: ({ get }) => get(RouterState)?.viewId || '', }); +export const RoutePreviewSelector = selector({ + key: 'RouterPreviewSelector', + get: ({ get }) => get(RouterState)?.itemId || '', +}); + export const RouterWorkspaceSelector = selector({ key: 'RouterWorkspaceSelector', get: ({ get }) => get(RouterState)?.workspaceId || '', diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx index 3bda2df3..2bc65396 100644 --- a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx +++ b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx @@ -12,14 +12,18 @@ import { } from '@atoms/icons-colored'; import { Base, BaseSmall } from '@atoms/text'; import Menu from '@components/menus/menu'; +import useRouterCompany from '@features/router/hooks/use-router-company'; import { useDrivePreview } from '@features/drive/hooks/use-drive-preview'; import { formatBytes } from '@features/drive/utils'; import fileUploadApiClient from '@features/files/api/file-upload-api-client'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Avatar from '../../../../../atoms/avatar'; import { PublicIcon } from '../components/public-icon'; import { CheckableIcon, DriveItemProps } from './common'; import { getDevice } from '../../../../../features/global/utils/device'; +import { useHistory } from 'react-router-dom'; +import RouterServices from '@features/router/services/router-service'; +import useRouteState from 'app/features/router/hooks/use-route-state'; export const DocumentRow = ({ item, @@ -29,8 +33,11 @@ export const DocumentRow = ({ onClick, onBuildContextMenu, }: DriveItemProps) => { + const history = useHistory(); const [hover, setHover] = useState(false); const { open } = useDrivePreview(); + const company = useRouterCompany(); + const { itemId } = useRouteState(); const fileType = fileUploadApiClient.mimeToType( item?.last_version_cache?.file_metadata?.mime || '', @@ -39,10 +46,17 @@ export const DocumentRow = ({ const metadata = item.last_version_cache?.file_metadata || {}; const hasThumbnails = !!metadata.thumbnails?.length || false; + useEffect(() => { + if(itemId == item.id) { + open(item); + } + }, [itemId]); + const preview = () => { const device = getDevice(); console.log("DEVICE:: " + device); if (device != "ios" && device != "android") { + history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "", itemId: item.id})); open(item); } }; diff --git a/tdrive/frontend/src/app/views/client/side-bar/index.tsx b/tdrive/frontend/src/app/views/client/side-bar/index.tsx index b337dc38..9c6a6105 100644 --- a/tdrive/frontend/src/app/views/client/side-bar/index.tsx +++ b/tdrive/frontend/src/app/views/client/side-bar/index.tsx @@ -9,6 +9,7 @@ import { UserIcon, UserGroupIcon, } from '@heroicons/react/outline'; +import { useEffect } from 'react'; import useRouterCompany from '@features/router/hooks/use-router-company'; import useRouterWorkspace from '@features/router/hooks/use-router-workspace'; import { useCurrentUser } from 'app/features/users/hooks/use-current-user'; @@ -23,7 +24,6 @@ import Actions from './actions'; import { useHistory, useLocation } from 'react-router-dom'; import RouterServices from '@features/router/services/router-service'; import Languages from "features/global/services/languages-service"; -import shared from '../body/drive/shared'; export default () => { const history = useHistory(); @@ -42,7 +42,10 @@ export default () => { if ((path || [])[0]?.id === 'user_' + user?.id) folderType = 'personal'; if (inTrash) folderType = 'trash'; if (sharedWithMe) folderType = 'shared'; - const { viewId } = RouterServices.getStateFromRoute(); + const { viewId, itemId } = RouterServices.getStateFromRoute(); + useEffect(() => { + !itemId && viewId && setParentId(viewId); + }, [viewId, itemId]); return (
@@ -63,7 +66,7 @@ export default () => {
Drive