Skip to content

Commit

Permalink
feat: bug reporting by user on the app
Browse files Browse the repository at this point in the history
  • Loading branch information
tomaspalma committed Oct 11, 2024
1 parent 8a15ab2 commit 5740e3e
Show file tree
Hide file tree
Showing 6 changed files with 340 additions and 8 deletions.
40 changes: 37 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
93 changes: 93 additions & 0 deletions src/components/BugReport.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
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";

const bugSchema = z.object({
email: z.string().optional(),
description: z.string({ message: "É necessário descreveres o bug" }),
})

export const BugReport = () => {
const [open, setOpen] = useState<boolean>(false);

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("User Feedback");

const userFeedback = {
email: values.email ?? "",
message: values.description,
associatedEventId: eventId,
};
Sentry.captureFeedback(userFeedback);

setOpen(false);
toast({
title: "Obrigado!",
description: "O bug submetido com sucesso.",
duration: 3000,
})
}

return <DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button variant="icon">
<BugAntIcon className="h-5 w-5 text-black" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<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>
<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 do bug." {...field} {...register("description")} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submeter</Button>
</form>
</Form>
</DropdownMenuContent>
</DropdownMenu >
}
6 changes: 4 additions & 2 deletions src/components/layout/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from '@heroicons/react/24/outline'
import { LogoNIAEFEUPImage } from '../../images'
import { getPath, config } from '../../utils'
import { BugReport } from '../BugReport'

const navigation = [
{
Expand Down Expand Up @@ -80,8 +81,8 @@ 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">
<BugReport />

<DarkModeSwitch />
</div>
Expand Down Expand Up @@ -127,6 +128,7 @@ const Hamburger = ({ open }: HamburgerProps) => (
<div className="flex items-center space-x-1">

<DarkModeSwitch />
<BugReport />

<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>
Expand Down
Loading

0 comments on commit 5740e3e

Please sign in to comment.