From 28cc6ad64e5da2bc7480a96d448a38a5b799469b Mon Sep 17 00:00:00 2001
From: devcshort <13677134+devcshort@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:05:07 -0700
Subject: [PATCH] fix: Radius now displays properly on home page

---
 src/pages/index.tsx                       | 23 +++++++++++++++++++--
 src/shared/components/jotai-hydration.tsx | 25 +++++++++++++++--------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 99f57a9..1ef5ba6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,33 @@
-import { GetStaticPropsContext } from 'next';
+import { GetServerSidePropsContext } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { HomeView } from '../features/home/views/home-view';
 import {
   serverSideAppConfig,
   serverSideFlags,
 } from '@/shared/lib/server-utils';
+import { parseCookies } from 'nookies';
+import {
+  USER_PREF_COORDS,
+  USER_PREF_DISTANCE,
+  USER_PREF_LOCATION,
+} from '@/shared/lib/constants';
+import { shake } from 'radash';
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+  const cookies = parseCookies(ctx);
+  const coords = cookies[USER_PREF_COORDS];
+  const location = cookies[USER_PREF_LOCATION];
+  const distance = cookies[USER_PREF_DISTANCE];
+
+  const pageProps = shake({
+    coords,
+    location,
+    distance,
+  });
 
-export async function getStaticProps(ctx: GetStaticPropsContext) {
   return {
     props: {
+      ...pageProps,
       ...(await serverSideAppConfig()),
       ...(await serverSideFlags()),
       ...(await serverSideTranslations(ctx.locale as string, [
diff --git a/src/shared/components/jotai-hydration.tsx b/src/shared/components/jotai-hydration.tsx
index 4c72ee8..703b202 100644
--- a/src/shared/components/jotai-hydration.tsx
+++ b/src/shared/components/jotai-hydration.tsx
@@ -19,6 +19,21 @@ import {
   favoriteListWithFavoritesAtom,
 } from '../store/favorites';
 
+function getCoordinates(pageProps, cookies) {
+  if (pageProps.coords) {
+    return decodeURIComponent(pageProps.coords)
+      .split(',')
+      .map((number) => parseFloat(number))
+      .filter((number) => !isNaN(number));
+  } else if (cookies[USER_PREF_COORDS]) {
+    return cookies[USER_PREF_COORDS].split(',')
+      .map((number) => parseFloat(number))
+      .filter((number) => !isNaN(number));
+  }
+
+  return [];
+}
+
 // This component handles the hydration of Jotai state as well as keeping it in sync with re-renders/fetches of new data
 // This MUST be a child of the Jotai Provider component or hydration will not work
 export function JotaiHydration({ pageProps }) {
@@ -54,15 +69,7 @@ export function JotaiHydration({ pageProps }) {
           pageProps?.location ?? cookies?.[USER_PREF_LOCATION] ?? '',
         searchLocationValidationError: '',
         userLocation: pageProps?.location,
-        userCoordinates:
-          decodeURIComponent(pageProps?.coords)
-            ?.split(',')
-            ?.map((number) => parseFloat(number))
-            ?.filter((number) => !isNaN(number)) ??
-          cookies?.[USER_PREF_COORDS]?.split(',')
-            ?.map((number) => parseFloat(number))
-            ?.filter((number) => !isNaN(number)) ??
-          [],
+        userCoordinates: getCoordinates(pageProps, cookies),
       },
     ],
   ] as const);