From 362a41f8013bd0f3a5e64fce36e9bec65a578176 Mon Sep 17 00:00:00 2001
From: Bohdan Garchu <bohdan.garchu@gmail.com>
Date: Mon, 16 Dec 2024 12:01:21 +0100
Subject: [PATCH] fix: selectedCountries can be undefined

---
 src/components/ComparisonPortal/CountryComparison.tsx | 3 ++-
 src/components/ComparisonPortal/CountrySelection.tsx  | 6 ++----
 src/domain/props/CountryComparisonAccordionProps.ts   | 4 ++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/ComparisonPortal/CountryComparison.tsx b/src/components/ComparisonPortal/CountryComparison.tsx
index d1f0f424..9405bb96 100644
--- a/src/components/ComparisonPortal/CountryComparison.tsx
+++ b/src/components/ComparisonPortal/CountryComparison.tsx
@@ -12,12 +12,13 @@ import CountrySelection from './CountrySelection';
 import CountrySelectionSkeleton from './CountrySelectSkeleton';
 
 export default function CountryComparison({ countryMapData, globalFcsData }: CountryComparisonProps) {
-  const [selectedCountries, setSelectedCountries] = useState<CountryMapData[]>([]);
+  const [selectedCountries, setSelectedCountries] = useState<CountryMapData[] | undefined>(undefined);
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
+    if (!selectedCountries) return;
     const countryIds = selectedCountries.map((country) => country.properties.adm0_id);
     const newSearchParam = countryIds.join(',');
     if (newSearchParam !== searchParams.get('countries')) {
diff --git a/src/components/ComparisonPortal/CountrySelection.tsx b/src/components/ComparisonPortal/CountrySelection.tsx
index c7eeb26d..15ab05aa 100644
--- a/src/components/ComparisonPortal/CountrySelection.tsx
+++ b/src/components/ComparisonPortal/CountrySelection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Select, SelectItem } from '@nextui-org/react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useEffect, useMemo } from 'react';
 
 import { CountrySelectionProps } from '@/domain/props/CountrySelectionProps';
@@ -15,8 +15,6 @@ export default function CountrySelection({
   setSelectedCountries,
 }: CountrySelectionProps) {
   const searchParams = useSearchParams();
-  const router = useRouter();
-  const pathname = usePathname();
 
   const searchParamCountryCodes = useMemo(() => searchParams.get('countries')?.split(',') ?? [], [searchParams]);
 
@@ -51,7 +49,7 @@ export default function CountrySelection({
         aria-label="Select countries for comparison"
         selectionMode="multiple"
         onSelectionChange={(keys) =>
-          CountrySelectionOperations.onSelectionChange(keys, setSelectedCountries, countryMapData, pathname, router)
+          CountrySelectionOperations.onSelectionChange(keys, setSelectedCountries, countryMapData)
         }
         defaultSelectedKeys={searchParamCountryCodes}
         selectedKeys={selectedCountries?.map((country) => country.properties.adm0_id.toString())}
diff --git a/src/domain/props/CountryComparisonAccordionProps.ts b/src/domain/props/CountryComparisonAccordionProps.ts
index ca8cafe8..c527e2d1 100644
--- a/src/domain/props/CountryComparisonAccordionProps.ts
+++ b/src/domain/props/CountryComparisonAccordionProps.ts
@@ -3,6 +3,6 @@ import React from 'react';
 import { CountryMapData } from '../entities/country/CountryMapData';
 
 export default interface CountryComparisonAccordionProps {
-  selectedCountries: CountryMapData[];
-  setSelectedCountries: React.Dispatch<React.SetStateAction<CountryMapData[]>>;
+  selectedCountries: CountryMapData[] | undefined;
+  setSelectedCountries: React.Dispatch<React.SetStateAction<CountryMapData[] | undefined>>;
 }