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

'use client'
import FormLayout, {
  ButtonBlack,
  Flex,
  FormField,
  FormLabel,
  Input,
  Textarea,
} 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 { BarLoader } from 'react-spinners'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'

function CreateCourseModal({ closeModal, orgslug }: any) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  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 [orgId, setOrgId] = React.useState(null) as any
  const [org, setOrg] = React.useState(null) as any

  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)
    console.log(visibility)
  }

  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 status = await createNewCourse(
      orgId,
      { name, description, tags, visibility },
      thumbnail
    )
    await revalidateTags(['courses'], orgslug)
    setIsSubmitting(false)

    if (status.org_id == orgId) {
      closeModal()
      router.refresh()
      await revalidateTags(['courses'], orgslug)

      // refresh page (FIX for Next.js BUG)
      // window.location.reload();
    } else {
      alert('Error creating course, please see console logs')
    }
  }

  React.useEffect(() => {
    if (orgslug) {
      getOrgMetadata()
    }
  }, [isLoading, orgslug])

  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>
        <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"
            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 ? (
              <BarLoader
                cssOverride={{ borderRadius: 60 }}
                width={60}
                color="#ffffff"
              />
            ) : (
              'Create Course'
            )}
          </ButtonBlack>
        </Form.Submit>
      </Flex>
    </FormLayout>
  )
}

export default CreateCourseModal