✨(frontend) can restore from trashbin list actions

We can now restore a doc from the trashbin list actions.

Author: AntoLC

src/frontend/apps/impress/src/components/TextErrors.tsx

@@ -25,40 +25,54 @@ export const TextErrors = ({
   canClose = false,
   ...textProps
 }: TextErrorsProps) => {
-  const { t } = useTranslation();
-
   return (
     <AlertStyled
       canClose={canClose}
       type={VariantType.ERROR}
       icon={icon}
       className="--docs--text-errors"
     >
-      <Box $direction="column" $gap="0.2rem">
-        {causes &&
-          causes.map((cause, i) => (
-            <Text
-              key={`causes-${i}`}
-              $theme="danger"
-              $variation="600"
-              $textAlign="center"
-              {...textProps}
-            >
-              {cause}
-            </Text>
-          ))}
+      <TextOnlyErrors
+        causes={causes}
+        defaultMessage={defaultMessage}
+        {...textProps}
+      />
+    </AlertStyled>
+  );
+};
+
+export const TextOnlyErrors = ({
+  causes,
+  defaultMessage,
+  ...textProps
+}: TextErrorsProps) => {
+  const { t } = useTranslation();
 
-        {!causes && (
+  return (
+    <Box $direction="column" $gap="0.2rem">
+      {causes &&
+        causes.map((cause, i) => (
           <Text
+            key={`causes-${i}`}
             $theme="danger"
             $variation="600"
             $textAlign="center"
             {...textProps}
           >
-            {defaultMessage || t('Something bad happens, please retry.')}
+            {cause}
           </Text>
-        )}
-      </Box>
-    </AlertStyled>
+        ))}
+
+      {!causes && (
+        <Text
+          $theme="danger"
+          $variation="600"
+          $textAlign="center"
+          {...textProps}
+        >
+          {defaultMessage || t('Something bad happens, please retry.')}
+        </Text>
+      )}
+    </Box>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts

@@ -5,7 +5,8 @@ export * from './useDeleteFavoriteDoc';
 export * from './useDoc';
 export * from './useDocOptions';
 export * from './useDocs';
-export * from './useSubDocs';
 export * from './useDuplicateDoc';
+export * from './useRestoreDoc';
+export * from './useSubDocs';
 export * from './useUpdateDoc';
 export * from './useUpdateDocLink';

src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx

@@ -3,6 +3,7 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 import {
   APIError,
   APIList,
+  InfiniteQueryConfig,
   errorCauses,
   fetchAPI,
   useAPIInfiniteQuery,
@@ -54,17 +55,20 @@ export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
 
 export const KEY_LIST_DOC = 'docs';
 
-export function useDocs(
-  params: DocsParams,
-  queryConfig?: UseQueryOptions<DocsResponse, APIError, DocsResponse>,
-) {
+type UseDocsOptions = UseQueryOptions<DocsResponse, APIError, DocsResponse>;
+type UseInfiniteDocsOptions = InfiniteQueryConfig<DocsResponse>;
+
+export function useDocs(params: DocsParams, queryConfig?: UseDocsOptions) {
   return useQuery<DocsResponse, APIError, DocsResponse>({
     queryKey: [KEY_LIST_DOC, params],
     queryFn: () => getDocs(params),
     ...queryConfig,
   });
 }
 
-export const useInfiniteDocs = (params: DocsParams) => {
-  return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
+export const useInfiniteDocs = (
+  params: DocsParams,
+  queryConfig?: UseInfiniteDocsOptions,
+) => {
+  return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params, queryConfig);
 };

src/frontend/apps/impress/src/features/docs/doc-management/api/useRemoveDoc.tsx

@@ -5,6 +5,7 @@ import {
 } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_DOC_TRASHBIN } from '@/docs/docs-grid';
 
 import { KEY_LIST_DOC } from './useDocs';
 
@@ -33,6 +34,9 @@ export const useRemoveDoc = (options?: UseRemoveDocOptions) => {
       void queryClient.invalidateQueries({
         queryKey: [KEY_LIST_DOC],
       });
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_DOC_TRASHBIN],
+      });
       if (options?.onSuccess) {
         void options.onSuccess(data, variables, context);
       }

src/frontend/apps/impress/src/features/docs/doc-management/api/useRestoreDoc.tsx

@@ -0,0 +1,55 @@
+import {
+  UseMutationOptions,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+interface RestoreDocProps {
+  docId: string;
+}
+
+export const restoreDoc = async ({ docId }: RestoreDocProps): Promise<void> => {
+  const response = await fetchAPI(`documents/${docId}/restore/`, {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to restore the doc',
+      await errorCauses(response),
+    );
+  }
+};
+
+type UseRestoreDocOptions = UseMutationOptions<void, APIError, RestoreDocProps>;
+
+export const useRestoreDoc = ({
+  listInvalideQueries,
+  options,
+}: {
+  listInvalideQueries?: string[];
+  options?: UseRestoreDocOptions;
+}) => {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, RestoreDocProps>({
+    mutationFn: restoreDoc,
+    ...options,
+    onSuccess: (data, variables, context) => {
+      listInvalideQueries?.forEach((queryKey) => {
+        void queryClient.invalidateQueries({
+          queryKey: [queryKey],
+        });
+      });
+      if (options?.onSuccess) {
+        void options.onSuccess(data, variables, context);
+      }
+    },
+    onError: (error, variables, context) => {
+      if (options?.onError) {
+        void options.onError(error, variables, context);
+      }
+    },
+  });
+};

src/frontend/apps/impress/src/features/docs/docs-grid/api/index.ts

@@ -0,0 +1 @@
+export * from './useDocsTrashbin';

src/frontend/apps/impress/src/features/docs/docs-grid/api/useDocsTrashbin.tsx

@@ -0,0 +1,60 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+
+import {
+  APIError,
+  APIList,
+  InfiniteQueryConfig,
+  errorCauses,
+  fetchAPI,
+  useAPIInfiniteQuery,
+} from '@/api';
+import { Doc, DocsResponse } from '@/docs/doc-management';
+
+export type DocsTrashbinParams = {
+  page: number;
+};
+
+export type DocsTrashbinResponse = APIList<Doc>;
+export const getDocsTrashbin = async (
+  params: DocsTrashbinParams,
+): Promise<DocsTrashbinResponse> => {
+  const response = await fetchAPI(`documents/trashbin/?page=${params.page}`);
+
+  if (!response.ok) {
+    throw new APIError('Failed to get the docs', await errorCauses(response));
+  }
+
+  return response.json() as Promise<DocsTrashbinResponse>;
+};
+
+export const KEY_LIST_DOC_TRASHBIN = 'docs_trashbin';
+
+type UseDocsTrashbinOptions = UseQueryOptions<
+  DocsResponse,
+  APIError,
+  DocsResponse
+>;
+type UseInfiniteDocsTrashbinOptions = InfiniteQueryConfig<DocsTrashbinResponse>;
+
+export function useDocsTrashbin(
+  params: DocsTrashbinParams,
+  queryConfig?: UseDocsTrashbinOptions,
+) {
+  return useQuery<DocsTrashbinResponse, APIError, DocsTrashbinResponse>({
+    queryKey: [KEY_LIST_DOC_TRASHBIN, params],
+    queryFn: () => getDocsTrashbin(params),
+    ...queryConfig,
+  });
+}
+
+export const useInfiniteDocsTrashbin = (
+  params: DocsTrashbinParams,
+  queryConfig?: UseInfiniteDocsTrashbinOptions,
+) => {
+  return useAPIInfiniteQuery(
+    KEY_LIST_DOC_TRASHBIN,
+    getDocsTrashbin,
+    params,
+    queryConfig,
+  );
+};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx

@@ -0,0 +1,84 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
+import { Doc, KEY_LIST_DOC, useRestoreDoc } from '@/docs/doc-management';
+
+import { KEY_LIST_DOC_TRASHBIN } from '../api';
+
+interface DocsGridTrashbinActionsProps {
+  doc: Doc;
+}
+
+export const DocsGridTrashbinActions = ({
+  doc,
+}: DocsGridTrashbinActionsProps) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const { push } = useRouter();
+  const { mutate: restoreDoc, error } = useRestoreDoc({
+    listInvalideQueries: [KEY_LIST_DOC, KEY_LIST_DOC_TRASHBIN],
+    options: {
+      onSuccess: (_data, variables) => {
+        void push('/docs/' + variables.docId);
+
+        toast(t('The document has been restored.'), VariantType.SUCCESS, {
+          duration: 4000,
+        });
+      },
+      onError: () => {
+        toast(
+          t('An error occurred while restoring the document: {{error}}', {
+            error: error?.message,
+          }),
+          VariantType.ERROR,
+          {
+            duration: 4000,
+          },
+        );
+      },
+    },
+  });
+
+  const options: DropdownMenuOption[] = [
+    {
+      label: t('Restore'),
+      icon: 'undo',
+      callback: () => {
+        restoreDoc({
+          docId: doc.id,
+        });
+      },
+      testId: `docs-grid-actions-restore-${doc.id}`,
+    },
+  ];
+
+  const documentTitle = doc.title || t('Untitled document');
+  const menuLabel = t('Open the menu of actions for the document: {{title}}', {
+    title: documentTitle,
+  });
+
+  return (
+    <DropdownMenu
+      options={options}
+      label={menuLabel}
+      aria-label={t('More options')}
+    >
+      <Icon
+        data-testid={`docs-grid-actions-button-${doc.id}`}
+        iconName="more_horiz"
+        $theme="primary"
+        $variation="600"
+        $css={css`
+          cursor: pointer;
+          &:hover {
+            opacity: 0.8;
+          }
+        `}
+        aria-hidden="true"
+      />
+    </DropdownMenu>
+  );
+};

src/frontend/apps/impress/src/features/docs/docs-grid/index.ts

@@ -1 +1,2 @@
+export * from './api';
 export * from './components';