Merge pull request #44 from SyTW2526/feature/refactor

Feature/refactor

Author: joelsaav

client/package-lock.json

@@ -15,6 +15,7 @@
     "coverage": "vitest run --coverage --coverage.include '**/src/*'"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -39,9 +40,11 @@
     "radix-ui": "^1.4.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hook-form": "^7.68.0",
     "react-i18next": "^16.3.5",
     "react-redux": "^9.2.0",
     "recharts": "^2.15.4",
+    "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.16",
     "zod": "^4.1.12"

client/package.json

@@ -11,8 +11,10 @@ import ContactsPage from "@/pages/public/contactsPage";
 import ProtectedRoute from "@/components/auth/protectedRoute";
 import Footer from "@/components/footer";
 import AppMenubar from "@/components/appMenubar";
+import { useSocket } from "@/hooks/useSocket";
 
 export default function App() {
+  useSocket();
   const { isAuthenticated } = useAuth();
   const publicRoute = (Page: React.ComponentType) =>
     isAuthenticated ? <Navigate to="/dashboard" replace /> : <Page />;

client/src/App.tsx

@@ -8,7 +8,6 @@ import { useLists } from "@/hooks/useLists";
 import { useTranslation } from "react-i18next";
 import type { List } from "@/types/tasks-system/list";
 
-// Props para modo controlado (usado como diálogo anidado)
 interface ControlledProps {
   mode: "controlled";
   open: boolean;
@@ -18,7 +17,6 @@ interface ControlledProps {
   ) => void;
 }
 
-// Props para modo standalone (usado como componente independiente)
 interface StandaloneProps {
   mode?: "standalone";
   trigger?: React.ReactNode;
@@ -35,7 +33,6 @@ function CreateListDialogUnified(props: CreateListDialogUnifiedProps) {
 
   const resetForm = () => setFormData({ name: "", description: "" });
 
-  // Handler para modo standalone
   const handleStandaloneSubmit = () => {
     if (!formData.name.trim()) return false;
 
@@ -48,7 +45,6 @@ function CreateListDialogUnified(props: CreateListDialogUnifiedProps) {
     return true;
   };
 
-  // Handler para modo controlado
   const handleControlledSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData.name.trim()) return;
@@ -99,7 +95,6 @@ function CreateListDialogUnified(props: CreateListDialogUnifiedProps) {
     </>
   );
 
-  // Modo controlado: usa FormDialog
   if (isControlled) {
     return (
       <FormDialog
@@ -117,7 +112,6 @@ function CreateListDialogUnified(props: CreateListDialogUnifiedProps) {
     );
   }
 
-  // Modo standalone: usa CreateDialog
   return (
     <CreateDialog
       trigger={props.trigger}
@@ -132,15 +126,12 @@ function CreateListDialogUnified(props: CreateListDialogUnifiedProps) {
   );
 }
 
-// Export por defecto: modo standalone
 export default CreateListDialogUnified;
 
-// Export nombrado para modo controlado
 export function CreateListDialog(props: Omit<ControlledProps, "mode">) {
   return <CreateListDialogUnified mode="controlled" {...props} />;
 }
 
-// Export nombrado para modo standalone (alias)
 export function CreateListDialogStandalone(props: {
   children?: React.ReactNode;
 }) {

client/src/components/createDialogs/createListDialog.tsx

@@ -2,7 +2,7 @@ import { CreateDialog } from "@/components/ui/createDialog";
 import { TaskFormFields } from "@/components/forms/TaskFormFields";
 import { CreateListDialog } from "@/components/createDialogs/createListDialog";
 import { useTaskForm } from "@/hooks/useTaskForm";
-import { useLists } from "@/hooks/useLists";
+
 import { useTranslation } from "react-i18next";
 import type { Task } from "@/types/tasks-system/task";
 
@@ -24,7 +24,6 @@ export default function CreateTaskDialog({
   showCreateList = true,
 }: CreateTaskDialogProps) {
   const { t } = useTranslation();
-  const { canAccess, isOwner } = useLists();
   const {
     formData,
     updateField,
@@ -34,14 +33,7 @@ export default function CreateTaskDialog({
     handleListCreated,
     handleSubmit,
     resetForm,
-  } = useTaskForm(editTask);
-
-  // Filter lists to only show those where user has EDIT+ permission
-  const filteredLists = filterByEditPermission
-    ? accessibleLists.filter(
-        (list) => isOwner(list.id) || canAccess(list.id, "EDIT"),
-      )
-    : accessibleLists;
+  } = useTaskForm(editTask, { filterByEditPermission });
 
   const handleOpenChange = (isOpen: boolean) => {
     if (!isOpen && !editTask) {
@@ -52,7 +44,6 @@ export default function CreateTaskDialog({
 
   const handleFormSubmit = () => {
     const success = handleSubmit(() => {
-      // Cerrar el diálogo después de enviar exitosamente
       handleOpenChange(false);
     });
     return success;
@@ -77,7 +68,7 @@ export default function CreateTaskDialog({
         <TaskFormFields
           formData={formData}
           updateField={updateField}
-          accessibleLists={filteredLists}
+          accessibleLists={accessibleLists}
           onCreateList={() => setListDialogOpen(true)}
           showCreateList={showCreateList}
         />

client/src/components/createDialogs/createTaskDialog.tsx

@@ -8,7 +8,6 @@ import {
 import { Bar, BarChart, Pie, PieChart, Cell, XAxis, YAxis } from "recharts";
 import { useTranslation } from "react-i18next";
 
-// Constante para el radio de las barras
 const BAR_RADIUS = 8;
 
 interface ChartDataItem {
@@ -100,7 +99,6 @@ export function WeeklyTasksChart({ data, config }: WeeklyTasksChartProps) {
     const isFirst = keysWithValue[0] === dataKey;
     const isLast = keysWithValue[keysWithValue.length - 1] === dataKey;
 
-    // Determinar tipo de radius
     if (!isFirst && !isLast) {
       return <rect x={x} y={y} width={width} height={height} fill={fill} />;
     }