From 4d362bd0673897c6e2007b76470d34f8ecf41e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Palma?= <up202108880@edu.fe.up.pt>
Date: Wed, 9 Oct 2024 23:10:15 +0100
Subject: [PATCH] feat: bug reporting by user on the app

---
 package-lock.json                 |  40 ++++++-
 package.json                      |   9 +-
 src/components/FeedbackReport.tsx | 111 +++++++++++++++++++
 src/components/layout/Header.tsx  |   6 +-
 src/components/layout/index.tsx   |   7 +-
 src/components/ui/form.tsx        | 176 ++++++++++++++++++++++++++++++
 src/components/ui/textarea.tsx    |  24 ++++
 7 files changed, 363 insertions(+), 10 deletions(-)
 create mode 100644 src/components/FeedbackReport.tsx
 create mode 100644 src/components/ui/form.tsx
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/package-lock.json b/package-lock.json
index fbe55142..2f4aa92c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,15 +10,16 @@
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.1.1",
+        "@hookform/resolvers": "^3.9.0",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
-        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-separator": "^1.0.3",
-        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-toggle": "^1.0.3",
@@ -46,6 +47,7 @@
         "plausible-tracker": "^0.3.9",
         "react": "^18.2.0",
         "react-dom": "^18.1.0",
+        "react-hook-form": "^7.53.0",
         "react-router-dom": "^6.3.0",
         "react-sortablejs": "^6.1.4",
         "react-toastify": "^9.1.1",
@@ -57,7 +59,8 @@
         "usehooks-ts": "^2.6.0",
         "vite": "^5.4.6",
         "vite-tsconfig-paths": "^4.3.2",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@eslint/js": "^9.10.0",
@@ -605,6 +608,14 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
+      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -5975,6 +5986,21 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -7527,6 +7553,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 31b22fc0..a703570e 100644
--- a/package.json
+++ b/package.json
@@ -6,15 +6,16 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
@@ -42,6 +43,7 @@
     "plausible-tracker": "^0.3.9",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
+    "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.3.0",
     "react-sortablejs": "^6.1.4",
     "react-toastify": "^9.1.1",
@@ -53,7 +55,8 @@
     "usehooks-ts": "^2.6.0",
     "vite": "^5.4.6",
     "vite-tsconfig-paths": "^4.3.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zod": "^3.23.8"
   },
   "scripts": {
     "dev": "vite --host",
diff --git a/src/components/FeedbackReport.tsx b/src/components/FeedbackReport.tsx
new file mode 100644
index 00000000..ef5d7077
--- /dev/null
+++ b/src/components/FeedbackReport.tsx
@@ -0,0 +1,111 @@
+import * as Sentry from "@sentry/react";
+import { BugAntIcon } from "@heroicons/react/24/solid"
+import { DropdownMenu } from "@radix-ui/react-dropdown-menu"
+import { Button } from "./ui/button"
+import { DropdownMenuContent, DropdownMenuTrigger } from "./ui/dropdown-menu"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { useForm } from "react-hook-form";
+import { Input } from "./ui/input";
+import { Textarea } from "./ui/textarea";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useToast } from "./ui/use-toast";
+import { useState } from "react";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+
+enum ReportType {
+  Bug = 1,
+  Suggestion,
+}
+
+const reportTypeString = ["Bug", "Sugestão"]
+const reportTypeSuccessMessage = ["O bug foi submetido com sucesso", "A sugestão foi submetida com sucesso"]
+
+const bugSchema = z.object({
+  email: z.string().optional(),
+  description: z.string({ message: "É necessário descreveres o bug" })
+})
+
+export const FeedbackReport = () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [reportType, setReportType] = useState<ReportType>(ReportType.Bug);
+
+  const { toast } = useToast();
+
+  const form = useForm<z.infer<typeof bugSchema>>({
+    resolver: zodResolver(bugSchema),
+    defaultValues: {
+      email: undefined,
+      description: undefined
+    },
+  });
+
+  const { register } = form;
+
+  const onSubmit = (values: z.infer<typeof bugSchema>) => {
+    const eventId = Sentry.captureMessage(reportTypeString[reportType]);
+
+    const userFeedback = {
+      email: values.email ?? "",
+      message: values.description,
+      associatedEventId: eventId,
+    };
+    Sentry.captureFeedback(userFeedback);
+
+    setOpen(false);
+    toast({
+      title: "Obrigado!",
+      description: reportTypeSuccessMessage[reportType],
+      duration: 3000,
+    })
+  }
+
+  return <DropdownMenu open={open} onOpenChange={setOpen}>
+    <DropdownMenuTrigger asChild>
+      <Button variant="icon">
+        <BugAntIcon className="h-5 w-5 text-black" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <Tabs defaultValue="bug">
+        <TabsList className="w-full">
+          <TabsTrigger value="bug" onClick={() => setReportType(ReportType.Bug)}>Bug</TabsTrigger>
+          <TabsTrigger value="suggestion" onClick={() => setReportType(ReportType.Suggestion)}>Sugestão</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4 p-2">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormLabel>Email (opcional)</FormLabel>
+                <FormControl>
+                  <Input placeholder="Email" {...field} {...register("email")} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Descrição</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Descrição" {...field} {...register("description")} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button type="submit">Submeter</Button>
+        </form>
+      </Form>
+    </DropdownMenuContent >
+  </DropdownMenu >
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 98702132..1ef83f68 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -11,6 +11,7 @@ import {
 } from '@heroicons/react/24/outline'
 import { LogoNIAEFEUPImage } from '../../images'
 import { getPath, config } from '../../utils'
+import { FeedbackReport } from '../FeedbackReport'
 
 const navigation = [
   {
@@ -80,9 +81,7 @@ const Header = ({ siteTitle, location }: Props) => {
                     ))}
                 </div>
 
-                <div className="hidden self-center md:inline-flex">
-
-
+                <div className="hidden self-center md:inline-flex md:items-center">
                   <DarkModeSwitch />
                 </div>
               </div>
@@ -127,6 +126,7 @@ const Hamburger = ({ open }: HamburgerProps) => (
     <div className="flex items-center space-x-1">
 
       <DarkModeSwitch />
+      <FeedbackReport />
 
       <Disclosure.Button className="group text-gray-800 transition duration-200 ease-in dark:text-white md:hidden">
         <span className="sr-only">Open nav menu</span>
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index e17e463d..4b044853 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import Header from './Header'
 import Footer from './Footer'
 import classNames from 'classnames'
+import { FeedbackReport } from '../FeedbackReport'
 
 type Props = {
   children: JSX.Element
@@ -18,8 +19,12 @@ const Layout = ({ children, location, liquid, title }: Props) => {
   return (
     <div
       id="layout"
-      className="flex min-h-screen flex-col bg-light font-prose font-normal text-gray-800 opacity-[99%] dark:bg-darkest dark:text-white"
+      className="min-h-screen flex-col bg-light font-prose font-normal text-gray-800 opacity-[99%] dark:bg-darkest dark:text-white"
     >
+      <div className="hidden md:flex fixed bottom-0 left-0 mb-4 ml-4 rounded-full shadow-lg bg-white border">
+        <FeedbackReport />
+      </div>
+
       <Header location={location} siteTitle="Time Table Selector" />
       <div className={classNames(liquid ? 'my-auto' : 'mb-auto')}>{children}</div>
       <Footer />
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 00000000..e58c6169
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../../utils"
+import { Label } from "../ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-red-500 dark:text-red-900", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-red-500 dark:text-red-900", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..2e175051
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "../../utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }