Skip to content

Commit

Permalink
chore: general fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmoin committed Apr 23, 2024
1 parent 998476d commit 74c85b3
Show file tree
Hide file tree
Showing 9 changed files with 241 additions and 44 deletions.
29 changes: 29 additions & 0 deletions package-lock.json

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

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
Expand Down
3 changes: 1 addition & 2 deletions src/components/question.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

import * as React from "react";

import { AnswerGroup } from "@/components//answer-group";

import { AnswerGroup } from "@/components/answer-group";
import {
Card,
CardContent,
Expand Down
2 changes: 1 addition & 1 deletion src/components/quiz.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from "react";
import { Question } from "@/components/question";
import { QuizHeader } from "@/components/quiz-header";
import { SubmitButton } from "@/components/submit-button";
import { Timer } from "./timer";
import { Timer } from "@/components/timer";

type QuestionType = {
question: string;
Expand Down
7 changes: 4 additions & 3 deletions src/components/results-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
Expand Down Expand Up @@ -52,7 +53,7 @@ export function ResultsCard({
});
const correctPercentage = (correctCount / templateData.length) * 100;
return (
<Dialog>
<Dialog defaultOpen={true}>
<DialogTrigger>
<div className="grid flex-1 items-start">
<Button>See Results</Button>
Expand All @@ -72,9 +73,9 @@ export function ResultsCard({
</div>
</div>
</div>
<div className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<DialogFooter className="sm:justify-start">
<Button onClick={refreshPageScroll}>Refresh</Button>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);
Expand Down
50 changes: 36 additions & 14 deletions src/components/submit-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,17 @@
import * as React from "react";

import { ResultsCard } from "@/components/results-card";

import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

interface Answer {
Expand Down Expand Up @@ -36,26 +46,38 @@ export function SubmitButton({ selectedTemplate, answers }: SubmitButtonProps) {
fetchData();
}, [selectedTemplate]);

const handleSubmit = () => {
if (templateData && templateData.data) {
setShowResults(true);
}
};

if (!templateData || !templateData.data) {
return <Button disabled>Submit</Button>;
}
const handleSubmit = () => setShowResults(templateData && templateData.data);

return (
<>
{showResults && (
{showResults ? (
<ResultsCard
answers={answers}
templateData={templateData.data}
quizName={templateData.name}
templateData={templateData?.data}
quizName={templateData?.name}
/>
) : (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button disabled={!templateData?.data}>Submit</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will submit your exam data
and you can not go back and change any answers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleSubmit}>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
{!showResults && <Button onClick={handleSubmit}>Submit</Button>}
</>
);
}
5 changes: 2 additions & 3 deletions src/components/template-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Quiz } from "@/components/quiz";
import { QuizHeader } from "@/components/quiz-header";
import { Button } from "@/components/ui/button";
import {
Form,
Expand All @@ -28,9 +30,6 @@ import {
} from "@/components/ui/select";
import { toast } from "@/components/ui/use-toast";

import { Quiz } from "@/components/quiz";
import { QuizHeader } from "@/components/quiz-header";

const templateFormSchema = z.object({
template: z.enum(["nysedregentschem", "nysedregentsalg2"], {
invalid_type_error: "Select a template",
Expand Down
141 changes: 141 additions & 0 deletions src/components/ui/alert-dialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
/>
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
{...props}
/>
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}

0 comments on commit 74c85b3

Please sign in to comment.