fix: improve pins vs uploads experience on account page #2117 #1947

web3-storage · Dec 5, 2022 · 7c2fdbd · 7c2fdbd
1 parent 4d5a1a0
commit 7c2fdbd
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 52 deletions.
diff --git a/packages/website/components/account/filesManager/filesManager.js b/packages/website/components/account/filesManager/filesManager.js
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import CheckIcon from 'assets/icons/check';
 import { useUploads } from 'components/contexts/uploadsContext';
 import { usePinRequests } from 'components/contexts/pinRequestsContext';
+import { useUser } from 'components/contexts/userContext';
 import UploadsTable from './uploadsTable';
 import PinRequestsTable from './pinRequestsTable';
 
@@ -26,6 +27,7 @@ import PinRequestsTable from './pinRequestsTable';
  * @returns
  */
 const FilesManager = ({ className, content, onFileUpload }) => {
+  const { info: userInfo } = useUser();
   const { count: uploadsCount } = useUploads();
   const { count: pinRequestsCount } = usePinRequests();
   const { query, replace } = useRouter();
@@ -36,23 +38,27 @@ const FilesManager = ({ className, content, onFileUpload }) => {
 
   // Set current tab based on url param on load
   useEffect(() => {
-    if (query.hasOwnProperty('table') && currentTab !== query?.table) {
-      if (typeof query.table === 'string') {
-        if (query.table === 'pinned' && pinRequestsCount === 0) {
-          delete query.table;
-          replace(
-            {
-              query,
-            },
-            undefined,
-            { shallow: true }
-          );
-          return;
+    if (query.hasOwnProperty('table') && currentTab !== query?.table && typeof query.table === 'string') {
+      if (query.table === 'pinned') {
+        if (userInfo) {
+          if (!userInfo.tags?.HasPsaAccess) {
+            delete query.table;
+            replace(
+              {
+                query,
+              },
+              undefined,
+              { shallow: true }
+            );
+          } else {
+            setCurrentTab(query.table);
+          }
         }
+      } else {
         setCurrentTab(query.table);
       }
     }
-  }, [query, currentTab, pinRequestsCount, replace]);
+  }, [query, currentTab, userInfo, replace]);
 
   const changeCurrentTab = useCallback(
     /** @type {string} */ tab => {
@@ -90,12 +96,11 @@ const FilesManager = ({ className, content, onFileUpload }) => {
 
   return (
     <div className={clsx('section files-manager-container', className, isUpdating && 'disabled')}>
-      {pinRequestsCount > 0 && (
+      {userInfo?.tags?.HasPsaAccess && (
         <div className="upload-pinned-selector">
           {content?.tabs.map(tab => (
             <div key={tab.file_type} className="filetype-tab">
               <button
-                disabled={tab.file_type === 'pinned' && pinRequestsCount === 0}
                 className={clsx('tab-button', currentTab === tab.file_type ? 'selected' : '')}
                 onClick={() => changeCurrentTab(tab.file_type)}
               >
@@ -113,12 +118,14 @@ const FilesManager = ({ className, content, onFileUpload }) => {
         onUpdatingChange={setIsUpdating}
         showCheckOverlay={showCheckOverlayHandler}
       />
-      <PinRequestsTable
-        content={content}
-        hidden={currentTab !== 'pinned'}
-        onUpdatingChange={setIsUpdating}
-        showCheckOverlay={showCheckOverlayHandler}
-      />
+      {userInfo?.tags?.HasPsaAccess && (
+        <PinRequestsTable
+          content={content}
+          hidden={currentTab !== 'pinned'}
+          onUpdatingChange={setIsUpdating}
+          showCheckOverlay={showCheckOverlayHandler}
+        />
+      )}
       <div className={clsx('files-manager-overlay', showCheckOverlay ? 'show' : '')}>
         <div className="files-manager-overlay-check">
           <CheckIcon />

diff --git a/packages/website/components/account/filesManager/filesManager.scss b/packages/website/components/account/filesManager/filesManager.scss
@@ -192,7 +192,7 @@
   min-height: 23.4375rem;
 }
 
-.files-manager-upload-cta {
+.files-manager-table-message {
   @include fontWeight_Regular;
   @include fontSize_Medium;
   padding-left: 3.125rem;

diff --git a/packages/website/components/account/filesManager/pinRequestsTable.js b/packages/website/components/account/filesManager/pinRequestsTable.js
@@ -26,7 +26,7 @@ import GradientBackground from '../../gradientbackground/gradientbackground.js';
  * @param {PinRequestsTableProps} props
  */
 const PinRequestsTable = ({ content, hidden, onUpdatingChange, showCheckOverlay }) => {
-  const { pinRequests, pages, fetchDate, getPinRequests, isFetching, deletePinRequest } = usePinRequests();
+  const { pinRequests, pages, fetchDate, getPinRequests, isFetching, deletePinRequest, count } = usePinRequests();
   const {
     storageData: { refetch },
   } = useUser();
@@ -159,42 +159,46 @@ const PinRequestsTable = ({ content, hidden, onUpdatingChange, showCheckOverlay
           }}
         />
       </div>
-      <PinRequestRowItem
-        onSelect={onSelectAllToggle}
-        date={fileRowLabels.date.label}
-        name={fileRowLabels.name.label}
-        cid={fileRowLabels.cid.label}
-        requestid={fileRowLabels.requestid.label}
-        status={fileRowLabels.status.label}
-        linkPrefix={linkPrefix}
-        isHeader
-        isSelected={
-          !!selectedPinRequests.length &&
-          pinRequests.every(file => selectedPinRequests.find(fileSelected => file === fileSelected)) &&
-          !!fetchDate
-        }
-      />
       <div className="files-manager-table-content">
         {isFetching || !fetchDate ? (
           <Loading className={'files-loading-spinner'} />
+        ) : !count ? (
+          <span className="files-manager-table-message">{content?.table.pins_message}</span>
         ) : (
-          pinRequests.map(item => (
+          <>
             <PinRequestRowItem
-              key={item.requestid}
-              onSelect={() => onPinRequestSelect(item)}
-              date={item.created}
-              name={item.pin.name || 'No Name'}
-              cid={item.pin.cid}
-              requestid={item.requestid}
-              status={item.status}
+              onSelect={onSelectAllToggle}
+              date={fileRowLabels.date.label}
+              name={fileRowLabels.name.label}
+              cid={fileRowLabels.cid.label}
+              requestid={fileRowLabels.requestid.label}
+              status={fileRowLabels.status.label}
               linkPrefix={linkPrefix}
-              isSelected={!!selectedPinRequests.find(fileSelected => fileSelected === item)}
-              onDelete={() => onDeleteSingle(item.requestid)}
+              isHeader
+              isSelected={
+                !!selectedPinRequests.length &&
+                pinRequests.every(file => selectedPinRequests.find(fileSelected => file === fileSelected)) &&
+                !!fetchDate
+              }
             />
-          ))
+            {pinRequests.map(item => (
+              <PinRequestRowItem
+                key={item.requestid}
+                onSelect={() => onPinRequestSelect(item)}
+                date={item.created}
+                name={item.pin.name || 'No Name'}
+                cid={item.pin.cid}
+                requestid={item.requestid}
+                status={item.status}
+                linkPrefix={linkPrefix}
+                isSelected={!!selectedPinRequests.find(fileSelected => fileSelected === item)}
+                onDelete={() => onDeleteSingle(item.requestid)}
+              />
+            ))}
+          </>
         )}
       </div>
-      {!!pinRequests.length && (
+      {!!count && (
         <div className="files-manager-footer">
           <button
             className={clsx('delete', !selectedPinRequests.length && 'disabled')}

diff --git a/packages/website/components/account/filesManager/uploadsTable.js b/packages/website/components/account/filesManager/uploadsTable.js
@@ -428,7 +428,7 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
         onSelectAll={onSelectAllToggle}
         onDelete={onDeleteSingle}
         emptyState={
-          <span className="files-manager-upload-cta">
+          <span className="files-manager-table-message">
             {content?.table.message}
             {'\u00A0'}
             <Button

diff --git a/packages/website/components/contexts/userContext.js b/packages/website/components/contexts/userContext.js
@@ -2,12 +2,13 @@ import React from 'react';
 import { useQuery } from 'react-query';
 
 import { getInfo, getStorage } from 'lib/api.js';
-import { useAuthorization } from './authorizationContext.js';
 import AccountBlockedModal from 'components/account/accountBlockedModal/accountBlockedModal.js';
+import { useAuthorization } from './authorizationContext.js';
 
 /**
  * @typedef Tags
  * @property {boolean} [HasAccountRestriction]
+ * @property {boolean} [HasPsaAccess]
  */
 
 /**

diff --git a/packages/website/content/pages/app/account.json b/packages/website/content/pages/app/account.json
@@ -110,6 +110,7 @@
           "action": "Upload File",
           "accountRestrictedText": "You are unable to upload files when your account is blocked. Please contact [email protected]"
         },
+        "pins_message": "You don't have any files pinned yet.",
         "file_row_labels": {
           "date": {
             "label": "Date"