Merge branch 'add-place' of github.com:tsheporamantso/final-capstone-…

…react-front-end 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/Navigation.js

@@ -13,37 +13,11 @@ function Navigation() {
           </div>
           <div className="tabs">
             <ul>
-              <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>
+              <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>
             </ul>
           </div>
         </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.');

src/Navigation.css

@@ -1,12 +1,15 @@
 .container {
   display: flex;
-
-  /* justify-content: center; */
   align-items: center;
   padding: 5px;
   height: 90vh;
 }
 
+#logo-img {
+  width: 200px;
+  height: 200px;
+}
+
 .copyright {
   font-size: 0.5rem;
   cursor: pointer;
@@ -23,9 +26,9 @@
   padding: 20px;
 }
 
-img {
+/* img {
   width: 50%;
-}
+} */
 
 .left-sidebar {
   display: flex;
@@ -61,12 +64,19 @@ img {
   padding: 0;
 }
 
+.tabs ul li img {
+  width: 20px;
+  height: 20px;
+}
+
 .tabs ul li a {
   text-decoration: none;
   color: black;
   padding: 10px;
   font-size: 12px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
 }
 
 .social-icons {
@@ -75,20 +85,44 @@ img {
   align-items: center;
 }
 
-.social-icons ul {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.right-sidebar ul li {
+  margin-bottom: 10px;
 }
 
-.social-icons ul li:hover {
-  opacity: 0.5;
+.main-content {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.right-sidebar {
+  width: 200px;
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 2px solid rgb(72, 255, 0);
+}
+
+.right-sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#social-img {
+  width: 20px;
+  height: 20px;
+  margin: 5px;
+}
+
+.tabs ul li a:hover {
+  background-color: rgb(168, 219, 25);
+  color: white;
+  border-radius: 5px;
+  transition: all 0.5s ease;
 }
 
 .tabs ul li {
   margin-bottom: 10px;
 
-  modify this to the professional level * {
+  * {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     text-decoration: none;
     list-style: none;
@@ -120,10 +154,10 @@ img {
     align-items: center;
   }
 
-  .header img {
+  /* .header img {
     width: 100%;
     height: auto;
-  }
+  } */
 
   .left-sidebar {
     /* Add specific styles for left sidebar here */
@@ -133,10 +167,6 @@ img {
     gap: 110px;
   }
 
-  .right-sidebar {
-    /* Add specific styles for right sidebar here */
-  }
-
   .tabs ul {
     list-style-type: none;
   }
@@ -154,17 +184,23 @@ img {
     justify-content: center;
   }
 
-  .main-content img {
+  /* .main-content img {
     width: 100%;
     height: 50vh;
     cursor: pointer;
-  }
+  } */
 
   .tabs {
     display: flex;
     margin-left: -30px;
   }
 
+  .social-icons ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .social-icons ul li a {
     text-decoration: none;
     color: black;
@@ -207,32 +243,8 @@ img {
   }
 }
 
-.tabs ul li a:hover {
-  background-color: rgb(168, 219, 25);
-  color: white;
-  border-radius: 5px;
-  transition: all 0.5s ease;
-}
-
-.main-content {
-  flex-grow: 1;
-  text-align: center;
-}
-
-.right-sidebar {
-  width: 200px;
-  padding: 20px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border: 2px solid rgb(72, 255, 0);
-}
-
-.right-sidebar ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.right-sidebar ul li {
-  margin-bottom: 10px;
+.social-icons ul li:hover {
+  opacity: 0.5;
 }
 
 .settings-button {