From c46ea19319b71ff11b3078a48f1e9f02b95b5adc Mon Sep 17 00:00:00 2001 From: vishal Date: Mon, 1 Jul 2024 14:04:43 +0530 Subject: [PATCH] fix: path added in params --- app/(private)/drive/[path]/page.tsx | 236 ------------------------- app/(private)/drive/page.tsx | 50 +++--- app/api/drive/files/route.ts | 39 +++- app/api/drive/get-path/route.ts | 18 +- components/Breadcrumbs/Breadcrumbs.tsx | 2 +- 5 files changed, 67 insertions(+), 278 deletions(-) delete mode 100644 app/(private)/drive/[path]/page.tsx diff --git a/app/(private)/drive/[path]/page.tsx b/app/(private)/drive/[path]/page.tsx deleted file mode 100644 index c212d9a..0000000 --- a/app/(private)/drive/[path]/page.tsx +++ /dev/null @@ -1,236 +0,0 @@ -'use client'; - -import { - ActionIcon, - ActionIconGroup, - Button, - FileInput, - Group, - Modal, - rem, - Table, - Text, - TextInput, - ThemeIcon, -} from '@mantine/core'; -import { useDisclosure } from '@mantine/hooks'; -import { notifications } from '@mantine/notifications'; -import { - IconCheck, - IconFile, - IconFileUpload, - IconFolder, - IconFolderPlus, - IconFolderSymlink, - IconTrash, -} from '@tabler/icons-react'; -import { useParams, useRouter } from 'next/navigation'; -import { useEffect, useRef, useState } from 'react'; -import Breadcrumbs from '@/components/Breadcrumbs'; -import FileTable from '@/components/Drive/FileTable'; -import useFetchData from '@/hooks/useFetchData'; -import { apiCall, failure, openModal } from '@/lib/client_functions'; - -const DrivePage = () => { - const params = useParams(); - const { data, refetch } = useFetchData(`/api/drive/files?parent=${params?.path}`); - const { data: path } = useFetchData(`/api/drive/get-path?file=${params?.path}`); - - const [openMoveDialog, setOpenMoveDialog] = useState(false); - const [__path, __setPath] = useState(''); - const [_path, _setPath] = useState(); - const [checked, setChecked] = useState([]); - const [value, setValue] = useState([]); - const [opened, { open, close }] = useDisclosure(false); - const [folderName, setFolderName] = useState('Untitled folder'); - const router = useRouter(); - const ref = useRef(null); - - const handleNewFolder = async () => { - await apiCall('/api/drive/files', { name: folderName, parent: params.path }, 'POST'); - close(); - setFolderName('Untitled folder'); - refetch(); - }; - - const getFile = async (Key: string) => { - const res = await apiCall(`/api/drive/files/upload?Key=${encodeURI(Key)}`); - window.open(res?.data, '_blank', 'noopener,noreferrer'); - }; - - const deleteFile = async () => { - await apiCall(`/api/drive/files?_id=${JSON.stringify(checked)}`, null, 'DELETE'); - refetch(); - setChecked([]); - }; - - const handleSubmit = async () => { - const id = notifications.show({ - loading: true, - title: 'Uploading files', - message: 'Please wait while we upload your files', - autoClose: false, - withCloseButton: false, - }); - try { - const formData = new FormData(); - value.forEach((file) => formData.append('file', file, file.name)); - formData.append('parent', String(params.path)); - await apiCall('/api/drive/files/upload', formData, 'POST'); - } catch (err) { - failure('Error uploading file'); - } finally { - setValue([]); - refetch(); - notifications.update({ - id, - color: 'green', - message: 'File uploaded successfully', - icon: , - loading: false, - autoClose: 2000, - }); - } - }; - - const openFile = (item: any) => - item.link ? getFile(item.link) : router.push(`/drive/${item?._id}`); - - const moveFile = async (item: any) => { - await apiCall('/api/drive/files', item, 'PUT'); - setOpenMoveDialog(false); - _setPath([]); - __setPath(''); - refetch(); - setChecked([]); - }; - - const getPath = async () => { - if (__path) { - const res = await apiCall(`/api/drive/files?parent=${__path}`); - _setPath(res?.data); - } else { - const res = await apiCall('/api/drive/files'); - _setPath(res?.data); - } - }; - - useEffect(() => { - if (value.length) { - handleSubmit(); - } - }, [value]); - - useEffect(() => { - getPath(); - }, [__path]); - - return ( - <> - - - - - - - - ref.current?.click()} variant="outline" color="blue"> - - - {!!checked.length && ( - <> - { - setOpenMoveDialog(true); - __setPath(String(params?.path)); - }} - > - - - - openModal('Are you sure? You want to delete selected files??', deleteFile) - } - variant="outline" - color="red" - > - - - - )} - - - - - - - setFolderName(e.target.value)} - placeholder="Untitled file" - data-autofocus - onFocus={(e) => e.target.select()} - /> - - - - - - - setOpenMoveDialog(false)}> - - {_path?.[0]?.parent && ( - - __setPath(_path?.[0]?.parent?.parent || '')} - > - ... - - - )} - {_path - ?.filter(({ _id }) => !checked.includes(_id)) - ?.map((test) => ( - - - !test.link && __setPath(test._id || '')} - > - - {test.link ? : } - - {test.name} - - - - ))} -
- - - - - - - ); -}; - -export default DrivePage; diff --git a/app/(private)/drive/page.tsx b/app/(private)/drive/page.tsx index 3afb5e5..b42847e 100644 --- a/app/(private)/drive/page.tsx +++ b/app/(private)/drive/page.tsx @@ -24,7 +24,7 @@ import { IconFolderSymlink, IconTrash, } from '@tabler/icons-react'; -import { useParams, useRouter } from 'next/navigation'; +import { useParams, useRouter, useSearchParams } from 'next/navigation'; import { useEffect, useRef, useState } from 'react'; import Breadcrumbs from '@/components/Breadcrumbs'; import FileTable from '@/components/Drive/FileTable'; @@ -32,8 +32,11 @@ import useFetchData from '@/hooks/useFetchData'; import { apiCall, failure, openModal } from '@/lib/client_functions'; const DrivePage = () => { + const searchParams = useSearchParams(); const params = useParams(); - const { data, refetch } = useFetchData('/api/drive/files'); + const { data, refetch } = useFetchData( + `/api/drive/files${searchParams.get('_id') ? `?parent=${searchParams.get('_id')}` : ''}` + ); const [openMoveDialog, setOpenMoveDialog] = useState(false); const [__path, __setPath] = useState(''); @@ -93,7 +96,7 @@ const DrivePage = () => { }; const openFile = (item: any) => - item.link ? getFile(item.link) : router.push(`/drive/${item?._id}`); + item.link ? getFile(item.link) : router.push(`/drive?_id=${item?._id}`); const moveFile = async (item: any) => { await apiCall('/api/drive/files', item, 'PUT'); @@ -105,13 +108,8 @@ const DrivePage = () => { }; const getPath = async () => { - if (__path) { - const res = await apiCall(`/api/drive/files?parent=${__path}`); - _setPath(res?.data); - } else { - const res = await apiCall('/api/drive/files'); - _setPath(res?.data); - } + const res = await apiCall(`/api/drive/files${__path ? `?parent=${__path}` : ''}`); + _setPath(res?.data?.files); }; useEffect(() => { @@ -127,7 +125,7 @@ const DrivePage = () => { return ( <> - + @@ -164,7 +162,7 @@ const DrivePage = () => { - + { { setOpenMoveDialog(false); @@ -192,29 +190,27 @@ const DrivePage = () => { }} > - {_path?.[0]?.parent && ( - - __setPath(_path?.[0]?.parent?.parent || '')} - > - ... - - - )} + + __setPath(_path?.[0]?.parent?.parent || '')} + > + ... + + {_path ?.filter(({ _id }) => !checked.includes(_id)) ?.map((test) => ( !test.link && __setPath(test._id || '')} + style={{ cursor: !test?.link ? 'pointer' : 'default' }} + onClick={() => !test?.link && __setPath(test?._id || '')} > - {test.link ? : } + {test?.link ? : } - {test.name} + {test?.name} diff --git a/app/api/drive/files/route.ts b/app/api/drive/files/route.ts index 3499459..0ad27aa 100644 --- a/app/api/drive/files/route.ts +++ b/app/api/drive/files/route.ts @@ -24,16 +24,41 @@ export async function GET(req: NextRequest) { await startDb(); const parent = req.nextUrl.searchParams.get('parent') ?? null; - if (parent && !Types.ObjectId.isValid(parent)) { - return NextResponse.json({ error: 'File not found' }, { status: 404 }); - } - const files = await File.find({ user: session?.user._id, parent }) .select('-createdAt -user -__v') - .populate({ path: 'parent', select: 'parent' }) - // .populate({ path: 'user', select: 'name' }) + .populate({ path: 'parent', select: 'name parent' }) .sort('-updatedAt'); - return NextResponse.json(files, { status: 200 }); + + const basePath = { + _id: '', + name: 'Drive', + parent: '', + }; + + if (!parent) { + return NextResponse.json({ files, path: [basePath] }, { status: 200 }); + } + + if (!Types.ObjectId.isValid(parent)) { + return NextResponse.json({ error: 'File not found' }, { status: 404 }); + } + + const currentFile = await File.findById(parent).select('name parent'); + + if (!currentFile) { + return NextResponse.json({ error: 'File not found' }, { status: 404 }); + } + + let test: Types.ObjectId | null = currentFile?.parent; + let path = [currentFile]; + + while (test !== null) { + const parentFile: any = await File.findById(parent).select('name parent'); + test = parentFile?.parent; + path = [parentFile, ...path]; + } + + return NextResponse.json({ files, path: [basePath, ...path] }, { status: 200 }); } catch (error: any) { return NextResponse.json({ error: error?.message }, { status: 500 }); } diff --git a/app/api/drive/get-path/route.ts b/app/api/drive/get-path/route.ts index 371ce03..adf0d92 100644 --- a/app/api/drive/get-path/route.ts +++ b/app/api/drive/get-path/route.ts @@ -15,7 +15,17 @@ export async function GET(req: NextRequest) { await startDb(); const file = req.nextUrl.searchParams.get('file'); - if (!file || !Types.ObjectId.isValid(file)) { + const basePath = { + _id: '', + name: 'Drive', + parent: '', + }; + + if (!file) { + return NextResponse.json([basePath], { status: 200 }); + } + + if (!Types.ObjectId.isValid(file)) { return NextResponse.json({ error: 'File not found' }, { status: 404 }); } @@ -34,12 +44,6 @@ export async function GET(req: NextRequest) { path = [parentFile, ...path]; } - const basePath = { - _id: '', - name: 'Drive', - parent: '', - }; - return NextResponse.json([basePath, ...path], { status: 200 }); } catch (error: any) { return NextResponse.json({ error: error?.message }, { status: 500 }); diff --git a/components/Breadcrumbs/Breadcrumbs.tsx b/components/Breadcrumbs/Breadcrumbs.tsx index cee3f14..d5adfab 100644 --- a/components/Breadcrumbs/Breadcrumbs.tsx +++ b/components/Breadcrumbs/Breadcrumbs.tsx @@ -10,7 +10,7 @@ const Breadcrumbs = ({ path }: { path: any }) => {