Merge branch 'dev' into add-place

src/App.css

@@ -4,5 +4,5 @@
   box-sizing: border-box; */
   list-style: none;
   text-decoration: none;
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif, Geneva, Tahoma, sans-serif;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif, Geneva, Tahoma;
 }

src/Components/Layout.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import Navigation from './Navigation';
-import '../Navigation.css';
 
 function Layout() {
   return (
@@ -12,6 +11,7 @@ function Layout() {
         {/* <h1>StaySpare</h1> */}
         <Outlet />
       </div>
+      <Outlet />
       {/* End of Main Content */}
 
     </div>

src/Components/Navigation.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import '../Navigation.css';
 import { Link } from 'react-router-dom';
-import '../Home.css';
 
 function Navigation() {
   return (
@@ -10,15 +9,49 @@ function Navigation() {
       <div className="sidebar left-sidebar">
         <div className="header-tabs-container">
           <div className="header">
-            <Link to="/"><img src="../images/stay.jpg" alt="stay logo" /></Link>
+            <Link to="/"><img id="logo-img" src="../images/StaySphere.svg" alt="stay logo" /></Link>
           </div>
           <div className="tabs">
             <ul>
+
               <li><Link to="placelist">Places</Link></li>
               <li><Link to="/reserve">Reserve</Link></li>
               <li><Link to="myreservations">My Reservations</Link></li>
               <li><Link to="addplace">Add Place</Link></li>
               <li><Link to="/delete-place">Delete Place</Link></li>
+
+              <li>
+
+                <Link to="placelist">
+                  <img src="../images/Places.svg" alt="places" />
+                  Places
+                </Link>
+              </li>
+              <li>
+                <Link to="/reserve">
+                  <img src="../images/Reserve.svg" alt="places" />
+                  Reserve
+                </Link>
+              </li>
+              <li>
+                <Link to="myreservations">
+                  <img src="../images/Myreservations.svg" alt="places" />
+                  My Reservations
+                </Link>
+              </li>
+              <li>
+                <Link to="addPlace">
+                  <img src="../images/add.svg" alt="places" />
+                  Add Place
+                </Link>
+              </li>
+              <li>
+                <Link to="/delete-place">
+                  <img src="../images/delete.svg" alt="places" />
+                  Delete Place
+                </Link>
+              </li>
+
             </ul>
           </div>
         </div>
@@ -27,11 +60,11 @@ function Navigation() {
         {/* Start of Social-Icons */}
         <div className="social-icons">
           <ul>
-            <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/twitter.png" alt="twitter-icon" /></a></li>
-            <li><a href="https://www.facebook.com/vespa"><img src="https://img.icons8.com/ios/50/000000/facebook.png" alt="facebook-icon" /></a></li>
-            <li><a href="https://www.instagram.com/vespa"><img src="https://img.icons8.com/ios/50/000000/google.png" alt="twitter-icon" /></a></li>
-            <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/instagram-new.png" alt="instagram-icon" /></a></li>
-            <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/p.png" alt="p-icon" /></a></li>
+            <li><a href="https://www.twitter.com/vespa"><img id="social-img" src="https://img.icons8.com/ios/50/000000/twitter.png" alt="twitter-icon" /></a></li>
+            <li><a href="https://www.facebook.com/vespa"><img id="social-img" src="https://img.icons8.com/ios/50/000000/facebook.png" alt="facebook-icon" /></a></li>
+            <li><a href="https://www.instagram.com/vespa"><img id="social-img" src="https://img.icons8.com/ios/50/000000/google.png" alt="twitter-icon" /></a></li>
+            <li><a href="https://www.twitter.com/vespa"><img id="social-img" src="https://img.icons8.com/ios/50/000000/instagram-new.png" alt="instagram-icon" /></a></li>
+            <li><a href="https://www.twitter.com/vespa"><img id="social-img" src="https://img.icons8.com/ios/50/000000/p.png" alt="p-icon" /></a></li>
           </ul>
           <p className="copyright">&copy; 2024 STAYSPARE HOTELS - CALIFORNIA</p>
         </div>

src/Components/PlaceList.js

@@ -1,15 +1,20 @@
-// PlacesList.js
-
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import { fetchPlaces } from '../Redux/places/placesSlice';
 
+import '../Placelist.css';
+
 function PlacesList() {
   const dispatch = useDispatch();
   const places = useSelector((state) => state.places.places);
   const status = useSelector((state) => state.places.status);
   const error = useSelector((state) => state.places.error);
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 3;
+
   useEffect(() => {
     if (status === 'idle') {
       dispatch(fetchPlaces());
@@ -29,31 +34,82 @@ function PlacesList() {
     );
   }
 
+  // Pagination logic
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = places.slice(indexOfFirstItem, indexOfLastItem);
+
+  const paginate = (pageNumber) => setCurrentPage(pageNumber);
+
+  const nextPage = () => {
+    if (currentPage < Math.ceil(places.length / itemsPerPage)) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   return (
-    <div>
-      <h2>Places</h2>
+    <div className="center">
+      <h1>Accomodations</h1>
+      <h5>Select Accomodations to Reserve</h5>
       <ul>
-        {places.map((place) => (
-          <li key={place.id}>
+        <button type="button" id="previous" onClick={prevPage} disabled={currentPage === 1}><img src="../images/previous.svg" alt="previous" /></button>
+        {currentItems.map((place) => (
+          <li key={place.id} className="card">
             <h3>{place.description}</h3>
-            <img src={place.photo} alt={place.description} />
-            <p>
-              Location:
-              {place.location}
-            </p>
-            <p>
-              Rate:
-              {place.rate}
-            </p>
-            <p>
-              Address:
-              {place.address}
-            </p>
+            <img className="place-img" src={place.photo} alt={place.description} />
+
+            Location:
+            {place.location}
+
+            Rate:
+            <StarRating rating={place.rate} />
+            {' '}
+            {/* StarRating component integrated */}
+
+            Address:
+            {place.address.length > 10 ? `${place.address.substring(0, 30)}...` : place.address}
+
+            <ul className="social-icons">
+              <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/twitter.png" alt="twitter-icon" /></a></li>
+              <li><a href="https://www.facebook.com/vespa"><img src="https://img.icons8.com/ios/50/000000/facebook.png" alt="facebook-icon" /></a></li>
+              <li><a href="https://www.instagram.com/vespa"><img src="https://img.icons8.com/ios/50/000000/google.png" alt="twitter-icon" /></a></li>
+              <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/instagram-new.png" alt="instagram-icon" /></a></li>
+              <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/p.png" alt="p-icon" /></a></li>
+            </ul>
+
           </li>
         ))}
+        <button type="button" id="next" onClick={nextPage} disabled={currentPage === Math.ceil(places.length / itemsPerPage)}><img src="../images/next.svg" alt="next_button" /></button>
       </ul>
+
+      <div className="pagination">
+
+        {[...Array(Math.ceil(places.length / itemsPerPage)).keys()].map((pageNumber) => (
+          <button key={pageNumber} type="button" onClick={() => paginate(pageNumber + 1)} className={currentPage === pageNumber + 1 ? 'active' : ''}>{pageNumber + 1}</button>
+        ))}
+
+      </div>
     </div>
   );
 }
 
+const StarRating = ({ rating }) => {
+  const stars = Array.from({ length: 5 }, (_, index) => (
+    <span key={index}>{index + 1 <= rating ? '\u2605' : '\u2606'}</span>
+  ));
+
+  return <div>{stars}</div>;
+};
+
+// Prop types validation for StarRating component
+StarRating.propTypes = {
+  rating: PropTypes.number.isRequired,
+};
+
 export default PlacesList;

src/Components/UserAuth.js

@@ -35,7 +35,7 @@ function UserAuth({ setLoggedIn }) {
         console.log('User ID from local storage:', userId);
 
         setLoggedIn(true);
-        navigate('/layout');
+        navigate('/layout/placelist');
       } else {
         console.error('Unexpected response status:', response.status);
         setErrorMessage('Invalid Email or password.');