EdwinDev6 · EdwinDev6 · Jul 29, 2023 · Jul 17, 2023 · Jul 23, 2023 · Jul 27, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@material-tailwind/react": "^2.0.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,8 +21,9 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.8.0",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "tailwindcss-animated": "^1.0.1",
     "web-vitals": "^2.1.4",
     "yup": "^1.0.2"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.js b/src/App.js
@@ -7,27 +7,19 @@ import Login from "./components/Login/Login";
 import RequiresAuth from "./components/RequiresAuth";
 import { HomePageUser } from "./pages/HomePageUser";
 import Navbar from "./components/Navbar/Navbar";
-import { useLocation } from "react-router-dom";
 import ContactForm from "./pages/Contact";
-function App() {
-  const location = useLocation();
-  const isLoginPage = location.pathname === "/login";
+import { Carousel } from "./components/Carousel/Carousel";
+
 
+function App() {
   return (
-
-    <div
-      className="bg-cover h-screen w-screen overflow-y-scroll"
-      style={{
-        backgroundImage: isLoginPage
-          ? "none"
-          : "url(https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80)",
-      }}
-    >
+    <div className="bg-cover bg-gray-200 h-screen w-screen overflow-y-scroll">
       <PostProvider>
         <Navbar />
+        <Carousel />
         <Routes>
           {/* Public routes */}
-          <Route path="signup" exact element={<Signup />} />
+          <Route path="signup" exact element={<Signup /> } />
           <Route path="login" exact element={<Login />} />
           <Route path="/" exact element={<HomePageUser />} />
           <Route path="/contact" exact element={<ContactForm />} />

diff --git a/src/api/posts.js b/src/api/posts.js
@@ -13,7 +13,7 @@ export const createPostRequest = async (post, token) => {
   return await axios.post("http://localhost:4000/api/posts", form, {
     headers: {
       "Content-Type": "multipart/form-data",
-      // eslint-disable-next-line no-template-curly-in-string
+
       Authorization: `Bearer ${token}`,
     },
   });

diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
+import { RxDotFilled } from "react-icons/rx";
+import { useLocation } from "react-router-dom";
+export function Carousel() {
+  const slides = [
+    {
+      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1",
+    },
+    {
+      url: "https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1",
+    },
+    {
+      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1",
+    },
+
+    {
+      url: "https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80",
+    },
+    {
+      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1",
+    },
+  ];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const prevSlide = () => {
+    const isFirstSlide = currentIndex === 0;
+    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const nextSlide = () => {
+    const isLastSlide = currentIndex === slides.length - 1;
+    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const goToSlide = (slideIndex) => {
+    setCurrentIndex(slideIndex);
+  };
+  const location = useLocation();
+  const isHomePage = location.pathname === "/";
+  if (!isHomePage) {
+    return null;
+  }
+  return (
+    <div className="max-w-[50] h-[500px] w-90 m-auto py-16 px-10 relative group animate-fade-right animate-once animate-duration-[500ms] animate-ease-out">
+      <div
+        style={{ backgroundImage: `url(${slides[currentIndex].url})` }}
+        className="w-full h-full rounded bg-center bg-cover duration-500"
+      ></div>
+
+      <div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
+        <BsChevronCompactLeft onClick={prevSlide} size={30} />
+      </div>
+
+      <div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
+        <BsChevronCompactRight onClick={nextSlide} size={30} />
+      </div>
+      <div className="flex top-4 justify-center py-2">
+        {slides.map((slide, slideIndex) => (
+          <div
+            key={slideIndex}
+            onClick={() => goToSlide(slideIndex)}
+            className="text-2xl cursor-pointer"
+          >
+            <RxDotFilled />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -1,55 +1,26 @@
-import { useState } from "react";
-import useAuth from "../../hooks/useAuth";
-import axios from "axios";
-import { useLocation, useNavigate } from "react-router-dom";
-import backgroundImage from '../../Images/logoimg.jpg'
-const Signin = () => {
-  const [data, setData] = useState({
-    email: "",
-    password: "",
-  });
-  const [error, setError] = useState("");
-
-  const { setAuth } = useAuth();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const from = location.state?.from?.pathname || "/";
-
-
+import backgroundImage from "../../Images/logoimg.jpg";
+import useLoginForm from "../../hooks/useLoginForm";
+import useAuthentication from "../../hooks/useAuthentication";
 
-  const handleChange = ({ currentTarget: input }) => {
-    setData({ ...data, [input.name]: input.value });
-  };
+const Signin = () => {
+  const { data, error, handleChange, setError } = useLoginForm();
+  const { authenticate } = useAuthentication();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    try {
-      const url = "http://localhost:4000/api/auth/signin";
-      const { data: res } = await axios.post(url, data);
-      const roles = res?.roles;
-      const token = res?.token;
-      setAuth({ roles, token });
-
-      console.log(roles);
-
-      navigate(from, { replace: true });
-    } catch (error) {
-      if (
-        error.response &&
-        error.response.status >= 400 &&
-        error.response.status <= 500
-      ) {
-        setError(error.response.data.message);
-      }
+    const errorMessage = await authenticate(data);
+    if (errorMessage) {
+      setError(errorMessage);
     }
   };
+
   return (
     <div className="bg-black dark:bg-gray-900">
       <div className="flex justify-center h-screen">
         <div
           className="hidden bg-cover lg:block lg:w-2/3"
           style={{ backgroundImage: `url('${backgroundImage}')` }}
-    >
+        >
           <div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
             <div>
               <h2 className="text-4xl font-bold text-white">TechTalk News</h2>

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,72 +1,105 @@
-import React, { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
+import { Link, useLocation } from "react-router-dom";
 import useAuth from "../../hooks/useAuth";
 
 const Navbar = () => {
   const location = useLocation();
-  const isLoginPage = location.pathname === '/login';
-  const { setAuth, auth } = useAuth(); 
+  const isLoginPage = location.pathname === "/login";
+  const isHomePage = location.pathname === "/";
+  const isFormPage = location.pathname === "/new";
+  const isAdminPage = location.pathname === "/admin";
+  const { setAuth, auth } = useAuth();
 
   const handleLogout = () => {
     setAuth({ roles: null, token: null });
     window.location = "/login";
   };
 
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const toggleMenu = () => {
     setOpen(!open);
   };
 
   return (
-    <div className="antialiased bg-gray-100 dark-mode:bg-gray-900">
+    <div className="antialiased bg-white dark-mode:bg-gray-900">
       <div className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
-        <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
+        <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 ">
           <div className="flex flex-row items-center justify-between p-4">
-            <Link to="/" className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
+            <Link
+              to="/"
+              className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline "
+            >
               TechTalk News
             </Link>
-            <button className="rounded-lg md:hidden focus:outline-none focus:shadow-outline" onClick={toggleMenu}>
+            <button
+              className="rounded-lg md:hidden focus:outline-none focus:shadow-outline "
+              onClick={toggleMenu}
+            >
               <svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
                 {open ? (
-                  <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
+                  <path
+                    fillRule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
                 ) : (
-                  <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clipRule="evenodd"></path>
+                  <path
+                    fillRule="evenodd"
+                    d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
+                    clipRule="evenodd"
+                  ></path>
                 )}
               </svg>
             </button>
           </div>
-          <nav className={`flex-col flex-grow ${open ? 'flex' : 'hidden'} pb-4 md:pb-0 md:flex md:justify-end md:flex-row`}>
+          <nav
+            className={`flex-col flex-grow ${
+              open ? "flex" : "hidden"
+            } pb-4 md:pb-0 md:flex md:justify-end md:flex-row navbar-transition animate-flip-down duration-700`}
+          >
             <Link
               to="/"
-              className=" px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+              className=" px-4 py-2 mt-2 text-sm font-semibold  bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
             >
               Home
             </Link>
-            <Link
-              to="/new"
-              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-            >
-              Create Post
-            </Link>
-            <Link
-              to="/admin"
-              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-            >
-              Admin Page
-            </Link>
-            <Link
-              to="/contact"
-              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-            >
-              Contact
-            </Link>
+
+            {!isHomePage && isAdminPage && (
+              <Link
+                to="/new"
+                className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
+              >
+                Create Post
+              </Link>
+            )}
+
+            {!isHomePage && isFormPage && (
+              <Link
+                to="/admin"
+                className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
+              >
+                Admin Page
+              </Link>
+            )}
+            {isHomePage && (
+              <Link
+                to="/contact"
+                className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
+              >
+                Contact
+              </Link>
+            )}
             {!isLoginPage && (
               <div className="relative" onClick={() => setOpen(false)}>
-                <button className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" onClick={handleLogout}>
-                  {auth.token ? 'Logout' : 'Login'} <FontAwesomeIcon icon={faSignOutAlt} />
+                <button
+                  className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline  "
+                  onClick={handleLogout}
+                >
+                  {auth.token ? "Logout" : "Login"}{" "}
+                  <FontAwesomeIcon icon={faSignOutAlt} />
                 </button>
               </div>
             )}
@@ -77,4 +110,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;