chore(create form): add course category

OgaDavid · Jan 5, 2024 · 2779dc5 · 2779dc5
1 parent b163f47
commit 2779dc5
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 28 deletions.
diff --git a/app/(routes)/(dashboard)/dashboard/create/_components/create-course-form.tsx b/app/(routes)/(dashboard)/dashboard/create/_components/create-course-form.tsx
@@ -9,20 +9,26 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { Input } from "@/components/ui/input";
 import { useForm } from "react-hook-form";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { CreateCourseFormSchema } from "@/schemas";
 import { Textarea } from "@/components/ui/textarea";
+import { ContentCategory } from "@/data/data";
 
 export default function CreateCourseForm() {
   const [loading, setLoading] = React.useState(false);
@@ -31,6 +37,10 @@ export default function CreateCourseForm() {
     resolver: zodResolver(CreateCourseFormSchema),
     defaultValues: {
       title: "",
+      description: "",
+      category: "",
+      // topics: [""],
+      // madeFor: [""]
     },
   });
 
@@ -40,13 +50,11 @@ export default function CreateCourseForm() {
     try {
       setLoading(true);
 
-      const response = await axios.post("/api/auth/register-user", userData);
-
-      toast.info("User Created Successfully 🎉");
+      console.log(userData)
 
-      router.push("/login");
+
     } catch (error: any) {
-      toast.error(error.request.response);
+      toast.error(error);
 
       console.log(error);
     } finally {
@@ -111,9 +119,36 @@ export default function CreateCourseForm() {
               </FormItem>
             )}
           />
+          <FormField
+            control={CreateCourseForm.control}
+            name="category"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel
+                  className="mb-5 text-lg font-medium text-black"
+                >
+                  Select Category
+                  <span className="text-[#ff6868]"> *</span>
+                </FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a category" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {ContentCategory.map((category) => (
+                    <SelectItem key={category} value={category}>{category}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           <div className="mt-[45px] flex items-center justify-center gap-10 flex-col">
             <Button
-              disabled={loading}
+              disabled={loading || !CreateCourseForm.formState.isValid}
               className="px-8 w-[300px] gap-2 h-[50px] flex items-center justify-center rounded-[8px] font-bold py-4 text-white btn-gradient"
               type="submit"
             >
@@ -127,12 +162,6 @@ export default function CreateCourseForm() {
                 "Continue"
               )}
             </Button>
-            <small className="text-sm text-[rgba(0,0,0,.5)]">
-              Already have an account?{" "}
-              <Link href="/login" className="text-brand-blue-100 font-medium">
-                Sign In
-              </Link>
-            </small>
           </div>
         </form>
       </Form>

diff --git a/app/(routes)/(dashboard)/dashboard/settings/_components/settings-update-profile-form.tsx b/app/(routes)/(dashboard)/dashboard/settings/_components/settings-update-profile-form.tsx
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { useRouter } from "next/navigation";
 import { Textarea } from "@/components/ui/textarea";
 import { DefaultSession } from "next-auth";
 import { ExtendedUser } from "@/types/next-auth";
@@ -33,15 +32,14 @@ const SettingsUpdateProfile = ({
     },
   });
 
-  const router = useRouter();
-
   const onSubmit = async (
     userData: z.infer<typeof UpdateProfileFormSchema>
   ) => {
     try {
       setLoading(true);
 
       const res = await axios.post("/api/auth/user/update-user-profile", userData)
+      console.log(res);
 
       if (res.status === 200) {
         toast.info("Your profile has been updated successfully 🎉")

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

diff --git a/components/ui/input.tsx b/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex w-full rounded-[8px] font-normal text-[rgba(0,0,0,.8)] border  border-input bg-background px-5 py-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:placeholder:text-[rgba(0,0,0,.8)] placeholder:text-[rgba(0,0,0,.5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue-100 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex w-full rounded-[8px] font-normal text-[rgba(0,0,0,.8)] border border-input bg-background px-5 py-4 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:placeholder:text-[rgba(0,0,0,.8)] placeholder:text-[rgba(0,0,0,.5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue-100 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

diff --git a/components/ui/select.tsx b/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     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",
+      "flex w-full items-center justify-between rounded-[8px] text-[rgba(0,0,0,.8)] border border-input bg-background px-5 py-4 text-sm focus-visible:placeholder:text-[rgba(0,0,0,.8)] placeholder:text-[rgba(0,0,0,.5)] focus:outline-none focus-visible:ring-brand-blue-100 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -118,16 +118,16 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     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",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    {/* <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
-    </span>
+    </span> */}
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>

diff --git a/data/data.ts b/data/data.ts
@@ -388,4 +388,19 @@ export const DashboardStats: DashboardStat[] = [
     type: "earnings",
     icon: "/images/dashboard/total-earnings.svg",
   },
-]
+];
+
+export const ContentCategory = [
+  "AI",
+  "Marketing",
+  "Business",
+  "Leadership",
+  "Design",
+  "Engineering",
+  "Investing",
+  "Productivity",
+  "Writing",
+  "Data",
+  "Sales",
+  "Other",
+];
diff --git a/schemas/index.ts b/schemas/index.ts
@@ -52,10 +52,14 @@ export const LoginFormSchema = z.object({
   });
 
   export const CreateCourseFormSchema = z.object({
-    title: z.string(),
-    description: z.string().max(150, {message: "Course description is too long"}),
+    title: z.string({
+      required_error: "Course title is required",
+    }),
+    description: z.string({
+      required_error: "Course description is required",
+    }).max(150, {message: "Course description is too long"}),
     category: z.string(),
-    topic: z.string(),
-    madeFor: z.string(),
+    // topics: z.array(z.string()),
+    // madeFor: z.array(z.string()),
   })