Merge pull request #203 from igrowker/component-FincaInfo

fetch finca info
IgrowkerTraining · Oct 3, 2024 · b47558e · b47558e · emacuello · Oct 3, 2024
2 parents 1c1f7c7 + ec96173
commit b47558e
Show file tree

Hide file tree

Showing 23 changed files with 327 additions and 245 deletions.
diff --git a/index.html b/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,11 +35,13 @@
     "react-slick": "^0.30.2",
     "redux-persist": "^6.0.0",
     "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.8.0",
     "template-vite-react": "file:"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/redux-persist": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",

diff --git a/public/impacto.png b/public/impacto.png
diff --git a/src/assets/ArbolCuenta.png b/src/assets/ArbolCuenta.png
diff --git a/src/assets/Hojas.png b/src/assets/Hojas.png
diff --git a/src/assets/Mandarinas.jpg b/src/assets/Mandarinas.jpg
diff --git a/src/assets/citricos.jpg b/src/assets/citricos.jpg
diff --git a/src/assets/cosecha.png b/src/assets/cosecha.png
diff --git a/src/assets/farmer.jpg b/src/assets/farmer.jpg
diff --git a/src/assets/imgAdopcion.png b/src/assets/imgAdopcion.png
diff --git a/src/assets/imgFincas.png b/src/assets/imgFincas.png
diff --git a/src/assets/imgProveedor.png b/src/assets/imgProveedor.png
diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
@@ -29,7 +29,7 @@
 }
 .banner h1 {
   font-size: 48px;
-  font-weight: bold;
+  font-weight: 800;
   line-height: 1.3;
   margin-bottom: 24px;
 }

diff --git a/src/components/ImpactoAmbiental/ImpactoAmbiental.tsx b/src/components/ImpactoAmbiental/ImpactoAmbiental.tsx
@@ -15,7 +15,7 @@ const ImpactoAmbiental: React.FC = () => {
       <Section
         title="Regenerar la tierra que nos alimenta"
         content="Adoptree es una plataforma que busca conectar a personas con la naturaleza, permitiendo adoptar árboles y reforestar áreas deforestadas."
-        imageSrc="./bio1.svg"
+        imageSrc="./impacto.png"
         imageAlt="Agricultura Regenerativa"
       />
 
@@ -110,7 +110,7 @@ const Section: React.FC<{
   imageSrc: string;
   imageAlt: string;
 }> = ({ title, content, imageSrc, imageAlt }) => (
-  <section className="flex flex-col items-center lg:flex-row px-[30px] py-20">
+  <section className="flex flex-col items-center lg:flex-row pb-[3.2rem] gap-[30px]">
     <motion.div
       className="flex-1 mb-8 lg:mb-0"
       initial={{ opacity: 0, y: 50 }}
@@ -127,7 +127,7 @@ const Section: React.FC<{
       transition={{ duration: 0.5, delay: 0.2 }}
     >
       <img
-        className="max-w-[400px] h-auto rounded-lg"
+        className="h-auto rounded-lg"
         src={imageSrc}
         alt={imageAlt}
       />

diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
@@ -139,11 +139,13 @@ const Login: React.FC = () => {
         <img src={backgroundImage} alt="Background" />
       </div>
       <div className="login-form shadow-sm">
-        <img
-          src={logo}
-          alt="Adoptree Logo"
-          className="logo w-[115px] mb-[30px]"
-        />
+        <a href="/">
+          <img
+            src={logo}
+            alt="Adoptree Logo"
+            className="logo w-[115px] mb-[30px]"
+          />
+        </a>
         <h2 className="mb-[30px] font-[900]">
           Hola, <br /> Bienvenido de nuevo
         </h2>

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -12,18 +12,22 @@ import Logo from '../../assets/adoptree 1.png';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
 import { logout } from '../../store/features/userSlice';
-import './Navbar.css';
 import { RootState } from '../../types/types';
+import { io } from "socket.io-client";
+import './Navbar.css';
 
 export interface AnchorProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   style?: React.CSSProperties & { '--i'?: number };
 }
 
+const socket = io("http://localhost:4000", { withCredentials: true });
+
 const Navbar: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
   const [showModal, setShowModal] = useState<boolean>(false);
-  // const [notificationsModal, setNotificationsModal] = useState<boolean>(false);
+  const [notificationsModal, setNotificationsModal] = useState<boolean>(false);
+  // const [notifications, setNotifications] = useState<any[]>([])
 
   const modalRef = useRef<HTMLDivElement | null>(null);
   const currentClickRef = useRef<EventTarget | null>(null);
@@ -33,6 +37,15 @@ const Navbar: React.FC = () => {
 
   const navigate = useNavigate();
 
+  const handleShowNotifications = (event: React.MouseEvent<HTMLElement>) => {
+    currentClickRef.current = event.target;
+    setNotificationsModal((prevShowNotification) => !prevShowNotification);
+  };
+
+  const handleCloseNotifications = () => {
+    setNotificationsModal(false);
+  };
+
   const handleShowModal = (event: React.MouseEvent<HTMLElement>) => {
     currentClickRef.current = event.target;
     setShowModal((prevShowModal) => !prevShowModal);
@@ -59,10 +72,42 @@ const Navbar: React.FC = () => {
     };
   }, []);
 
-  // const styles = {
-  //   '--i': 5,
-  //   display: window.innerWidth < 780 ? 'block' : 'none',
-  // };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        modalRef.current &&
+        !modalRef.current?.contains(event.target as Node) && // Operador de aserción de tipo as Node para asegurarnos de que event.target sea un nodo del DOM. Es necesario porque event.target puede ser null
+        event.target !== currentClickRef.current
+      ) {
+        handleCloseModal();
+        handleCloseNotifications();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    socket.on("new_adoption", (adoption) => {
+      console.log("Nueva adopción:", adoption);
+      if (adoption) {
+        // Asegúrate de que post no sea null
+        // setNotifications((prevNotifications) => [
+        //   ...prevNotifications,
+        //   { id: post.id, message: `Nuevo post: ${post.title}` },
+        // ]);
+      }
+    });
+
+    return () => {
+      socket.off("new_post");
+    };
+  }, []);
 
   return (
     <header
@@ -147,7 +192,7 @@ const Navbar: React.FC = () => {
                 >
                   <PersonIcon className="text-[#4BAF47] text[20px]" />
                 </div>
-                <div className="p-[6px] bg-white border border-gray-300 rounded-full ml-2 cursor-pointer">
+                <div onClick={handleShowNotifications} className="p-[6px] bg-white border border-gray-300 rounded-full ml-2 cursor-pointer">
                   <NotificationsIcon className="text-[#4BAF47] text[20px]" />
                 </div>
 
@@ -195,15 +240,28 @@ const Navbar: React.FC = () => {
                     </div>
                   </div>
                 )}
+                 {notificationsModal && (
+              <div
+                className="absolute md:top-[3.8rem] desktop:top-[4.1rem] w-[14rem] bg-white gap-4 md:right-[50px] desktop:right-[185px] px-1 min-h-[7.8rem] rounded shadow-md"
+                ref={modalRef}>
+                <div className="flex flex-col items-center">
+                  <h5 className="text-base font-medium text-[#05264E] mt-5">Your Notifications</h5>
+                  {/* {notifications && (
+                    <div className="w-full">
+                      <ul>
+                        {notifications.map((notification) => (
+                          <></>
+                        ))}
+                      </ul>
+                    </div>
+                  )} */}
+                </div>
+              </div>
+            )}
               </div>
             )}
           </div>
         </div>
-
-        {/* <div className="md:flex items-center mobile:hidden ">
-          <AccountCircleIcon />
-          <CircleNotificationsIcon />
-        </div> */}
       </div>
     </header>
   );