From 795c5c1d7bcfd86767d117387503d4edc7e0e053 Mon Sep 17 00:00:00 2001
From: Milan Gruner <milangruner@gmail.com>
Date: Tue, 19 Mar 2024 18:59:47 +0100
Subject: [PATCH] Fix not being able to go to second step and fix data flow
 between components

---
 app/src/app/[lng]/onboarding/setup/page.tsx | 65 +++++++++++++++------
 app/src/services/api.ts                     |  3 +
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/app/src/app/[lng]/onboarding/setup/page.tsx b/app/src/app/[lng]/onboarding/setup/page.tsx
index a976229ad..4a0376bf3 100644
--- a/app/src/app/[lng]/onboarding/setup/page.tsx
+++ b/app/src/app/[lng]/onboarding/setup/page.tsx
@@ -77,6 +77,12 @@ type PopulationEntry = {
   datasource_id: string;
 };
 
+type OnboardingData = {
+  name: string;
+  locode: string;
+  year: number;
+};
+
 const numberOfYearsDisplayed = 10;
 
 /// Finds entry which has the year closest to the selected inventory year
@@ -110,14 +116,18 @@ function SetupStep({
   t,
   setValue,
   watch,
+  ocCityData,
   setOcCityData,
+  setData,
 }: {
   errors: FieldErrors<Inputs>;
   register: UseFormRegister<Inputs>;
   t: TFunction;
   setValue: any;
   watch: Function;
-  setOcCityData: Function;
+  ocCityData?: OCCityAttributes;
+  setOcCityData: (cityData: OCCityAttributes) => void;
+  setData: (data: OnboardingData) => void;
 }) {
   const currentYear = new Date().getFullYear();
   const years = Array.from(
@@ -142,11 +152,29 @@ function SetupStep({
     setOnInputClicked(false);
     dispatch(set(city));
     setLocode(city.actor_id);
+    setOcCityData(city);
+
+    if (year) {
+      setData({
+        name: city.name,
+        locode: city.actor_id,
+        year: year!,
+      });
+    }
 
-    // TODO: chech whether city exists or not
     setIsCityNew(true);
   };
 
+  useEffect(() => {
+    if (year && ocCityData) {
+      setData({
+        name: ocCityData.name,
+        locode: ocCityData.actor_id,
+        year: year!,
+      });
+    }
+  }, [year, ocCityData, setData]);
+
   useEffect(() => {
     if (!cityInputQuery || cityInputQuery.length === 0) {
       setOnInputClicked(false);
@@ -172,7 +200,7 @@ function SetupStep({
   const { data: countryData } = useGetOCCityDataQuery(countryLocode!, {
     skip: !countryLocode,
   });
-  const regionLocode = cityData?.data.is_part_of;
+  const regionLocode = cityData?.is_part_of;
   const { data: regionData } = useGetOCCityDataQuery(regionLocode!, {
     skip: !regionLocode,
   });
@@ -180,9 +208,7 @@ function SetupStep({
   // react to API data changes and different year selections
   useEffect(() => {
     if (cityData && year) {
-      setOcCityData(cityData);
-
-      const population = findClosestYear(cityData?.data.population, year);
+      const population = findClosestYear(cityData.population, year);
       if (!population) {
         console.error("Failed to find population data for city");
         return;
@@ -195,7 +221,7 @@ function SetupStep({
 
   useEffect(() => {
     if (regionData && year) {
-      const population = findClosestYear(regionData.data.population, year);
+      const population = findClosestYear(regionData.population, year);
       if (!population) {
         console.error("Failed to find population data for region");
         return;
@@ -207,7 +233,7 @@ function SetupStep({
 
   useEffect(() => {
     if (countryData && year) {
-      const population = findClosestYear(countryData.data.population, year);
+      const population = findClosestYear(countryData.population, year);
       if (!population) {
         console.error("Failed to find population data for region");
         return;
@@ -667,11 +693,11 @@ export default function OnboardingSetup({
   const [addInventory] = useAddInventoryMutation();
   const [setUserInfo] = useSetUserInfoMutation();
 
-  const [data, setData] = useState<{
-    name: string;
-    locode: string;
-    year: number;
-  }>({ name: "", locode: "", year: -1 });
+  const [data, setData] = useState<OnboardingData>({
+    name: "",
+    locode: "",
+    year: -1,
+  });
   const [ocCityData, setOcCityData] = useState<OCCityAttributes>();
   const [isConfirming, setConfirming] = useState(false);
 
@@ -753,17 +779,18 @@ export default function OnboardingSetup({
   const onSubmit: SubmitHandler<Inputs> = async (newData) => {
     const year = Number(newData.year);
 
-    if (!newData.city || !ocCityData?.actor_id || year < 0 || !data.locode) {
-      // TODO show user toast? These should be caught by validation logic
-      return;
-    }
-
     setData({
       name: newData.city,
       locode: data.locode!,
       year,
     });
 
+    if (!newData.city || !ocCityData?.actor_id || year < 0 || !data.locode) {
+      // TODO show user toast? These should normally be caught by validation logic
+      console.error("Missing data, can't go to next step!");
+      return;
+    }
+
     goToNext();
   };
 
@@ -789,7 +816,9 @@ export default function OnboardingSetup({
               setValue={setValue}
               register={register}
               watch={watch}
+              ocCityData={ocCityData}
               setOcCityData={setOcCityData}
+              setData={setData}
               t={t}
             />
           )}
diff --git a/app/src/services/api.ts b/app/src/services/api.ts
index 01225fa44..2add72727 100644
--- a/app/src/services/api.ts
+++ b/app/src/services/api.ts
@@ -397,6 +397,9 @@ export const openclimateAPI = createApi({
     }),
     getOCCityData: builder.query<any, string>({
       query: (locode) => `/api/v1/actor/${locode}`,
+      transformResponse: (response: any) => {
+        return response.data;
+      },
     }),
   }),
 });