Dev

.env

@@ -0,0 +1,9 @@
+REACT_APP_POST_URL=http://localhost:4000/api/posts
+REACT_APP_POST_DELETE=http://localhost:4000/api/posts/
+REACT_APP_UPDATE_POST=http://localhost:4000/api/posts/
+REACT_APP_API_LOGIN=http://localhost:4000/api/auth/signin
+REACT_APP_API_SIGNUP=http://localhost:4000/api/auth/signup
+REACT_APP_POST_ID=http://localhost:4000/api/posts/
+REACT_APP_API_URL=https://api.example.com
+REACT_APP_API_URL=https://api.example.com
+REACT_APP_API_URL=https://api.example.com

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"
   },

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 />} />

src/api/posts.js

@@ -1,7 +1,13 @@
 import axios from "axios";
 
+const PostUrl = process.env.REACT_APP_POST_URL;
+const UpdatePost = process.env.REACT_APP_UPDATE_POST;
+const DeletePost = process.env.REACT_APP_POST_DELETE;
+const PostId = process.env.REACT_APP_POST_ID;
+
+
 export const getPostsRequest = async () =>
-  await axios.get("http://localhost:4000/api/posts", {});
+  await axios.get(PostUrl, {});
 
 export const createPostRequest = async (post, token) => {
   const form = new FormData();
@@ -10,28 +16,27 @@ export const createPostRequest = async (post, token) => {
     form.append(key, post[key]);
   }
 
-  return await axios.post("http://localhost:4000/api/posts", form, {
+  return await axios.post(PostUrl, form, {
     headers: {
       "Content-Type": "multipart/form-data",
-      // eslint-disable-next-line no-template-curly-in-string
+
       Authorization: `Bearer ${token}`,
     },
   });
 };
 
 export const deletePostRequest = async (id, token) =>
-  await axios.delete("http://localhost:4000/api/posts/" + id, {
+  await axios.delete(DeletePost + id, {
     headers: {
       Authorization: `Bearer ${token}`,
     },
   });
 
 export const getPostRequest = async (id) =>
-  await axios.get("http://localhost:4000/api/posts/" + id);
-
-export const updatePostRequest = async (id, newFields, token) =>
-  await axios.put(`http://localhost:4000/api/posts/${id}`, newFields, {
+  await axios.get(PostId + id);
+  export const updatePostRequest = async (id, newFields, token) =>
+  await axios.put(`${UpdatePost}/${id}`, newFields, {
     headers: {
       Authorization: `Bearer ${token}`,
     },
-  });
+  });

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>
+  );
+}

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>