finished reviews section

Author: Bennyli1995

Diff for: backend/src/models/review.ts

@@ -1,18 +1,20 @@
 import { InferSchemaType, model, Schema } from "mongoose";
 
-const reviewSchema = new Schema({
+const reviewSchema = new Schema(
+  {
     // _id: { type: String, required: true },
     review_id: { type: Number, required: true },
-    userID: { type: Number, required: true },
+    userID: { type: String, required: true },
     tradespersonID: { type: Number, required: true },
     rating: { type: Number, required: true },
     comment: { type: String, required: true },
     date: { type: String, required: true },
-}, { timestamps: true });
+  },
+  { timestamps: true }
+);
 
 type Review = InferSchemaType<typeof reviewSchema>;
 
 // reviewSchema.set('validateBeforeSave', false);
 
-
 export default model<Review>("reviews", reviewSchema);

Diff for: frontend/package-lock.json

@@ -14,6 +14,8 @@
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.3",
     "react-social-icons": "^6.9.0"
   },

Diff for: frontend/package.json

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { FaStar } from "react-icons/fa"; // if using react-icons
+
+const ReviewModal = ({ workerName, isOpen, onSubmit, onCancel }) => {
+  const [rating, setRating] = useState(null);
+  const [hover, setHover] = useState(null); // For hover state on stars
+  const [comment, setComment] = useState("");
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
+      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div className="mt-3 text-center">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">
+            Leave a review for {workerName}
+          </h3>
+          <div className="mt-2">
+            <div className="flex justify-center">
+              {[...Array(5)].map((star, index) => {
+                const ratingValue = index + 1;
+                return (
+                  <label key={index}>
+                    <input
+                      type="radio"
+                      name="rating"
+                      value={ratingValue}
+                      onClick={() => setRating(ratingValue)}
+                      className="hidden"
+                    />
+                    <FaStar
+                      size={24}
+                      className="cursor-pointer"
+                      color={
+                        ratingValue <= (hover || rating) ? "#ffc107" : "#e4e5e9"
+                      }
+                      onMouseEnter={() => setHover(ratingValue)}
+                      onMouseLeave={() => setHover(null)}
+                    />
+                  </label>
+                );
+              })}
+            </div>
+            <textarea
+              rows="4"
+              className="mt-2 px-4 py-2 border rounded-md w-full"
+              placeholder="Share details of your own experience..."
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            ></textarea>
+          </div>
+          <div className="items-center px-4 py-3">
+            <button
+              id="cancel"
+              className="px-4 py-2 bg-gray-200 text-gray-900 rounded-md"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              id="submit"
+              className="mx-3 px-4 py-2 bg-blue-500 text-white rounded-md focus:outline-none"
+              onClick={() => onSubmit({ rating, comment })}
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReviewModal;

Diff for: frontend/src/components/ReviewModal.tsx

@@ -1,26 +1,37 @@
-import React from "react";
-import searchIcon from "../assets/search.svg"; // Make sure the path to your search icon is correct
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import searchIcon from "../assets/Search.svg";
 
 const SearchBar: React.FC = () => {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+
+  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    navigate(`/search-results?query=${encodeURIComponent(query)}`);
+  };
+
   return (
-    <div className="flex-1 max-w-lg relative">
+    <form onSubmit={handleSearch} className="flex-1 max-w-lg relative">
       <input
         type="search"
         className="w-full rounded-full border border-neutral-300 pl-10 pr-4 py-3 text-neutral-700 focus:border-blue-500 focus:ring-0"
-        placeholder="Search for services that you require..."
+        placeholder="Type in your question and we will do the rest!"
         aria-label="Search"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
       />
       <button
         className="absolute inset-y-0 left-0 flex items-center pl-3"
-        type="button"
+        type="submit"
       >
         <img
           src={searchIcon}
           alt="Search icon"
           className="h-5 w-5 text-gray-500"
         />
       </button>
-    </div>
+    </form>
   );
 };
 

Diff for: frontend/src/components/SearchBar.tsx

@@ -0,0 +1,49 @@
+// SearchResultsPage.tsx
+import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const SearchResultsPage: React.FC = () => {
+  const location = useLocation();
+  const query = new URLSearchParams(location.search).get("query");
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchResults = async () => {
+      if (query) {
+        setIsLoading(true);
+        try {
+          const response = await fetch("http://localhost:5001/recommend", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message: query }),
+          });
+          const data = await response.json();
+          setResults(data); // Assuming the endpoint returns an array of results
+        } catch (error) {
+          console.error("Failed to fetch recommendations:", error);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchResults();
+  }, [query]);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!results.length) return <div>No results found.</div>;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Render your results here */}
+      {results.map((result, index) => (
+        <div key={index}>{/* Render result */}</div>
+      ))}
+    </div>
+  );
+};
+
+export default SearchResultsPage;

Diff for: frontend/src/pages/SearchResultsPage.tsx

@@ -2,13 +2,54 @@ import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import profilePic from "../assets/User.jpeg";
 import ReviewItem from "../components/ReviewItem";
+import { useAuth0 } from "@auth0/auth0-react";
+import ReviewModal from "../components/ReviewModal";
 
 const WorkerDetails: React.FC = () => {
   const { workerId } = useParams<{ workerId: string }>();
   const navigate = useNavigate();
   const [worker, setWorker] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  const { user, isAuthenticated } = useAuth0();
+  const [showReviewForm, setShowReviewForm] = useState(false);
+  const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
+  const [review, setReview] = useState({
+    rating: 0,
+    comment: "",
+    date: new Date().toISOString().split("T")[0], // format as 'YYYY-MM-DD'
+  });
+
+  const handleReviewSubmit = async (review) => {
+    if (isAuthenticated && user) {
+      try {
+        const response = await fetch("http://localhost:5001/add_review", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userID: user.sub, // Auth0 user identifier
+            tradespersonID: workerId,
+            rating: review.rating,
+            comment: review.comment,
+            date: new Date().toISOString().split("T")[0],
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        // Handle success, such as closing the form and showing a message
+        setIsReviewModalOpen(false);
+        // Refresh the reviews or show a success message...
+      } catch (error) {
+        console.error("Failed to submit review:", error);
+      }
+    }
+  };
+
   useEffect(() => {
     const fetchWorkerDetails = async () => {
       setIsLoading(true);
@@ -137,9 +178,18 @@ const WorkerDetails: React.FC = () => {
                 <button className="bg-yellow-400 hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded-r">
                   Book Now
                 </button>
-                <button className="bg-purple-400 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-r">
+                <button
+                  className="bg-purple-400 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-r"
+                  onClick={() => setIsReviewModalOpen(true)}
+                >
                   Leave a Review
                 </button>
+                <ReviewModal
+                  workerName={worker?.first_name + " " + worker?.last_name}
+                  isOpen={isReviewModalOpen}
+                  onSubmit={handleReviewSubmit}
+                  onCancel={() => setIsReviewModalOpen(false)}
+                />
               </div>
             </div>
           </div>