Merge branch 'main' into Andres1

andreszubi · Dec 1, 2022 · c92a38c · c92a38c
2 parents 6d2ac12 + 04f51a9
commit c92a38c
Show file tree

Hide file tree

Showing 16 changed files with 85 additions and 84 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/public/images/Logo2.png" />
+    <link rel="icon" href="/src/images/Logo2.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Host a Refugee</title>
     <link

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,7 +14,7 @@ import EditListing from "./pages/Edit-Listing";
 import ListingDetails from "./pages/Listing-Details";
 import PrivateRouteHost from "./components/PrivateRouteHost";
 import PrivateRouteUser from "./components/PrivateRouteUser";
-// import ErrorPage from "./components/ErrorPage";
+import ErrorPage from "./pages/ErrorPage"
 
 function App() {
   return (
@@ -41,13 +41,16 @@ function App() {
           }
         />
         <Route path="/edit-host-profile" element={<EditHostProfile />} />
-        <Route path="/listings-search" element={<ListingsSearch />} />
+        <Route path="/listings-search" element={
+        <PrivateRouteUser>
+          <ListingsSearch />
+        </PrivateRouteUser>
+        } 
+        />
         <Route path="/booking-confirmation" element={<BookingConfirmation />} />
-
-        {/* <Route path="/listings-search" element={<ListingsSearch />} /> */}
         <Route path="/edit-listing/:id" element={<EditListing />} />
         <Route path="/listing-details" element={<ListingDetails />} />
-        {/* <Route path="/error-page" element={<ErrorPage />} /> */}
+        <Route path="/error-page" element={<ErrorPage />} /> 
       </Routes>
     </div>
   );

diff --git a/src/components/Edit-Host-Profile.jsx b/src/components/Edit-Host-Profile.jsx
@@ -153,5 +153,3 @@ function EditHostProfile() {
 }
 
 export default EditHostProfile;
-
-
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -4,8 +4,8 @@ function Footer() {
       <div className="text-center p-4 footerBack">
         <div className="flex justify-center mb-6">
           <a
-            href="#!"
-            type="button"
+            href="https://www.facebook.com/"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -25,8 +25,8 @@ function Footer() {
             </svg>
           </a>
           <a
-            href="#!"
-            type="button"
+            href="https://www.twitter.com/"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -46,8 +46,8 @@ function Footer() {
             </svg>
           </a>
           <a
-            href="#!"
-            type="button"
+            href="https:///www.google.com"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -67,8 +67,8 @@ function Footer() {
             </svg>
           </a>
           <a
-            href="#!"
-            type="button"
+            href="https://www.instagram.com/"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -88,8 +88,8 @@ function Footer() {
             </svg>
           </a>
           <a
-            href="#!"
-            type="button"
+            href="https://www.linkedin.com/"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -109,8 +109,8 @@ function Footer() {
             </svg>
           </a>
           <a
-            href="#!"
-            type="button"
+            href="https://github.com"
+            type="button" target="_blank"
             className="rounded-full border-2 border-white text-white leading-normal uppercase hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-9 h-9 m-1"
           >
             <svg
@@ -130,10 +130,7 @@ function Footer() {
             </svg>
           </a>
         </div>
-        © 2022 Copyright:
-        <a className="text-whitehite" href="https://tailwind-elements.com/">
-          The Fellowship
-        </a>
+        © 2022 Copyright: The Fellowship
       </div>
     </footer>
   );

diff --git a/src/components/ListingBox.jsx b/src/components/ListingBox.jsx
@@ -35,6 +35,10 @@ function ListingBox({ listing }) {
       }
     );
     const parsed = await response.json();
+    console.log(parsed)
+    if (response.status===200) {
+      navigate("/booking-confirmation")
+    }
   };
 
   return (
@@ -81,4 +85,4 @@ function ListingBox({ listing }) {
   );
 }
 
-export default ListingBox;
+export default ListingBox;
diff --git a/src/components/#Form.jsx b/src/components/#Form.jsx
@@ -1,3 +1,4 @@
+import { Alert } from "@mantine/core";
 import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { SessionContextUser } from "../contexts/SessionContextUser";
@@ -23,11 +24,11 @@ const LoginForm = () => {
     });
     const parsed = await response.json();
 
-    if (parsed.status === 200) {
+    if (response.status === 200) {
       setToken(parsed.token);
       navigate("/user-profile");
-    } else {
-      setError(parsed);
+    } else if (response.status===400 || response.status===404){
+      setError(parsed.message);
     }
   };
 
@@ -55,6 +56,9 @@ const LoginForm = () => {
           required
         />
       </label>
+      {error ? (<Alert title="Bummer!" color="red">
+      {error} Please try again!
+    </Alert>): ""}
       <button className="button" type="submit">
         Login
       </button>

diff --git a/src/components/NavBarMain.jsx b/src/components/NavBarMain.jsx
@@ -3,24 +3,12 @@ import logo from "../images/Logo2.png";
 
 function NavBarMain() {
   return (
-    <nav className="NavBar">
+    <nav className="NavBar" style={{justifyContent:"center"}}>
       <div>
         <Link to="/">
           <img src={logo} alt="brandLogo" />
         </Link>
       </div>
-      {/* <div className="buttons">
-        <Link to="/host-#">
-          <button className="button" type="button">
-            Host #
-          </button>
-        </Link>
-        <Link to="/host-login">
-          <button className="button" type="button">
-            Host Login
-          </button>
-        </Link>
-      </div> */}
     </nav>
   );
 }

diff --git a/src/components/PrivateRouteHost.jsx b/src/components/PrivateRouteHost.jsx
@@ -1,19 +1,9 @@
 import { useContext } from "react";
 import { Navigate } from "react-router-dom";
 import { SessionContextHost } from "../contexts/SessionContextHost";
-import { Loader } from "@mantine/core";
 
-function PrivateRouteHost({ children }) {
-  const { isAuthenticated, isLoading } = useContext(SessionContextHost);
-  console.log({ isAuthenticated });
-  console.log({ isLoading });
-  if (isLoading) {
-    return (
-      <div>
-        <Loader color="grape" />
-      </div>
-    );
-  }
-  return isAuthenticated ? <>{children}</> : <Navigate to="/host-login" />;
+function PrivateRouteHost({children}) {
+    const {isAuthenticated} = useContext(SessionContextHost)
+    return ( isAuthenticated ? <>{children}</> : <Navigate to="/error-page" />);
 }
 export default PrivateRouteHost;
diff --git a/src/components/PrivateRouteUser.jsx b/src/components/PrivateRouteUser.jsx
@@ -1,19 +1,9 @@
 import { useContext } from "react";
 import { Navigate } from "react-router-dom";
 import { SessionContextUser } from "../contexts/SessionContextUser";
-import { Loader } from "@mantine/core";
 
 function PrivateRouteUser({ children }) {
-  const { isAuthenticated, isLoading } = useContext(SessionContextUser);
-  console.log({ isAuthenticated });
-  console.log({ isLoading });
-  if (isLoading) {
-    return (
-      <div>
-        <Loader color="grape" />
-      </div>
-    );
-  }
-  return isAuthenticated ? <>{children}</> : <Navigate to="/" />;
+  const { isAuthenticated } = useContext(SessionContextUser);
+  return isAuthenticated ? <>{children}</> : <Navigate to="/error-page" />;
 }
 export default PrivateRouteUser;
diff --git a/src/index.css b/src/index.css
@@ -548,3 +548,13 @@ div.transbox,
 .listingInUse {
   color: #f66465;
 }
+
+
+.notPass {
+  display: flex;
+  justify-content: center;
+}
+
+.notPassLink {
+  margin-top: 10vh;
+}
diff --git a/src/pages/Booking-Confirmation.jsx b/src/pages/Booking-Confirmation.jsx
@@ -1,14 +1,12 @@
 //Create a page that displays that the booking has been confirmed and the user can see the details of the booking.
 //
-import { useContext, useState } from "react";
-import { SessionContextUser } from "../contexts/SessionContextUser";
-import NavBarUser from "../components/NavBar";
 import Footer from "../components/Footer";
+import NavBarMain from "../components/NavBarMain";
 
 function BookingConfirmation() {
-  return (
+  return (<>
     <div className="container">
-      <NavBarUser />
+      <NavBarMain />
       {/* <div className="background-img"> */}
       <h1 className="largeText#3">Reservation confirmed!</h1>
       <h2 className="mediumText#2">
@@ -19,8 +17,10 @@ function BookingConfirmation() {
         Keep safe and we hope that everything works out.
       </h2>
       <div className="background-img2"></div>
-      <Footer />
+
     </div>
+    <Footer />
+    </>
   );
 }
 

diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
@@ -1,20 +1,24 @@
 import NavBar from "../components/NavBar";
 import Footer from "../components/Footer";
 import errorImg from "../images/errorImg.png";
-
+import { Link } from "react-router-dom";
+import NavBarMain from "../components/NavBarMain";
 function ErrorPage() {
-  return (
+  return (<>
     <div className="container">
       <div className="Home">
-        <NavBar />
-        <div>
-          <Link to="/">
+        <NavBarMain />
+        <div className="notPass">
+          <Link to="/" className="notPassLink">
             <img src={errorImg} alt="errorImage" />
           </Link>
         </div>
-        <Footer />
+
       </div>
+
     </div>
+    <Footer />
+    </>
   );
 }
 

diff --git a/src/pages/Host-Login.jsx b/src/pages/Host-Login.jsx
@@ -3,6 +3,7 @@ import NavBar from "../components/NavBar";
 import { SessionContextHost } from "../contexts/SessionContextHost";
 import { useState, useContext } from "react";
 import Footer from "../components/Footer";
+import { Alert } from "@mantine/core";
 
 function HostLogin() {
   const { setToken } = useContext(SessionContextHost);
@@ -28,11 +29,11 @@ function HostLogin() {
     );
     const parsed = await response.json();
 
-    if (parsed.status === 200) {
+    if (response.status === 200) {
       setToken(parsed.token);
       navigate("/host-profile");
-    } else {
-      setError(parsed);
+    } else if (response.status === 400 || response.status===404) {
+      setError(parsed.message);
     }
   };
   return (
@@ -64,6 +65,9 @@ function HostLogin() {
               onChange={(event) => setPassword(event.target.value)}
             />
           </label>
+          {error ? (<Alert title="Bummer!" color="red">
+      {error} Please try again!
+    </Alert>): ""}
           <button className="button" type="submit">
             Login
           </button>

diff --git a/src/pages/Host-#.jsx b/src/pages/Host-#.jsx
@@ -127,7 +127,7 @@ function Host#() {
             <input type="file" name="imageUrl" accept="image/png, image/jpg" />
           </label>
           {errorMessage ? (<Alert title="Bummer!" color="red">
-      There's an existing account using that email, please try again!
+      {errorMessage} Please try again!
     </Alert>): ""}
           <button className="button" type="submit">
             Submit
Original file line number	Diff line number	Diff line change
Expand Up		@@ -153,5 +153,3 @@ function EditHostProfile() {
		}

		export default EditHostProfile;