Skip to content

Commit 41ad2e0

Browse files
AamjitAamjit
authored
Merge pull request #5 from Aamjit/Dev2
Dev2
2 parents 21f1f99 + 5a10559 commit 41ad2e0

File tree

21 files changed

+456
-201
lines changed

21 files changed

+456
-201
lines changed

‎FirebaseConfig.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,5 @@ const firebaseConfig = {
1313
appId: process.env.NEXT_PUBLIC_FB_APP_ID,
1414
};
1515

16-
// console.log(process?.env)
17-
1816
// Initialize Firebase
1917
export const app = initializeApp(firebaseConfig);

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
22

3-
*Note: Your contribution is appreciated*
4-
53
## Getting Started
64

75
First, run the development server:
@@ -26,8 +24,8 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
2624

2725
To learn more about Next.js, take a look at the following resources:
2826

29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
3129

3230
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
3331

‎app/(auth)/layout.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { auth } from "@clerk/nextjs";
33
import { redirect } from "next/navigation";
44

55
function layout({ children }) {
6-
// Get the userId from auth() -- if null, the user is not signed in
76
const { userId } = auth();
87

98
return <div>{userId ? redirect("/uploads") : children}</div>;

‎app/(dashboard)/(routes)/file-preview/[fileId]/_components/FileInfo.js‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

app/(dashboard)/(routes)/file-preview/[fileId]/_components/FileForm.js renamed to app/(dashboard)/(routes)/file-preview/_components/FileForm.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function FileForm({ file, updatePassword, sendEmail }) {
134134
className="w-full bg-primary text-white rounded-lg py-1.5 my-2.5"
135135
onClick={(e) => {
136136
e.preventDefault();
137-
sendEmail(targetEmail);
137+
sendEmail(targetEmail, file);
138138
}}
139139
>
140140
{" "}

‎app/(dashboard)/(routes)/file-preview/_components/FileInfo.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Image from "next/image";
2+
import React, { useEffect, useState } from "react";
3+
4+
function FileInfo({ file }) {
5+
const [fileType, setFileType] = useState();
6+
7+
useEffect(() => {
8+
file && setFileType(file?.FileType.split("/")[0]);
9+
// console.log(file);
10+
}, []);
11+
12+
return (
13+
file && (
14+
<div
15+
className="text-center border flex justify-center flex-col items-center
16+
p-4 rounded-md border-blue-300 md:w-2/3"
17+
>
18+
<Image
19+
src={fileType == "image" ? file?.FileUrl : "/documents.png"}
20+
width={300}
21+
height={300}
22+
alt="Preview"
23+
/>
24+
<h2 className="my-4 break-words max-w-36 min-w-36">
25+
{file?.FileName}
26+
</h2>
27+
<p className="mb-2 text-xs text-blue-400 dark:text-gray-400">
28+
<span className="w-fit text-wrap">{file?.FileType}</span>
29+
</p>
30+
<p className="text-sm text-gray-400 dark:text-gray-200">
31+
<span className="font-semibold">
32+
{(file?.FileSize / 1024 / 1024).toFixed(2)} MB
33+
</span>
34+
</p>
35+
</div>
36+
)
37+
);
38+
}
39+
40+
export default FileInfo;

app/(dashboard)/(routes)/file-preview/[fileId]/page.js renamed to app/(dashboard)/(routes)/file-preview/page.js

Lines changed: 84 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,70 @@
11
"use client";
22
// import { app } from "@/FirebaseConfig";
3-
import { app } from "../../../../../FirebaseConfig";
4-
import { doc, getDoc, getFirestore, updateDoc } from "firebase/firestore";
3+
import { app } from "../../../../FirebaseConfig";
4+
import {
5+
doc,
6+
getDoc,
7+
getDocs,
8+
query,
9+
collection,
10+
getFirestore,
11+
updateDoc,
12+
where,
13+
documentId,
14+
} from "firebase/firestore";
515
import React, { useEffect, useState } from "react";
616
import FileInfo from "./_components/FileInfo";
717
import FileForm from "./_components/FileForm";
818
import Link from "next/link";
9-
import { useRouter } from "next/navigation";
19+
import { useRouter, useSearchParams } from "next/navigation";
1020
import { useUser } from "@clerk/nextjs";
11-
import Loading from "../../../_components/loading";
12-
import LoadingRing from "../../../_components/loadingRing";
13-
import EmptyData from "../../../../_components/EmptyData";
14-
import GlobalApi from "../../../../_utils/GlobalApi";
15-
import HashApi from "../../../../_utils/HashApi";
21+
import Loading from "../../_components/loading";
22+
import LoadingRing from "../../_components/loadingRing";
23+
import EmptyData from "../../../_components/EmptyData";
24+
import GlobalApi from "../../../_utils/GlobalApi";
25+
import HashApi from "../../../_utils/HashApi";
1626
import toast from "react-hot-toast";
17-
import Constant from "../../../../_utils/Constant";
27+
import Constant from "../../../_utils/Constant";
1828
// Icons
1929
import { FaArrowAltCircleLeft } from "react-icons/fa";
2030

2131
function FilePreview({ params }) {
2232
const router = useRouter();
23-
const [file, setFile] = useState();
33+
const searchParams = useSearchParams();
34+
const [files, setFiles] = useState([]);
2435
const db = getFirestore(app);
2536
const User = useUser().user;
2637
const [isLoading, setIsLoading] = useState(true);
2738
const [isSending, setIsSending] = useState(false);
39+
const fileId = searchParams.get("fileId").split(",");
40+
41+
// console.log(params, searchParams.get("fileId"));
2842

2943
useEffect(() => {
30-
!file && getFileInfo(params?.fileId);
31-
}, [params]);
44+
files.length == 0 && getFileInfo(fileId);
45+
}, [fileId]);
46+
47+
const getFileInfo = async (ids) => {
48+
const q = query(
49+
collection(db, Constant?.fs_uploaded_files),
50+
where(documentId(), "in", [...ids])
51+
);
3252

33-
const getFileInfo = async (id) => {
34-
const docRef = doc(db, Constant?.fs_uploaded_files, id);
35-
const docSnap = await getDoc(docRef);
53+
// Promise.all();
54+
// const docRef = ids.map((id) =>
55+
// doc(db, Constant?.fs_uploaded_files, id)
56+
// );
57+
const docSnap = await getDocs(q);
58+
59+
if (docSnap) {
60+
// console.log(docSnap);
61+
let docDatas = [];
62+
docSnap.forEach((doc) => {
63+
docDatas.push(doc.data());
64+
});
65+
setFiles(docDatas);
3666

37-
if (docSnap.exists()) {
38-
setFile(docSnap.data());
67+
// setFile(docSnap.data());
3968
setIsLoading(false);
4069
} else {
4170
setIsLoading(false);
@@ -81,7 +110,7 @@ function FilePreview({ params }) {
81110
}
82111
};
83112

84-
const sendEmail = (targetEmail) => {
113+
const sendEmail = (targetEmail, file) => {
85114
if (!targetEmail) {
86115
toast.error(`Email Id is empty.`);
87116
return;
@@ -120,31 +149,44 @@ function FilePreview({ params }) {
120149

121150
return isLoading ? (
122151
Loading("Loading")
123-
) : file ? (
124-
<div>
125-
{isSending && LoadingRing("Sending File Details...")}
126-
<div className="py-4 px-10">
127-
<Link
128-
href={""}
129-
onClick={() => router.back()}
130-
className="flex items-center my-4 gap-4 w-fit"
131-
>
132-
<FaArrowAltCircleLeft size={25} /> Go Back
133-
</Link>
134-
<div className="flex gap-5 flex-col md:flex-row flex-grow">
135-
<FileInfo file={file} />
136-
{file?.FileId && User && (
137-
<FileForm
138-
file={file}
139-
updatePassword={updatePassword}
140-
sendEmail={sendEmail}
141-
/>
142-
)}
143-
</div>
144-
</div>
145-
</div>
146152
) : (
147-
<EmptyData />
153+
<>
154+
<Link
155+
href={""}
156+
onClick={() => router.back()}
157+
className="flex items-center m-4 gap-4 w-fit"
158+
>
159+
<FaArrowAltCircleLeft size={25} /> Go Back
160+
</Link>
161+
{files.length > 0 ? (
162+
files.map((file) => (
163+
<div key={file?.FileId}>
164+
{isSending && LoadingRing("Sending File Details...")}
165+
<div className="py-4 px-10">
166+
{/* <Link
167+
href={""}
168+
onClick={() => router.back()}
169+
className="flex items-center my-4 gap-4 w-fit"
170+
>
171+
<FaArrowAltCircleLeft size={25} /> Go Back
172+
</Link> */}
173+
<div className="flex gap-5 flex-col md:flex-row flex-grow">
174+
<FileInfo file={file} />
175+
{file?.FileId && User && (
176+
<FileForm
177+
file={file}
178+
updatePassword={updatePassword}
179+
sendEmail={sendEmail}
180+
/>
181+
)}
182+
</div>
183+
</div>
184+
</div>
185+
))
186+
) : (
187+
<EmptyData />
188+
)}
189+
</>
148190
);
149191
}
150192

‎app/(dashboard)/(routes)/uploads/_components/FilePreview.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,30 @@ import React from "react";
33
// Icons
44
import { MdCancel } from "react-icons/md";
55

6-
function FilePreview({ File, removeFile }) {
7-
8-
return (
9-
<div className="w-full bg-blue-50 flex flex-col gap-2 mt-3 p-4 border rounded-md">
10-
<div className="w-full flex justify-center">
11-
<Image src="/documents.png" width={50} height={50} alt="File" />
12-
</div>
13-
<div className="flex flex-col text-center">
14-
<h2>{File.name}</h2>
15-
<h2 className="text-[12px] text-gray-500">
16-
{File.type} - {(File.size / 1024 / 1024).toFixed(2)}MB
17-
</h2>
18-
</div>
19-
<MdCancel size={30} className="absolute hover:cursor-pointer text-red-500" onClick={()=>removeFile()}/>
20-
</div>
21-
);
6+
function FilePreview({ File, removeFile, index }) {
7+
return (
8+
<div className="w-full bg-blue-50 flex flex-col gap-2 mt-3 p-4 border rounded-md">
9+
<div className="w-full flex justify-center">
10+
<Image src="/documents.png" width={50} height={50} alt="File" />
11+
</div>
12+
<div className="flex flex-col text-center">
13+
<h2>{File.name}</h2>
14+
<h2 className="text-[12px] text-gray-500">
15+
{File.type} - {(File.size / 1024 / 1024).toFixed(2)}MB
16+
</h2>
17+
</div>
18+
<button
19+
className="absolute hover:cursor-pointer text-red-500"
20+
id={index}
21+
onClick={(e) => {
22+
e.preventDefault();
23+
removeFile(e?.currentTarget.id);
24+
}}
25+
>
26+
<MdCancel size={30} type="button" key={index} id={index} />
27+
</button>
28+
</div>
29+
);
2230
}
2331

2432
export default FilePreview;

‎app/(dashboard)/(routes)/uploads/_components/ProgressBar.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React from "react";
22

33
function ProgressBar({ progress }) {
4-
return (
5-
<>
6-
<div className="border-gray-400 border-2 w-full mt-3 rounded-full">
7-
<div
8-
className="bg-primary rounded-full text-xs text-center text-white"
9-
style={{ width: `${progress}%` }}
10-
>
11-
{`${Number(progress).toFixed(1)}%`}
12-
</div>
13-
</div>
14-
</>
15-
);
4+
return (
5+
<>
6+
<div className="border-gray-400 border-2 w-full mt-3 rounded-full">
7+
<div
8+
className="bg-primary rounded-full text-xs text-center text-white"
9+
style={{ width: `${progress?.progress}%` }}
10+
>
11+
{`${Number(progress?.progress).toFixed(1)}%`}
12+
</div>
13+
</div>
14+
<span className="text-gray-400 mt-2">{progress?.fileName}</span>
15+
</>
16+
);
1617
}
1718

1819
export default ProgressBar;

0 commit comments

Comments
 (0)