Skip to content

Commit

Permalink
fix: type problem in solicitudcard
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickwebsdev
patrickwebsdev committed Nov 9, 2024
1 parent 41f2ae2 commit 33298de
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 120 deletions.
96 changes: 48 additions & 48 deletions src/app/solicitudes/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,54 @@ import { helpRequestService } from '@/lib/service';
import { useParams } from 'next/navigation';

export default function CasoDetalle() {
const { id } = useParams<{ id: string }>();
const { id } = useParams<{ id: string }>();

const {
data: request,
isLoading,
error,
} = useQuery<HelpRequestData>({
queryKey: ['help_requests', { id: id }],
queryFn: () => helpRequestService.getOne(Number(id)),
});
const {
data: request,
isLoading,
error,
} = useQuery<HelpRequestData>({
queryKey: ['help_requests', { id: id }],
queryFn: () => helpRequestService.getOne(Number(id)),
});

if (isLoading) {
return (
<div className="flex justify-center items-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>
);
}
if (error || request === undefined) {
return (
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
<div className="flex justify-start">
<button
className="flex flex-row items-center px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
onClick={() => history.back()}
>
<ArrowLeft className="w-4 h-4 mr-2" />
Volver
</button>
</div>
<div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
<p className="text-red-700">No se encontró la solicitud.</p>
</div>
</div>
);
}
return (
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
<div className="flex justify-start">
<button
className="flex flex-row items-center px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
onClick={() => history.back()}
>
<ArrowLeft className="w-4 h-4 mr-2" />
Volver
</button>
</div>
<SolicitudCard caso={request} showLink={false} showEdit={true} />
</div>
);
if (isLoading) {
return (
<div className="flex justify-center items-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>
);
}
if (error || request === undefined) {
return (
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
<div className="flex justify-start">
<button
className="flex flex-row items-center px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
onClick={() => history.back()}
>
<ArrowLeft className="w-4 h-4 mr-2" />
Volver
</button>
</div>
<div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
<p className="text-red-700">No se encontró la solicitud.</p>
</div>
</div>
);
}
return (
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
<div className="flex justify-start">
<button
className="flex flex-row items-center px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
onClick={() => history.back()}
>
<ArrowLeft className="w-4 h-4 mr-2" />
Volver
</button>
</div>
<SolicitudCard caso={request as any} showLink={false} showEdit={true} />
</div>
);
}
96 changes: 48 additions & 48 deletions src/app/solicitudes/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,57 +11,57 @@ import { helpRequestService } from '@/lib/service';
export const dynamic = 'force-dynamic';

export default function ListaSolicitudes() {
const session = useSession();
const userId = session.user?.id;
const session = useSession();
const userId = session.user?.id;

const {
data: requests,
isLoading,
error,
} = useQuery<HelpRequestData[]>({
queryKey: ['help_requests', { user_id: userId, type: 'necesita' }],
queryFn: () => helpRequestService.getRequestsByUser(userId),
});
const {
data: requests,
isLoading,
error,
} = useQuery<HelpRequestData[]>({
queryKey: ['help_requests', { user_id: userId, type: 'necesita' }],
queryFn: () => helpRequestService.getRequestsByUser(userId),
});

if (isLoading) {
return (
<div className="flex justify-center items-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>
);
}
if (isLoading) {
return (
<div className="flex justify-center items-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>
);
}

if (error || requests === undefined) {
return (
<div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
<p className="text-red-700">{error?.message}</p>
</div>
);
}
if (error || requests === undefined) {
return (
<div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
<p className="text-red-700">{error?.message}</p>
</div>
);
}

return (
<>
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6 mt-10">
<div className="grid gap-4">
{requests.length === 0 ? (
<div className="bg-white rounded-lg shadow-lg border border-gray-300 text-center flex justify-center items-center p-10 flex-col gap-5">
<p className="text-gray-700 text-lg font-medium">
No se encontraron solicitudes de ayuda correspondientes a tu cuenta.
</p>
return (
<>
<div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6 mt-10">
<div className="grid gap-4">
{requests.length === 0 ? (
<div className="bg-white rounded-lg shadow-lg border border-gray-300 text-center flex justify-center items-center p-10 flex-col gap-5">
<p className="text-gray-700 text-lg font-medium">
No se encontraron solicitudes de ayuda correspondientes a tu cuenta.
</p>

<Link
href="/solicitar-ayuda"
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 flex items-center gap-2 whitespace-nowrap"
>
<Search className="w-5 h-5" />
Solicitar ayuda
</Link>
</div>
) : (
requests.map((caso) => <SolicitudCard showLink={true} showEdit={true} key={caso.id} caso={caso} />)
)}
</div>
</div>
</>
);
<Link
href="/solicitar-ayuda"
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 flex items-center gap-2 whitespace-nowrap"
>
<Search className="w-5 h-5" />
Solicitar ayuda
</Link>
</div>
) : (
requests.map((caso) => <SolicitudCard showLink={true} showEdit={true} key={caso.id} caso={caso as any} />)
)}
</div>
</div>
</>
);
}
48 changes: 24 additions & 24 deletions src/helpers/format.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@ import SolicitudCard from '@/components/SolicitudCard';
import { tiposAyudaOptions } from '@/helpers/constants';

export const getMarkerBySolicitud = (solicitud: HelpRequestData) => {
// TODO think if possible getLatLng from a given location
if (!solicitud.latitude || !solicitud.longitude) {
return null;
}
// TODO think if possible getLatLng from a given location
if (!solicitud.latitude || !solicitud.longitude) {
return null;
}

return {
id: solicitud.id,
coordinates: [solicitud.longitude, solicitud.latitude],
descriptionHTML: getMarkerDescriptionBySolicitudAndTowns(solicitud),
color: getMarkerColorBySolicitud(solicitud),
width: '400px',
};
return {
id: solicitud.id,
coordinates: [solicitud.longitude, solicitud.latitude],
descriptionHTML: getMarkerDescriptionBySolicitudAndTowns(solicitud),
color: getMarkerColorBySolicitud(solicitud),
width: '400px',
};
};

export const getMarkerColorBySolicitud = (solicitud: HelpRequestData) => {
switch (solicitud.urgency) {
case 'baja':
return '#00FF00';
case 'media':
return '#FFA500';
case 'alta':
return '#FF0000';
default:
return '#000000';
}
switch (solicitud.urgency) {
case 'baja':
return '#00FF00';
case 'media':
return '#FFA500';
case 'alta':
return '#FF0000';
default:
return '#000000';
}
};
export const getMarkerDescriptionBySolicitudAndTowns = (solicitud: HelpRequestData) => {
return ReactDOMServer.renderToString(
<SolicitudCard key={solicitud.id} caso={solicitud} showEdit={false} showLink={true} />,
);
return ReactDOMServer.renderToString(
<SolicitudCard key={solicitud.id} caso={solicitud as any} showEdit={false} showLink={true} />,
);
};

0 comments on commit 33298de

Please sign in to comment.