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

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 };
 };

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<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

@@ -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 || '',