karapy · karapy · Apr 7, 2023 · Apr 7, 2023 · Apr 7, 2023
diff --git a/data/feedBack.json b/data/feedBack.json
@@ -0,0 +1 @@
+[{"id":"51522154-ac4f-489d-9229-7044b007035c","timestamp":1680907824978,"name":"KAMURAN KARA"},{"id":"2b4c8134-af17-48f7-8894-fec5ba859698","timestamp":1680907843708,"name":"serenay kara"},{"id":"7fd5b884-fbd7-4c99-a23c-94238f62532f","timestamp":1680907863020,"name":"selina kara"}]
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "eslint-config-next": "13.1.6",
     "next": "13.1.6",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

diff --git a/pages/_document.js b/pages/_document.js
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="fa" dir="rtl">
+    <Html lang="en">
       <Head />
       <body>
         <Main />

diff --git a/pages/api/feedback.js b/pages/api/feedback.js
@@ -0,0 +1,25 @@
+import {v4 as uuidv4} from 'uuid';
+import fs from 'fs';
+import path from 'path';
+
+const handler = (req, res) => {
+    let myuuid = uuidv4();
+    const filePath = path.join(process.cwd(), 'data', 'feedback.json')
+    const fileData = fs.readFileSync(filePath)
+    const data = JSON.parse(fileData)
+    if (req.method === 'POST') {
+        const name = req.body.name
+        data.push({id: myuuid, timestamp: Date.now(), name: name})
+        fs.writeFileSync(filePath, JSON.stringify(data));
+        res.status(201).json({message: 'sucess', name: data})
+    } else if (req.method === 'DELETE') {
+        const filteredData = data.filter((item)=> item.id !== req.body.id)
+        fs.writeFileSync(filePath, JSON.stringify(filteredData));
+        res.status(200).json({message: 'Done'})
+    } else {
+        res.status(200).json({feedbacks: data})
+    }
+
+}
+
+export default handler;
diff --git a/pages/index.js b/pages/index.js
@@ -1,10 +1,118 @@
-import Head from "next/head";
-import Image from "next/image";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export default function Home() {
+  const [feedbacks, setFeedBacks] = useState([]);
+  const [name, setName] = useState("");
+
+  const fetchData = async () => {
+    const res = await fetch("/api/feedback");
+    const resData = await res.json();
+    console.log(resData);
+    setFeedBacks(resData.feedbacks.reverse());
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [name]);
+
+  const formSubmitHandler = async (event) => {
+    event.preventDefault();
+
+    const response = await fetch("/api/feedback", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name: name }),
+    });
+    const responseData = await response.json();
+    console.log(responseData);
+    setName("");
+    if (responseData) {
+      return <p>submited</p>;
+    }
+  };
+
+  const deleteHandler = async (id) => {
+    console.log("will delete ", id)
+    const response = await fetch("/api/feedback", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id: id }),
+    });
+    const responseData = await response.json();
+    console.log(responseData);
+    fetchData();
+  }
+
   return (
     <>
-      <h1 className="text-3xl font-bold underline font-vazir">به نام خدا</h1>
+      <div className="flex items-center justify-center h-screen bg-slate-200 m-0">
+        <div className="flex flex-col">
+          <form className="w-full max-w-sm" onSubmit={formSubmitHandler}>
+            <div className="flex items-center border-b border-teal-500 py-2">
+              <input
+                className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+                type="text"
+                placeholder="Jane Doe"
+                aria-label="Full name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                name="name"
+              />
+              <button
+                className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
+                // type="button"
+              >
+                Sign Up
+              </button>
+              <button
+                className="flex-shrink-0 border-transparent border-4 text-teal-500 hover:text-teal-800 text-sm py-1 px-2 rounded"
+                // type="button"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+          {/* {feedbacks.map((item)=> <p>{item.name}</p>)} */}
+          <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+              <tr>
+                <th scope="col" class="px-6 py-3">
+                  Name
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  Time
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  id
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {feedbacks.map((item, index) => 
+                <tr
+                  key={item.id}
+                  className={`${index % 2 === 0 ? "bg-white hover:bg-amber-500 cursor-pointer flex-row-reverse" : "bg-slate-300 hover:bg-amber-500 cursor-pointer flex-row-reverse"}`}
+                  onClick={deleteHandler.bind(null, item.id)}
+                  // className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                >
+                  <th
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                  >
+                    {item.name.toUpperCase()}
+                  </th>
+                  <td className="px-6 py-4">{new Date(item.timestamp).getHours() + ':' + new Date(item.timestamp).getMinutes() + ':' + new Date(item.timestamp).getSeconds()}</td>
+                  <td className="px-6 py-4">{item.id.slice(0, 7)}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
     </>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"id":"51522154-ac4f-489d-9229-7044b007035c","timestamp":1680907824978,"name":"KAMURAN KARA"},{"id":"2b4c8134-af17-48f7-8894-fec5ba859698","timestamp":1680907843708,"name":"serenay kara"},{"id":"7fd5b884-fbd7-4c99-a23c-94238f62532f","timestamp":1680907863020,"name":"selina kara"}]