From fb08bbff2b4875143fbb4bf8fcbe9daa2ec4cb6a Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Wed, 28 Feb 2024 14:12:51 +0200
Subject: [PATCH] New feedback form

---
 components/reports/FeedbackForm.js | 151 +++++++++++++++++++++++++++++
 pages/contactUs.tsx                |   2 +
 pages/feedback.tsx                 |  13 +++
 3 files changed, 166 insertions(+)
 create mode 100644 components/reports/FeedbackForm.js
 create mode 100644 pages/feedback.tsx

diff --git a/components/reports/FeedbackForm.js b/components/reports/FeedbackForm.js
new file mode 100644
index 0000000..7f9743a
--- /dev/null
+++ b/components/reports/FeedbackForm.js
@@ -0,0 +1,151 @@
+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 { Location, UserRole } 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
+
+// ------------------ FeedbackForm ------------------
+// 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 FeedbackForm({ publisherId, 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({
+        experienceInfo: "",
+        assignmentId: 0,
+        publisherId: publisherId,
+        date: new Date(),
+        placementCount: 0,
+        videoCount: 0,
+        returnVisitInfoCount: 0,
+        conversationCount: 0
+    });
+
+    const [locations, setLocations] = useState([]);
+
+
+    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 } };
+        delete item.assignmentId;
+
+        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} >
+
+                <h1 className="text-2xl font-bold mb-4">Отзив</h1>
+                <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="placementCount"
+                            id="placementCount"
+                            value={item.placementCount}
+                            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"
+                        >
+                            <option key={1} value={1}>Намерих проблем</option>
+                            <option key={2} value={2}>Предложение</option>
+                            <option key={3} value={3}>Друго</option>
+                        </select>
+                    )}
+                </div>
+
+                <div className="mb-8"> {/* Increased bottom margin */}
+
+                    <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 */}
+                    <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>
+    );
+}
+
+
diff --git a/pages/contactUs.tsx b/pages/contactUs.tsx
index abe84bb..33a12b3 100644
--- a/pages/contactUs.tsx
+++ b/pages/contactUs.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Layout from "../components/layout";
+import FeedbackForm from "../components/reports/FeedbackForm";
 
 const ContactsPage = () => {
     return (
@@ -24,6 +25,7 @@ const ContactsPage = () => {
                 </div > */
                 }
             </div >
+            <FeedbackForm />
         </Layout >
     );
 };
diff --git a/pages/feedback.tsx b/pages/feedback.tsx
new file mode 100644
index 0000000..851cd33
--- /dev/null
+++ b/pages/feedback.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import Layout from "../components/layout";
+import FeedbackForm from "../components/reports/FeedbackForm";
+
+const ContactsPage = () => {
+    return (
+        <Layout>
+            <FeedbackForm />
+        </Layout >
+    );
+};
+
+export default ContactsPage;