update swipe page and connect with backend, delete menu event detail,…

…modofy Ux/Ui , add page about us, , add hackathon page(don't to use completed at Dashboard)
Celesca · Nov 26, 2024 · 5263877 · 5263877
2 parents 28301cf + 8d05527
commit 5263877
Show file tree

Hide file tree

Showing 6 changed files with 452 additions and 244 deletions.
diff --git a/frontend/src/Rating.jsx b/frontend/src/Rating.jsx
@@ -1,124 +1,148 @@
-import  { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Axios from 'axios';
 
 const Rating = () => {
-    const [TeamName, setTeamname] = useState('');
-    const [UserName, setUsername] = useState('');
-    const [RatingValue, setRatingValue] = useState('');
-    const [Comment, setComment] = useState('');
-    const [errorMessage, setErrorMessage] = useState('');
-    const [UserID, setUserID] = useState(null);
-
-    useEffect(() => {
-        //อันนี้ไม่แน่ใจว่าต้องมีมั้ย
-      const storedUserID = localStorage.getItem('UserID');
-      if (storedUserID) {
-        setUserID(storedUserID);
-      } else {
-        console.warn('UserID not found in localStorage');
+  const [TeamName, setTeamname] = useState('');
+  const [UserName, setUsername] = useState('');
+  const [RatingValue, setRatingValue] = useState('');
+  const [Comment, setComment] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [UserID, setUserID] = useState(null);
+
+  useEffect(() => {
+    const storedUserID = localStorage.getItem('UserID');
+    if (storedUserID) {
+      setUserID(storedUserID);
+    } else {
+      console.warn('UserID not found in localStorage');
+    }
+  }, []);
+
+  const addrating = async () => {
+    try {
+      if (!UserID) {
+        setErrorMessage('คุณต้องล็อกอินก่อนเพื่อให้คะแนน');
+        return;
       }
-    }, []);
-
-    const addrating = async () => {
-      try {
-        if (!UserID) {
-          setErrorMessage('คุณต้องล็อกอินก่อนเพื่อให้คะแนน');
-          return;
-        }
-
-        if (RatingValue < 1 || RatingValue > 5) {
-          setErrorMessage('กรุณากรอกคะแนนระหว่าง 1 ถึง 5 เป็นจำนวนเต็ม');
-          return;
-        }
-
-        const checkTeam = await Axios.post(`http://localhost:3000/team`, {
+
+      if (RatingValue < 1 || RatingValue > 5) {
+        setErrorMessage('กรุณากรอกคะแนนระหว่าง 1 ถึง 5 เป็นจำนวนเต็ม');
+        return;
+      }
+
+      // ดึง UserID จาก Username ที่กรอก
+      const userResponse = await Axios.get(`http://localhost:3000/user/UserID`, {
+        params: { username: UserName },
+      });
+
+      const ratedUserID = userResponse.data.userID;
+
+      if (!ratedUserID) {
+        setErrorMessage('ไม่พบ UserID ของ Username นี้');
+        return;
+      }
+
+      // ตรวจสอบว่า UserID ของ Username ที่กรอกอยู่ในทีมมั้ย
+      const checkTeam = await Axios.post(`http://localhost:3000/team`, {
+        teamname: TeamName,
+        userid: ratedUserID, // ตรวจสอบ UserID นี้ในทีม
+      });
+
+      if (!checkTeam.data.valid) {
+        setErrorMessage('คุณไม่ได้อยู่ทีมเดียวกัน กรุณาลองใหม่อีกครั้ง');
+        return;
+      }
+
+      // เพิ่ม ratedUserID ลงในตาราง userteam
+      await Axios.post(
+        `http://localhost:3000/userteam`,
+        {
           teamname: TeamName,
-          username: UserName,
-        });
-
-        if (!checkTeam.data.valid) {
-          setErrorMessage('คุณไม่ได้อยู่ทีมเดียวกัน กรุณาลองใหม่อีกครั้ง');
-          return;
+          ratedUserID, // UserID ของผู้ที่ได้รับคะแนน
+          rateByID: UserID, // UserID ของผู้ให้คะแนน
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
         }
-
-        const userResponse = await Axios.get(`http://localhost:3000/user/UserID`, {
-          params: { username: UserName },
-        });
-
-        const ratedUserID = userResponse.data.userID;
-
-        await Axios.post(
-          `http://localhost:3000/userrating`,
-          {
-            TeamName,
-            UserName,
-            RatingValue: parseInt(RatingValue),
-            Comment,
-            ratedUserID,
-            rateByID: UserID,
+      );
+
+      // add คะแนนลง userrating
+      await Axios.post(
+        `http://localhost:3000/userrating`,
+        {
+          TeamName,
+          UserName,
+          RatingValue: parseInt(RatingValue),
+          Comment,
+          ratedUserID,
+          rateByID: UserID,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
           },
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem('token')}`,
-            },
-          }
-        );
-
-        setTeamname('');
-        setUsername('');
-        setRatingValue('');
-        setComment('');
-        setErrorMessage('');
-        alert('บันทึกคะแนนสำเร็จ');
-      } catch (error) {
-        console.error('Error:', error);
-        setErrorMessage('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
-      }
-    };
+        }
+      );
+
+      // รีเซ็ตฟอร์ม
+      setTeamname('');
+      setUsername('');
+      setRatingValue('');
+      setComment('');
+      setErrorMessage('');
+      alert('บันทึกคะแนนสำเร็จ');
+    } catch (error) {
+      console.error('Error:', error);
+      setErrorMessage('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-r from-blue-200 to-indigo-400 flex items-center justify-center p-4">
       <div className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden">
         <div className="bg-gradient-to-r from-purple-600 to-blue-400 to-indigo-600 p-4 text-center">
           <h1 className="text-3xl font-bold text-white mb-1">Rating Teammate</h1>
         </div>
-        
+
         <div className="p-6 space-y-6">
           <div className="space-y-4">
-              <input
-                type="text"
-                placeholder="Enter Team Name"
-                value={TeamName}
-                onChange={(event) => setTeamname(event.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <input
-                type="text"
-                placeholder="Enter Username"
-                value={UserName}
-                onChange={(event) => setUsername(event.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <input
-                type="number"
-                placeholder="Enter a score as an integer from 1 to 5"
-                value={RatingValue}
-                onChange={(event) => setRatingValue(event.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <textarea
-                placeholder="Comment"
-                value={Comment}
-                onChange={(event) => setComment(event.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              {errorMessage && (
-                <div className="text-red-500 text-center">{errorMessage}</div>
-              )}
-
-            <button 
+            <input
+              type="text"
+              placeholder="Enter Team Name"
+              value={TeamName}
+              onChange={(event) => setTeamname(event.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <input
+              type="text"
+              placeholder="Enter Username"
+              value={UserName}
+              onChange={(event) => setUsername(event.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <input
+              type="number"
+              placeholder="Enter a score as an integer from 1 to 5"
+              value={RatingValue}
+              onChange={(event) => setRatingValue(event.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <textarea
+              placeholder="Comment"
+              value={Comment}
+              onChange={(event) => setComment(event.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            {errorMessage && (
+              <div className="text-red-500 text-center">{errorMessage}</div>
+            )}
+
+            <button
               onClick={addrating}
-              className="w-full px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">
+              className="w-full px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300"
+            >
               Submit
             </button>
           </div>
@@ -128,4 +152,4 @@ const Rating = () => {
   );
 };
 
-export default Rating;
+export default Rating;
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -202,6 +202,25 @@ function Navbar() {
                 </>
               ) : (
                 <>
+
+                  <a href="/profile" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Profile
+                  </a>
+                  <a href="/EventDetail" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Event hackathon
+                  </a>
+                  <a href="/hackathon" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Hackathon
+                  </a>
+                  <a href="/swipe" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Match
+                  </a>
+                  {isAdmin && (
+                    <a href="/dashboard" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                      Dashboard
+                    </a>
+                  )}
+
                   <a href="/hackathon" className="text-white hover:text-purple-200 transition duration-300 font-medium">
                     รวม hackathon
                   </a>
@@ -220,6 +239,26 @@ function Navbar() {
                   <a href="/profile" className="text-white hover:text-purple-200 transition duration-300 font-medium">
                     โปรไฟล์
                   </a>
+
+
+                  <a href="/profile" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Profile
+                  </a>
+                  <a href="/EventDetail" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Event hackathon
+                  </a>
+                  <a href="/hackathon" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Hackathon
+                  </a>
+                  <a href="/swipe" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                    Match
+                  </a>
+                  {isAdmin && (
+                    <a href="/dashboard" className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300">
+                      Dashboard
+                    </a>
+                  )}
+
                   <button
                     onClick={handleLogout}
                     className="text-white hover:bg-white/10 px-4 py-2 rounded-lg transition duration-300"