refactor: update columns

app/data/file-provider.ts

@@ -3,9 +3,7 @@ import {S5Client} from "@lumeweb/s5-js";
 import {PROTOCOL_S5} from "@lumeweb/portal-sdk";
 import {Multihash} from "@lumeweb/libs5/lib/multihash.js";
 import {AxiosProgressEvent} from "axios";
-import {CancelablePromise} from "@lumeweb/s5-js/lib/axios.js";
-import {MetadataResult} from "@lumeweb/s5-js/lib/options/download.js";
-import {metadataMagicByte, Unpacker, CID, METADATA_TYPES, CID_TYPES} from "@lumeweb/libs5";
+import {CID, CID_TYPES, METADATA_TYPES, metadataMagicByte, Unpacker} from "@lumeweb/libs5";
 
 async function getIsManifest(s5: S5Client, hash: string): Promise<boolean | number> {
 
@@ -63,6 +61,7 @@ export interface FileItem {
     cid: string;
     type: string;
     mimeType: string;
+    pinned: string;
 }
 
 export const fileProvider: SdkProvider = {
@@ -81,12 +80,14 @@ export const fileProvider: SdkProvider = {
                         cid: new CID(manifest, mHash, pin.size).toString(),
                         type: "manifest",
                         mimeType: "application/octet-stream",
+                        pinned: pin.pinned_at,
                     });
                 } else {
                     items.push({
                         cid: new CID(CID_TYPES.RAW, Multihash.fromBase64Url(pin.hash), pin.size).toString(),
                         type: "raw",
                         mimeType: pin.mime_type,
+                        pinned: pin.pinned_at,
                     });
                 }
             }

app/routes/file-manager/columns.tsx

@@ -4,15 +4,8 @@ import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
 import { cn } from "~/utils";
-
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type File = {
-    name: string;
-    cid: string;
-    size: string;
-    createdOn: string;
-};
+import {FileItem} from "~/data/file-provider.js";
+import {format} from "date-fns/fp";
 
 declare module '@tanstack/table-core' {
   interface TableMeta<TData extends RowData> {
@@ -20,13 +13,13 @@ declare module '@tanstack/table-core' {
   }
 }
 
-export const columns: ColumnDef<File>[] = [
+export const columns: ColumnDef<FileItem>[] = [
     {
       id: "select",
       size: 20,
       header: ({ table }) => (
         <Checkbox
-          
+
           checked={
             table.getIsAllPageRowsSelected() ||
             (table.getIsSomePageRowsSelected() && "indeterminate")
@@ -64,12 +57,12 @@ export const columns: ColumnDef<File>[] = [
         header: "Size",
     },
     {
-        accessorKey: "createdOn",
+        accessorKey: "pinnedOn",
         size: 200,
-        header: "Created On",
+        header: "Pinned On",
         cell: ({ row }) => (
           <div className="flex items-center justify-between">
-            {row.getValue("createdOn")}
+            {format(row.getValue("pinned")) as unknown as string}
               <DropdownMenu>
               <DropdownMenuTrigger className={
                 cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
@@ -93,4 +86,4 @@ export const columns: ColumnDef<File>[] = [
           </div>
         )
     }
-];
+];

package.json

@@ -16,7 +16,7 @@
     "@conform-to/react": "^1.0.2",
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
-    "@lumeweb/portal-sdk": "0.0.0-20240321203143",
+    "@lumeweb/portal-sdk": "0.0.0-20240321203634",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -42,6 +42,7 @@
     "@visx/visx": "^3.10.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",