Skip to content

Commit

Permalink
Upload image to create a question game (#77)
Browse files Browse the repository at this point in the history
* Upload image for create endpoint

* Upload image to create question game
  • Loading branch information
lille-morille authored Oct 21, 2024
1 parent e68fa92 commit 45e105d
Show file tree
Hide file tree
Showing 10 changed files with 292 additions and 175 deletions.
Binary file modified ER_diagram.pdf
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
Expand Down
191 changes: 160 additions & 31 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
Warnings:
- Added the required column `imageUrl` to the `QuestionGame` table without a default value. This is not possible if the table is not empty.
*/
-- AlterTable
ALTER TABLE "QuestionGame" ADD COLUMN "imageUrl" TEXT NOT NULL;
13 changes: 7 additions & 6 deletions prisma/schema.prisma
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,15 @@ enum BeerPongTournamentStatus {
}

model QuestionGame {
id Int @id @default(autoincrement())
id Int @id @default(autoincrement())
title String
imageUrl String
questions Question[]
}

model Question {
id Int @id @default(autoincrement())
question String
questionGame QuestionGame @relation(fields: [questionGameId], references: [id], onDelete: Cascade)
questionGameId Int
}
id Int @id @default(autoincrement())
question String
questionGame QuestionGame @relation(fields: [questionGameId], references: [id], onDelete: Cascade)
questionGameId Int
}
122 changes: 63 additions & 59 deletions src/components/questiongame/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,69 +10,73 @@ import { Form, FormControl, FormField, FormItem, FormLabel } from "../ui/form";
import { InputSchema } from "~/server/api/question-game/game/schema/create";
import Input from "../layout/input";
import { Button } from "../ui/button";

import FileUploader from "../file-upload";

export const QuestionGameForm = () => {
const form = useForm<z.infer<typeof InputSchema>>({
resolver: zodResolver(InputSchema),
defaultValues: {
title: ""
}
});

const {
mutate: createGame,
status,
data: game
} = api.questionGame.game.create.useMutation({
onError: (error) => {
console.error("Feil ved opprettelse av spill:", error);
},
onSuccess: (data) => {
console.log("Spill opprettet:", data);
}
});
const form = useForm<z.infer<typeof InputSchema>>({
resolver: zodResolver(InputSchema),
defaultValues: {
title: "",
imageUrl: "",
},
});

const router = useRouter();
const {
mutate: createGame,
status,
data: game,
} = api.questionGame.game.create.useMutation({
onError: (error) => {
console.error("Feil ved opprettelse av spill:", error);
},
onSuccess: (data) => {
console.log("Spill opprettet:", data);
},
});

useEffect(() => {
if (status === "success") {
console.log("Spill opprettet med ID:", game?.questionGameId);
router.replace(`/question-game/${game.questionGameId}/questions`);
}
}, [status]);
const router = useRouter();

const onSubmit = (values: z.infer<typeof InputSchema>) => {
console.log("Skjema verdier:", values);
createGame(values);
};
useEffect(() => {
if (status === "success") {
console.log("Spill opprettet med ID:", game?.questionGameId);
router.replace(`/question-game/${game.questionGameId}/questions`);
}
}, [status]);

return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col items-center justify-center w-full max-w-md mx-auto p-6 space-y-6 bg-white rounded-md shadow-lg">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Tittel</FormLabel>
<FormControl>
<Input {...field} className="w-full border-gray-300 rounded-md" />
</FormControl>
</FormItem>
)}
/>
<div className="w-full flex justify-center items-center">
<img
src="/100.jpg"
alt="Default"
className="w-40 h-40 object-cover rounded-md"
/>
</div>
<Button type="submit" className="w-full bg-blue-500 text-white py-2 rounded-md">Opprett</Button>
</form>
</Form>
);
}
const onSubmit = (values: z.infer<typeof InputSchema>) => {
console.log("Skjema verdier:", values);
createGame(values);
};

return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="mx-auto flex w-full max-w-md flex-col items-center justify-center space-y-6 rounded-md bg-white p-6 shadow-lg"
>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Tittel</FormLabel>
<FormControl>
<Input
{...field}
className="w-full rounded-md border-gray-300"
/>
</FormControl>
</FormItem>
)}
/>
<FileUploader onSelect={(file) => form.setValue("imageUrl", file)} />
<Button
type="submit"
className="w-full rounded-md bg-blue-500 py-2 text-white"
>
Opprett
</Button>
</form>
</Form>
);
};
59 changes: 29 additions & 30 deletions src/components/ui/select.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
"use client"
"use client";

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "../../util/tailwind-cn";

import { cn } from "~/lib/utils"
const Select = SelectPrimitive.Root;

const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group;

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value
const SelectValue = SelectPrimitive.Value;

const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
Expand All @@ -20,7 +19,7 @@ const SelectTrigger = React.forwardRef<
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
className,
)}
{...props}
>
Expand All @@ -29,8 +28,8 @@ const SelectTrigger = React.forwardRef<
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
Expand All @@ -40,14 +39,14 @@ const SelectScrollUpButton = React.forwardRef<
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
className,
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
Expand All @@ -57,15 +56,15 @@ const SelectScrollDownButton = React.forwardRef<
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
className,
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
));
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
SelectPrimitive.ScrollDownButton.displayName;

const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
Expand All @@ -78,7 +77,7 @@ const SelectContent = React.forwardRef<
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
className,
)}
position={position}
{...props}
Expand All @@ -88,16 +87,16 @@ const SelectContent = React.forwardRef<
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
));
SelectContent.displayName = SelectPrimitive.Content.displayName;

const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
Expand All @@ -108,8 +107,8 @@ const SelectLabel = React.forwardRef<
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;

const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
Expand All @@ -119,7 +118,7 @@ const SelectItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
className,
)}
{...props}
>
Expand All @@ -131,8 +130,8 @@ const SelectItem = React.forwardRef<

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
));
SelectItem.displayName = SelectPrimitive.Item.displayName;

const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
Expand All @@ -143,8 +142,8 @@ const SelectSeparator = React.forwardRef<
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

export {
Select,
Expand All @@ -157,4 +156,4 @@ export {
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
};
45 changes: 20 additions & 25 deletions src/server/api/question-game/game/controller/create.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,28 @@
import { z } from "zod";
import { adminProcedure, Controller } from '~/server/api/trpc';
import { assertHasCreateQuestionGameControl } from "../../middleware";
import { adminProcedure, Controller } from "~/server/api/trpc";
import { InputSchema, OutputSchema } from "../schema/create";
import { db } from "~/server/db";


const handler: Controller<
z.infer<typeof InputSchema>,
z.infer<typeof OutputSchema>
> = async ({input, ctx}) => {
await assertHasCreateQuestionGameControl({ctx});
z.infer<typeof InputSchema>,
z.infer<typeof OutputSchema>
> = async ({ input, ctx }) => {
const game = await db.questionGame.create({
data: {
title: input.title,
imageUrl: input.imageUrl,
},
select: {
id: true,
},
});

const game = await db.questionGame.create({
data: {
title: input.title,
},
select: {
id: true
}
});

return {
questionGameId: game.id
}
}
return {
questionGameId: game.id,
};
};

export default adminProcedure
.input(InputSchema)
.output(OutputSchema)
.mutation(handler);


.input(InputSchema)
.output(OutputSchema)
.mutation(handler);
Loading

0 comments on commit 45e105d

Please sign in to comment.