+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/front/components/PrivateRoute.jsx b/src/front/components/PrivateRoute.jsx
new file mode 100644
index 0000000000..ba86075f62
--- /dev/null
+++ b/src/front/components/PrivateRoute.jsx
@@ -0,0 +1,7 @@
+import { Navigate } from "react-router-dom";
+import { useGlobalReducer } from "../hooks/useGlobalReducer";
+
+export const PrivateRoute = ({ children }) => {
+ const { store } = useGlobalReducer();
+ return store.token ? children :
+
+ );
+};
diff --git a/src/front/pages/Favorites.jsx b/src/front/pages/Favorites.jsx
new file mode 100644
index 0000000000..8def43c278
--- /dev/null
+++ b/src/front/pages/Favorites.jsx
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+
+const UserInfo = () => {
+ // Example user data (Replace with actual user data from local storage or backend)
+ const user = JSON.parse(localStorage.getItem("user")) || {
+ name: "John Doe",
+ email: "johndoe@example.com",
+ };
+
+ return (
+ Ingredients List
+ +
+ {ingredients.length > 0 ? (
+ ingredients.map((ingredient) => (
+
+
+ {/* Button to create cocktail */}
+
+
+ {/* Display created cocktail */}
+ {cocktailCreated && (
+
+ 
+
+ ))
+ ) : (
+ "No Ingredients available!!!"
+ )}
+ {ingredient}
+
+
+ handleIngredientToggle(ingredient)}
+ />
+
+
+
+
+ )}
+ {cocktailCreated.name}
+Ingredients:
+-
+ {cocktailCreated.ingredients.map((ingredient, index) => (
+
- {ingredient} + ))} +
+
+ );
+};
+
+export const Favorites = () => {
+ const [favorites, setFavorites] = useState([]);
+
+ // Load favorites from local storage on mount
+ useEffect(() => {
+ const storedFavorites = JSON.parse(localStorage.getItem("favorites")) || [];
+ setFavorites(storedFavorites);
+ }, []);
+
+ // Remove favorite and update local storage
+ const removeFavorite = (drinkId) => {
+ const updatedFavorites = favorites.filter(fav => fav.idDrink !== drinkId);
+ setFavorites(updatedFavorites);
+ localStorage.setItem("favorites", JSON.stringify(updatedFavorites));
+ };
+
+ return (
+ {user.name}
+{user.email}
+
+ {/* Sidebar for User Info */}
+
+ );
+};
diff --git a/src/front/pages/GoogleApi.jsx b/src/front/pages/GoogleApi.jsx
new file mode 100644
index 0000000000..2198c0c8a7
--- /dev/null
+++ b/src/front/pages/GoogleApi.jsx
@@ -0,0 +1,309 @@
+import { Link } from "react-router-dom";
+import useGlobalReducer from "../hooks/useGlobalReducer";
+import { useState } from "react";
+//import 'bootstrap-icons/font/bootstrap-icons.css';
+
+export const GoogleApi = () => {
+ const [places, setPlaces] = useState([]);
+ const [error, setError] = useState("");
+ const [selectedPlace, setSelectedPlace] = useState(null);
+ const [reviews, setReviews] = useState([]) // State to hold reviews of the selected place
+ const [selectedReview, setSelectedReview] = useState(null);
+ const [showPhotos, setShowPhotos] = useState(false);
+ const [showReviewModal, setShowReviewModal] = useState(false);
+ const [modalReviewText, setModalReviewText] = useState("");
+
+
+
+ const handleSearch = () => { // Function to handle the search button click
+ setSelectedPlace(null); // clear out old details
+ setError(""); // clear any past error
+ if (!navigator.geolocation) { // Check if geolocation is supported on browser // Function to handle the search button click--object is provided by the browser's JavaScript engine
+ setError("Geolocation is not supported by this browser."); // If geolocation is not supported, set an error message
+ return; // Exit the function if geolocation is not supported
+ }
+
+ navigator.geolocation.getCurrentPosition( // Get the current position of the user JavaScript feature for web development.
+ async (position) => { // Callback function to handle the position received from geolocation
+ const { latitude, longitude } = position.coords; // Extract latitude and longitude from the position object
+ const payload = { latitude, longitude, cocktail: "mojito" };
+ console.log("▶️ Using coords:", latitude, longitude);
+ console.log("!!!!This is the object of the geolocation!!! :", position);
+
+
+ try { // Try to fetch places from the backend API using the coordinates and cocktail type
+ const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/places`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }, // Fixed header key
+ body: JSON.stringify(payload),
+ });
+ console.log("▶️ Fetch returned status:", res.status);
+ const data = await res.json();
+ console.log("▶️ Data received:", data);
+
+ if (data.error) { // Check if there is an error in the response
+ console.error("!!!Backend error:", data.error);
+ setError(data.error); // Set the error state with the error message from the backend
+ setPlaces([]);
+ } else {
+ setError(""); // Clear any previous error messages
+ console.log("▶️ Places found:", data.places);
+ setPlaces(data.places);
+ }
+ } catch (err) { // Catch any errors that occur during the fetch operation
+ console.error("!!!Error fetching places:", err);
+ setError(err.message);
+ }
+ },
+ (geoErr) => {
+ console.error("!!!Geolocation error:", geoErr);
+ setError("Unable to retrieve your location. Please try again later.");
+ }
+ );
+ };
+
+ const handleSelect = async (placeId) => { // Function to handle the selection of a place
+ const payload = { place_id: placeId }; // Create a payload with the selected place ID
+ const options = {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }, // Fixed header key
+ body: JSON.stringify(payload), // Send the selected place ID to the backend
+ }
+ try {
+ const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/places/details`, options); // Fetch details of the selected place from the backend API
+ console.log("==>> DATA SENT:", res);
+ if (!res.ok) {
+ console.log("!!!Error fetching place details:", res.statusText);
+ setError("Failed to fetch place details. Please try again later.");
+ return; // Exit the function if the response is not OK so that you don’t try to parse an empty or error body.
+ }
+ const details = await res.json(); // Parse the response JSON to get the place details
+ setSelectedPlace(details); // Set the selected place details in the state// //update state so React re-renders your detail pane
+ setSelectedReview(null); // Clear any previously selected review
+ setReviews([]); // Clear the reviews state when a new place is selected
+ console.log("▶️ Place details:", details); // Log the place details to the console
+ }
+ catch (err) {
+ console.log("!!!Error fetching place details:", err);
+ setError(err.message); // Set the error state with the error message
+ }
+ };
+
+ const showsReviews = (reviews) => { // Function to show reviews of the selected place
+ if (!reviews || reviews.length === 0) { // Check if reviews are undefined or empty
+ console.log("!!!No reviews found for this place or undefined reviews:", reviews);
+ setReviews([]); // Clear the reviews state if no reviews are found
+ return; // Exit the function if no reviews are available //stops the function if something's wrong → no unnecessary code runs after it.
+ }
+ setReviews(reviews); // Set the reviews state with the reviews of the selected place
+ }
+
+ const showMorePhotos = () => {
+ setShowPhotos(!showPhotos); // Toggle the showPhotos state to show or hide photos
+ }
+
+
+
+ return (
+
+
+ My Favorite Cocktails
+ {favorites.length > 0 ? ( +
+ {favorites.map((drink) => (
+
+ ) : (
+
+ 
+
+ ))}
+ {drink.strDrink}
+Glass: {drink.strGlass}
+Category: {drink.strCategory}
+ + {/* Remove Favorite Button */} + +You haven't added any favorites yet.
+ )} +
+
+
+ );
+};
+
+
+
+
+
+
+
+
+
+
diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx
index 341ed21768..a9884c0ed9 100644
--- a/src/front/pages/Home.jsx
+++ b/src/front/pages/Home.jsx
@@ -34,7 +34,7 @@ export const Home = () => {
return (
+
+ {/* LEFT: Place details */}
+
+
+
+ {selectedPlace ? (
+
+
+ {/* CENTER: Photos */}
+
+ {selectedPlace.photos[0] && (
+ 
+ )}
+
+ ) :
+
+ + {showPhotos ? "Hide photos" : "See more photos"} + +
+ {selectedPlace.name}
++ {selectedPlace.opening_hours?.open_now ? "Open" : "Closed"} +
+{selectedPlace.formatted_address}
+{selectedPlace.formatted_phone_number}
+ + {selectedPlace.opening_hours?.weekday_text && ( +
+ Opening hours:
+
+ )}
+ { e.preventDefault(); showsReviews(selectedPlace.reviews); }}>
+ See Reviews
+
+ -
+ {selectedPlace.opening_hours.weekday_text.map((day, idx) => (
+
- {day} + ))} +
+ + {showPhotos ? "Hide photos" : "See more photos"} + +
Click a place to see more details
} +
+ {(!showPhotos || !selectedPlace || !selectedPlace.photos || selectedPlace.photos.length <= 1) && (
+ 
+ ))}
+
+
+
+ {/* RIGHT: List of places */}
+
+ Click "See more photos" to view the gallery.
+
+ )}
+ {showPhotos && selectedPlace.photos && selectedPlace.photos.slice(1).map((photoUrl, idx) => (
+
+
+
+ {error &&
+ {error}
}
+ {places.length > 0 ? (
+ -
+ {places.map((place, index) => (
+
-
+
{place.name}
+{place.address}
+Rating: {place.rating}
+Reviews: {place.user_ratings_total}
+ +
+ ))}
+
No places found.
} ++
+
+
+
+
+
+ {showReviewModal && (
+
+
+
+ {reviews.length === 0 && (
+
+
+
+ Please click on See Reviews above to see all the reviews.
+
+ )}
+
+ {reviews.map((r, index) => (
+
+
+ ))}
+
+
+
+
+
+
+ Rating: {r.rating}
+
+
+
+
+
+ + {r.relative_time_description || "No date available"} + +
+ {r.author_name}:
++ {r.text} +
+ {r.text && r.text.length > 150 && ( + { + e.preventDefault(); + setModalReviewText(r.text); + setShowReviewModal(true); + }}> + See full review + + )} + + ++ + {r.relative_time_description || "No date available"} + +
setShowReviewModal(false)}>
+
+ )}
+
+
+ e.stopPropagation()}>
+
+
+
+
+
+ Full Review
+ +
+
+ {modalReviewText}
+
-
Hello Rigo!!
+Cocktail!!
+
+ ) : (
+ 👋 Welcome!
+This is your private profile. You are logged in correctly ✅
+ + +
+
+ );
+};
diff --git a/src/front/pages/mainpage.jsx b/src/front/pages/mainpage.jsx
new file mode 100644
index 0000000000..05768fe50a
--- /dev/null
+++ b/src/front/pages/mainpage.jsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+export const MainPage = () => {
+ return (
+
+ setSearch(e.target.value)}
+ value={search}
+ />
+
+
+
+ {/* Display the fetched drinks */}
+
+ {drinks.length > 0 ? (
+ drinks.map((drink) => (
+
+
+
+
+ ))
+ ) : (
+ {drink.strDrink}
+Glass: {drink.strGlass}
+Category: {drink.strCategory}
+Ingredients:
+-
+ {[...Array(15).keys()].map((i) => {
+ const ingredient = drink[`strIngredient${i + 1}`];
+ const measure = drink[`strMeasure${i + 1}`];
+ return (
+ ingredient && (
+
- + {`${measure || ""} ${ingredient}`.trim()} + + ) + ); + })} +
Instructions: {drink.strInstructions}
+No drinks found
+ )} +
+ {/* Logo */}
+
+ );
+};
diff --git a/src/front/pages/password.jsx b/src/front/pages/password.jsx
new file mode 100644
index 0000000000..626749e05e
--- /dev/null
+++ b/src/front/pages/password.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+
+export const Password = () => {
+ return (
+
+
+ {/* Sign Up */}
+ LOGO
+
+
+
+
+ {/* Sign In */}
+
+
+
+
+ {/* Password Recovery */}
+
+
+
+
+
+
+ );
+};
diff --git a/src/front/pages/signIn.jsx b/src/front/pages/signIn.jsx
new file mode 100644
index 0000000000..69f54a1f82
--- /dev/null
+++ b/src/front/pages/signIn.jsx
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import useGlobalReducer from "../hooks/useGlobalReducer";
+import { useNavigate} from "react-router-dom";
+
+export const SignIn = () => {
+ const { dispatch } = useGlobalReducer();
+ const navigate = useNavigate();
+
+ const [formData, setFormData] = useState({
+ email: "",
+ password: "",
+ });
+
+ const [error, setError] = useState("");
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ setError("");
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ if (!formData.email || !formData.password) {
+ setError("Please complete all fields");
+ return;
+ }
+
+ try {
+ console.log(`${import.meta.env.VITE_BACKEND_URL}/api/signin`);
+
+ const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/signin`, {
+
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(formData),
+ });
+
+ const data = await response.json();
+
+ if (response.ok && data.token) {
+ localStorage.setItem("token", data.token);
+ dispatch({ type: "SET_TOKEN", payload: data.token });
+ navigate("/profile");
+ } else {
+ setError("Invalid email or password.");
+ }
+ } catch (err) {
+ console.error("Login error:", err);
+ setError("Invalid email or password.");
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/front/pages/signUp.jsx b/src/front/pages/signUp.jsx
new file mode 100644
index 0000000000..bcaaacca9c
--- /dev/null
+++ b/src/front/pages/signUp.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+
+export const SignUp = () => {
+
+ const [formData, setFormData] = useState({
+ name: "",
+ email: "",
+ password: "",
+ phone: ""
+ });
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault(); // stops page to reload
+ console.log(">>>Form Data to be sent!!!:", formData);
+ try {
+ const fetchSignUp = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/signup`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(formData) //
+ })
+ console.log(">>>Response Status!!!:", fetchSignUp.status);
+
+
+ const data = await fetchSignUp.json()
+ console.log(">>>Response Body!!!!:", data);
+ if (fetchSignUp.ok) {
+ alert("Sign Up Successful!")
+ setFormData( // reset form data
+ {
+ name: "",
+ email: "",
+ password: "",
+ phone: ""
+ })
+ }
+ else {
+ alert("Sign Up failed: " + data.msg);
+ setFormData({
+ name: "",
+ email: "",
+ password: "",
+ phone: ""
+ }) // clear password field
+ }
+ }
+ catch (err) {
+ console.log("Error:", err);
+ }
+ };
+
+ return (
+
+
+
+
+
+ Logo
+
+
+
+
+
+
+ Password Recovery
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 0557df6141..a9c67472da 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -1,30 +1,42 @@
-// Import necessary components and functions from react-router-dom.
-
+// Import necessary components and functions from react-router-dom
import {
- createBrowserRouter,
- createRoutesFromElements,
- Route,
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route,
} from "react-router-dom";
import { Layout } from "./pages/Layout";
import { Home } from "./pages/Home";
import { Single } from "./pages/Single";
import { Demo } from "./pages/Demo";
+import { SignUp } from "./pages/signUp";
+import { GoogleApi } from "./pages/GoogleApi";
+import { Search } from "./pages/Search";
+import { Custom } from "./pages/Custom";
+import { SignIn } from "./pages/signIn";
+import { Password } from "./pages/password";
+import { MainPage } from "./pages/mainpage";
+import { Profile} from "./pages/Profile";
+import { PrivateRoute } from "./components/PrivateRoute";
+import { Favorites } from "./pages/Favorites";
export const router = createBrowserRouter(
- createRoutesFromElements(
- // CreateRoutesFromElements function allows you to build route elements declaratively.
- // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
- // Root, on the contrary, create a sister Route, if you have doubts, try it!
- // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
- // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
-
- // Root Route: All navigation will start from here.
-