Merge branch 'feature/Cambios' into fix/refactor-rec-profile-card

Author: carlosdamota

src/features/developer/components/ProjectInfoCard.jsx

@@ -14,7 +14,7 @@ import {
 import { AvatarImage } from "../../../components/AvatarImage";
 import { NameUsers } from "../../../components/NameUsers";
 
-export const ProjectInfoCard = ({ project }) => {
+export const ProjectInfoCard = ({ project, setSelectedOwner }) => {
   const [showAllSkills, setShowAllSkills] = useState(false);
 
   if (!project) return null;
@@ -30,9 +30,9 @@ export const ProjectInfoCard = ({ project }) => {
     owner,
   } = project;
 
-  const skillsToShow = showAllSkills
-    ? projectSkills
-    : projectSkills?.slice(0, 5) || [];
+  setSelectedOwner(owner);
+
+  const skillsToShow = showAllSkills ? projectSkills : projectSkills?.slice(0, 5) || [];
 
   console.log("owner en ProjectInfoCard:", owner);
 
@@ -153,9 +153,7 @@ export const ProjectInfoCard = ({ project }) => {
                       type="button"
                       onClick={() => setShowAllSkills(true)}
                       className="bg-neutral-60 text-neutral-30 px-2 py-0.5 rounded-full text-sm cursor-pointer"
-                      aria-label={`Show ${
-                        projectSkills.length - 5
-                      } more skills`}
+                      aria-label={`Show ${projectSkills.length - 5} more skills`}
                     >
                       +{projectSkills.length - 5}
                     </button>

src/features/developer/pages/ProjectDetailsPage.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { getProjectById, incrementProjectView, toggleProjectLike, getProjectLikeStatus } from "../../../services/projectService";
 import { ProjectInfoCard } from "../components/ProjectInfoCard";
 import { GitHubFileTree } from "../components/GitHubFileTree";
 import { GitHubLanguagesTag } from "../components/GitHubLanguagesTag";
 import { CodeBlock } from "../../../styles/ReactParser";
 import { LikeButtonRounded } from "../../../components/LikeButtonRounded";
+import { AuthContext } from "../../../context/authContext";
+
 
 function useWindowWidth() {
   const [width, setWidth] = useState(window.innerWidth);
@@ -34,7 +36,8 @@ export const ProjectDetailsPage = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const width = useWindowWidth();
   const isDesktop = width >= 1200;
-
+  const { profile, socket, setNotifications } = useContext(AuthContext);
+  const [selectedOwner, setSelectedOwner] = useState(null); 
   const token = localStorage.getItem('token') || '';
 
   // Estados del botón de like
@@ -43,46 +46,46 @@ export const ProjectDetailsPage = () => {
   const [loadingLike, setLoadingLike] = useState(true);
 
   useEffect(() => {
-  const incrementViewWithCooldown = async () => {
-    if (typeof window === "undefined" || !window.localStorage) return;
-
-    const cooldownTime = 1000 * 60 * 60; // 1 hora en ms
-    const lastViewKey = `project_${id}_last_view`;
-    const lastView = localStorage.getItem(lastViewKey);
-    const now = Date.now();
+    const incrementViewWithCooldown = async () => {
+      if (typeof window === "undefined" || !window.localStorage) return;
+
+      const cooldownTime = 1000 * 60 * 60; // 1 hora en ms
+      const lastViewKey = `project_${id}_last_view`;
+      const lastView = localStorage.getItem(lastViewKey);
+      const now = Date.now();
+
+      if (!lastView || now - parseInt(lastView, 10) > cooldownTime) {
+        try {
+          await incrementProjectView(id);
+          localStorage.setItem(lastViewKey, now.toString());
+
+          // Actualizar localmente el contador de views para reflejar el cambio instantáneamente:
+          setProject(prev => prev ? { ...prev, views: (prev.views || 0) + 1 } : prev);
+        } catch (error) {
+          console.error("Error incrementando views:", error);
+        }
+      }
+    };
 
-    if (!lastView || now - parseInt(lastView, 10) > cooldownTime) {
+    const fetchProjectAndLikeStatus = async () => {
       try {
-        await incrementProjectView(id);
-        localStorage.setItem(lastViewKey, now.toString());
-
-        // Actualizar localmente el contador de views para reflejar el cambio instantáneamente:
-        setProject(prev => prev ? { ...prev, views: (prev.views || 0) + 1 } : prev);
+        const data = await getProjectById(id);
+        if (data && !data.error) {
+          setProject(data);
+          setCurrentIndex(0);
+        }
+        const likeStatus = await getProjectLikeStatus(id, token);
+        setLiked(likeStatus.liked);
       } catch (error) {
-        console.error("Error incrementando views:", error);
-      }
-    }
-  };
-
-  const fetchProjectAndLikeStatus = async () => {
-    try {
-      const data = await getProjectById(id);
-      if (data && !data.error) {
-        setProject(data);
-        setCurrentIndex(0);
+        console.error("Error fetching project or like status:", error);
+      } finally {
+        setLoadingLike(false);
       }
-      const likeStatus = await getProjectLikeStatus(id, token);
-      setLiked(likeStatus.liked);
-    } catch (error) {
-      console.error("Error fetching project or like status:", error);
-    } finally {
-      setLoadingLike(false);
-    }
-  };
+    };
 
-  fetchProjectAndLikeStatus();
-  incrementViewWithCooldown();
-}, [id, token]);
+    fetchProjectAndLikeStatus();
+    incrementViewWithCooldown();
+  }, [id, token]);
 
 
   // Función para manejar el click del like
@@ -93,12 +96,24 @@ export const ProjectDetailsPage = () => {
     try {
       const data = await toggleProjectLike(id, token);
       setLiked(data.liked);
-      // Actualizamos el proyecto con la info de likes para que refleje contador, estado, etc.
       setProject((prevProject) => ({
         ...prevProject,
         liked: data.liked,
         likes: data.likes,
       }));
+
+      if (data.liked && selectedOwner._id && selectedOwner._id !== profile._id) {
+        const notif = {
+          senderId: profile._id,
+          senderName: profile.name,
+          receiverId: selectedOwner._id,
+          receiverName: selectedOwner.name,
+          type: 2,
+          createdAt: Date.now()
+        };
+        socket.emit("sendNotification", notif);
+        setNotifications(prev => [notif, ...prev]);
+      }
     } catch (error) {
       console.error(error);
     } finally {
@@ -133,7 +148,7 @@ export const ProjectDetailsPage = () => {
     ? parseRepoUrl(project.githubProjectLink)
     : null;
 
-  
+
   return (
     <div className="w-full flex flex-col items-center gap-6">
       <div className="relative w-full h-[256px] overflow-hidden">
@@ -164,9 +179,8 @@ export const ProjectDetailsPage = () => {
                       key={index}
                       src={url}
                       alt={`slide-${index}`}
-                      className={`absolute inset-0 w-full h-full object-cover rounded-lg transition-opacity duration-700 ease-in-out ${
-                        index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
-                      }`}
+                      className={`absolute inset-0 w-full h-full object-cover rounded-lg transition-opacity duration-700 ease-in-out ${index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
+                        }`}
                     />
                   ))}
                   <button
@@ -208,7 +222,7 @@ export const ProjectDetailsPage = () => {
             </div>
 
             <div className="flex flex-col">
-              <ProjectInfoCard project={project} />
+              <ProjectInfoCard project={project} setSelectedOwner={setSelectedOwner} />
 
               <div className="flex justify-center items-center rounded-full p-6">
                 <LikeButtonRounded
@@ -251,9 +265,8 @@ export const ProjectDetailsPage = () => {
                             key={index}
                             src={url}
                             alt={`slide-${index}`}
-                            className={`absolute inset-0 w-full h-full object-cover rounded-lg transition-opacity duration-700 ease-in-out ${
-                              index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
-                            }`}
+                            className={`absolute inset-0 w-full h-full object-cover rounded-lg transition-opacity duration-700 ease-in-out ${index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
+                              }`}
                           />
                         ))}
                         <button
@@ -273,7 +286,7 @@ export const ProjectDetailsPage = () => {
                   );
 
                 case "ProjectInfoCard":
-                  return <ProjectInfoCard key="infoCard" project={project} />;
+                  return <ProjectInfoCard key="infoCard" project={project} setSelectedOwner={setSelectedOwner} />;
 
                 case "Description":
                   return project.description ? (

src/features/recruiters/components/OfferModal.jsx

@@ -71,18 +71,18 @@ export const OfferModal = ({ token, reloadPage, idOffer, isOpen, setIsOpen, oper
   return (
     // Overlay y centrar modal
     <dialog open={isOpen} className="modal">
-      <div className="inset-0 flex items-center justify-center">
+      <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/40">
         {/* Caja del modal centrada */}
-        <div className="modal-box max-w-3xl w-full bg-neutral-80 border border-neutral-70 text-neutral-0 shadow-md rounded-lg my-auto self-center">
+        <div className="modal-box w-[95vw] max-w-full md:max-w-3xl bg-neutral-80 border border-neutral-70 text-neutral-0 shadow-md rounded-lg p-0">
           <form
             method="dialog"
             onSubmit={handleSubmit(onSubmit)}
             className="space-y-6 p-4 sm:p-6"
           >
-            <h2 className="text-3xl font-bold text-center mb-4">Post a Job Offer</h2>
+            <h2 className="text-2xl sm:text-3xl font-bold text-center mb-4">Post a Job Offer</h2>
             <hr className="border-t border-neutral-60" />
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 pt-2">
               {/* Position */}
               <div>
                 <label className="block text-sm text-neutral-20 mb-1">Position</label>
@@ -189,7 +189,7 @@ export const OfferModal = ({ token, reloadPage, idOffer, isOpen, setIsOpen, oper
             </div>
 
             <div className="flex flex-col md:flex-row justify-end gap-4 pt-4">
-              <button type="submit" className="btn bg-primary-60 text-neutral-90 hover:bg-primary-70 w-full md:w-auto">
+              <button type="submit" className="btn bg-primary-60 hover:bg-primary-70 w-full md:w-auto">
                 {operacion !== 'crear' ? "Edit Offer" : "Create Offer"}
               </button>
               <button

src/layout/Header.jsx

@@ -5,28 +5,16 @@ import { SideMenu } from "./components/SideMenu";
 import { Navbar } from "./components/Navbar";
 import { AuthMenu } from "./components/AuthMenu";
 import { useState } from "react";
-import { CiBellOn } from "react-icons/ci";
-import { formatMessageTime } from "../utils/utils";
+import { Notifications } from "./components/Notifications";
 
 
 export const Header = () => {
-  const { profile, logout, notifications, setNotifications } = useContext(AuthContext);
+  const { profile, logout } = useContext(AuthContext);
   const [openSideMenu, setOpenSideMenu] = useState(false);
-  const [notificationsOpen, setNotificationsOpen] = useState(false);
   const toggleSideMenu = () => {
     setOpenSideMenu(!openSideMenu);
   };
 
-  const getNotificationText = (notif) => {
-    if (notif.type === 1) return null;
-    const types = {
-      2: `${notif.senderName} ha dado like a tu Proyecto`,
-      3: `${notif.senderName} ha comentado en tu foto`,
-      // añade más tipos según necesites
-    };
-    return types[notif.type] || "Tienes una nueva notificación";
-  };
-
   return (
     <header className='bg-neutral-80 py-2 pl-2  drawer border-b-1 border-neutral-70'>
       <input
@@ -41,67 +29,9 @@ export const Header = () => {
         <Navbar />
 
         {/* Bell icon y menú de notificaciones */}
-        <div className="mx-4 flex items-center">
-          <div className="relative">
-            {
-              profile && (
-                <button
-                  type="button"
-                  className="relative flex items-center justify-center text-white hover:text-gray-200"
-                  aria-label="Notificaciones"
-                  onClick={() => setNotificationsOpen((prev) => !prev)}
-                >
-                  <CiBellOn className="h-6 w-6" />
-                  {notifications.filter(notif => notif.type !== 1).length > 0 && (
-                    <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
-                      {notifications.filter(notif => notif.type !== 1).length}
-                    </span>
-                  )}
-                </button>
-              )
-            }
-
-            {/* Panel de notificaciones */}
-            {profile && notificationsOpen && (
-              <div className="absolute right-0 mt-2 w-80 max-w-xs bg-neutral-70 shadow-lg rounded-xl z-50">
-                <div className="flex justify-between items-center px-4 py-3 border-b border-base-200">
-                  <span className="font-semibold text-base-content">Notificaciones</span>
-                  <button
-                    onClick={() => setNotificationsOpen(false)}
-                    className="text-base-content hover:text-error text-xl"
-                    aria-label="Cerrar"
-                  >
-                    ×
-                  </button>
-                </div>
-
-                <div className="max-h-72 overflow-y-auto p-2 space-y-2">
-                  {notifications.filter(notif => notif.type !== 1).length > 0 ? (
-                    notifications
-                      .filter(notif => notif.type !== 1)
-                      .map((notif, index) => (
-                        <div
-                          key={notif._id || `${notif.senderName}-${notif.type}-${index}`}
-                          className="w-full bg-neutral-60 text-base-content shadow-md rounded-md p-3"
-                        >
-                          <div className="text-sm font-medium">
-                            {getNotificationText(notif)}
-                          </div>
-                          <span className="text-xs opacity-60 block mt-1">
-                            {formatMessageTime(notif.createdAt)}
-                          </span>
-                        </div>
-                      ))
-                  ) : (
-                    <div className="p-3 text-sm text-gray-400 text-center">
-                      No hay notificaciones
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
+        {/* <div className="mx-4 flex items-center">
+          <Notifications/>
+        </div> */}
 
         {/* Menu User */}
         <AuthMenu profile={profile} logout={logout} notifications={notifications} setNotifications={setNotifications} setNotificationsOpen={setNotificationsOpen} getNotificationText={getNotificationText} />

src/layout/chat/Widget.jsx

@@ -6,13 +6,15 @@ import { ChatContext } from "./context/ChatContext";
 
 export function Widget() {
   // const [isOpen, setIsOpen] = useState(false);
-  const { profile, token } = useContext(AuthContext);
-  const {toggleChat, isOpen} = useContext(ChatContext);
+  const { profile, token, notifications } = useContext(AuthContext);
+  const { toggleChat, isOpen } = useContext(ChatContext);
 
   // const toggleChat = () => {
   //   setIsOpen(!isOpen);
   // };
 
+  const unreadChats = notifications.filter(n => n.type === 1).length;
+
   return (
     <>
       {token && (
@@ -28,7 +30,7 @@ export function Widget() {
                 ${isOpen ? 'scale-100 opacity-100' : 'scale-0 opacity-0 pointer-events-none'}
               `}
               style={{
-                boxShadow: '0 50px 50px rgba(0, 0, 0, 0.8)' // más profunda
+                boxShadow: '0 50px 50px rgba(0, 0, 0, 0.8)'
               }}
             >
               <ChatPanel onClose={toggleChat} user={profile} />
@@ -42,9 +44,14 @@ export function Widget() {
               }}
               className="
                 w-14 h-14 rounded-full text-white flex items-center justify-center shadow-2xl hover:brightness-90
-                transition transform active:scale-90 duration-150 ease-out"
+                transition transform active:scale-90 duration-150 ease-out relative"
             >
               <PiChat size={28} />
+              {unreadChats > 0 && (
+                <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full animate-pulse min-w-[22px] text-center">
+                  {unreadChats}
+                </span>
+              )}
             </button>
           </div>
         </div>