wip: avoid extra request on SolicitudesCard

pedrolivaresanchez · Nov 15, 2024 · a88783b · a88783b
1 parent 7feb7c9
commit a88783b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/src/app/solicitudes/[id]/page.tsx b/src/app/solicitudes/[id]/page.tsx
@@ -68,7 +68,7 @@ export default function CasoDetalle() {
         </button>
       </div>
       <SolicitudCard caso={data} showLink={false} showEdit={true} />
-      <SolicitudComments request={data} />
+      {/* <SolicitudComments request={data} /> */}
     </div>
   );
 }
diff --git a/src/components/solicitudes/SolicitudCard.tsx b/src/components/solicitudes/SolicitudCard.tsx
@@ -23,7 +23,7 @@ import { UserRoles } from '@/helpers/constants';
 import CRMNotes from '@/components/CRMNotes';
 
 type SolicitudCardProps = {
-  caso: HelpRequestDataWAssignmentCount;
+  caso: SelectedHelpData | HelpRequestData | HelpRequestDataWAssignmentCount;
   showLink?: boolean;
   showEdit?: boolean;
   format?: 'small' | 'large';
@@ -78,11 +78,10 @@ export default function SolicitudCard({
             </div>
           </div>
           <div className="flex flex-row justify-center items-center gap-2">
-            <div
-              className={`flex items-center justify-center rounded-full px-4 py-2 ${caso.help_request_assignment_count === 0 ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}
-            >
-              <span className={`text-sm font-bold`}>{caso.help_request_assignment_count} VOLUNTARIOS</span>
-            </div>
+            {/* <SolicitudHelpCount
+              id={caso.id}
+              count={(caso as HelpRequestDataWAssignmentCount).help_request_assignment_count}
+            /> */}
             <div
               className={`flex items-center justify-center rounded-full px-4 py-2 ${
                 updateStatus === 'finished'
@@ -109,14 +108,14 @@ export default function SolicitudCard({
               <div className="flex items-start gap-2">
                 <MapPinned className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
                 <span className="break-words">
-                  <span className="font-semibold">Pueblo:</span> {getTownById(caso.town_id)?.name || ''}
+                  {/* <span className="font-semibold">Pueblo:</span> {getTownById(caso.town_id)?.name || ''} */}
                 </span>
               </div>
             )}
             {caso.contact_info && (
               <div className="flex items-start gap-2">
-                <Phone className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" />
-                <PhoneInfo isAdmin caseInfo={caso} />
+                {/* <Phone className="h-4 w-4 text-gray-500 flex-shrink-0 mt-1" /> */}
+                {/* <PhoneInfo isAdmin caseInfo={caso} /> */}
               </div>
             )}
             {caso.help_type && (
@@ -201,7 +200,7 @@ export default function SolicitudCard({
                 Ver solicitud
               </Link>
             )}
-            {!isCrmUser && <AsignarSolicitudButton helpRequest={caso} />}
+            {/* {!isCrmUser && <AsignarSolicitudButton helpRequest={caso} />} */}
             {isAdmin && (
               <ChangeUrgencyHelpRequest
                 onUpdate={setUpdateUrgency}

diff --git a/src/components/solicitudes/SolicitudHelpCount.tsx b/src/components/solicitudes/SolicitudHelpCount.tsx
@@ -0,0 +1,40 @@
+import { HelpRequestAssignmentData } from '@/types/Requests';
+import { useQuery } from '@tanstack/react-query';
+import { Spinner } from '@/components/Spinner';
+import { getAssignments } from '@/lib/actions';
+
+type SolicitudHelpCountProps = {
+  id: number;
+  count?: number;
+};
+
+export default function SolicitudHelpCount({ id, count }: SolicitudHelpCountProps) {
+  const {
+    data: assignments,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestAssignmentData[]>({
+    queryKey: ['help_request_assignments', { id: id }],
+    queryFn: () => getAssignments(id),
+    enabled: false //count === undefined,
+  });
+
+  if (!count && isLoading) return <Spinner />;
+
+  if (error || assignments === undefined) return <></>;
+
+  const volunteers = count || assignments.length;
+
+  let colorClass: string;
+
+  if (volunteers === 0) {
+    colorClass = 'bg-red-100 text-red-800';
+  } else {
+    colorClass = 'bg-green-100 text-green-800';
+  }
+  return (
+    <div className={`flex items-center justify-center rounded-full px-4 py-2 ${colorClass}`}>
+      <span className={`text-sm font-bold`}>{volunteers} VOLUNTARIOS</span>
+    </div>
+  );
+}