zaremate/file-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: implement public file visibility feature and enhance search functionality

Browse Source
This commit is contained in:
ZareMate 2025-05-09 10:51:48 +02:00
parent 792b0eb275
commit 99397e774c
Signed by: zaremate
GPG Key ID: 369A0E45E03A81C3
10 changed files with 254 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
prisma/schema.prisma
View File

@ -15,17 +15,6 @@ datasource db {
url = env("DATABASE_URL")
}
model Post {
id Int @id @default(autoincrement())
name String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
createdBy User @relation(fields: [createdById], references: [id])
createdById String
@@index([name])
}
// Necessary for Next auth
model Account {
@ -63,7 +52,6 @@ model User {
image String?
accounts Account[]
sessions Session[]
posts Post[]
files File[] // Relation to the File model
}
@ -85,4 +73,5 @@ model File {
description String @default("")
uploadedBy User? @relation(fields: [uploadedById], references: [id], onDelete: SetNull)
uploadedById String?
public Boolean @default(false) // Indicates if the file is public or private
}

47
src/app/_components/ActionButtons.tsx
View File

@ -1,4 +1,4 @@
'use client';
"use client";
import { useRef, useState } from "react";
import { useFileActions } from "~/app/_components/FileActions";
@ -7,11 +7,13 @@ export function FileActionsContainer({
fileName,
fileUrl,
isOwner,
isPublic,
}: {
fileId: string;
fileName: string;
fileUrl: string;
isOwner: boolean;
isPublic: boolean;
}) {
const { handleDownload, handleCopyUrl, handleRemove} = useFileActions(() => fileId, (description: string) => {
if (isOwner) {
@ -36,14 +38,55 @@ export function FileActionsContainer({
>
<img src="/icons/copy.svg" alt="Copy URL" className="w-6 h-6" />
</button>
{/* Remove Button */}
{isOwner && (
<button
onClick={() => handleRemove(fileId)}
className="flex items-center justify-center rounded-full bg-red-500 p-2 hover:bg-red-600"
>
<img src="/icons/delete.svg" alt="Remove" className="w-6 h-6" />
</button>
)}
{isOwner && (
<div className="mt-4 flex items-center gap-2">
<label className="text-sm">
Public:
</label>
<label
htmlFor={`public-toggle-${fileId}`}
className="relative inline-flex items-center cursor-pointer"
>
<input
id={`public-toggle-${fileId}`}
type="checkbox"
checked={isPublic} // Ensure this reflects the prop
onChange={async (e) => {
const newIsPublic = e.target.checked;
try {
const response = await fetch(`/api/files/update-public`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ fileId: fileId, isPublic: newIsPublic }),
});
if (!response.ok) {
throw new Error("Failed to update public status");
}
console.log("Public status updated successfully");
} catch (err) {
console.error("Error updating public status:", err);
}
}}
className="sr-only peer"
/>
{/* Toggle Background */}
<div className="w-10 h-5 bg-gray-300 rounded-full peer-checked:bg-green-500 peer-focus:ring-2 peer-focus:ring-green-300 transition-colors"></div>
{/* Toggle Handle */}
<div className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></div>
</label>
</div>
)}
</div>
);
}

4
src/app/_components/FileGrid.tsx
View File

@ -15,6 +15,7 @@ interface FileDetails {
description: string;
extension: string;
isOwner: boolean; // Indicates if the user owns the file
isPublic: boolean; // Indicates if the file is public
}
interface FileGridProps {
@ -116,7 +117,8 @@ export default function FileGrid({ session }: FileGridProps) {
fileId={file.id}
fileName={file.name}
fileUrl={file.url}
isOwner={file.isOwner}
isOwner={true}
isPublic={file.isPublic}
/>
</div>
</div>

25
src/app/api/files/search/route.ts Normal file
View File

@ -0,0 +1,25 @@
import { NextResponse } from "next/server";
import { db } from "~/server/db";
export async function GET(req: Request) {
const url = new URL(req.url);
const query = url.searchParams.get("query") || "";
try {
// if query is empty, return no files
const files = await db.file.findMany({
where: {
OR: [
{ name: { contains: query } },
{ description: { contains: query } },
],
public: true,
},
});
return NextResponse.json({ files });
} catch (error) {
console.error("Error fetching files:", error);
return NextResponse.json({ error: "Failed to fetch files" }, { status: 500 });
}
}

1
src/app/api/files/share/route.ts
View File

@ -32,6 +32,7 @@ export async function GET(req: Request) {
type: file.extension,
url: file.url,
description: file.description,
isPublic: file.public, // Ensure this is included
});
} catch (error) {
console.error("Error fetching file details:", error);

22
src/app/api/files/update-public/route.ts Normal file
View File

@ -0,0 +1,22 @@
import { NextResponse } from "next/server";
import { db } from "~/server/db";
export async function POST(req: Request) {
try {
const { fileId, isPublic } = await req.json();
if (!fileId) {
return NextResponse.json({ error: "File ID is required" }, { status: 400 });
}
await db.file.update({
where: { id: fileId },
data: { public: isPublic },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error("Error updating public status:", error);
return NextResponse.json({ error: "Failed to update public status" }, { status: 500 });
}
}

45
src/app/page.tsx
View File

@ -8,14 +8,35 @@ import { Toaster } from "react-hot-toast";
export default async function Home() {
const session = await auth();
return (
<HydrateClient>
<Toaster position="top-right" reverseOrder={false} />
<main className="relative flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
{/* Top-right corner sign-out button */}
{session?.user && (
<div className="absolute top-4 right-4">
<div className="absolute top-4 right-4 flex items-center gap-4">
{/* Search Button */}
<Link
href="/search"
className="rounded-full bg-white/10 p-2 transition hover:bg-white/20"
aria-label="Search"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-4.35-4.35M16.65 10.65a6 6 0 11-12 0 6 6 0 0112 0z"
/>
</svg>
</Link>
<Link
href="/api/auth/signout"
className="rounded-full bg-white/10 px-4 py-2 font-semibold no-underline transition hover:bg-white/20"
@ -33,7 +54,7 @@ export default async function Home() {
{session?.user ? (
<>
<FileGrid session={session} />
<UploadForm/>
<UploadForm />
</>
) : (
<p className="text-center text-2xl text-white">
@ -41,16 +62,16 @@ export default async function Home() {
</p>
)}
{!session?.user && (
<div className="flex flex-col items-center gap-2">
<div className="flex flex-col items-center justify-center gap-4">
<Link
href={session ? "/api/auth/signout" : "/api/auth/signin"}
className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
>
{session ? "Sign out" : "Sign in"}
</Link>
<div className="flex flex-col items-center gap-2">
<div className="flex flex-col items-center justify-center gap-4">
<Link
href={session ? "/api/auth/signout" : "/api/auth/signin"}
className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
>
{session ? "Sign out" : "Sign in"}
</Link>
</div>
</div>
</div>
)}
</div>
</main>

121
src/app/search/page.tsx Normal file
View File

@ -0,0 +1,121 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { env } from "~/env.js";
import { FilePreview } from "~/app/_components/FilePreview";
import { FileActionsContainer } from "~/app/_components/ActionButtons";
import { HomeButton } from "~/app/_components/HomeButton";
interface FileDetails {
name: string;
size: number;
owner: string;
ownerAvatar: string | null;
uploadDate: string;
id: string;
isOwner: boolean;
extension: string;
url: string;
description: string;
isPublic: boolean;
}
export default function SearchFile() {
const [searchQuery, setSearchQuery] = useState<string>("");
const [files, setFiles] = useState<FileDetails[]>([]);
const [error, setError] = useState<string | null>(null);
const pageUrl = env.NEXT_PUBLIC_PAGE_URL;
const router = useRouter();
useEffect(() => {
const fetchFiles = async () => {
try {
const response = await fetch(
`/api/files/search?query=${encodeURIComponent(searchQuery)}`
);
if (!response.ok) {
throw new Error("Failed to fetch files");
}
const data = await response.json();
setFiles(data.files);
} catch (err) {
console.error(err);
setError("Failed to load files.");
}
};
fetchFiles();
}, [searchQuery]);
return (
<main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
<div className="absolute top-4 left-4 z-20">
<HomeButton />
</div>
{/* Search Bar */}
<div className="sticky top-0 z-10 w-full bg-[#2e026d] px-4 py-4 shadow-md">
<div className="relative w-full max-w-md mx-auto">
<input
type="text"
placeholder="Search files..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full p-3 pl-12 text-white bg-[#3b0764] rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-gray-400"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute left-4 top-1/2 transform -translate-y-1/2 h-6 w-6 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-4.35-4.35M16.65 10.65a6 6 0 11-12 0 6 6 0 0112 0z"
/>
</svg>
</div>
</div>
{/* File Grid */}
<div className="flex-grow flex flex-col items-center justify-center w-full px-4">
{error && <div className="text-red-500">{error}</div>}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full max-w-7xl">
{files.map((file) => {
return (
<div
key={file.id}
className="flex place-content-end w-xxs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
>
<div className="self-center max-w-100 sm:max-w-50">
<FilePreview fileId={file.id} fileType={file.extension} />
</div>
<button onClick={() => router.push(pageUrl + file.url)}>
<h3 className="text-2xl font-bold">{file.name}</h3>
</button>
{file.description && (
<p className="text-sm text-gray-400">
Description: {file.description}
</p>
)}
<div className="flex self-center gap-2">
<FileActionsContainer
fileId={file.id}
fileName={file.name}
fileUrl={file.url}
isOwner={false} // Check if the user is the owner
isPublic={file.isPublic} // Check if the file is public
/>
</div>
</div>
);
})}
</div>
</div>
</main>
);
}

3
src/app/share/page.tsx
View File

@ -16,6 +16,7 @@ interface FileDetails {
type: string;
url: string;
description: string;
isPublic: boolean;
}
async function fetchFileDetails(fileId: string): Promise<FileDetails | null> {
@ -51,6 +52,7 @@ export default async function FilePreviewContainer({
}
const fileDetails = await fetchFileDetails(fileId);
if (!fileDetails) {
return (
@ -154,6 +156,7 @@ export default async function FilePreviewContainer({
fileName={fileDetails.name}
fileUrl={fileDetails.url}
isOwner={fileDetails.isOwner}
isPublic={fileDetails.isPublic}
/>
</div>
</div>

6
tailwind.config.ts
View File

@ -1,6 +0,0 @@
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}", // Ensure your paths are correct
],
plugins: [require("@tailwindcss/typography")],
};