eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Persist the current view on page refresh (#151)

Browse Source
This commit is contained in:
Montassar Ghanmy
2023-07-12 09:45:25 +01:00
committed by GitHub
parent e0c74d59bd
commit 7538322720
6 changed files with 49 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
+6 -1
View File
@@ -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 (
<div
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer"
onClick={() => open(file)}
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); open(file)}}
>
<FileResultMedia file={file} className="w-16 h-16 mr-3" />
<div className="grow mr-3 overflow-hidden">
tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
+9 -1
View File
@@ -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 };
};
tdrive/frontend/src/app/features/router/services/router-service.ts
+5
View File
@@ -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<string[]> = [
'/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<string[]> = [
'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}` : '') +
tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts
+5
View File
@@ -11,6 +11,11 @@ export const RouteViewSelector = selector<string>({
get: ({ get }) => get(RouterState)?.viewId || '',
});
export const RoutePreviewSelector = selector<string>({
key: 'RouterPreviewSelector',
get: ({ get }) => get(RouterState)?.itemId || '',
});
export const RouterWorkspaceSelector = selector<string>({
key: 'RouterWorkspaceSelector',
get: ({ get }) => get(RouterState)?.workspaceId || '',
tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
+15 -1
View File
@@ -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);
}
};
tdrive/frontend/src/app/views/client/side-bar/index.tsx
+9 -6
View File
@@ -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 (
<div className="grow flex flex-col overflow-auto -m-4 p-4 relative">
<div className="grow">
@@ -63,7 +66,7 @@ export default () => {
<div className="mt-4" />
<Title>Drive</Title>
<Button
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('user_' + user?.id)}}
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: 'user_' + user?.id})); setParentId('user_' + user?.id)}}
size="lg"
theme="white"
className={'w-full mb-1 ' + (folderType === 'personal' && viewId == '' ? activeClass : '')}
@@ -71,15 +74,15 @@ export default () => {
<UserIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.my_drive')}
</Button>
<Button
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('root')}}
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "root"})); setParentId('root')}}
size="lg"
theme="white"
className={'w-full mt-2 mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
className={'w-full mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
>
<CloudIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.home')}
</Button>
<Button
onClick={() => {setParentId('shared_with_me')}}
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "shared_with_me"})); setParentId('shared_with_me')}}
size="lg"
theme="white"
className={'w-full mb-1 ' + (folderType === 'shared' && viewId == ''? activeClass : '')}