Bug fix: Avoid homepage popup and state loss of variables due to relo…

…ad (#42)

* Store login information

* Save selectedCities list in local storage to avoid repeated calls

* REwrite the code to handle the bug in a better way

* Prettier fix

* Avoid exhaustive deps

* Memorise the ref to update selected city list in dashboard

* set selected city default state in better way using Recoil selector

* Avoid throwing error in selector

---------

Co-authored-by: sbafna1 <sbafna@ip-10-170-33-212>

web/src/App.tsx

@@ -18,7 +18,7 @@ import { Footer } from "@/components/Footer";
 import { Nav } from "@/components/navBar/Nav";
 import { AnalyticsDashboard } from "@/pages/Analytics";
 import { Configure } from "@/pages/Configure";
-import { NotificationsMap } from "@/pages/Dashboard";
+import { Dashboard } from "@/pages/Dashboard";
 import { HomePage } from "@/pages/HomePage";
 import { useConnectionState } from "@/view/hooks/hooks";
 
@@ -91,9 +91,9 @@ const PrivateRoute: React.FC<{ children: React.ReactElement }> = ({
 }) => {
   // Private routes will ensure user is connected to singlestore before using the route.
   // Will redirect to connection page in case user in not connected.
-  const { connected } = useConnectionState();
+  const { connected, isValidatingConnection } = useConnectionState();
 
-  if (!connected) {
+  if (!connected && !isValidatingConnection) {
     return <Navigate to="/" />;
   }
 
@@ -111,11 +111,18 @@ const Analytics = ({ children }: { children: React.ReactNode }) => {
 };
 
 const LayoutContainer = ({ children }: { children: React.ReactNode }) => {
+  const { connected, isValidatingConnection } = useConnectionState();
+  let childComponent = <Loader size="large" centered />;
+
+  if (connected || !isValidatingConnection) {
+    childComponent = <>{children}</>;
+  }
+
   return (
     <>
       <Nav />
       <Box flex="1" paddingTop="3px">
-        {children}
+        {childComponent}
       </Box>
       <Footer />
     </>
@@ -130,7 +137,7 @@ const RoutesBlock = () => {
         path="/dashboard"
         element={
           <PrivateRoute>
-            <NotificationsMap />
+            <Dashboard />
           </PrivateRoute>
         }
       />

web/src/data/constants.ts

@@ -2,7 +2,7 @@ import { City } from "@/data/queries";
 
 // The selectableCities variable hardcodes cities details that user can select.
 // Make sure the values here matches the values stored in worldcities database in martech.
-export const selectableCitiesData: Array<City> = [
+export const SELECTABLE_CITIES_DATA: Array<City> = [
   {
     id: 14,
     name: "Dubai",
@@ -12,7 +12,7 @@ export const selectableCitiesData: Array<City> = [
   },
   {
     id: 120658,
-    name: "New York",
+    name: "New York City",
     centerLat: 40.71427003,
     centerLon: -74.00597003,
     diameter: 0.4,

web/src/data/offers.ts

@@ -17,7 +17,7 @@ import VENDORS from "@/static-data/vendors.json";
 export const DEFAULT_CITY = {
   id: 120658,
   name: "New York City",
-  lonlat: <[number, number]>[-73.993562, 40.727063],
+  lonlat: <[number, number]>[-74.00597003, 40.71427003],
   diameter: 0.04,
 };
 

web/src/data/recoil.ts

@@ -5,7 +5,7 @@ import { trackAnalyticsEvent } from "@/analytics";
 import { ConnectionConfig } from "@/data/client";
 
 import { defaultScaleFactor, ScaleFactor, ScaleFactors } from "../scalefactors";
-import { City } from "./queries";
+import { City, getCities } from "./queries";
 
 type LocalStorageEffectConfig<T> = {
   encode: (v: T) => string;
@@ -58,12 +58,26 @@ export const userSessionID = atom({
 export const selectedCity = atom({
   key: "selectedCity",
   default: -1,
-  effects: [],
+});
+
+export const defaultSelectedCities = selector<Array<City>>({
+  key: "defaultSelectedCities",
+  get: async ({get}) => {
+    const config = get(connectionConfig);
+    let selectedCities: Array<City> = [];
+    try {
+      selectedCities = await getCities(config);
+    } catch (error) {
+      selectedCities = [];
+      console.log('Failed to fetch selected cities details from the Database.');
+    }
+    return selectedCities;
+  }
 });
 
 export const selectedCities = atom<Array<City>>({
   key: "selectedCities",
-  default: [],
+  default: defaultSelectedCities,
 });
 
 export const isUpdatingCities = atom({

web/src/pages/Dashboard.tsx

@@ -21,7 +21,7 @@ import { IngestChart, useIngestChartData } from "@/components/IngestChart";
 import { PixiMap } from "@/components/PixiMap";
 import { SetupDatabaseButton } from "@/components/SetupDatabaseButton";
 import { Stats } from "@/components/Stats";
-import { selectableCitiesData } from "@/data/constants";
+import { SELECTABLE_CITIES_DATA } from "@/data/constants";
 import { useUpdateCityList } from "@/data/models/useUpdateCityList";
 import { City } from "@/data/queries";
 import {
@@ -94,7 +94,7 @@ const SelectCityCheckbox = (props: {
   const getNewSelectedCityAfterDeletion = (city: City): number => {
     const cityIndex = selectedCities.findIndex((c) => c.id === city.id);
     if (cityIndex === 0 && selectedCities.length > 1) {
-      return selectableCitiesData[1].id;
+      return SELECTABLE_CITIES_DATA[1].id;
     }
     return -1;
   };
@@ -177,12 +177,12 @@ const StatsWrapper = () => {
     React.useState(selectedCities);
 
   React.useEffect(() => {
-    const selectableCityIds = selectableCitiesData.map((c) => c.id);
+    const selectableCityIds = SELECTABLE_CITIES_DATA.map((c) => c.id);
     const unknownSelectedCities = selectedCities.filter(
       (c) => !selectableCityIds.includes(c.id)
     );
     setTotalSelectableCities([
-      ...selectableCitiesData,
+      ...SELECTABLE_CITIES_DATA,
       ...unknownSelectedCities,
     ]);
     if (lastSelectedCityId === -1 && selectedCities.length > 0) {
@@ -220,7 +220,7 @@ const StatsWrapper = () => {
   );
 };
 
-export const NotificationsMap = () => {
+export const Dashboard = () => {
   const { connected, initialized } = useConnectionState();
   const enabled = useRecoilValue(simulatorEnabled);
   useSimulationMonitor(enabled && connected && initialized);

web/src/view/hooks/hooks.ts

@@ -47,7 +47,6 @@ export const useConnectionState = () => {
   const portalConfig = useRecoilValue(portalConnectionConfig);
 
   let connectionType;
-
   if (portalConfig) {
     connectionType = "portal";
   } else if (connected.data) {
@@ -56,6 +55,7 @@ export const useConnectionState = () => {
 
   return {
     connected: !!connected.data,
+    isValidatingConnection: connected.isValidating,
     initialized:
       !!connected.data && Object.values(schemaObjs.data || []).every(Boolean),
     reset: () => {