backend_and_cms/frontend/src/components/Courses/CourseDetails.tsx

import {
    Button,
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Textarea,
    Container,
    Heading,
    Box
} from "@chakra-ui/react"
import { useQueryClient, useMutation } from "@tanstack/react-query"
import { useEffect, useState } from "react"
import useCustomToast from "../../hooks/useCustomToast"
import { CoursesService, type ApiError, CourseCreate, CourseDetailsPublic } from "../../client"
import { handleError } from "../../utils"
import { type SubmitHandler, useForm } from "react-hook-form"
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import { Editor } from "react-draft-wysiwyg";
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";





const CourseDetails = () => {
    const queryClient = useQueryClient();
    const courseDetails = queryClient.getQueryData(['course']) as CourseDetailsPublic | undefined;

    const toolbar = {
        options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history', 'embedded', 'emoji', 'image'],
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }

    const showToast = useCustomToast()

    const [contentEditorState, setContentEditorState] = useState<EditorState>(EditorState.createEmpty());
    const [contents, setContent] = useState<string>('');
    const [infoEditorState, setInfoEditorState] = useState<EditorState>(EditorState.createEmpty());
    const [info, setInfo] = useState<string>('');
    const [longDescriptionEditorState, setLongDescriptionEditorState] = useState<EditorState>(EditorState.createEmpty());
    const [longDescription, setlongDescription] = useState<string>('');
    const [remarksEditorState, setRemarksEditorState] = useState<EditorState>(EditorState.createEmpty());
    const [remarks, setRemarks] = useState<string>('');
    const {
        register,
        handleSubmit,
        reset,
        //getValues,
        setValue,
        formState: { isSubmitting, errors, isDirty },
    } = useForm<CourseCreate>({
        mode: "onBlur",
        criteriaMode: "all",
        defaultValues: {
            title: courseDetails?.title,
            sort_description: courseDetails?.sort_description,
            long_description: courseDetails?.long_description,
            remark: courseDetails?.remark,
            information: courseDetails?.information,
            contant: courseDetails?.contant,
        }
    })

    useEffect(() => {
        reset({}, { keepDirty: true });
        if (courseDetails) {
            setValue('title', courseDetails.title, { shouldDirty: true });
            setValue('sort_description', courseDetails.sort_description, { shouldDirty: true });
            setValue('long_description', courseDetails.long_description, { shouldDirty: true });
            setValue('remark', courseDetails.remark, { shouldDirty: true });
            setValue('information', courseDetails.information, { shouldDirty: true });
            setValue('contant', courseDetails.contant, { shouldDirty: true });
            // Update other form fields as needed
        }
        if (courseDetails?.long_description) {
            const contentBlock = htmlToDraft(courseDetails.long_description);
            if (contentBlock) {
                const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
                const editorState = EditorState.createWithContent(contentState);
                setLongDescriptionEditorState(editorState);
                // setValue('long_description', courseDetails.long_description);
            }
        }
        if (courseDetails?.remark) {
            const contentBlock = htmlToDraft(courseDetails.remark);
            if (contentBlock) {
                const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
                const editorState = EditorState.createWithContent(contentState);
                setRemarksEditorState(editorState);
                //setValue('remark', courseDetails.remark);
            }
        }
        if (courseDetails?.information) {
            const contentBlock = htmlToDraft(courseDetails.information);
            if (contentBlock) {
                const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
                const editorState = EditorState.createWithContent(contentState);
                setInfoEditorState(editorState);
                //setValue('information', courseDetails.information);
            }
        }
        if (courseDetails?.contant) {
            const contentBlock = htmlToDraft(courseDetails.contant);
            if (contentBlock) {
                const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
                const editorState = EditorState.createWithContent(contentState);
                setContentEditorState(editorState);
                //setValue('contant', courseDetails.contant);
            }
        }
    }, [courseDetails]);
    const mutation = useMutation({
        mutationFn: (data: CourseCreate) =>
            CoursesService.updateCourse({ id: courseDetails?.id ?? '', requestBody: data }),
        onSuccess: () => {
            showToast("Success!", "Course create successfully.", "success")

        },
        onError: (err: ApiError) => {
            handleError(err, showToast)
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ["courses"] })
            //history.go(-1)
        },
    })

    const onSubmit: SubmitHandler<CourseCreate> = async (data) => {
        mutation.mutate(data)
    }

    return (
        <Container maxW="full">
            <Heading size="sm" py={4}>
                Course Details
            </Heading>
            <Box
                w={{ sm: "full", md: "50%" }}
                as="form"
                onSubmit={handleSubmit(onSubmit)}
            >
                <FormControl isInvalid={!!errors.title}>
                    <FormLabel htmlFor="title">Title</FormLabel>
                    <Input
                        defaultValue={courseDetails?.title}
                        id="title"
                        type="text"
                        {...register("title", {
                            required: "title is required",
                        })}
                    />
                    {errors.title && (
                        <FormErrorMessage>{errors.title.message}</FormErrorMessage>
                    )}
                </FormControl>
                <FormControl mt={4}></FormControl>
                <FormControl >
                    <FormLabel htmlFor="sort_description">Short Description</FormLabel>
                    <Textarea
                        id="sort_description"
                        {...register("sort_description", {
                            required: "sort_description is required",
                        })}
                    />
                </FormControl>
                <FormControl mt={4}></FormControl>
                <FormControl >
                    <FormLabel htmlFor="long_description">Long Description</FormLabel>
                    <Editor
                        editorState={longDescriptionEditorState}
                        wrapperClassName="wrapper-class"
                        editorClassName="demo-editor"
                        onEditorStateChange={newState => {
                            setLongDescriptionEditorState(newState);
                            setlongDescription(draftToHtml(convertToRaw(newState.getCurrentContent())));
                            setValue("long_description", longDescription);
                        }}
                        toolbar={toolbar}
                    />
                </FormControl>
                <FormControl mt={4}></FormControl>
                <FormControl >
                    <FormLabel htmlFor="information">Information</FormLabel>
                    <Editor
                        editorState={infoEditorState}
                        wrapperClassName="wrapper-class"
                        editorClassName="demo-editor"
                        onEditorStateChange={newState => {
                            setInfoEditorState(newState);
                            setInfo(draftToHtml(convertToRaw(newState.getCurrentContent())));
                            setValue("information", info);
                        }}
                        toolbar={toolbar}
                    />
                </FormControl>
                <FormControl mt={4}></FormControl>
                <FormControl >
                    <FormLabel htmlFor="contant">Content</FormLabel>
                    <Editor
                        editorState={contentEditorState}
                        wrapperClassName="wrapper-class"
                        editorClassName="demo-editor"
                        onEditorStateChange={newState => {
                            setContentEditorState(newState);
                            setContent(draftToHtml(convertToRaw(newState.getCurrentContent())));
                            setValue("contant", contents);
                        }}
                        toolbar={toolbar}
                    />
                </FormControl>
                <FormControl mt={4}></FormControl>
                <FormControl >
                    <FormLabel htmlFor="remark">Remark</FormLabel>
                    <Editor
                        editorState={remarksEditorState}
                        wrapperClassName="wrapper-class"
                        editorClassName="demo-editor"
                        onEditorStateChange={newState => {
                            setRemarksEditorState(newState);
                            setRemarks(draftToHtml(convertToRaw(newState.getCurrentContent())));
                            setValue("remark", remarks);
                        }}
                        toolbar={toolbar}
                    />
                </FormControl>
                <FormControl mt={4}></FormControl>
                {/* <button
                    type="button"
                    onClick={() => {
                        const values = getValues()
                        console.log(values)
                        // history.go(-1)// { test: "test-input", test1: "test1-input" }
                    }}
                >
                    Get Values
                </button> */}
                <Button
                    variant="primary"
                    type="submit"
                    isLoading={isSubmitting}
                    isDisabled={!isDirty}
                >
                    Save
                </Button>
                <FormControl mt={20}></FormControl>
            </Box>
        </Container>
    )
}
export default CourseDetails;