🔢 Shared with me filters (#79)

✨ feat: shared with me filters 🐛 Fix try to access the service with init 🌐 feat: shared with me i18n 🌐russian translation --------- Co-authored-by: Anton SHEPILOV <ashepilov@linagora.com>
2023-06-17 15:37:33 +01:00
parent fddd3b4ebd
commit 441c2b780f
19 changed files with 482 additions and 404 deletions
@@ -17,6 +17,10 @@ export type SearchDocumentsBody = {
  creator?: string;
  added?: string;
 };
+export type sharedWithMeFilterBody = {
+  mime_type?: string;
+  creator?: string;
+};

 let publicLinkToken: null | string = null;
 let tdriveTabToken: null | string = null;
@@ -132,12 +136,12 @@ export class DriveApiClient {
    );
  }

-  static async search(searchString: string, view?: string,options?: BaseSearchOptions) {
+  static async search(searchString: string, view?: string, options?: BaseSearchOptions) {
    const companyId = options?.company_id ? options.company_id : Workspace.currentGroupId;
    const query = `/internal/services/documents/v1/companies/${companyId}/search`;
    const searchData = {
      search: searchString,
-      view: view
+      view: view,
    };
    const res = await Api.post<SearchDocumentsBody, { entities: DriveItem[] }>(query, searchData);
    this.logger.debug(
@@ -149,11 +153,14 @@ export class DriveApiClient {
    return res;
  }

-  static async sharedWithMe(options?: BaseSearchOptions) {
+  static async sharedWithMe(filter?: any, options?: BaseSearchOptions) {
    const companyId = options?.company_id ? options.company_id : Workspace.currentGroupId;
    const query = `/internal/services/documents/v1/companies/${companyId}/shared-with-me`;
-    const filterData = {};
-    const res = await Api.post<SearchDocumentsBody, { entities: DriveItem[] }>(query, filterData);
+    const filterData = { mime_type: filter.mimeType, creator: filter.creator, view: "shared_with_me" };
+    const res = await Api.post<sharedWithMeFilterBody, { entities: DriveItem[] }>(
+      query,
+      filterData,
+    );
    this.logger.debug(
      `Drive shared with me by filter "${JSON.stringify(filterData)}". Found`,
      res.entities.length,
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { DriveApiClient } from '../api-client/api-client';
 import { DriveItemAtom, DriveItemChildrenAtom } from '../state/store';
-import { DriveItem, DriveItemDetails, DriveItemVersion } from '../types';
+import { DriveItem, DriveItemVersion } from '../types';

 /**
 * Returns the children of a drive item
@@ -18,59 +18,20 @@ export const useDriveActions = () => {
    ({ set, snapshot }) =>
      async (parentId: string) => {
        if (parentId) {
-          if (parentId == "shared-with-me") {
-            const details = {
-              path: [
-                  {
-                      id: "shared-with-me",
-                      name: "Shared with me"
-                  }
-              ],
-              item: {
-                  id: "root",
-                  parent_id: "",
-                  company_id: "",
-                  workspace_id: "",
-                  name: "Shared with me",
-                  size: 0,
-                  description: "",
-                  tags: [],
-                  in_trash: false,
-                  is_directory: true,
-                  extension: "",
-                  added: "",
-                  last_modified: "",
-                  last_version_cache: {},
-                  access_info: {},
-              },
-              versions: [],
-              children: [],
-              access: "manage",
-              websockets: [
-                  {
-                      room: "/companies/aa7ffdd0-fadb-11ed-b891-510fe3501b2b/documents/item/root",
-                      token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhYTU0Y2YyMC1mYWRiLTExZWQtYjg5MS01MTBmZTM1MDFiMmIiLCJuYW1lIjoiL2NvbXBhbmllcy9hYTdmZmRkMC1mYWRiLTExZWQtYjg5MS01MTBmZTM1MDFiMmIvZG9jdW1lbnRzL2l0ZW0vcm9vdCIsImlhdCI6MTY4ODk1MDk2OCwibmJmIjoxNjg2MjcyNTA4fQ.H6BFRcLG3Op32sqKi45Pf1s2YKcVbMxGZGPJal06l1g"
-                  }
-              ]
-            };
+          try {
+            const details = await DriveApiClient.get(companyId, parentId);
            set(DriveItemChildrenAtom(parentId), details.children);
-            return details;
-          } else {
-            try {
-              const details = await DriveApiClient.get(companyId, parentId);
-              set(DriveItemChildrenAtom(parentId), details.children);
-              set(DriveItemAtom(parentId), details);
-              for (const child of details.children) {
-                const currentValue = snapshot.getLoadable(DriveItemAtom(child.id)).contents;
-                if (!currentValue) {
-                  //only update if not already in cache to avoid concurrent updates
-                  set(DriveItemAtom(child.id), { item: child });
-                }
+            set(DriveItemAtom(parentId), details);
+            for (const child of details.children) {
+              const currentValue = snapshot.getLoadable(DriveItemAtom(child.id)).contents;
+              if (!currentValue) {
+                //only update if not already in cache to avoid concurrent updates
+                set(DriveItemAtom(child.id), { item: child });
              }
-              return details;
-            } catch (e) {
-              ToasterService.error('Unable to load your files.');
            }
+            return details;
+          } catch (e) {
+            ToasterService.error('Unable to load your files.');
          }
        }
      },
@@ -7,16 +7,16 @@ import _ from 'lodash';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { SharedWithMeDriveItemsResultsState } from '../state/shared-with-me-drive-items-result';
 import { SearchInputState } from '../../search/state/search-input';
+import { SharedWithMeFilterState } from '../state/shared-with-me-filter';

 export const useSharedWithMeDriveItemsLoading = () => {
  return useRecoilValue(LoadingState('useSearchDriveItems'));
 };

-let currentQuery = '';
-
 export const useSharedWithMeDriveItems = () => {
  const companyId = useRouterCompany();
  const searchInput = useRecoilValue(SearchInputState);
+  const sharedFilter = useRecoilValue(SharedWithMeFilterState);
  const [loading, setLoading] = useRecoilState(LoadingState('useSearchDriveItems'));

  const [items, setItems] = useRecoilState(SharedWithMeDriveItemsResultsState(companyId));
@@ -34,11 +34,24 @@ export const useSharedWithMeDriveItems = () => {
  const refresh = async () => {
    setLoading(true);

-    const query = searchInput.query;
-    currentQuery = query;
+    let filter:any = {...sharedFilter};
+    if (filter.date) {
+      if (filter.date === "today") {
+        filter = { ...filter, added_lt: '', added_gt: '' };
+      }
+      if (filter.date === "last_week") {
+        const today = new Date();
+        const lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+        filter = { ...filter, added_lt: lastWeek.toISOString(), added_gt: '' };
+      }
+      if (filter.date === "last_month") {
+        const today = new Date();
+        const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+        filter = { ...filter, added_lt: lastMonth.toISOString(), added_gt: '' };
+      }
+    }

-    const response = await DriveApiClient.sharedWithMe(opt);
-    console.log("response is: ", response);
+    const response = await DriveApiClient.sharedWithMe(filter, opt);
    const results = response.entities || [];

    const update = {
@@ -47,9 +60,6 @@ export const useSharedWithMeDriveItems = () => {
      // nextPage: response.next_page_token,
    };

-    if (currentQuery !== query) {
-      return;
-    }
    setItems(update);
    setLoading(false);
  };
@@ -62,18 +72,18 @@ export const useSharedWithMeDriveItems = () => {
  useGlobalEffect(
    'useSearchDriveItems',
    () => {
-        (async () => {
-          setLoading(true);
-          if (searchInput.query) {
-            delayRequest('useSearchDriveItems', async () => {
-              await refresh();
-            });
-          } else {
-            refresh();
-          }
-        })();
+      (async () => {
+        setLoading(true);
+        if (sharedFilter.mimeType) {
+          delayRequest('useSearchDriveItems', async () => {
+            await refresh();
+          });
+        } else {
+          refresh();
+        }
+      })();
    },
-    [searchInput.channelId, searchInput.workspaceId],
+    [sharedFilter, searchInput.channelId, searchInput.workspaceId],
  );

  return { loading, driveItems: [...items.results], loadMore, refresh };
@@ -0,0 +1,17 @@
+import { string } from 'prop-types';
+import { atom } from 'recoil';
+
+export type SharedWithMeFilter = {
+  mimeType: string;
+  creator: string;
+  date: string;
+};
+
+export const SharedWithMeFilterState = atom<SharedWithMeFilter>({
+  key: 'SharedWithMeFilterState',
+  default: {
+    mimeType: '',
+    creator: '',
+    date: '',
+  },
+});
@@ -77,6 +77,7 @@ export default memo(
    const uploadZoneRef = useRef<UploadZone | null>(null);

    const setCreationModalState = useSetRecoilState(CreateModalAtom);
+
    const [checked, setChecked] = useRecoilState(DriveItemSelectedList);

    const setParentId = useCallback(
@@ -130,6 +131,9 @@ export default memo(
      <>
        {viewId == 'shared-with-me' ? (
          <>
+            <Suspense fallback={<></>}>
+              <DrivePreview />
+            </Suspense>
            <SharedFilesTable />
          </>
        ) : (
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { DriveCurrentFolderAtom } from './browser';
 import { ConfirmDeleteModalAtom } from './modals/confirm-delete';
@@ -16,7 +16,10 @@ import { DriveItemSelectedList } from '@features/drive/state/store';
 import { DriveItem, DriveItemDetails } from '@features/drive/types';
 import { ToasterService } from '@features/global/services/toaster-service';
 import { copyToClipboard } from '@features/global/utils/CopyClipboard';
-import Languages from "features/global/services/languages-service";
+import { SharedWithMeFilterState } from '@features/drive/state/shared-with-me-filter';
+import { getCurrentUserList, getUser } from '@features/users/hooks/use-user-list';
+import _ from 'lodash';
+import Languages from 'features/global/services/languages-service';

 /**
 * This will build the context menu in different contexts
@@ -90,7 +93,9 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
              hide: !item.access_info.public?.level || item.access_info.public?.level === 'none',
              onClick: () => {
                copyToClipboard(getPublicLink(item || parent?.item));
-                ToasterService.success(Languages.t('components.item_context_menu.copy_link.success'));
+                ToasterService.success(
+                  Languages.t('components.item_context_menu.copy_link.success'),
+                );
              },
            },
            {
@@ -108,7 +113,9 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
                  open: true,
                  parent_id: inTrash ? 'root' : item.parent_id,
                  mode: 'move',
-                  title: Languages.t('components.item_context_menu.move.modal_header') + ` '${item.name}'`,
+                  title:
+                    Languages.t('components.item_context_menu.move.modal_header') +
+                    ` '${item.name}'`,
                  onSelected: async ids => {
                    await update(
                      {
@@ -254,7 +261,9 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
                    parent?.item?.access_info?.public?.level === 'none',
                  onClick: () => {
                    copyToClipboard(getPublicLink(item || parent?.item));
-                    ToasterService.success(Languages.t('components.item_context_menu.copy_link.success'));
+                    ToasterService.success(
+                      Languages.t('components.item_context_menu.copy_link.success'),
+                    );
                  },
                },
                { type: 'separator', hide: inTrash || parent.access === 'read' },
@@ -297,63 +306,138 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
  );
 };

-export const onBuildFileTypeContextMenu = () => {
-  const menuItems = [
-    {
-      type: 'menu',
-      text: 'PDF',
-    },
-    {
-      type: 'menu',
-      text: 'DOC',
-    },
-    {
-      type: 'menu',
-      text: 'PNG',
-    },
+export const useOnBuildFileTypeContextMenu = () => {
+  const [filter, setFilter] = useRecoilState(SharedWithMeFilterState);
+  const mimeTypes = [
+    { key: Languages.t('components.item_context_menu.all'), value: '' },
+    { key: 'PDF', value: 'application/pdf' },
+    { key: 'DOC', value: 'application/msword' },
+    { key: 'PNG', value: 'image/png' },
  ];
-  return menuItems;
+  return useCallback(() => {
+    const menuItems = mimeTypes.map(item => {
+      return {
+        type: 'menu',
+        text: item.key,
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              mimeType: item.value,
+            };
+            return newFilter;
+          });
+        },
+      };
+    });
+    return menuItems;
+  }, [setFilter]);
 };
-export const onBuildPeopleContextMenu = () => {
-  const menuItems = [
-    {
-      type: 'menu',
-      text: 'Dwho',
-    },
-  ];
-  return menuItems;
+
+export const useOnBuildPeopleContextMenu = () => {
+  const [filter, setFilter] = useRecoilState(SharedWithMeFilterState);
+  const [_userList, setUserList] = useState(getCurrentUserList());
+  let userList = _userList;
+  userList = _.uniqBy(userList, 'id');
+  return useCallback(() => {
+    const menuItems = userList.map(user => {
+      return {
+        type: 'menu',
+        text: user.first_name,
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              creator: user.id ?? '',
+            };
+            return newFilter;
+          });
+        },
+      };
+    });
+    return menuItems;
+  }, [setFilter]);
 };
-export const onBuildDateContextMenu = () => {
-  const menuItems = [
-    {
-      type: 'menu',
-      text: 'All',
-    },
-    {
-      type: 'menu',
-      text: 'Today',
-    },
-    {
-      type: 'menu',
-      text: 'Last week',
-    },
-    {
-      type: 'menu',
-      text: 'Last month',
-    },
-    {
-      type: 'menu',
-      text: 'Range',
-    },
-  ];
-  return menuItems;
+
+export const useOnBuildDateContextMenu = () => {
+  const [filter, setFilter] = useRecoilState(SharedWithMeFilterState);
+  return useCallback(() => {
+    const menuItems = [
+      {
+        type: 'menu',
+        text: Languages.t('components.item_context_menu.all'),
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              date: '',
+            };
+            return newFilter;
+          });
+        },
+      },
+      {
+        type: 'menu',
+        text: Languages.t('components.item_context_menu.today'),
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              date: 'today',
+            };
+            return newFilter;
+          });
+        },
+      },
+      {
+        type: 'menu',
+        text: Languages.t('components.item_context_menu.last_week'),
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              date: 'last_week',
+            };
+            return newFilter;
+          });
+        },
+      },
+      {
+        type: 'menu',
+        text: Languages.t('components.item_context_menu.last_month'),
+        onClick: () => {
+          setFilter(prevFilter => {
+            const newFilter = {
+              ...prevFilter,
+              date: 'last_month',
+            };
+            return newFilter;
+          });
+        },
+      },
+    ];
+    return menuItems;
+  }, [setFilter]);
 };
-export const onBuildFileContextMenu = (id: string) => {
-  const menuItems = [
-    {
-      type: 'menu',
-      text: 'Download'
+export const useOnBuildFileContextMenu = () => {
+  const { download } = useDriveActions();
+  const { open: preview } = useDrivePreview();
+  return useCallback(
+    (item: DriveItem) => {
+      const menuItems = [
+        {
+          type: 'menu',
+          text: Languages.t('components.item_context_menu.preview'),
+          onClick: () => preview(item),
+        },
+        {
+          type: 'menu',
+          text: Languages.t('components.item_context_menu.download'),
+          onClick: () => download(item.id),
+        },
+      ];
+      return menuItems;
    },
-  ];
-  return menuItems;
+    [download, preview],
+  );
 };
@@ -1,139 +1,138 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon, DotsHorizontalIcon } from '@heroicons/react/outline';
 import { Button } from '@atoms/button/button';
 import { Base, BaseSmall, Title } from '@atoms/text';
 import Menu from '@components/menus/menu';
+import { useRecoilState } from 'recoil';
 import {
-  onBuildFileTypeContextMenu,
-  onBuildPeopleContextMenu,
-  onBuildDateContextMenu,
-  onBuildFileContextMenu,
+  useOnBuildFileTypeContextMenu,
+  useOnBuildPeopleContextMenu,
+  useOnBuildDateContextMenu,
+  useOnBuildFileContextMenu,
 } from './context-menu';
 import { useSharedWithMeDriveItems } from '@features/drive/hooks/use-shared-with-me-drive-items';
+import { SharedWithMeFilterState } from '@features/drive/state/shared-with-me-filter';
+import MenusManager from '@components/menus/menus-manager.jsx';
+import Languages from '@features/global/services/languages-service';

 export const SharedFilesTable = () => {
  const { driveItems, loading } = useSharedWithMeDriveItems();
-  const [sortBy, setSortBy] = useState('name');
-  const [sortOrder, setSortOrder] = useState('asc');
+  const [filter, setFilter] = useRecoilState(SharedWithMeFilterState);

-  const handleSort = (column: string) => {
-    if (sortBy === column) {
-      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortBy(column);
-      setSortOrder('asc');
-    }
-  };
+  // FILTER HOOKS
+  const buildFileTypeContextMenu = useOnBuildFileTypeContextMenu();
+  const buildPeopleContextMen = useOnBuildPeopleContextMenu();
+  const buildFileContextMenu = useOnBuildFileContextMenu();
+  const buildDateContextMenu = useOnBuildDateContextMenu();

-  const renderSortIcon = (column: string) => {
-    if (sortBy === column) {
-      if (sortOrder === 'asc') {
-        return <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />;
-      } else {
-        return <ChevronUpIcon className="h-4 w-4 ml-2 -mr-1" />;
-      }
-    }
-    return null;
+  const fileAddedDate = (timestamp: number) => {
+    const [formattedDate, formattedTime] = new Date(timestamp).toLocaleString().split(', ');
+    return formattedDate;
  };
  return (
-    <>
-      <Title className="mb-4 block">Shared with me</Title>
+    <div>
+      <Title className="mb-4 block">{Languages.t('scenes.app.shared_with_me.shared_with_me')}</Title>
      {/* Filters */}
      <div className="flex items-center space-x-4 mb-6">
+        <div className="">
+          <Button
+            theme="secondary"
+            className="flex items-center"
+            onClick={evt => {
+              MenusManager.openMenu(
+                buildFileTypeContextMenu(),
+                { x: evt.clientX, y: evt.clientY },
+                'center',
+              );
+            }}
+          >
+            <span>{filter.mimeType ? filter.mimeType : Languages.t('scenes.app.shared_with_me.file_type')}</span>
+            <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
+          </Button>
+        </div>
        <div className="flex items-center space-x-2">
-          <Menu menu={() => onBuildFileTypeContextMenu()}>
-            <Button theme="secondary" className="flex items-center">
-              <span>File Type</span>
-              <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
-            </Button>
-          </Menu>
+          <Button
+            theme="secondary"
+            className="flex items-center"
+            onClick={evt => {
+              MenusManager.openMenu(
+                buildPeopleContextMen(),
+                { x: evt.clientX, y: evt.clientY },
+                'center',
+              );
+            }}
+          >
+            <span>{Languages.t('scenes.app.shared_with_me.people')}</span>
+            <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
+          </Button>
        </div>

        <div className="flex items-center space-x-2">
-          <Menu menu={() => onBuildPeopleContextMenu()}>
-            <Button theme="secondary" className="flex items-center">
-              <span>People</span>
-              <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
-            </Button>
-          </Menu>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Menu menu={() => onBuildDateContextMenu()}>
-            <Button theme="secondary" className="flex items-center">
-              <span>Last Modified</span>
-              <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
-            </Button>
-          </Menu>
+          <Button
+            theme="secondary"
+            className="flex items-center"
+            onClick={evt => {
+              MenusManager.openMenu(
+                buildDateContextMenu(),
+                { x: evt.clientX, y: evt.clientY },
+                'center',
+              );
+            }}
+          >
+            <span>{Languages.t('scenes.app.shared_with_me.last_modified')}</span>
+            <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
+          </Button>
        </div>
      </div>
-      <Title className="mb-4 block">Documents:</Title>
+      <Title className="mb-4 block">{Languages.t('scenes.app.drive.documents')}:</Title>
      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-blue-500 dark:text-white">
            <tr>
              <th scope="col" className="px-6 py-3">
-                <span className="flex" onClick={() => handleSort('name')}>
-                  Name {renderSortIcon('name')}
-                </span>
+                <span className="flex">{Languages.t('scenes.app.shared_with_me.name')}</span>
              </th>
              <th scope="col" className="px-6 py-3">
-                <span className="flex" onClick={() => handleSort('name')}>
-                  Shared By {renderSortIcon('name')}
-                </span>
+                <span className="flex">{Languages.t('scenes.app.shared_with_me.shared_by')}</span>
              </th>
              <th scope="col" className="px-6 py-3">
-                <span className="flex" onClick={() => handleSort('name')}>
-                  Shared Date {renderSortIcon('name')}
-                </span>
+                <span className="flex">Shared Date{Languages.t('scenes.app.shared_with_me.shared_date')}</span>
              </th>
              <th scope="col" className="px-6 py-3">
-                <span className="sr-only">Edit</span>
+                <span className="sr-only">{Languages.t('scenes.app.shared_with_me.edit')}</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {!loading &&
-              driveItems
-                .sort((a: any, b: any) => {
-                  // Perform sorting based on the selected column and order
-                  console.log("a is: ", a);
-                  console.log("b is: ", b);
-                  if (sortBy === 'name') {
-                    return sortOrder === 'asc'
-                      ? a.name.localeCompare(b.name)
-                      : b.name.localeCompare(a.name);
-                  }
-                  return 0; // No sorting by default
-                })
-                .map((file: any, index: any) => (
-                  <tr
-                    key={index}
-                    className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+              driveItems.map((file: any, index: any) => (
+                <tr
+                  key={index}
+                  className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+                >
+                  <th
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                  >
-                    <th
-                      scope="row"
-                      className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-                    >
-                      {file.name}
-                    </th>
-                    <td className="px-6 py-4">Dwho</td>
-                    <td className="px-6 py-4">2023-05-05</td>
-                    <td className="px-6 py-4 text-right">
-                      <Menu menu={onBuildFileContextMenu(file.id)}>
-                        <Button
-                          theme={'secondary'}
-                          size="sm"
-                          className={'!rounded-full '}
-                          icon={DotsHorizontalIcon}
-                        />
-                      </Menu>
-                    </td>
-                  </tr>
-                ))}
+                    {file.name}
+                  </th>
+                  <td className="px-6 py-4">{file.creator?.id}</td>
+                  <td className="px-6 py-4">{fileAddedDate(file.added)}</td>
+                  <td className="px-6 py-4 text-right">
+                    <Menu menu={buildFileContextMenu(file)}>
+                      <Button
+                        theme={'secondary'}
+                        size="sm"
+                        className={'!rounded-full '}
+                        icon={DotsHorizontalIcon}
+                      />
+                    </Menu>
+                  </td>
+                </tr>
+              ))}
          </tbody>
        </table>
      </div>
-    </>
+    </div>
  );
 };