From 64fbb5457ec984325ce7b1132b5c5a606fe369ff Mon Sep 17 00:00:00 2001 From: vikas Date: Sat, 8 Mar 2025 16:52:00 +0530 Subject: [PATCH 1/2] Modified bucket page --- .../dashboard/buckets/[bucket-name]/page.tsx | 289 ++++++++---------- components/files-component/files.tsx | 12 +- static/files.ts | 49 +++ types/S3Objects.ts | 29 ++ 4 files changed, 214 insertions(+), 165 deletions(-) create mode 100644 static/files.ts create mode 100644 types/S3Objects.ts diff --git a/app/(pages)/dashboard/buckets/[bucket-name]/page.tsx b/app/(pages)/dashboard/buckets/[bucket-name]/page.tsx index 3636c9e..e63d32a 100644 --- a/app/(pages)/dashboard/buckets/[bucket-name]/page.tsx +++ b/app/(pages)/dashboard/buckets/[bucket-name]/page.tsx @@ -19,7 +19,7 @@ import { PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; -import Image from "next/image"; +import { S3File, S3Root } from "@/types/S3Objects"; type FileType = | "document" @@ -27,55 +27,100 @@ type FileType = | "image" | "audio" | "video" + | "unknown" | "folder"; -interface MockFile { - title: string; - size?: string; - itemCount?: number; - type: FileType; - createdAt: Date; -} - -const mockFileData: MockFile[] = [ - { - title: "Explorer.docx", - size: "2.1GB", - type: "document", - createdAt: new Date("2024-01-14"), - }, - { - title: "Movies", - itemCount: 5, - type: "folder", - size: "5.1GB", - createdAt: new Date("2024-01-13"), - }, - { - title: "Never Gonna Give You Up.mp3", - size: "5.1MB", - type: "audio", - createdAt: new Date("2024-01-12"), - }, - { - title: "Rick Astley Video.mp4", - size: "1.2GB", - type: "video", - createdAt: new Date("2024-01-11"), - }, - { - title: "1955772247.jpg", - size: "1.8MB", - type: "image", - createdAt: new Date("2024-01-10"), - }, - { - title: "Rick Astley Archive.zip", - size: "536MB", - type: "compressed", - createdAt: new Date("2024-01-09"), - }, -]; +const mockFileData: S3Root = { + folders: [ + { + folders: [], + name: "compressed", + files: [ + { + extension: "rar", + etag: '"dd9bb762731449c0e06a2c869b739db1"', + size: "1.56 MB", + type: "compressed", + name: "lab.rar", + location: "compressed/lab.rar", + lastModified: "2025-03-08T05:15:12Z", + }, + ], + location: "compressed/", + type: "folder", + itemCount: 1, + }, + { + folders: [], + name: "documents", + files: [ + { + extension: "pdf", + etag: '"52e419c0508aaeea9213f513b84e8d73"', + size: "9.17 KB", + type: "document", + name: "rptTimeTableStudent.pdf", + location: "documents/rptTimeTableStudent.pdf", + lastModified: "2025-03-08T05:15:11Z", + }, + ], + location: "documents/", + type: "folder", + itemCount: 1, + }, + { + folders: [], + name: "videos", + files: [ + { + extension: "mp4", + etag: '"447b7f6a669fc87a1e5c1d506474a7cb"', + size: "1.12 MB", + type: "video", + name: "VID_4556446.mp4", + location: "videos/VID_4556446.mp4", + lastModified: "2025-03-08T05:15:12Z", + }, + { + extension: "mp4", + etag: '"4aa28625598a7adfb7ec3fef5e44453b-2"', + size: "31.48 MB", + type: "video", + name: "VID_5468553.mp4", + location: "videos/VID_5468553.mp4", + lastModified: "2025-03-08T05:15:11Z", + }, + ], + location: "videos/", + type: "folder", + itemCount: 2, + }, + ], + name: "root", + files: [ + { + extension: "jpg", + etag: '"8aa445cbeca5119ec77c4e4bb760e12e"', + size: "130.04 KB", + type: "image", + name: "IMG_2135545.jpg", + location: "IMG_2135545.jpg", + lastModified: "2025-03-08T05:15:13Z", + }, + { + extension: "jpg", + etag: '"3ee4b3bb7fe145c77a883db5b201a172"', + size: "93.66 KB", + type: "image", + name: "IMG_2135546.jpg", + location: "IMG_2135546.jpg", + lastModified: "2025-03-08T05:15:13Z", + }, + ], + location: "", + type: "folder", + itemCount: 5, +}; const fileTypes = [ { value: "all", label: "All Files" }, @@ -101,51 +146,53 @@ export default function Page() { const [open, setOpen] = React.useState(false); const [selectedType, setSelectedType] = React.useState("all"); - React.useEffect(() => { - const handleEscape = (e: KeyboardEvent) => { - if (e.key === "Escape") { - setSelectedFile(null); - } - }; - window.addEventListener("keydown", handleEscape); - return () => window.removeEventListener("keydown", handleEscape); - }, []); - const filteredAndSortedData = React.useMemo(() => { - let filtered = mockFileData.filter((file) => - file.title.toLowerCase().includes(searchTerm.toLowerCase()) - ); - + const filterItems = (items: S3File[] | S3Root["folders"]) => { + return items.filter((item) => + item.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + }; + + let filteredFiles = filterItems(mockFileData.files); + const filteredFolders = filterItems(mockFileData.folders); + // Apply type filter if (selectedType !== "all") { - filtered = filtered.filter((file) => file.type === selectedType); + filteredFiles = filteredFiles.filter((file) => file.type === selectedType); } - + + // Apply date or size filter only to files if (activeFilter === "date") { - filtered = [...filtered].sort( - (a, b) => b.createdAt.getTime() - a.createdAt.getTime() - ); + filteredFiles = [...filteredFiles].sort((a, b) => { + if ('lastModified' in a && 'lastModified' in b) { + return new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime(); + } + return 0; + }); } else if (activeFilter === "size") { - const convertToBytes = (size: string | undefined) => { - if (!size) return 0; + const convertToBytes = (size: string) => { const num = parseFloat(size); if (size.includes("GB")) return num * 1024 * 1024 * 1024; if (size.includes("MB")) return num * 1024 * 1024; if (size.includes("KB")) return num * 1024; return num; }; - filtered = [...filtered].sort((a, b) => { - const sizeA = convertToBytes(a.size); - const sizeB = convertToBytes(b.size); - return sizeB - sizeA; + filteredFiles = [...filteredFiles].sort((a, b) => { + if ('size' in a && 'size' in b) { + return convertToBytes(b.size) - convertToBytes(a.size); + } + return 0; }); } - - return filtered; + + return { + files: filteredFiles, + folders: filteredFolders, + }; }, [searchTerm, activeFilter, selectedType]); + - const [selectedFile, setSelectedFile] = React.useState(null); - + return (
@@ -208,7 +255,7 @@ export default function Page() {
- {filteredAndSortedData.map((file, index) => ( -
setSelectedFile(file.title)} - > - - {selectedFile === file.title && ( -
- - - {selectedFile && ( -
{ - if (e.key === "Escape") { - setSelectedFile(null); - } - }} - className="focus:outline-none" - /> - )} - -
- {file.type === "image" ? ( - {file.title} - ) : file.type === "video" ? ( - - ) : ( -
- {file.title} -
- )} -
-
- )} -
+ {filteredAndSortedData.folders.map((folder) => ( + + ))} + {filteredAndSortedData.files.map((file) => ( + ))}
- {selectedFile && ( -
setSelectedFile(null)} - /> - )}
); } diff --git a/components/files-component/files.tsx b/components/files-component/files.tsx index a6ac5a0..a3706d6 100644 --- a/components/files-component/files.tsx +++ b/components/files-component/files.tsx @@ -11,18 +11,18 @@ import { import { Card, CardContent } from "@/components/ui/card"; interface FileData { - title: string; + name: string; itemCount?: number; size?: string; + extension?: string; } interface FileProps { - type: "document" | "compressed" | "image" | "audio" | "video" | "folder"; + type: "document" | "compressed" | "image" | "audio" | "video" | "folder" | "unknown"; data: FileData; } export default function Files({ type, data }: FileProps) { - const ext = type !== "folder" ? data.title.split(".").pop() : undefined; const getIconProperties = () => { switch (type) { case "document": @@ -85,14 +85,14 @@ export default function Files({ type, data }: FileProps) { 13 ? "group-hover:animate-marquee" : "" + data.name.length > 13 ? "group-hover:animate-marquee" : "" } inline-block`} > - {data.title} + {data.name}

- {ext?.toUpperCase()}{" "} + {(data.extension ?? "").toUpperCase()}{" "} {type === "folder" ? `${data.itemCount} items` : `• ${data.size}`} diff --git a/static/files.ts b/static/files.ts new file mode 100644 index 0000000..b12b52d --- /dev/null +++ b/static/files.ts @@ -0,0 +1,49 @@ +export const files = [ + { + name: "root", + location: "", + folders: [ + { + name: "Important Docs", + location: "Important Docs/", + folders: [ + { + name: "Academic Docs", + location: "Important Docs/Academic Docs/", + folders: [], + files: [ + { + name: "Adhaar Card.jpg", + location: "Important Docs/Academic Docs/Adhaar Card.jpg", + size: 217267, + lastModified: "2023-08-19T13:23:44Z", + extension: "jpg", + etag: "93b0647a51bffcce370ef6eba91e791c", + }, + { + name: "Class X Marksheet (Digilocker).pdf", + location: + "Important Docs/Academic Docs/Class X Marksheet (Digilocker).pdf", + size: 128659, + lastModified: "2023-08-19T13:23:46Z", + extension: "pdf", + etag: "797704ac2c66f0efb6974549c195c1f5", + }, + ], + }, + ], + files: [], + }, + ], + files: [ + { + name: "CCNA-Cert.pdf", + location: "CCNA-Cert.pdf", + size: 130155, + lastModified: "2025-02-23T02:21:17Z", + extension: "pdf", + etag: "c9c7a4f58629b9f7cfc908815a158038", + }, + ], + }, +]; diff --git a/types/S3Objects.ts b/types/S3Objects.ts new file mode 100644 index 0000000..83a8627 --- /dev/null +++ b/types/S3Objects.ts @@ -0,0 +1,29 @@ +interface S3File { + name: string; + location: string; + size: string; + lastModified: string; + extension: string; + etag: string; + type: "document" | "compressed" | "image" | "audio" | "video" | "unknown"; +} + +interface S3Folder { + name: string; + location: string; + type: "folder"; + itemCount: number; + folders: S3Folder[]; + files: S3File[]; +} + +interface S3Root { + name: string; + location: string; + type: "folder"; + itemCount: number; + folders: S3Folder[]; + files: S3File[]; +} + +export type { S3File, S3Folder, S3Root }; From 2648c35f35c54abe9ec39167ad3b562e27a808d0 Mon Sep 17 00:00:00 2001 From: vikas Date: Tue, 18 Mar 2025 00:25:45 +0530 Subject: [PATCH 2/2] #Fixed Middleware issue --- lib/auth.ts | 2 +- middleware.ts | 2 +- services/bucketService.ts | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/auth.ts b/lib/auth.ts index 283ea0e..9e43416 100644 --- a/lib/auth.ts +++ b/lib/auth.ts @@ -16,7 +16,7 @@ export async function isAuthenticated(): Promise { method: "GET", headers: { "Content-Type": "application/json", - "Session-Token": sessionToken, + "sessionToken": sessionToken, }, }); diff --git a/middleware.ts b/middleware.ts index b473196..8c0f71a 100644 --- a/middleware.ts +++ b/middleware.ts @@ -14,7 +14,7 @@ export default async function middleware(req: NextRequest) { } if (isPublic && user) { - return NextResponse.redirect(new URL('/dashboard', req.nextUrl).toString()); + return NextResponse.redirect(new URL('/dashboard/buckets', req.nextUrl).toString()); } return NextResponse.next(); diff --git a/services/bucketService.ts b/services/bucketService.ts index 4340ccf..5b024fa 100644 --- a/services/bucketService.ts +++ b/services/bucketService.ts @@ -19,7 +19,8 @@ function getSessionToken(): string | null { */ export async function fetchBuckets() { const sessionToken = getSessionToken(); - + console.log(sessionToken); + if (!sessionToken) { throw new Error("No session token found. Please log in."); }