feat: files pagination & bug fixes (#139)

* feat: files page pagination * chore: fix checkbox scroll when clicked Fixed all issues referenced in #106 (comment)
web3-storage · Jul 23, 2021 · 361496e · 361496e
1 parent 715a930
commit 361496e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/website/components/checkbox.js b/packages/website/components/checkbox.js
@@ -18,8 +18,8 @@ const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) =
    */
   const change = (event) => onChange && onChange(event?.target?.checked)
 
-  return <label className={clsx('block', className)} {...props }>
-        <input className='absolute top-0 left-0 pointer opacity-0' type='checkbox' checked={checked} disabled={disabled} onChange={change} />
+  return <label className={clsx('block relative', className)} {...props }>
+        <input className='absolute top-0 left-0 pointer hidden' type='checkbox' checked={checked} disabled={disabled} onChange={change} />
         <div className={ clsx('relative w-4 h-4 border border-w3storage-red',
           disabled ? 'bg-gray-400' : 'bg-w3storage-red-background cursor-pointer')
         }>

diff --git a/packages/website/pages/files.js b/packages/website/pages/files.js
@@ -81,7 +81,7 @@ const UploadItem = ({ upload, index, toggle, selectedFiles }) => {
   const sharedArgs = { index, checked }
 
    return <tr>
-      <td>
+      <td className="w-8">
         <Checkbox className="mr-2" checked={checked} onChange={() => toggle(upload.content.cid)}/>
       </td>
       <TableElement {...sharedArgs}><span title={upload.created}>{formatTimestamp(upload.created)}</span></TableElement>
@@ -117,6 +117,7 @@ export default function Files({ user }) {
   const initialFiles = [];
 
   const [selectedFiles, setSelectedFiles] = useState(/** @type string[] */ initialFiles)
+  const [isNextDisabled, setNextDisabled] = useState('')
   const [size] = useState(25)
   const [befores, setBefores] = useState([new Date().toISOString()])
   const queryClient = useQueryClient()
@@ -131,6 +132,12 @@ export default function Files({ user }) {
     }
   )
 
+  const reachedEndOfPagination = data?.length === 0 && befores.length > 1
+  if (reachedEndOfPagination) {
+    setNextDisabled(befores[1])
+    setBefores(befores.slice(1))
+  }
+
   const uploads = adaptUploadData(data || [])
 
   function handleDelete() {
@@ -205,7 +212,7 @@ export default function Files({ user }) {
               </When>
               <When condition={!hasZeroUploads}>
                 <>
-                  <div className="flex ml-6">
+                  <div className="flex ml-7 md:ml-8">
                     <Button small disabled={selectedFiles.length === 0} onClick={handleDelete}>
                       Delete
                     </Button>
@@ -218,8 +225,8 @@ export default function Files({ user }) {
                   </div>
                   <table className="w-full mt-4">
                     <thead>
-                      <tr className="bb b--black">
-                        <th>
+                      <tr>
+                        <th className="w-8">
                           <Checkbox className="mr-2" checked={selectedFiles.length === uploads.length} onChange={toggleAll} />
                         </th>
                         <TableHeader>Timestamp</TableHeader>
@@ -237,7 +244,7 @@ export default function Files({ user }) {
                       )}
                     </tbody>
                   </table>
-                  <div className="mt-4 flex justify-between ml-6">
+                  <div className="mt-4 flex justify-between ml-7 md:ml-8">
                     <When condition={befores.length !== 1}>
                       <Button
                         className="black"
@@ -251,9 +258,10 @@ export default function Files({ user }) {
                     <When condition={uploads.length >= size}>
                       <Button
                         className="black"
-                        wrapperClassName="m-h-2"
+                        wrapperClassName="m-h-2 ml-auto"
                         onClick={handleNextClick}
                         id="uploads-next"
+                        disabled={isNextDisabled === befores[0]}
                       >
                         Next →
                       </Button>