From 641f5f08c2ab62e37d0f478ca632d438559f9ad8 Mon Sep 17 00:00:00 2001 From: Marcos Iglesias Date: Sun, 4 Feb 2024 03:51:07 -0300 Subject: [PATCH 01/70] feat: admin panel tracks CRUD operations --- apps/academy/package.json | 2 + .../src/pages/admin/tracks/[trackId].tsx | 173 ++++++++++++++++ .../academy/src/pages/admin/tracks/create.tsx | 3 + apps/academy/src/pages/admin/tracks/index.tsx | 181 +++++++++++++++++ .../intro-to-ethereum/quiz-eth-intro-1.json | 167 --------------- .../intro-to-ethereum/quiz-eth-intro-2.json | 190 ------------------ .../intro-to-ethereum/quiz-eth-intro-3.json | 177 ---------------- apps/academy/src/server/api/routers/tracks.ts | 65 +++++- apps/academy/src/utils/zod-form.ts | 16 ++ apps/academy/src/zodschemas/track.schemas.ts | 22 ++ packages/ui/package.json | 2 + packages/ui/src/components/index.ts | 5 + packages/ui/src/components/ui/label.tsx | 19 ++ packages/ui/src/components/ui/select.tsx | 150 ++++++++++++++ packages/ui/src/components/ui/textarea.tsx | 23 +++ pnpm-lock.yaml | 114 +++++++++++ 16 files changed, 774 insertions(+), 535 deletions(-) create mode 100644 apps/academy/src/pages/admin/tracks/[trackId].tsx create mode 100644 apps/academy/src/pages/admin/tracks/create.tsx create mode 100644 apps/academy/src/pages/admin/tracks/index.tsx delete mode 100644 apps/academy/src/quizzes/intro-to-ethereum/quiz-eth-intro-1.json delete mode 100644 apps/academy/src/quizzes/intro-to-ethereum/quiz-eth-intro-2.json delete mode 100644 apps/academy/src/quizzes/intro-to-ethereum/quiz-eth-intro-3.json create mode 100644 apps/academy/src/utils/zod-form.ts create mode 100644 apps/academy/src/zodschemas/track.schemas.ts create mode 100644 packages/ui/src/components/ui/label.tsx create mode 100644 packages/ui/src/components/ui/select.tsx create mode 100644 packages/ui/src/components/ui/textarea.tsx diff --git a/apps/academy/package.json b/apps/academy/package.json index 049011d9..c3631cc8 100644 --- a/apps/academy/package.json +++ b/apps/academy/package.json @@ -43,6 +43,7 @@ "zod": "^3.22.2" }, "devDependencies": { + "@hookform/resolvers": "^3.3.4", "@mdx-js/loader": "^3.0.0", "@mdx-js/react": "^3.0.0", "@next/bundle-analyzer": "13.4.12", @@ -56,6 +57,7 @@ "next-config": "workspace:*", "next-pwa": "^5.6.0", "playwright-config": "workspace:*", + "react-hook-form": "^7.50.0", "react-syntax-highlighter": "^15.5.0", "remark-frontmatter": "^5.0.0", "storybook-config": "workspace:*", diff --git a/apps/academy/src/pages/admin/tracks/[trackId].tsx b/apps/academy/src/pages/admin/tracks/[trackId].tsx new file mode 100644 index 00000000..fd94b004 --- /dev/null +++ b/apps/academy/src/pages/admin/tracks/[trackId].tsx @@ -0,0 +1,173 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import type { Tracks } from "database"; +import { useRouter } from "next/router"; +import { useSession } from "next-auth/react"; +import { useForm } from "react-hook-form"; +import { Button, Input, Label, Textarea } from "ui"; + +import Spinner from "@/components/Spinner"; +import { api } from "@/utils/api"; +import { trackEditSchema } from "@/zodschemas/track.schemas"; + +interface EditFormProps { + trackToEditData: Tracks; +} + +const EditForm = ({ trackToEditData }: EditFormProps) => { + const utils = api.useContext(); + const { data: session } = useSession(); + + const { + register, + handleSubmit, + // watch, + reset, + formState: { errors, /* isSubmitting, isSubmitted, */ isDirty, isValid }, + } = useForm({ + mode: "onChange", + resolver: zodResolver(trackEditSchema), // Configuration the validation with the zod schema. + defaultValues: { + id: trackToEditData.id , + trackName: trackToEditData.trackName , + trackTitle: trackToEditData.trackTitle , + trackDescription: trackToEditData.trackDescription , + imgPath: trackToEditData.imgPath , + trackPath: trackToEditData.trackPath , + order: trackToEditData.order!, + }, + }); + + const onSubmit = handleSubmit( + (data) => { + if (data.order !== null) { + const { order, ...restData } = data; + const trackOrderInt = order; + editTrack.mutate({ + trackId: trackToEditData.id , + order: trackOrderInt, + ...restData, + }); + return; + } + }, + (e) => { + console.log("Whoops... something went wrong!"); + console.error(e); + }, + ); + + const editTrack = api.tracks.udpate.useMutation({ + onSettled: async () => { + await utils.tracks.invalidate(); + reset(); + }, + }); + + return ( +
+
+ + +

{errors.trackName?.message}

+
+
+ + +

{errors.trackTitle?.message}

+
+
+ +