refactor: UI & modal status change

src/app/casos-activos/solicitudes/page.tsx

@@ -190,7 +190,7 @@ function Solicitudes() {
               ))}
             </select>
           </div>
-{/*<div className="flex flex-row flex-1 justify-end">
+          {/*<div className="flex flex-row flex-1 justify-end">
   <Toggle
     handleChange={handleToggleChange}
     checked={isStringTrue(filtroData.soloSinAsignar)}

src/components/AsignarSolicitudButton.tsx

@@ -5,7 +5,6 @@ import { HelpRequestAssignmentData, HelpRequestData } from '@/types/Requests';
 import { helpRequestService } from '@/lib/service';
 import { MouseEvent } from 'react';
 import { Spinner } from '@/components/Spinner';
-import Link from 'next/link';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import Modal from '@/components/Modal';

src/components/ChangeStatusButton.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { supabase } from '@/lib/supabase/client';
+import { useSession } from '@/context/SessionProvider';
+import { MouseEvent, useState } from 'react';
+import { Spinner } from '@/components/Spinner';
+import Modal from '@/components/Modal';
+import { useModal } from '@/context/ModalProvider';
+
+type ChangeStatusButtonProps = {
+  helpRequestId: number;
+  onUpdate: (status: string) => void;
+  currentStatus: string;
+};
+export default function ChangeStatusButton({ helpRequestId, onUpdate, currentStatus }: ChangeStatusButtonProps) {
+  const { toggleModal } = useModal();
+  const [error, setError] = useState({});
+  const [status, setStatus] = useState<string>(currentStatus);
+  const MODAL_NAME = `Actualizar-Estado-Solicitud-${helpRequestId}`;
+
+  const updateHelpRequest = async () => {
+    const { data, error } = await supabase
+      .from('help_requests')
+      .update({ status: status })
+      .eq('id', helpRequestId)
+      .select();
+
+    return { data, error };
+  };
+
+  async function handleAcceptanceSubmit(e: MouseEvent) {
+    e.preventDefault();
+    const { data, error } = await updateHelpRequest();
+    if (error) {
+      setError(error);
+      return;
+    }
+    if (data) {
+      onUpdate(status);
+    }
+    toggleModal(MODAL_NAME, false);
+  }
+  async function handleSubmit(e: MouseEvent) {
+    e.preventDefault();
+    toggleModal(MODAL_NAME, true);
+  }
+  if (error === undefined) return <></>;
+  return (
+    <>
+      <button
+        onClick={handleSubmit}
+        className="w-full text-center rounded-xl px-4 py-2 font-semibold text-white sm:w-auto transition-all bg-yellow-500 hover:bg-yellow-600"
+      >
+        Cambiar estado
+      </button>
+      <Modal id={MODAL_NAME} allowClose={false}>
+        <div className="bg-white p-4 rounded">
+          <h2 className="text-black font-semibold mb-4">Cambiar el estado de mi solicitud</h2>
+          <div className="w-full">
+            <label htmlFor="status">Estado de mi solicitud</label>
+            <div className="relative mt-1">
+              <select
+                onChange={(e) => setStatus(e.target.value)}
+                defaultValue={currentStatus}
+                name="status"
+                id="status"
+                className="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded pl-3 pr-8 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md appearance-none cursor-pointer"
+              >
+                <option value="active">Activo</option>
+                <option value="progress">En progreso</option>
+                <option value="finished">Finalizado</option>
+              </select>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.2"
+                stroke="currentColor"
+                className="h-5 w-5 ml-1 absolute top-2.5 right-2.5 text-slate-700"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <div className="mt-4 flex justify-end space-x-4">
+            <button
+              onClick={() => {
+                toggleModal(MODAL_NAME, false);
+                setStatus(currentStatus);
+              }}
+              className="flex-1 bg-red-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Rechazar
+            </button>
+            <button
+              onClick={handleAcceptanceSubmit}
+              className="flex-1 bg-green-500 text-white py-3 px-4 rounded-lg font-semibold"
+            >
+              Actualizar
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

src/components/SolicitudCard.tsx

@@ -12,7 +12,7 @@ import { useTowns } from '@/context/TownProvider';
 import { useRole } from '@/context/RoleProvider';
 import { useState } from 'react';
 import ChangeUrgencyHelpRequest from './ChangeUrgencyHelpRequest';
-import { helpRequestService } from '@/lib/service';
+import ChangeStatusButton from './ChangeStatusButton';
 
 type SolicitudCardProps = {
   caso: HelpRequestData;
@@ -34,14 +34,9 @@ export default function SolicitudCard({
   const special_situations = 'special_situations' in additionalInfo ? additionalInfo.special_situations : undefined;
   const isAdmin = role === 'admin';
   const [deleted, setDeleted] = useState(false);
-  const [caseStatus, setCaseStatus] = useState<any>(caso.status!);
   const isMyRequest = session.user?.id && session.user.id === caso.user_id;
   const [updateUrgency, setUpdateUrgency] = useState(caso.urgency);
-  const statusButtonMap: any = {
-    active: { text: 'En proceso', nextStatus: 'progress', buttonClass: 'bg-yellow-500' },
-    progress: { text: 'Resolver', nextStatus: 'finished', buttonClass: 'bg-red-500' },
-    finished: { text: 'Volver a activar', nextStatus: 'active', buttonClass: 'bg-green-500' },
-  };
+  const [updateStatus, setUpdateStatus] = useState(caso.status);
   return (
     !deleted && (
       <div key={caso.id} className="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5">
@@ -77,15 +72,15 @@ export default function SolicitudCard({
             <SolicitudHelpCount id={caso.id} people={caso.number_of_people} />
             <div
               className={`flex items-center justify-center rounded-full px-4 py-2 ${
-                caseStatus === 'finished'
+                updateStatus === 'finished'
                   ? 'bg-red-100 text-red-800'
-                  : caseStatus === 'progress'
+                  : updateStatus === 'progress'
                     ? 'bg-yellow-100 text-yellow-800'
                     : 'bg-green-100 text-green-800'
               }`}
             >
               <span className={`text-sm font-bold`}>
-                {caseStatus === 'finished' ? 'FINALIZADO' : caseStatus === 'progress' ? 'EN PROCESO' : 'ACTIVO'}
+                {updateStatus === 'finished' ? 'FINALIZADO' : updateStatus === 'progress' ? 'EN PROCESO' : 'ACTIVO'}
               </span>
             </div>
           </div>
@@ -188,18 +183,7 @@ export default function SolicitudCard({
                 >
                   Editar
                 </Link>
-                <button
-                  onClick={async () => {
-                    const data = await helpRequestService.updateRequestStatus(
-                      caso.id,
-                      statusButtonMap[caseStatus].nextStatus,
-                    );
-                    setCaseStatus(data[0].status);
-                  }}
-                  className={`rounded-lg text-white py-2 px-4 w-full font-semibold sm:w-auto text-center ${statusButtonMap[caseStatus!].buttonClass}`}
-                >
-                  {statusButtonMap[caseStatus].text}
-                </button>
+                <ChangeStatusButton onUpdate={setUpdateStatus} currentStatus={updateStatus!} helpRequestId={caso.id} />
               </>
             )}
             {showLink && (
@@ -214,7 +198,7 @@ export default function SolicitudCard({
             {isAdmin && (
               <ChangeUrgencyHelpRequest
                 onUpdate={setUpdateUrgency}
-                currentUrgency={caso.urgency!}
+                currentUrgency={updateUrgency!}
                 helpRequestId={caso.id}
               />
             )}

src/lib/service.ts

@@ -15,7 +15,7 @@ export const helpRequestService = {
     return data[0] as HelpRequestData;
   },
   async updateRequestStatus(id: number, status: string) {
-    const { data, error } = await supabase.from('help_requests').update({status: status}).eq('id', id).select();
+    const { data, error } = await supabase.from('help_requests').update({ status: status }).eq('id', id).select();
     if (error) throw error;
     return data;
   },