feat: improve course creation UI

apps/web/components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker.tsx

@@ -3,6 +3,7 @@ import { createApi } from 'unsplash-js';
 import { Search, X, Cpu, Briefcase, GraduationCap, Heart, Palette, Plane, Utensils, 
   Dumbbell, Music, Shirt, Book, Building, Bike, Camera, Microscope, Coins, Coffee, Gamepad, 
   Flower} from 'lucide-react';
+import Modal from '@components/StyledElements/Modal/Modal';
 
 const unsplash = createApi({
   accessKey: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY as string,
@@ -36,9 +37,10 @@ const predefinedLabels = [
 interface UnsplashImagePickerProps {
   onSelect: (imageUrl: string) => void;
   onClose: () => void;
+  isOpen?: boolean;
 }
 
-const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onClose }) => {
+const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onClose, isOpen = true }) => {
   const [query, setQuery] = useState('');
   const [images, setImages] = useState<any[]>([]);
   const [page, setPage] = useState(1);
@@ -54,8 +56,6 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
       });
       if (result && result.response) {
         setImages(prevImages => pageNum === 1 ? result.response.results : [...prevImages, ...result.response.results]);
-      } else {
-        console.error('Unexpected response structure:', result);
       }
     } catch (error) {
       console.error('Error fetching images:', error);
@@ -97,16 +97,10 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
     onClose();
   };
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 w-3/4 max-w-4xl max-h-[80vh] overflow-y-auto">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-2xl font-bold">Choose an image from Unsplash</h2>
-          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
-            <X size={24} />
-          </button>
-        </div>
-        <div className="relative mb-4">
+  const modalContent = (
+    <div className="flex flex-col h-full">
+      <div className="p-4 space-y-4">
+        <div className="relative">
           <input
             type="text"
             value={query}
@@ -116,7 +110,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
           />
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
         </div>
-        <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-2">
           {predefinedLabels.map(label => (
             <button
               key={label.name}
@@ -128,6 +122,9 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
             </button>
           ))}
         </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 pt-0">
         <div className="grid grid-cols-3 gap-4">
           {images.map(image => (
             <div key={image.id} className="relative w-full pb-[56.25%]">
@@ -135,7 +132,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
                 src={image.urls.small}
                 alt={image.alt_description}
                 className="absolute inset-0 w-full h-full object-cover rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
-                onClick={() => handleImageSelect(image.urls.full)}
+                onClick={() => handleImageSelect(image.urls.regular)}
               />
             </div>
           ))}
@@ -144,7 +141,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
         {!loading && images.length > 0 && (
           <button
             onClick={handleLoadMore}
-            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            className="mt-4 w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
           >
             Load More
           </button>
@@ -152,6 +149,18 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
       </div>
     </div>
   );
+
+  return (
+    <Modal
+      dialogTitle="Choose an image from Unsplash"
+      dialogContent={modalContent}
+      onOpenChange={onClose}
+      isDialogOpen={isOpen}
+      minWidth="lg"
+      minHeight="lg"
+      customHeight="h-[80vh]"
+    />
+  );
 };
 
 // Custom debounce function

apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx

@@ -1,178 +1,247 @@
 'use client'
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
 import FormLayout, {
-  ButtonBlack,
-  Flex,
   FormField,
-  FormLabel,
-  Input,
-  Textarea,
+  FormLabelAndMessage,
 } from '@components/StyledElements/Form/Form'
 import * as Form from '@radix-ui/react-form'
-import { FormMessage } from '@radix-ui/react-form'
 import { createNewCourse } from '@services/courses/courses'
 import { getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs'
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { BarLoader } from 'react-spinners'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { useRouter } from 'next/navigation'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import toast from 'react-hot-toast'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { ArrowBigUpDash, UploadCloud, Image as ImageIcon } from 'lucide-react'
+import UnsplashImagePicker from "@components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker"
+
+const validationSchema = Yup.object().shape({
+  name: Yup.string()
+    .required('Course name is required')
+    .max(100, 'Must be 100 characters or less'),
+  description: Yup.string()
+    .max(1000, 'Must be 1000 characters or less'),
+  learnings: Yup.string(),
+  tags: Yup.string(),
+  visibility: Yup.boolean(),
+  thumbnail: Yup.mixed().nullable()
+})
 
 function CreateCourseModal({ closeModal, orgslug }: any) {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const session = useLHSession() as any;
-  const [name, setName] = React.useState('')
-  const [description, setDescription] = React.useState('')
-  const [learnings, setLearnings] = React.useState('')
-  const [visibility, setVisibility] = React.useState(true)
-  const [tags, setTags] = React.useState('')
-  const [isLoading, setIsLoading] = React.useState(false)
-  const [thumbnail, setThumbnail] = React.useState(null) as any
   const router = useRouter()
-
+  const session = useLHSession() as any
   const [orgId, setOrgId] = React.useState(null) as any
-  const [org, setOrg] = React.useState(null) as any
+  const [showUnsplashPicker, setShowUnsplashPicker] = React.useState(false)
+  const [isUploading, setIsUploading] = React.useState(false)
+
+  const formik = useFormik({
+    initialValues: {
+      name: '',
+      description: '',
+      learnings: '',
+      visibility: true,
+      tags: '',
+      thumbnail: null
+    },
+    validationSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      const toast_loading = toast.loading('Creating course...')
+      
+      try {
+        const res = await createNewCourse(
+          orgId,
+          { 
+            name: values.name, 
+            description: values.description, 
+            tags: values.tags, 
+            visibility: values.visibility 
+          },
+          values.thumbnail,
+          session.data?.tokens?.access_token
+        )
+
+        if (res.success) {
+          await revalidateTags(['courses'], orgslug)
+          toast.dismiss(toast_loading)
+          toast.success('Course created successfully')
+
+          if (res.data.org_id === orgId) {
+            closeModal()
+            router.refresh()
+            await revalidateTags(['courses'], orgslug)
+          }
+        } else {
+          toast.error(res.data.detail)
+        }
+      } catch (error) {
+        toast.error('Failed to create course')
+      } finally {
+        setSubmitting(false)
+      }
+    }
+  })
 
   const getOrgMetadata = async () => {
     const org = await getOrganizationContextInfoWithoutCredentials(orgslug, {
       revalidate: 360,
       tags: ['organizations'],
     })
-
     setOrgId(org.id)
   }
 
-  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value)
-  }
-
-  const handleDescriptionChange = (event: React.ChangeEvent<any>) => {
-    setDescription(event.target.value)
-  }
-
-  const handleLearningsChange = (event: React.ChangeEvent<any>) => {
-    setLearnings(event.target.value)
-  }
-
-  const handleVisibilityChange = (event: React.ChangeEvent<any>) => {
-    setVisibility(event.target.value)
-  }
-
-  const handleTagsChange = (event: React.ChangeEvent<any>) => {
-    setTags(event.target.value)
-  }
-
-  const handleThumbnailChange = (event: React.ChangeEvent<any>) => {
-    setThumbnail(event.target.files[0])
-  }
-
-  const handleSubmit = async (e: any) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-
-    let res = await createNewCourse(
-      orgId,
-      { name, description, tags, visibility },
-      thumbnail,
-      session.data?.tokens?.access_token
-    )
-    const toast_loading = toast.loading('Creating course...')
-    if (res.success) {
-      await revalidateTags(['courses'], orgslug)
-      setIsSubmitting(false)
-      toast.dismiss(toast_loading)
-      toast.success('Course created successfully')
-
-      if (res.data.org_id == orgId) {
-        closeModal()
-        router.refresh()
-        await revalidateTags(['courses'], orgslug)
-      }
-
-    }
-    else {
-      setIsSubmitting(false)
-      toast.error(res.data.detail)
-    }
-  }
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (orgslug) {
       getOrgMetadata()
     }
-  }, [isLoading, orgslug])
+  }, [orgslug])
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      formik.setFieldValue('thumbnail', file)
+    }
+  }
+
+  const handleUnsplashSelect = async (imageUrl: string) => {
+    setIsUploading(true)
+    try {
+      const response = await fetch(imageUrl)
+      const blob = await response.blob()
+      const file = new File([blob], 'unsplash_image.jpg', { type: 'image/jpeg' })
+      formik.setFieldValue('thumbnail', file)
+    } catch (error) {
+      toast.error('Failed to load image from Unsplash')
+    }
+    setIsUploading(false)
+  }
 
   return (
-    <FormLayout onSubmit={handleSubmit}>
-      <FormField name="course-name">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Course name</FormLabel>
-          <FormMessage match="valueMissing">
-            Please provide a course name
-          </FormMessage>
-        </Flex>
+    <FormLayout onSubmit={formik.handleSubmit} >
+      <FormField name="name">
+        <FormLabelAndMessage 
+          label="Course Name" 
+          message={formik.errors.name}
+        />
         <Form.Control asChild>
-          <Input onChange={handleNameChange} type="text" required />
-        </Form.Control>
-      </FormField>
-      <FormField name="course-desc">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Course description</FormLabel>
-          <FormMessage match="valueMissing">
-            Please provide a course description
-          </FormMessage>
-        </Flex>
-        <Form.Control asChild>
-          <Textarea onChange={handleDescriptionChange} required />
-        </Form.Control>
-      </FormField>
-      <FormField name="course-thumbnail">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Course thumbnail</FormLabel>
-          <FormMessage match="valueMissing">
-            Please provide a thumbnail for your course
-          </FormMessage>
-        </Flex>
-        <Form.Control asChild>
-          <Input onChange={handleThumbnailChange} type="file" />
-        </Form.Control>
-      </FormField>
-      <FormField name="course-tags">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Course Learnings (separated by comma)</FormLabel>
-          <FormMessage match="valueMissing">
-            Please provide learning elements, separated by comma (,)
-          </FormMessage>
-        </Flex>
-        <Form.Control asChild>
-          <Textarea onChange={handleTagsChange} />
-        </Form.Control>
-      </FormField>
-      <FormField name="course-visibility">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Course Visibility</FormLabel>
-          <FormMessage match="valueMissing">
-            Please choose course visibility
-          </FormMessage>
-        </Flex>
-        <Form.Control asChild>
-          <select
-            onChange={handleVisibilityChange}
-            className="border border-gray-300 rounded-md p-2"
+          <Input
+            onChange={formik.handleChange}
+            value={formik.values.name}
+            type="text"
             required
-          >
-            <option value="true">
-              Public (Available to see on the internet){' '}
-            </option>
-            <option value="false">Private (Private to users) </option>
-          </select>
+          />
         </Form.Control>
       </FormField>
 
-      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
-        <Form.Submit asChild>
-          <ButtonBlack type="submit" css={{ marginTop: 10 }}>
-            {isSubmitting ? (
+      <FormField name="description">
+        <FormLabelAndMessage 
+          label="Description" 
+          message={formik.errors.description}
+        />
+        <Form.Control asChild>
+          <Textarea
+            onChange={formik.handleChange}
+            value={formik.values.description}
+            
+          />
+        </Form.Control>
+      </FormField>
+
+      <FormField name="thumbnail">
+        <FormLabelAndMessage 
+          label="Course Thumbnail"
+          message={formik.errors.thumbnail}
+        />
+        <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
+          <div className="flex flex-col justify-center items-center h-full">
+            <div className="flex flex-col justify-center items-center">
+              {formik.values.thumbnail ? (
+                <img
+                  src={URL.createObjectURL(formik.values.thumbnail)}
+                  className={`${isUploading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
+                />
+              ) : (
+                <img
+                  src="/empty_thumbnail.png"
+                  className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
+                />
+              )}
+              <div className="flex justify-center items-center space-x-2">
+                <input
+                  type="file"
+                  id="fileInput"
+                  style={{ display: 'none' }}
+                  onChange={handleFileChange}
+                  accept="image/*"
+                />
+                <button
+                  type="button"
+                  className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
+                  onClick={() => document.getElementById('fileInput')?.click()}
+                >
+                  <UploadCloud size={16} className="mr-2" />
+                  <span>Upload Image</span>
+                </button>
+                <button
+                  type="button"
+                  className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
+                  onClick={() => setShowUnsplashPicker(true)}
+                >
+                  <ImageIcon size={16} className="mr-2" />
+                  <span>Choose from Gallery</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </FormField>
+
+      <FormField name="tags">
+        <FormLabelAndMessage 
+          label="Course Tags"
+          message={formik.errors.tags}
+        />
+        <Form.Control asChild>
+          <Textarea
+            onChange={formik.handleChange}
+            value={formik.values.tags}
+            placeholder="Enter tags separated by commas"
+          />
+        </Form.Control>
+      </FormField>
+
+      <FormField name="visibility">
+        <FormLabelAndMessage 
+          label="Course Visibility"
+          message={formik.errors.visibility}
+        />
+        <Select
+          value={formik.values.visibility.toString()}
+          onValueChange={(value) => formik.setFieldValue('visibility', value === 'true')}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select visibility" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">Public (Available to see on the internet)</SelectItem>
+            <SelectItem value="false">Private (Private to users)</SelectItem>
+          </SelectContent>
+        </Select>
+      </FormField>
+
+      <div className="flex justify-end mt-6">
+        <button
+          type="submit"
+          disabled={formik.isSubmitting}
+          className="px-4 py-2 bg-black text-white text-sm font-bold rounded-md"
+        >
+          {formik.isSubmitting ? (
             <BarLoader
               cssOverride={{ borderRadius: 60 }}
               width={60}
@@ -181,9 +250,15 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
           ) : (
             'Create Course'
           )}
-          </ButtonBlack>
-        </Form.Submit>
-      </Flex>
+        </button>
+      </div>
+
+      {showUnsplashPicker && (
+        <UnsplashImagePicker
+          onSelect={handleUnsplashSelect}
+          onClose={() => setShowUnsplashPicker(false)}
+        />
+      )}
     </FormLayout>
   )
 }