mwitnessing/components/reports/ExperienceForm.js

import axiosInstance from '../../src/axiosSecure';
import { useEffect, useState } from "react";
import { toast } from 'react-toastify';
import { useRouter } from "next/router";
import Link from "next/link";
import DayOfWeek from "../DayOfWeek";
import { ReportType } from "@prisma/client";
const common = require('src/helpers/common');

import { useSession } from "next-auth/react"

import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
});
import 'react-quill/dist/quill.snow.css'; // import styles

// ------------------ ExperienceForm ------------------
// This component is used to create and edit 
//  model:
// model Report {
//     id           Int        @id @default(autoincrement())
//     date         DateTime
//     publisher    Publisher  @relation(fields: [publisherId], references: [id], onDelete: Cascade)
//     publisherId  String
//     assignment   Assignment @relation(fields: [assignmentId], references: [id], onDelete: Cascade)
//     assignmentId Int

//     placementCount       Int?
//     videoCount           Int?
//     returnVisitInfoCount Int?
//     conversationCount    Int?

//     experienceInfo String?
//   }

export default function ExperienceForm({ publisherId, assgnmentId, existingItem, onDone }) {
    const { data: session, status } = useSession()
    const [pubId, setPublisher] = useState(publisherId);

    const router = useRouter();

    //get the user from session if publisherId is null
    useEffect(() => {
        if (!publisherId) {
            if (session) {
                setPublisher(session.user.id);
            }
        }
    }, [publisherId, session]);

    const [item, setItem] = useState(existingItem || {
        experienceInfo: "",
        assignmentId: assgnmentId,
        publisherId: publisherId,
        date: new Date(),
        placementCount: 0,
        videoCount: 0,
        returnVisitInfoCount: 0,
        conversationCount: 0
    });

    const [locations, setLocations] = useState([]);



    useEffect(() => {
        const fetchLocations = async () => {
            try {
                console.log("fetching locations");
                const { data } = await axiosInstance.get("/api/data/locations");
                setLocations(data);
                item.locationId = data[0].id;
                console.log(data);
            } catch (error) {
                console.error(error);
            }
        };
        if (!locations.length) {
            fetchLocations();
        }
    }, []);


    const handleLocationChange = ({ target }) => {
        setItem({ ...item, [target.name]: target.value });
    };

    const handleChange = (content, delta, source, editor) => {
        item.experienceInfo = content;
        setItem(item);
        console.log(editor.getHTML()); // rich text
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        item.publisher = { connect: { id: pubId } };
        item.location = { connect: { id: parseInt(item.locationId) } };
        item.type = ReportType.Experience;
        delete item.locationId;

        try {
            const response = await axiosInstance.post('/api/data/reports', item);
            console.log(response);
            toast.success("Случката е записана. Благодаря!");
            setTimeout(() => {
                if (onDone) {
                    onDone();
                } else {
                    router.push(`/dash`);
                }
            }, 3000); // Delay for 3 seconds
        } catch (error) {
            console.log(error);
            toast.error("Error saving report");
        }
    }

    const modules = {
        toolbar: {
            container: [
                ['bold', 'italic', 'underline'], // Basic text formats
                [{ 'list': 'ordered' }, { 'list': 'bullet' }], // Lists
                ['link', 'image'] // Media
            ],
        }
    };



    return (
        <div className="w-full max-w-md mx-auto">
            <form className="bg-white dark:bg-gray-800 shadow rounded-lg px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit} >

                <div className="mb-4">
                    <label className='block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2' htmlFor="location">Място</label>
                    {locations && (
                        <select
                            name="locationId"
                            id="locationId"
                            value={item.locationId}
                            onChange={handleLocationChange}
                            className="block appearance-none w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                        >
                            {locations.map((loc) => (
                                <option key={loc.id} value={loc.id}>{loc.name}</option>
                            ))}
                        </select>
                    )}
                </div>

                <div className="mb-8"> {/* Increased bottom margin */}
                    <label className="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" htmlFor="experienceInfo">
                        Насърчителна случка
                    </label>
                    <ReactQuill
                        theme="snow"
                        value={item.experienceInfo}
                        onChange={handleChange}
                        modules={modules}
                        className="w-full h-60 pb-6 bg-white dark:bg-gray-700"
                    />
                </div>

                <div className="flex flex-col md:flex-row items-center justify-between mt-"> {/* Adjusted layout and added top margin */}
                    <Link href={`/dash`} className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 mt-4 md:mt-0">
                        Отказ
                    </Link>
                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                        Запази
                    </button>

                </div>
            </form>
        </div>
    );
}