Merge pull request #375 from cs3216-a3-group-4/main

deploy: and pray?
jippy-the-frog · Oct 29, 2024 · 792b339 · 792b339
2 parents 668f2fa + 0dc6405
commit 792b339
Show file tree

Hide file tree

Showing 23 changed files with 930 additions and 209 deletions.
diff --git a/frontend/app/(authenticated)/articles/[id]/article-annotations/analysis-notes.tsx b/frontend/app/(authenticated)/articles/[id]/article-annotations/analysis-notes.tsx
@@ -8,7 +8,7 @@ import {
 } from "lucide-react";
 
 import { NoteDTO } from "@/client";
-import DeleteDialog from "@/components/dialog/DeleteDialog";
+import Dialog from "@/components/dialog/Dialog";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
@@ -43,8 +43,8 @@ const AnalysisNotes = ({
   return (
     <div>
       {deleteDialogOpen ? (
-        <DeleteDialog
-          label="note"
+        <Dialog
+          action="delete this note"
           onClose={() => setDeleteDialogOpen(0)}
           onDelete={() => onDelete(deleteDialogOpen)}
         />

diff --git a/frontend/app/(authenticated)/articles/[id]/article-annotations/mini-generic-concept-note.tsx b/frontend/app/(authenticated)/articles/[id]/article-annotations/mini-generic-concept-note.tsx
@@ -3,7 +3,7 @@ import { SubmitHandler } from "react-hook-form";
 import { EditIcon, TrashIcon } from "lucide-react";
 
 import { ArticleConceptDTO, NoteDTO } from "@/client";
-import DeleteDialog from "@/components/dialog/DeleteDialog";
+import Dialog from "@/components/dialog/Dialog";
 import CategoryChip from "@/components/display/category-chip";
 import { Button } from "@/components/ui/button";
 import { useDeleteNote, useEditArticleNote } from "@/queries/note";
@@ -96,8 +96,8 @@ const MiniGenericConceptNote = ({
       id={`annotation-${note.id}`}
     >
       {deleteDialogOpen && (
-        <DeleteDialog
-          label="note"
+        <Dialog
+          action="delete this note"
           onClose={() => setDeleteDialogOpen(false)}
           onDelete={() => {
             deleteNoteMutation.mutate(note.id);

diff --git a/frontend/app/(authenticated)/articles/[id]/article-annotations/note-item.tsx b/frontend/app/(authenticated)/articles/[id]/article-annotations/note-item.tsx
@@ -3,7 +3,7 @@ import { SubmitHandler } from "react-hook-form";
 import { EditIcon, TrashIcon } from "lucide-react";
 
 import { NoteDTO } from "@/client";
-import DeleteDialog from "@/components/dialog/DeleteDialog";
+import Dialog from "@/components/dialog/Dialog";
 import CategoryChip from "@/components/display/category-chip";
 import { Button } from "@/components/ui/button";
 import { useDeleteNote } from "@/queries/note";
@@ -29,8 +29,8 @@ const NoteItem = ({ note, articleId, handleEditNote }: NoteItemProps) => {
       key={note.id}
     >
       {deleteDialogOpen && (
-        <DeleteDialog
-          label="note"
+        <Dialog
+          action="delete this note"
           onClose={() => setDeleteDialogOpen(false)}
           onDelete={() => {
             deleteNoteMutation.mutate(note.id);

diff --git a/frontend/app/(authenticated)/articles/[id]/article-concepts.tsx b/frontend/app/(authenticated)/articles/[id]/article-concepts.tsx
@@ -206,7 +206,7 @@ const ArticleConcepts = ({ article, showAnnotations }: Props) => {
                 chevronClassName="h-6 w-6 stroke-[2.5]"
                 className="text-xl text-cyan-600 font-semibold"
               >
-                <span className="flex items-center capitalize">
+                <span className="flex items-center capitalize text-left">
                   {concept.name}
                 </span>
               </AccordionTrigger>

diff --git a/frontend/app/(authenticated)/articles/[id]/page.tsx b/frontend/app/(authenticated)/articles/[id]/page.tsx
@@ -97,7 +97,7 @@ const Page = ({ params }: { params: { id: string } }) => {
 
   return (
     <div
-      className={`w-full h-fit min-h-full bg-muted ${isViewAnnotation ? "relative flex" : "sm:px-8 md:px-16 xl:px-56"}`}
+      className={`w-full h-fit min-h-full bg-muted ${isViewAnnotation ? "relative flex" : "sm:px-8 md:px-16 xl:px-40"}`}
     >
       <div
         className={`flex flex-col bg-background ${isViewAnnotation ? (showPanelAsSheet ? "hidden" : "w-8/12 h-full mx-16") : ""}`}

diff --git a/frontend/app/(authenticated)/articles/page.tsx b/frontend/app/(authenticated)/articles/page.tsx
@@ -16,8 +16,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import usePagination from "@/hooks/use-pagination";
 import { getArticlesPage } from "@/queries/article";
+import { getCategories } from "@/queries/category";
 import { useUserStore } from "@/store/user/user-store-provider";
 import { parseDate, toQueryDate } from "@/utils/date";
 
@@ -52,6 +59,7 @@ const Articles = () => {
   const [singaporeOnly, setSingaporeOnly] =
     useState<boolean>(initialSingaporeOnly);
 
+  const { data: categories } = useQuery(getCategories());
   const { data: articles, isSuccess: isArticlesLoaded } = useQuery(
     getArticlesPage(
       toQueryDate(eventStartDate),
@@ -129,6 +137,61 @@ const Articles = () => {
                 </SelectGroup>
               </SelectContent>
             </Select>
+
+            <Select
+              defaultValue="my"
+              onValueChange={(categoryId) => {
+                if (categoryId !== "my") {
+                  router.push(`/categories/${categoryId}`);
+                }
+                return categoryId;
+              }}
+            >
+              <SelectTrigger
+                className={
+                  "border-none focus:ring-0 focus:ring-offset-0 font-medium hover:bg-gray-200/40 rounded-2xl text-primary-900 text-base"
+                }
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="min-w-[16rem]">
+                <SelectGroup>
+                  <SelectLabel className="text-sm">Category filter</SelectLabel>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <SelectItem className="mb-3" value="my">
+                          My GP categories ({user?.categories.length})
+                        </SelectItem>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        className="flex max-w-[14rem]"
+                        side="bottom"
+                      >
+                        <div className="flex text-wrap">
+                          {user.categories
+                            .map((category) => category.name)
+                            .join(", ")}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </SelectGroup>
+                <SelectGroup>
+                  <SelectLabel className="text-sm">
+                    Individual categories
+                  </SelectLabel>
+                  {categories?.map((category) => (
+                    <SelectItem
+                      key={category.id}
+                      value={category.id.toString()}
+                    >
+                      {category.name}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           </div>
 
           <ArticlesList

diff --git a/frontend/app/(authenticated)/categories/[id]/page.tsx b/frontend/app/(authenticated)/categories/[id]/page.tsx
@@ -18,9 +18,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import usePagination from "@/hooks/use-pagination";
 import { getArticlesForCategory } from "@/queries/article";
 import { getCategories } from "@/queries/category";
+import { useUserStore } from "@/store/user/user-store-provider";
 
 const Page = ({ params }: { params: { id: string } }) => {
   const router = useRouter();
@@ -34,6 +41,7 @@ const Page = ({ params }: { params: { id: string } }) => {
   const [singaporeOnly, setSingaporeOnly] =
     useState<boolean>(initialSingaporeOnly);
 
+  const user = useUserStore((state) => state.user);
   const { page, pageCount, getPageUrl } = usePagination({ totalCount });
   const { data: articles, isSuccess: isArticlesLoaded } = useQuery(
     getArticlesForCategory(categoryId, page, singaporeOnly),
@@ -107,6 +115,63 @@ const Page = ({ params }: { params: { id: string } }) => {
                 </SelectGroup>
               </SelectContent>
             </Select>
+
+            <Select
+              defaultValue={categoryId.toString()}
+              onValueChange={(catId) => {
+                if (catId !== categoryId.toString()) {
+                  router.push(
+                    catId === "my" ? "/articles" : `/categories/${catId}`,
+                  );
+                }
+                return catId;
+              }}
+            >
+              <SelectTrigger
+                className={
+                  "border-none focus:ring-0 focus:ring-offset-0 font-medium hover:bg-gray-200/40 rounded-2xl text-primary-900 text-base"
+                }
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="min-w-[16rem]">
+                <SelectGroup>
+                  <SelectLabel className="text-sm">Category filter</SelectLabel>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <SelectItem className="mb-3" value="my">
+                          My GP categories ({user?.categories.length})
+                        </SelectItem>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        className="flex max-w-[14rem]"
+                        side="bottom"
+                      >
+                        <div className="flex text-wrap">
+                          {user?.categories
+                            .map((category) => category.name)
+                            .join(", ")}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </SelectGroup>
+                <SelectGroup>
+                  <SelectLabel className="text-sm">
+                    Individual categories
+                  </SelectLabel>
+                  {categories?.map((category) => (
+                    <SelectItem
+                      key={category.id}
+                      value={category.id.toString()}
+                    >
+                      {category.name}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           </div>
 
           <div className="flex flex-col w-full">

diff --git a/frontend/app/(authenticated)/essay-feedback/history/essay-list-card.tsx b/frontend/app/(authenticated)/essay-feedback/history/essay-list-card.tsx
@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 
 import { EssayMiniDTO } from "@/client/types.gen";
-import DeleteDialog from "@/components/dialog/DeleteDialog";
+import Dialog from "@/components/dialog/Dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -37,8 +37,8 @@ const EssayListCard = ({ essay }: EssayListCardProps) => {
   return (
     <div className="flex flex-col w-full bg-card border px-4 py-4 rounded-sm text-pretty break-words">
       {deleteDialogOpen && (
-        <DeleteDialog
-          label="essay"
+        <Dialog
+          action="delete this essay"
           onClose={() => setDeleteDialogOpen(false)}
           onDelete={() => {
             deleteEssayMutation.mutate(essay.id);

diff --git a/frontend/app/(authenticated)/essay-feedback/page.tsx b/frontend/app/(authenticated)/essay-feedback/page.tsx
@@ -8,6 +8,7 @@ import { BookCheckIcon, BookOpenCheckIcon, SparklesIcon } from "lucide-react";
 import { z } from "zod";
 
 import { createEssayEssaysPost, ParagraphType } from "@/client";
+import Chip from "@/components/display/chip";
 import { AutosizeTextarea } from "@/components/ui/autosize-textarea";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -169,65 +170,64 @@ const EssayFeedbackPage = () => {
 
   return (
     <div
-      className="flex flex-col bg-muted w-full h-full max-h-full py-8 overflow-y-auto px-4 md:px-8 xl:px-24 "
+      className="flex flex-col bg-muted w-full h-full max-h-full overflow-y-auto py-8 px-4 md:px-8 xl:px-24"
       id="home-page"
     >
-      <div className="mt-4 mb-8">
+      <div className="px-6 mt-4 mb-8">
         <span className="flex items-center text-primary-800">
-          <BookOpenCheckIcon className="w-8 h-8 mr-4" />
+          <BookOpenCheckIcon className="w-12 h-12 mr-6" />
           <h1 className="text-4xl font-semibold">Get essay feedback</h1>
+          <Chip className="sm:ml-3" label="Beta" />
         </span>
         <h2 className="text-lg mt-3 text-gray-700">
           Get feedback on your GP essay at the snap of your fingers. Rest
           assured, your essay is yours. Jippy will never use your essay for
           anything else than providing you feedback.
         </h2>
       </div>
-      <div className="h-full">
-        <div className="flex flex-col py-6 lg:py-12 w-full h-fit min-h-full bg-background rounded-lg border border-border px-28 justify-between">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-              <div className="flex flex-col h-fit">
-                <FormField
-                  control={form.control}
-                  name="gpQuestion"
-                  render={({ field }) => (
-                    <FormItem className="mb-2">
-                      <FormControl>
-                        <AutosizeTextarea
-                          className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-3xl font-semibold text-primary-700"
-                          placeholder="Type your GP essay question"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="essay"
-                  render={({ field }) => (
-                    <FormItem className="mb-2">
-                      <FormControl>
-                        <AutosizeTextarea
-                          className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-lg overflow-hidden"
-                          placeholder="Type or paste your essay here"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <Button className="mt-16" size="lg" type="submit">
-                <SparklesIcon className="w-6 h-6 mr-3" />
-                Get Jippy&apos;s feedback
-              </Button>
-            </form>
-          </Form>
-        </div>
+      <div className="grow flex flex-col">
+        <Form {...form}>
+          <form className="h-full" onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex flex-col py-6 lg:py-12 w-full bg-background rounded-lg border border-border px-4 md:px-8 xl:px-24 justify-between">
+              <FormField
+                control={form.control}
+                name="gpQuestion"
+                render={({ field }) => (
+                  <FormItem className="mb-2">
+                    <FormControl>
+                      <AutosizeTextarea
+                        className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-3xl font-semibold text-primary-700"
+                        placeholder="Type your GP essay question"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="essay"
+                render={({ field }) => (
+                  <FormItem className="mb-2">
+                    <FormControl>
+                      <AutosizeTextarea
+                        className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-lg overflow-x-hidden"
+                        placeholder="Type or paste your essay here"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Button className="mt-4" size="lg" type="submit">
+              <SparklesIcon className="w-6 h-6 mr-3" />
+              Get Jippy&apos;s feedback
+            </Button>
+          </form>
+        </Form>
       </div>
     </div>
   );