From cdd05f6476efac364ac32765e212d2346953c605 Mon Sep 17 00:00:00 2001
From: Flavio Mastrangelo <flavio.mastrangelo@unidos.it>
Date: Thu, 20 Feb 2025 23:56:11 +0100
Subject: [PATCH] feat: implement FormTagInput for learnings and tags in course
 creation & edit forms.

---
 .../(withmenu)/course/[courseuuid]/course.tsx |  2 +-
 .../EditCourseGeneral/EditCourseGeneral.tsx   | 23 +++----
 .../Modals/Course/Create/CreateCourse.tsx     | 66 +++++++++++-------
 .../Objects/StyledElements/Form/TagInput.tsx  | 68 +++++++++++++++++++
 apps/web/services/courses/courses.ts          |  2 +-
 5 files changed, 121 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/components/Objects/StyledElements/Form/TagInput.tsx

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index b98bb364..6adb5836 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -30,7 +30,7 @@ const CourseClient = (props: any) => {
 
   function getLearningTags() {
     // create array of learnings from a string object (comma separated)
-    let learnings = course?.learnings ? course?.learnings.split(',') : []
+    let learnings = course?.learnings ? course?.learnings.split('|') : []
     setLearnings(learnings)
   }
 
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
index e1403d1c..1c250168 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
@@ -10,6 +10,7 @@ import * as Form from '@radix-ui/react-form';
 import React, { useEffect, useState } from 'react';
 import ThumbnailUpdate from './ThumbnailUpdate';
 import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
+import FormTagInput from '@components/Objects/StyledElements/Form/TagInput';
 
 type EditCourseStructureProps = {
   orgslug: string
@@ -138,24 +139,22 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
               <FormField name="learnings">
                 <FormLabelAndMessage label="Learnings" message={formik.errors.learnings} />
                 <Form.Control asChild>
-                  <Textarea
-                    style={{ backgroundColor: 'white' }}
-                    onChange={formik.handleChange}
-                    value={formik.values.learnings}
-                    required
-                  />
+									<FormTagInput
+										placeholder="Enter to add..."
+										onChange={(value) => formik.setFieldValue('learnings', value)}
+										value={formik.values.learnings}
+									/>
                 </Form.Control>
               </FormField>
 
               <FormField name="tags">
                 <FormLabelAndMessage label="Tags" message={formik.errors.tags} />
                 <Form.Control asChild>
-                  <Textarea
-                    style={{ backgroundColor: 'white' }}
-                    onChange={formik.handleChange}
-                    value={formik.values.tags}
-                    required
-                  />
+									<FormTagInput
+										placeholder="Enter to add..."
+										onChange={(value) => formik.setFieldValue('tags', value)}
+										value={formik.values.tags}
+									/>
                 </Form.Control>
               </FormField>
 
diff --git a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
index f20f1490..0e7676c2 100644
--- a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
+++ b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
@@ -19,6 +19,7 @@ import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import {  UploadCloud, Image as ImageIcon } from 'lucide-react'
 import UnsplashImagePicker from "@components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker"
+import FormTagInput from "@components/Objects/StyledElements/Form/TagInput"
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -51,15 +52,16 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
     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 
+          {
+            name: values.name,
+            description: values.description,
+            learnings: values.learnings,
+            tags: values.tags,
+            visibility: values.visibility
           },
           values.thumbnail,
           session.data?.tokens?.access_token
@@ -123,8 +125,8 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
   return (
     <FormLayout onSubmit={formik.handleSubmit} >
       <FormField name="name">
-        <FormLabelAndMessage 
-          label="Course Name" 
+        <FormLabelAndMessage
+          label="Course Name"
           message={formik.errors.name}
         />
         <Form.Control asChild>
@@ -138,21 +140,21 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
       </FormField>
 
       <FormField name="description">
-        <FormLabelAndMessage 
-          label="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 
+        <FormLabelAndMessage
           label="Course Thumbnail"
           message={formik.errors.thumbnail}
         />
@@ -200,22 +202,34 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
         </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="learnings">
+				<FormLabelAndMessage
+					label="Course Learnings (What will you teach?)"
+					message={formik.errors.learnings}
+				/>
+				<FormTagInput
+					placeholder="Enter to add..."
+					value={formik.values.learnings}
+					onChange={(value) => formik.setFieldValue('learnings', value)}
+					error={formik.errors.learnings}
+				/>
+			</FormField>
+
+			<FormField name="tags">
+				<FormLabelAndMessage
+					label="Course Tags"
+					message={formik.errors.tags}
+				/>
+				<FormTagInput
+					placeholder="Enter to add..."
+					value={formik.values.tags}
+					onChange={(value) => formik.setFieldValue('tags', value)}
+					error={formik.errors.tags}
+				/>
+			</FormField>
 
       <FormField name="visibility">
-        <FormLabelAndMessage 
+        <FormLabelAndMessage
           label="Course Visibility"
           message={formik.errors.visibility}
         />
diff --git a/apps/web/components/Objects/StyledElements/Form/TagInput.tsx b/apps/web/components/Objects/StyledElements/Form/TagInput.tsx
new file mode 100644
index 00000000..ffd78059
--- /dev/null
+++ b/apps/web/components/Objects/StyledElements/Form/TagInput.tsx
@@ -0,0 +1,68 @@
+import React, { useState, Dispatch, SetStateAction } from 'react'
+import { Tag, TagInput } from 'emblor'
+
+interface FormTagInputProps {
+  value: string
+  onChange: (value: string) => void
+  separator?: string
+  error?: string
+	placeholder?: string
+}
+
+const FormTagInput = ({
+  value,
+  onChange,
+  separator = '|',
+  error,
+	placeholder,
+}: FormTagInputProps) => {
+  const initialTags = value
+    ? value.split(separator).map((text, i) => ({
+        id: i.toString(),
+        text: text.trim(),
+      }))
+    : []
+
+  const [tags, setTags] = useState<Tag[]>(initialTags)
+  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)
+
+  const handleTagsChange: Dispatch<SetStateAction<Tag[]>> = (
+    newTagsOrUpdater
+  ) => {
+    const newTags =
+      typeof newTagsOrUpdater === 'function'
+        ? newTagsOrUpdater(tags)
+        : newTagsOrUpdater
+
+    setTags(newTags)
+    onChange(newTags.map((tag) => tag.text).join(separator))
+  }
+
+  return (
+		<div>
+			<div className="space-y-2">
+				<TagInput
+					tags={tags}
+					setTags={handleTagsChange}
+					placeholder={placeholder}
+					styleClasses={{
+						inlineTagsContainer:
+							'border-input rounded-lg bg-background shadow-xs transition-shadow focus-within:border-ring/40 focus-within:outline-hidden focus-within:ring-[3px] ring-ring/8 dark:ring-ring/12 p-1 gap-1',
+						input:
+							'w-full min-w-[80px] focus-visible:outline-hidden shadow-none px-2 h-7',
+						tag: {
+							body: 'h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7',
+							closeButton:
+								'absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 dark:focus-visible:ring-ring/40 text-muted-foreground/80 hover:text-foreground',
+						},
+					}}
+					activeTagIndex={activeTagIndex}
+					setActiveTagIndex={setActiveTagIndex}
+				/>
+				{error && <p className="text-sm font-medium text-destructive">{error}</p>}
+			</div>
+		</div>
+  )
+}
+
+export default FormTagInput
diff --git a/apps/web/services/courses/courses.ts b/apps/web/services/courses/courses.ts
index e9796148..bdcb9c37 100644
--- a/apps/web/services/courses/courses.ts
+++ b/apps/web/services/courses/courses.ts
@@ -102,7 +102,7 @@ export async function createNewCourse(
   formData.append('name', course_body.name)
   formData.append('description', course_body.description)
   formData.append('public', course_body.visibility)
-  formData.append('learnings', course_body.tags)
+  formData.append('learnings', course_body.learnings)
   formData.append('tags', course_body.tags)
   formData.append('about', course_body.description)