Merge branch 'development' into fix/file-review-text

fairDataSociety · Oct 16, 2023 · d6be94d · d6be94d
2 parents e35514a + 13a161f
commit d6be94d
Show file tree

Hide file tree

Showing 16 changed files with 282 additions and 61 deletions.
diff --git a/src/@types/fdp-storage.d.ts b/src/@types/fdp-storage.d.ts
@@ -0,0 +1,13 @@
+import type {
+  DirectoryItem as FdpDirectoryItem,
+  FileItem as FdpFileItem,
+} from '@fairdatasociety/fdp-storage';
+
+declare module '@fairdatasociety/fdp-storage' {
+  interface DirectoryItem extends FdpDirectoryItem {
+    path?: string;
+  }
+  interface FileItem extends FdpFileItem {
+    path?: string;
+  }
+}
diff --git a/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx b/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx
@@ -10,12 +10,14 @@ interface DriveItemDropdownProps extends UpdateDriveProps {
   data: {
     name: string;
   };
+  mobileAlign?: 'left' | 'right';
   handlePreviewClick?: () => void;
 }
 
 const DriveDropdown: FC<DriveItemDropdownProps> = ({
   type,
   data,
+  mobileAlign,
   updateDrive,
   handlePreviewClick,
 }) => {
@@ -29,6 +31,7 @@ const DriveDropdown: FC<DriveItemDropdownProps> = ({
       <DriveItemMenu
         data={data}
         type={type}
+        mobileAlign={mobileAlign}
         updateDrive={updateDrive}
         handlePreviewClick={handlePreviewClick}
       />

diff --git a/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx b/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx
@@ -23,12 +23,14 @@ interface DriveItemMenuProps extends UpdateDriveProps {
   data: {
     name: string;
   };
+  mobileAlign?: 'left' | 'right';
   handlePreviewClick?: () => void;
 }
 
 const DriveItemMenu: FC<DriveItemMenuProps> = ({
   type,
   data,
+  mobileAlign,
   updateDrive,
   handlePreviewClick,
 }) => {
@@ -147,7 +149,11 @@ const DriveItemMenu: FC<DriveItemMenuProps> = ({
   return (
     <>
       <DropdownTransition>
-        <Menu.Items className="absolute sm:-left-32 w-48 p-5 z-10 bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow">
+        <Menu.Items
+          className={`absolute ${
+            mobileAlign === 'right' ? 'right-4' : 'sm:-left-32'
+          } w-48 p-5 z-10 bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow`}
+        >
           <Menu.Item
             as="h4"
             className="mb-3 pb-3 font-semibold text-color-shade-white-day dark:text-color-shade-white-night text-base border-b-2 border-color-shade-light-1-day dark:border-color-shade-light-1-night cursor-pointer"

diff --git a/src/components/Inputs/SearchBar/SearchBar.tsx b/src/components/Inputs/SearchBar/SearchBar.tsx
@@ -10,42 +10,59 @@ import CloseDarkIcon from '@media/UI/close-light.svg';
 
 import classes from './SearchBar.module.scss';
 import { useLocales } from '@context/LocalesContext';
+import { useForm } from 'react-hook-form';
+import PodContext from '@context/PodContext';
 
 interface SearchBarProps {}
 
 const SearchBar: FC<SearchBarProps> = () => {
   const { theme } = useContext(ThemeContext);
-  const { search, updateSearch } = useContext(SearchContext);
+  const { updateSearch, searchDisabled } = useContext(SearchContext);
+  const { activePod, loading } = useContext(PodContext);
   const { intl } = useLocales();
+  const { register, handleSubmit, reset } = useForm<{ search: '' }>();
+
+  const onSubmitInternal = ({ search }) => updateSearch(search);
 
   return (
-    <div className="flex justify-center items-center w-80 md:w-98 h-10 py-2 px-4 bg-color-shade-dark-4-day dark:bg-color-shade-dark-4-night border border-color-shade-black-day dark:border-color-shade-dark-1-night effect-style-small-button-drop-shadow rounded">
-      {theme === 'light' ? (
-        <SearchLightIcon className="inline-block mr-1" />
-      ) : (
-        <SearchDarkIcon className="inline-block mr-1" />
-      )}
+    <form
+      className="flex justify-center items-center w-80 md:w-98 h-10 py-2 px-4 bg-color-shade-dark-4-day dark:bg-color-shade-dark-4-night border border-color-shade-black-day dark:border-color-shade-dark-1-night effect-style-small-button-drop-shadow rounded"
+      onSubmit={handleSubmit(onSubmitInternal)}
+    >
+      <span className="cursor-pointer" onClick={handleSubmit(onSubmitInternal)}>
+        {theme === 'light' ? (
+          <SearchLightIcon className="inline-block mr-1" />
+        ) : (
+          <SearchDarkIcon className="inline-block mr-1" />
+        )}
+      </span>
 
       <input
         type="text"
         id="search"
         name="search"
+        disabled={!activePod || loading || searchDisabled}
         placeholder={intl.get('SEARCH')}
         className={`${classes.searchBar} ${
           theme === 'light' ? classes.searchBarLight : classes.searchBarDark
         }`}
-        value={search}
-        onChange={(e) => updateSearch(e.target.value)}
+        {...register('search', { required: true })}
       />
 
-      <div className="cursor-pointer" onClick={() => updateSearch('')}>
+      <div
+        className="cursor-pointer"
+        onClick={() => {
+          reset();
+          updateSearch('');
+        }}
+      >
         {theme === 'light' ? (
           <CloseLightIcon className="inline-block mr-1" />
         ) : (
           <CloseDarkIcon className="inline-block mr-1" />
         )}
       </div>
-    </div>
+    </form>
   );
 };
 

diff --git a/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx b/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx
@@ -70,7 +70,7 @@ const PreviewFileModal: FC<PreviewModalProps> = ({
     setLoading(true);
     downloadFile(fdpClientRef.current, {
       filename: previewFile?.name,
-      directory: directoryName,
+      directory: previewFile.path || directoryName,
       podName: activePod,
     })
       .then(async (response) => {

diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx
@@ -1,29 +1,79 @@
+import { Button } from '@components/Buttons';
 import DirectoryPath from '@components/DirectoryPath/DirectoryPath';
 import PodDropdown from '@components/Dropdowns/PodDropdown/PodDropdown';
+import ThemeContext from '@context/ThemeContext';
+import { useContext } from 'react';
+
+import DriveViewListLight from '@media/UI/drive-view-list-light.svg';
+import DriveViewListDark from '@media/UI/drive-view-list-dark.svg';
+import DriveViewGridLight from '@media/UI/drive-view-grid-light.svg';
+import DriveViewGridDark from '@media/UI/drive-view-grid-dark.svg';
+
+import SortLight from '@media/UI/sort-light.svg';
+import SortDark from '@media/UI/sort-dark.svg';
 
 interface DriveActionHeaderMobileProps {
   podName: string;
+  driveView: 'grid' | 'list';
   directory: string;
   onDirectorySelect: (newDirectory: string) => void;
   onBackToDrive: () => void;
+  toggleView: () => void;
+  toggleSort: () => void;
 }
 
 const DriveActionHeaderMobile = ({
   podName,
+  driveView,
   directory,
   onDirectorySelect,
   onBackToDrive,
+  toggleView,
+  toggleSort,
 }: DriveActionHeaderMobileProps) => {
+  const { theme } = useContext(ThemeContext);
+
   return (
-    <>
+    <div className="flex w-full mb-2">
       <PodDropdown />
       <DirectoryPath
         podName={podName}
         directory={directory}
         onDirectorySelect={onDirectorySelect}
         onBackToDrive={onBackToDrive}
       />
-    </>
+      <div className="ml-auto flex md:hidden">
+        <Button
+          type="button"
+          variant="primary"
+          icon={
+            driveView === 'grid' ? (
+              theme === 'light' ? (
+                <DriveViewListLight />
+              ) : (
+                <DriveViewListDark />
+              )
+            ) : theme === 'light' ? (
+              <DriveViewGridLight />
+            ) : (
+              <DriveViewGridDark />
+            )
+          }
+          className="mx-1"
+          padding="p-3"
+          onClick={toggleView}
+        />
+
+        <Button
+          type="button"
+          variant="primary"
+          icon={theme === 'light' ? <SortLight /> : <SortDark />}
+          className="mx-1"
+          padding="p-3"
+          onClick={toggleSort}
+        />
+      </div>
+    </div>
   );
 };
 

diff --git a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx
@@ -44,10 +44,9 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
         </div>
 
         <div className="flex justify-between items-center">
-          {/* TODO: Search functionality should be implemented */}
-          {/* <div className="hidden sm:block mr-16">
+          <div className="hidden sm:block mr-16">
             <SearchBar />
-          </div> */}
+          </div>
           <div className="flex flex-nowrap space-x-5">
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}

diff --git a/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx b/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx
@@ -57,7 +57,9 @@ const DriveTableFooter: FC<DriveTableFooterProps> = ({
   return (
     <div className="flex justify-end items-center w-full h-16 pr-4 font-medium text-color-accents-plum-black dark:text-color-shade-light-1-night bg-color-shade-dark-4-day dark:bg-color-shade-dark-3-night shadow">
       <div className="px-5">
-        <span className="inline-block mr-2">{intl.get('ROWS_PER_PAGE')}</span>
+        <span className="mr-2 hidden sm:inline-block">
+          {intl.get('ROWS_PER_PAGE')}
+        </span>
 
         <Select
           name="Rows Per Page"
@@ -68,15 +70,14 @@ const DriveTableFooter: FC<DriveTableFooterProps> = ({
 
       <div className="px-5">
         {`
-        ${page * rowsPerPage + 1}-${
+            ${page * rowsPerPage + 1}-${
           page * rowsPerPage + rowsPerPage > totalDriveItems
             ? totalDriveItems
             : page * rowsPerPage + rowsPerPage
-        } of
-        ${totalDriveItems}`}
+        } of ${totalDriveItems}`}
       </div>
 
-      <div className="px-5">
+      <div className="px-5 flex items-center">
         <span className="inline-block mr-3 cursor-pointer" onClick={pageDown}>
           {theme === 'light' ? <PageDownLight /> : <PageDownDark />}
         </span>

diff --git a/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx b/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx
@@ -8,13 +8,17 @@ const DriveTableHeader: FC = () => {
     'pl-4 font-medium text-color-accents-plum-black dark:text-color-shade-light-1-night text-left text-base';
 
   return (
-    <tr className="relative w-full h-16 bg-color-shade-dark-4-day border dark:bg-color-shade-dark-3-night border-color-shade-dark-4-day dark:border-color-shade-dark-3-night shadow-sm">
-      <th className={tableHeadingClasses}>{intl.get('FILE_NAME')}</th>
-      <th className={tableHeadingClasses}>{intl.get('FILE_TYPE')}</th>
-      <th className={tableHeadingClasses}>{intl.get('FILE_SIZE')}</th>
-      <th className={tableHeadingClasses}>{intl.get('CREATED')}</th>
-      <th>{/* Empty Table Header for Dropdown Menu */}</th>
-    </tr>
+    <thead>
+      <tr className="relative w-full h-16 bg-color-shade-dark-4-day border dark:bg-color-shade-dark-3-night border-color-shade-dark-4-day dark:border-color-shade-dark-3-night shadow-sm">
+        <th className={tableHeadingClasses}>{intl.get('FILE_NAME')}</th>
+        <th className={tableHeadingClasses}>{intl.get('FILE_TYPE')}</th>
+        <th className={tableHeadingClasses}>{intl.get('FILE_SIZE')}</th>
+        <th className={`${tableHeadingClasses} hidden md:table-cell`}>
+          {intl.get('CREATED')}
+        </th>
+        <th>{/* Empty Table Header for Dropdown Menu */}</th>
+      </tr>
+    </thead>
   );
 };
 

diff --git a/src/components/Tables/DriveTableItem/DrivaTableItem.module.scss b/src/components/Tables/DriveTableItem/DrivaTableItem.module.scss
@@ -0,0 +1,3 @@
+.name-column {
+  max-width: 200px;
+}
diff --git a/src/components/Tables/DriveTableItem/DriveTableItem.tsx b/src/components/Tables/DriveTableItem/DriveTableItem.tsx
@@ -9,6 +9,8 @@ import formatDate from '@utils/formatDate';
 import { extractFileExtension } from '@utils/filename';
 import { UpdateDriveProps } from '@interfaces/handlers';
 
+import classes from './DrivaTableItem.module.scss';
+
 interface DriveTableItemProps extends UpdateDriveProps {
   type: 'folder' | 'file';
   data: {
@@ -33,7 +35,9 @@ const DriveTableItem: FC<DriveTableItemProps> = ({
       className="w-full h-14 even:bg-color-shade-dark-3-day odd:bg-color-shade-dark-4-day dark:odd:bg-color-shade-dark-4-night dark:even:bg-color-shade-white-day border border-color-shade-black-day dark:border-color-accents-purple-black shadow-sm cursor-pointer"
       onClick={onClick}
     >
-      <td className={`${tableDataClasses} dark:text-color-shade-light-1-night`}>
+      <td
+        className={`${tableDataClasses} ${classes['name-column']} overflow-hidden dark:text-color-shade-light-1-night`}
+      >
         {shortenString(data.name.split('.').shift(), 24)}
       </td>
       <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
@@ -42,14 +46,18 @@ const DriveTableItem: FC<DriveTableItemProps> = ({
       <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
         {type === 'file' ? prettyBytes(data?.size) : '-'}
       </td>
-      <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
+      <td
+        className={`${tableDataClasses} hidden md:table-cell dark:text-color-shade-light-2-night`}
+      >
         {formatDate(data?.creationTime, false)}
       </td>
       <td className="text-center">
         <Menu as="div">
           <DriveItemDropdown
             type={type}
             data={data}
+            mobileAlign="right"
+            handlePreviewClick={onClick}
             updateDrive={updateDrive}
           />
         </Menu>

diff --git a/src/components/Views/DriveGridView/DriveGridView.tsx b/src/components/Views/DriveGridView/DriveGridView.tsx
@@ -6,7 +6,7 @@ import { UpdateDriveProps } from '@interfaces/handlers';
 interface DriveGridViewProps extends UpdateDriveProps {
   directories: DirectoryItem[];
   files: FileItem[];
-  directoryOnClick: (directoryName: string) => void;
+  directoryOnClick: (directory: DirectoryItem) => void;
   fileOnClick: (data: FileItem) => void;
 }
 
@@ -28,7 +28,7 @@ const DriveGridView: FC<DriveGridViewProps> = ({
             size: directory.size,
             creationTime: (directory.raw as any)?.meta?.creationTime,
           }}
-          onClick={() => directoryOnClick(directory.name)}
+          onClick={() => directoryOnClick(directory)}
           updateDrive={updateDrive}
         />
       ))}