✨ feat: add filters to uploads page

Adds a filter to the uploads page that allows users to filter uploads by the author.

- Added Filter component to uploads page
- Updated fetchUploads query to support authorId filtering
- Updated page component to pass projectUsers and currentUserId to Uploads component

Author: mangledbottles

apps/web/app/(dashboard)/app/Filter.tsx

@@ -0,0 +1,145 @@
+"use client";
+import * as React from "react";
+import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+
+interface FilterProps<TData, TValue> {
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  onChange: (value: string[]) => void;
+  defaultValue: string[] | undefined;
+}
+
+export function Filter<TData, TValue>({
+  title,
+  options,
+  onChange,
+  defaultValue = [],
+}: FilterProps<TData, TValue>) {
+  const [selectedValues, setSelectedValues] = React.useState(new Set(defaultValue));
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      setSelectedValues(new Set(filterValues));
+                      onChange(filterValues as string[]);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => {
+                      setSelectedValues(new Set());
+                      onChange([]);
+                    }}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/web/app/(dashboard)/app/Uploads.tsx

@@ -7,6 +7,10 @@ import { ArrowDownIcon } from "lucide-react";
 import Link from "next/link";
 import React, { useRef, useState } from "react";
 import { AiOutlineDownload, AiOutlineVideoCameraAdd } from "react-icons/ai";
+import { Filter } from "./Filter";
+import { Role } from "@prisma/client";
+import { toast } from "sonner";
+import { queryClient } from "@/components/TanQueryProvider";
 
 interface Upload {
   id: string;
@@ -25,10 +29,65 @@ interface Upload {
   deviceId: string;
 }
 
-const fetchUploads = async ({ pageParam = { offset: 0, limit: 10 } }) => {
+interface Filters {
+  authorIds: string[];
+}
+interface UploadsProps {
+  projectId: string;
+  projectUsers: {
+    id: string;
+    name: string;
+    role: Role;
+  }[];
+  currentUserId: string;
+  isUserOwner: boolean;
+}
+
+interface FetchUploadsType {
+  pageParam: { offset: number; limit: number };
+  projectId: string;
+  authorIds?: string[] | null;
+}
+
+const fetchUploads = async ({
+  pageParam = { offset: 0, limit: 10 },
+  projectId,
+  authorIds,
+}: FetchUploadsType) => {
   const { offset, limit } = pageParam;
-  const res = await fetch(`/api/uploads?offset=${offset}&limit=${limit}`);
-  if (!res.ok) throw new Error("Network response was not ok");
+  // Prepare the request body
+  const requestBody = {
+    offset,
+    limit,
+    projectId,
+    authorIds, // Ensure this matches the expected API parameter for author IDs
+  };
+  const res = await fetch(`/api/uploads/search`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+  });
+  if (!res.ok) {
+    const error = await res.json();
+    const errorMessage = error.error ?? error.message ?? "Could not filter.";
+    console.log({ error, errorMessage });
+
+    if (res.status === 403) {
+      // If a 403 error is encountered, cancel future refetches for this query
+      queryClient.cancelQueries({
+        queryKey: ["uploads", projectId, authorIds],
+      });
+      // Set a specific state in your query data to indicate a 403 error was encountered. Allows your UI to react accordingly
+      queryClient.setQueryData(["uploads", projectId, authorIds], {
+        error: "Forbidden",
+      });
+    }
+
+    toast.error(`${errorMessage}`);
+    throw new Error("Network response was not ok");
+  }
   const data = (await res.json()) as { uploads: Upload[]; total: number };
   const hasMore = offset + limit < data.total;
   return {
@@ -37,13 +96,21 @@ const fetchUploads = async ({ pageParam = { offset: 0, limit: 10 } }) => {
   };
 };
 
-export default function Uploads() {
+export default function Uploads({
+  projectId,
+  projectUsers,
+  currentUserId,
+  isUserOwner,
+}: UploadsProps) {
+  const [filters, setFilters] = useState<Filters>({ authorIds: [] });
+
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
     useInfiniteQuery({
-      queryKey: ["uploads"],
-      queryFn: fetchUploads,
+      queryKey: ["uploads", projectId, filters.authorIds],
+      queryFn: ({ pageParam }) =>
+        fetchUploads({ pageParam, projectId, authorIds: filters.authorIds }),
       getNextPageParam: (lastPage) => lastPage.nextPage,
-      initialPageParam: undefined,
+      initialPageParam: { offset: 0, limit: 10 },
     });
 
   const observer = useRef<IntersectionObserver>();
@@ -65,14 +132,28 @@ export default function Uploads() {
   const allUploads = data?.pages.flatMap((page) => page.uploads) || [];
 
   return (
-    <main className="flex-1 p-4 rounded overflow-hidden">
+    <main className="flex-1 p-2 rounded overflow-hidden">
+      {isUserOwner && (
+        <div className="flex flex-1 items-center space-x-2 pb-2">
+          <Filter
+            title="Created By"
+            options={projectUsers.map((user) => ({
+              label: user.name,
+              value: user.id,
+            }))}
+            onChange={(value: string[]) => setFilters({ authorIds: value })}
+            defaultValue={[currentUserId]}
+          />
+        </div>
+      )}
+
       {!isFetchingNextPage && !isFetching && allUploads.length === 0 && (
         <NoUploads />
       )}
       <div className="grid grid-cols-3 gap-4">
-        {allUploads.map((upload) => (
-          upload && <Upload upload={upload} key={upload.id} />
-        ))}
+        {allUploads.map(
+          (upload) => upload && <Upload upload={upload} key={upload.id} />
+        )}
         {(isFetchingNextPage || isFetching) && <UploadSkeleton quantity={10} />}
       </div>
 

apps/web/app/(dashboard)/app/page.tsx

@@ -1,5 +1,5 @@
 import { authOptions } from "@/app/api/auth/[...nextauth]/AuthOptions";
-import { PrismaClient } from "@prisma/client";
+import { Role } from "@prisma/client";
 import { getServerSession } from "next-auth";
 import { formatDistanceToNow } from "date-fns";
 import Link from "next/link";
@@ -58,6 +58,39 @@ export default async function Dashboard() {
     return;
   };
 
+  const isUserOwner = !!(await prisma.projectUsers.findFirst({
+    where: {
+      projectId: currentProjectId,
+      userId,
+      role: Role.owner,
+    },
+  })) ?? false;
+
+  const projectUsers = isUserOwner
+    ? await prisma.projectUsers
+        .findMany({
+          where: {
+            projectId: currentProjectId,
+          },
+          include: {
+            user: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        })
+        .then((users) => {
+          return users.map((user) => {
+            return {
+              id: user.userId,
+              name: user.user?.name || "",
+              role: user.role,
+            };
+          });
+        })
+    : [];
+
   return (
     <section className="relative">
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
@@ -74,11 +107,16 @@ export default async function Dashboard() {
             className="flex flex-col rounded overflow-hidden bg-slate-800 bg-opacity-60 "
           >
             <header className="rounded overflow-hidden">
-              <div className="max-w-7xl mx-auto flex items-center justify-between p-4">
+              <div className="max-w-7xl mx-auto flex items-center justify-between px-4 pt-4">
                 <h1 className="text-md font-semibold">Video Library</h1>
               </div>
             </header>
-            <Uploads />
+            <Uploads
+              projectId={currentProjectId}
+              projectUsers={projectUsers}
+              currentUserId={userId}
+              isUserOwner={isUserOwner}
+            />
           </div>
         </div>
       </div>