Skip to content

Commit

Permalink
feat(client): Display all selected location levels
Browse files Browse the repository at this point in the history
clementprdhomme committed Nov 22, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 668cabd commit 61a55ed
Showing 4 changed files with 72 additions and 55 deletions.
18 changes: 12 additions & 6 deletions client/src/components/dataset-card/index.tsx
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ import { Switch } from "@/components/ui/switch";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import YearChart from "@/components/year-chart";
import useLocation from "@/hooks/use-location";
import { useLocationByCode } from "@/hooks/use-location-by-code";
import { useLocationByCodes } from "@/hooks/use-location-by-codes";
import useMapLayers from "@/hooks/use-map-layers";
import useYearChartData from "@/hooks/use-year-chart-data";
import { cn } from "@/lib/utils";
@@ -120,8 +120,8 @@ const DatasetCard = ({
selectedDate,
);

const { data: locationData, isLoading: locationIsLoading } = useLocationByCode(
location.code.slice(-1)[0],
const { data: locationData, isLoading: locationIsLoading } = useLocationByCodes(
location.code.slice(-1),
);

const onToggleAnimation = useCallback(() => {
@@ -231,7 +231,13 @@ const DatasetCard = ({
);

const onClickSaveChartData = useCallback(() => {
if (chartIsLoading || !chartData || locationIsLoading || !locationData || !selectedDate) {
if (
chartIsLoading ||
!chartData ||
locationIsLoading ||
!locationData?.length ||
!selectedDate
) {
return;
}

@@ -248,14 +254,14 @@ const DatasetCard = ({
};
}, {}),
year: getYear(selectedDate),
location: locationData.name,
location: locationData[0].name,
...chartData,
};

const blob = new Blob([JSON.stringify(data)], { type: "application/json" });

const link = document.createElement("a");
link.download = `${name} - ${locationData.name}.json`;
link.download = `${name} - ${locationData[0].name}.json`;
link.href = URL.createObjectURL(blob);
link.click();
link.remove();
8 changes: 4 additions & 4 deletions client/src/components/navigation/navigation-desktop/index.tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Sidebar, SidebarContent, SidebarHeader, SidebarTrigger } from "@/components/ui/sidebar";
import useLocation from "@/hooks/use-location";
import { useLocationByCode } from "@/hooks/use-location-by-code";
import { useLocationByCodes } from "@/hooks/use-location-by-codes";
import MapPinIcon from "@/svgs/map-pin.svg";

import Logo from "../logo";
@@ -18,7 +18,7 @@ const NavigationDesktop = () => {
const [locationDialogOpen, setLocationDialogOpen] = useState(false);

const [location] = useLocation();
const { data, isLoading } = useLocationByCode(location.code.slice(-1)[0]);
const { data, isLoading } = useLocationByCodes([...location.code].reverse());

const onExitLocationDialog = useCallback(() => {
setLocationDialogOpen(false);
@@ -41,8 +41,8 @@ const NavigationDesktop = () => {
variant="ghost"
className="relative -left-4 mt-2 gap-4 text-white/60 hover:text-white focus-visible:text-white"
>
{(!!isLoading || !data) && "Select location"}
{!isLoading && !!data && data.name}
{(isLoading || !data) && "Select location"}
{!isLoading && !!data && data.map(({ name }) => name).join(", ")}
<MapPinIcon aria-hidden />
</Button>
</DialogTrigger>
45 changes: 0 additions & 45 deletions client/src/hooks/use-location-by-code.ts

This file was deleted.

56 changes: 56 additions & 0 deletions client/src/hooks/use-location-by-codes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { useQueries } from "@tanstack/react-query";

import { getGetLocationsQueryKey, getLocations } from "@/types/generated/location";
import { GetLocationsParams, LocationListResponse } from "@/types/generated/strapi.schemas";

type LocationByCode = {
id: number;
name: string;
code: string;
};

export function useLocationByCodes(codes: string[]) {
const { data, isLoading } = useQueries({
queries: codes.map((code) => {
const queryParams: GetLocationsParams = {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-error
fields: ["name", "code"],
filters: {
code: {
$eq: code,
},
},
sort: "name",
"pagination[limit]": 1,
};

return {
queryKey: getGetLocationsQueryKey(queryParams),
queryFn: () => getLocations(queryParams),
placeholderData: { data: undefined },
select: (data: LocationListResponse) => {
if (!data?.data || data.data.length === 0) {
return undefined;
}

return {
id: data.data[0].id,
name: data.data[0].attributes!.name!,
code: data.data[0].attributes!.code!,
} as LocationByCode;
},
};
}),
combine: (results) => {
const isLoading = results.some(({ isPending }) => isPending);

return {
data: isLoading ? undefined : results.map(({ data }) => data!),
isLoading,
};
},
});

return { data, isLoading };
}

0 comments on commit 61a55ed

Please sign in to comment.