Added content uploading and view (#1113)

* init

* fixed

src/components/file-editor/FileEditor.tsx

@@ -1,12 +1,14 @@
+import { FC } from 'react'
 import { Editor } from '@tinymce/tinymce-react'
 
 import { initialFileValue } from '~/components/file-editor/FileEditor.constants'
 
-const FileEditor = () => {
-  const handleSave = (content: string) => {
-    console.log('Saved content:', content)
-  }
+interface FileEditorProps {
+  onEdit: (content: string) => void
+  value: string
+}
 
+const FileEditor: FC<FileEditorProps> = ({ onEdit, value }) => {
   return (
     <Editor
       apiKey={import.meta.env.VITE_APP_TINY_MCE_API_KEY}
@@ -19,10 +21,11 @@ const FileEditor = () => {
         toolbar:
           'undo redo | blocks fontsize | bold italic underline strikethrough | ltr rtl | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent accordion | removeformat',
         content_style:
-          'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-        save_onsavecallback: handleSave
+          'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
       }}
       initialValue={initialFileValue}
+      onEditorChange={onEdit}
+      value={value}
     />
   )
 }

src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx

@@ -50,6 +50,7 @@ const CreateOrEditLesson = () => {
   const { openModal } = useModalContext()
   const navigate = useNavigate()
   const [attachments, setAttachments] = useState<Attachment[]>([])
+  const [content, setContent] = useState<string>('')
   const { id } = useParams()
 
   const handleResponseError = (error: ErrorResponse) => {
@@ -92,9 +93,14 @@ const CreateOrEditLesson = () => {
     )
   }
 
+  const handleEdit = (content: string) => {
+    setContent(content)
+  }
+
   const addLesson = (): Promise<AxiosResponse> => {
     const lesson = {
       ...data,
+      content,
       attachments: attachments.map((attachment) => attachment._id)
     }
     return ResourceService.addLesson(lesson)
@@ -156,11 +162,8 @@ const CreateOrEditLesson = () => {
   })
 
   useEffect(() => {
-    if (id) {
-      void fetchDataLesson(id)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (id) void fetchDataLesson(id)
+  }, [id, fetchDataLesson])
 
   if (getLessonLoading) {
     return <Loader pageLoad />
@@ -214,7 +217,7 @@ const CreateOrEditLesson = () => {
         >
           {t('lesson.labels.attachments')} <AddIcon sx={styles.addIcon} />
         </AppButton>
-        <FileEditor />
+        <FileEditor onEdit={handleEdit} value={content} />
         {attachmentsList}
         <Box sx={styles.buttons}>
           <AppButton size={SizeEnum.ExtraLarge} type={ButtonTypeEnum.Submit}>

src/pages/lesson-details/LessonDetails.constants.tsx

@@ -3,6 +3,7 @@ export const defaultResponse = {
   author: '',
   createdAt: '',
   description: '',
+  content: '',
   title: '',
   updatedAt: '',
   _id: ''

src/pages/lesson-details/LessonDetails.tsx

@@ -11,7 +11,6 @@ import useAxios from '~/hooks/use-axios'
 import { ResourceService } from '~/services/resource-service'
 import {
   attachmentsMock,
-  contentMock,
   defaultResponse
 } from '~/pages/lesson-details/LessonDetails.constants'
 import Accordions from '~/components/accordion/Accordions'
@@ -70,7 +69,7 @@ const LessonDetails = () => {
   const items = [
     {
       title: 'lesson.content',
-      content: contentMock
+      content: <div dangerouslySetInnerHTML={{ __html: response.content }} />
     },
     {
       title: 'lesson.attachments',

src/services/resource-service.ts

@@ -9,6 +9,7 @@ import {
   ItemsWithCount,
   LessonData,
   Lesson,
+  NewLesson,
   UpdateAttachmentParams
 } from '~/types'
 import { createUrlPath } from '~/utils/helper-functions'
@@ -22,7 +23,7 @@ export const ResourceService = {
     await axiosClient.get(createUrlPath(URLs.resources.lessons.get, id)),
   deleteLesson: async (id: string): Promise<AxiosResponse<Lesson>> =>
     await axiosClient.delete(createUrlPath(URLs.resources.lessons.delete, id)),
-  addLesson: async (data: LessonData): Promise<AxiosResponse> =>
+  addLesson: async (data: NewLesson): Promise<AxiosResponse> =>
     await axiosClient.post(URLs.resources.lessons.add, data),
   editLesson: async (data: LessonData, id?: string): Promise<AxiosResponse> =>
     await axiosClient.patch(

src/types/lesson/interfaces/lesson.interfaces.ts

@@ -3,3 +3,7 @@ export interface LessonData {
   description: string
   attachments: string[]
 }
+
+export interface NewLesson extends LessonData {
+  content: string
+}

src/types/my-resources/interfaces/myResources.interface.ts

@@ -3,6 +3,7 @@ import { CommonEntityFields, RequestParams } from '~/types'
 export interface Lesson extends CommonEntityFields {
   title: string
   author: string
+  content: string
   description: string
   attachments: string[]
 }