add topics

Author: Kurtyjlee

peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx

@@ -7,19 +7,21 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface TopicsPopoverProps {
   selectedTopics: string[];
   onChange: (value: string[]) => void;
+  isAdmin?: boolean;
 }
 
 export function TopicsPopover({
   selectedTopics,
   onChange,
+  isAdmin,
 }: TopicsPopoverProps) {
   const [open, setOpen] = useState(false);
   const [topics, setTopics] = useState<string[]>([]);
@@ -58,7 +60,7 @@ export function TopicsPopover({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[200px] p-0">
-        <div className="p-2">
+        <div className="flex gap-1 p-2">
           <Input
             placeholder="Search topics..."
             value={searchTerm}
@@ -68,8 +70,23 @@ export function TopicsPopover({
             }}
             className="mb-2"
           />
+          {isAdmin && (
+            <Button
+              onClick={async () => {
+                if (!searchTerm.trim()) {
+                  return;
+                }
+                setTopics((prev) => [...prev, searchTerm]);
+                setSearchTerm('');
+              }}
+              className="p-2"
+              variant="outline"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          )}
         </div>
-        <ScrollArea className="h-[300px]">
+        <ScrollArea className="h-[300px] overflow-y-auto">
           {filteredTopics.length === 0 ? (
             <p className="p-2 text-sm text-muted-foreground">No topic found.</p>
           ) : (

peerprep-fe/src/app/admin/page.tsx

@@ -23,6 +23,18 @@ function AdminPage() {
     refetchFilter,
   } = useFilteredProblems();
 
+  const validateEntries = (problem: Problem) => {
+    if (
+      problem.description === '' ||
+      problem.title === '' ||
+      problem.tags.length === 0
+    ) {
+      setInformationDialog('Please fill in all required fields');
+      return false;
+    }
+    return true;
+  };
+
   const handleDelete = async (id: number) => {
     const res = await axiosClient.delete(`/questions/${id}`);
     if (res.status !== 200) {
@@ -34,6 +46,9 @@ function AdminPage() {
 
   const handleEdit = async (problem: Problem) => {
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.put(`/questions/${problem._id}`, {
         difficulty: problem.difficulty,
         description: problem.description,
@@ -68,16 +83,10 @@ function AdminPage() {
   };
 
   const handleAdd = async (problem: Problem) => {
-    // TODO: Add proper validation of fields
-    if (
-      problem.description === '' ||
-      problem.title === '' ||
-      problem.tags.length === 0
-    ) {
-      setInformationDialog('Please fill in all required fields');
-      return;
-    }
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.post(`/questions`, {
         difficulty: problem.difficulty,
         description: problem.description,

peerprep-fe/src/components/problems/ProblemInputDialog.tsx

@@ -90,6 +90,7 @@ function ProblemInputDialog({
               onChange={(value) => {
                 setProblemData({ ...problemData, tags: value });
               }}
+              isAdmin
             />
           </div>
           <div className="mt-2 flex justify-end">