fix: set initial search query for ssr on page load

src/page-modules/departures/layout.tsx

@@ -1,39 +1,46 @@
-import type { WithGlobalData } from "@atb/layouts/global-data";
-import type { GeocoderFeature } from "@atb/page-modules/departures";
-import { PageText, useTranslation } from "@atb/translations";
-import { FormEventHandler, PropsWithChildren, useState } from "react";
-import Search from "@atb/components/search";
-import { Button } from "@atb/components/button";
-import style from "./departures.module.css";
-import { useRouter } from "next/router";
+import type { WithGlobalData } from '@atb/layouts/global-data';
+import type { GeocoderFeature } from '@atb/page-modules/departures';
+import { PageText, useTranslation } from '@atb/translations';
+import { FormEventHandler, PropsWithChildren, useState } from 'react';
+import Search from '@atb/components/search';
+import { Button } from '@atb/components/button';
+import style from './departures.module.css';
+import { useRouter } from 'next/router';
 import DepartureDateSelector, {
   DepartureDate,
   DepartureDateState,
 } from '@atb/components/departure-date-selector';
 
-export type DeparturesLayoutProps = PropsWithChildren<WithGlobalData<{}>>;
+export type DeparturesLayoutProps = PropsWithChildren<{
+  initialSelectedFeature?: GeocoderFeature;
+}>;
 
-function DeparturesLayout({ children }: DeparturesLayoutProps) {
+function DeparturesLayout({
+  children,
+  initialSelectedFeature,
+}: DeparturesLayoutProps) {
   const { t } = useTranslation();
   const router = useRouter();
 
-  const [selectedFeature, setSelectedFeature] = useState<GeocoderFeature>();
+  const [selectedFeature, setSelectedFeature] = useState<
+    GeocoderFeature | undefined
+  >(initialSelectedFeature);
   const [departureDate, setDepartureDate] = useState<DepartureDate>({
     type: DepartureDateState.Now,
   });
 
   const onSubmitHandler: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
-    if (selectedFeature?.layer == "venue") {
+    if (selectedFeature?.layer == 'venue') {
       router.push(`/departures/${selectedFeature.id}`);
-    } else if (selectedFeature?.layer == "address") {
+    } else if (selectedFeature?.layer == 'address') {
       const [lon, lat] = selectedFeature.geometry.coordinates;
       router.push({
-        href: "/departures",
+        href: '/departures',
         query: {
           lon,
-          lat
-        }
+          lat,
+        },
       });
     }
   };
@@ -50,6 +57,11 @@ function DeparturesLayout({ children }: DeparturesLayoutProps) {
             <Search
               label={t(PageText.Departures.search.input.from)}
               onChange={setSelectedFeature}
+              initialQuery={
+                !selectedFeature
+                  ? undefined
+                  : `${selectedFeature.name}, ${selectedFeature.locality}`
+              }
             />
           </div>
 
@@ -69,7 +81,7 @@ function DeparturesLayout({ children }: DeparturesLayoutProps) {
             className={style.searchButton}
             mode="interactive_0"
             disabled={!selectedFeature}
-            buttonProps={{ type: "submit" }}
+            buttonProps={{ type: 'submit' }}
           />
         </form>
       </div>

src/pages/departures/[[...id]].tsx

@@ -82,39 +82,49 @@ const DeparturesPage: NextPage<DeparturesPageProps> = (props) => {
 export default DeparturesPage;
 
 export const getServerSideProps = withGlobalData(
-  withDepartureClient<DeparturesContentProps, { id: string[] | undefined }>(
-    async function ({ client, params, query }) {
-      const id = params?.id?.[0];
-      const stopPlace = id ? await client.departures({ id }) : null;
-      if (id && stopPlace) {
-        const departures = await client.departures({ id });
-        return {
-          props: {
-            stopPlace: true,
-            departures,
-          },
-        };
-      } else if (query.lat && query.lon) {
-        const position = {
-          lat: parseFloat(query.lat.toString()),
-          lon: parseFloat(query.lon.toString()),
-        };
-        const nearestStopPlaces = await client.nearestStopPlaces(position);
+  withDepartureClient<
+    DeparturesLayoutProps & DeparturesContentProps,
+    { id: string[] | undefined }
+  >(async function ({ client, params, query }) {
+    const id = params?.id?.[0];
+    const stopPlace = id ? await client.stopPlace({ id }) : null;
+    if (id && stopPlace) {
+      const departures = await client.departures({ id });
+      // TODO find out how we can get this better...
+      // This won't give the correct result
+      const activeLocation = await client.reverse(
+        stopPlace.position.lat,
+        stopPlace.position.lon,
+      );
 
-        const activeLocation = await client.reverse(position.lat, position.lon);
+      return {
+        props: {
+          stopPlace: true,
+          initialSelectedFeature: activeLocation,
+          departures,
+        },
+      };
+    } else if (query.lat && query.lon) {
+      const position = {
+        lat: parseFloat(query.lat.toString()),
+        lon: parseFloat(query.lon.toString()),
+      };
+      const nearestStopPlaces = await client.nearestStopPlaces(position);
 
-        return {
-          props: {
-            address: true,
-            activeLocation,
-            nearestStopPlaces,
-          },
-        };
-      } else {
-        return {
-          props: { empty: true },
-        };
-      }
-    },
-  ),
+      const activeLocation = await client.reverse(position.lat, position.lon);
+
+      return {
+        props: {
+          address: true,
+          initialSelectedFeature: activeLocation,
+          activeLocation,
+          nearestStopPlaces,
+        },
+      };
+    } else {
+      return {
+        props: { empty: true },
+      };
+    }
+  }),
 );