fix: view checks deserialization (#661)

lunary-ai · Nov 16, 2024 · 4c44eaf · 4c44eaf
1 parent f2024df
commit 4c44eaf
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontend/components/checks/ChecksInputs.tsx b/packages/frontend/components/checks/ChecksInputs.tsx
@@ -73,8 +73,6 @@ const CheckInputs = {
       }
     }, []);
 
-    console.log(value, defaultValue);
-
     return (
       <DateTimePicker
         minDate={minDate}

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -30,7 +30,7 @@
     "jsonrepair": "^3.5.1",
     "next": "^14.2.8",
     "next-seo": "^6.6.0",
-    "nuqs": "^1.19.1",
+    "nuqs": "^2.2.1",
     "posthog-js": "^1.160.3",
     "random-word-slugs": "^0.1.7",
     "react": "^18.3.1",

diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
@@ -4,6 +4,7 @@ import "@mantine/notifications/styles.css";
 import "@mantine/dates/styles.css";
 import "../styles/globals.css";
 
+import { NuqsAdapter } from "nuqs/adapters/next/pages";
 import { MantineProvider } from "@mantine/core";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -36,36 +37,43 @@ export default function App({ Component, pageProps }: AppProps) {
         <link href="https://lunary.ai/logo.png" rel="icon" type="image/png" />
       </Head>
       <ErrorBoundary>
-        <GoogleOAuthProvider
-          clientId={
-            (process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string) ||
-            "OAUTH DISABLED"
-          }
-        >
-          <AuthProvider>
-            <SWRConfig
-              value={{
-                fetcher: fetcher.get,
-                dedupingInterval: 10000,
-              }}
-            >
-              <DefaultSeo
-                title="Dashboard"
-                titleTemplate="%s | Lunary"
-                defaultTitle="Dashboard | Lunary"
-              />
-              <MantineProvider theme={themeOverride} defaultColorScheme="auto">
-                <AnalyticsWrapper>
-                  <ProjectContext.Provider value={{ projectId, setProjectId }}>
-                    <Layout>
-                      <Component {...pageProps} />
-                    </Layout>
-                  </ProjectContext.Provider>
-                </AnalyticsWrapper>
-              </MantineProvider>
-            </SWRConfig>
-          </AuthProvider>
-        </GoogleOAuthProvider>
+        <NuqsAdapter>
+          <GoogleOAuthProvider
+            clientId={
+              (process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string) ||
+              "OAUTH DISABLED"
+            }
+          >
+            <AuthProvider>
+              <SWRConfig
+                value={{
+                  fetcher: fetcher.get,
+                  dedupingInterval: 10000,
+                }}
+              >
+                <DefaultSeo
+                  title="Dashboard"
+                  titleTemplate="%s | Lunary"
+                  defaultTitle="Dashboard | Lunary"
+                />
+                <MantineProvider
+                  theme={themeOverride}
+                  defaultColorScheme="auto"
+                >
+                  <AnalyticsWrapper>
+                    <ProjectContext.Provider
+                      value={{ projectId, setProjectId }}
+                    >
+                      <Layout>
+                        <Component {...pageProps} />
+                      </Layout>
+                    </ProjectContext.Provider>
+                  </AnalyticsWrapper>
+                </MantineProvider>
+              </SWRConfig>
+            </AuthProvider>
+          </GoogleOAuthProvider>
+        </NuqsAdapter>
       </ErrorBoundary>
     </>
   );

diff --git a/packages/frontend/pages/logs/index.tsx b/packages/frontend/pages/logs/index.tsx
@@ -1,5 +1,6 @@
 import DataTable from "@/components/blocks/DataTable";
 import {
+  createParser,
   parseAsBoolean,
   parseAsString,
   parseAsStringEnum,
@@ -172,6 +173,11 @@ function editCheck(filters, id, params) {
 
 const DEFAULT_CHECK = ["AND"];
 
+const parser = createParser({
+  parse: deserializeLogic,
+  serialize: serializeLogic,
+});
+
 export default function Logs() {
   const router = useRouter();
   const { user } = useUser();
@@ -208,12 +214,11 @@ export default function Logs() {
     ),
   );
 
-  const [checks, setChecks] = useQueryState("filters", {
-    parse: (value) => deserializeLogic(value, true),
-    serialize: serializeLogic,
-    defaultValue: DEFAULT_CHECK,
-    clearOnDefault: true,
-  });
+  const [checks, setChecks] = useQueryState(
+    "filters",
+    parser.withDefault(DEFAULT_CHECK).withOptions({ clearOnDefault: true }),
+  );
+  console.log(checks);
 
   const { sortParams } = useSortParams();
 

diff --git a/packages/frontend/utils/analytics.ts b/packages/frontend/utils/analytics.ts
@@ -23,22 +23,22 @@ const w = {
   },
 };
 
-const handleRouteChange = async () => {
+async function handleRouteChange() {
   posthog?.capture("$pageview");
-};
+}
 
-const track = (event: string, data?: any) => {
+function track(event: string, data?: any) {
   try {
     posthog?.capture(event, data);
 
     w?.crisp?.push(["set", "session:event", [[[event, data]]]]);
   } catch (e) {
     console.error(e);
   }
-};
+}
 
 const alreadyTracked = new Set<string>();
-const trackOnce = (event: string, data?: any) => {
+function trackOnce(event: string, data?: any) {
   // Prevent sending too many events
   if (alreadyTracked.has(event)) return;
 
@@ -47,9 +47,9 @@ const trackOnce = (event: string, data?: any) => {
   } catch (e) {
     console.error(e);
   }
-};
+}
 
-const identify = (userId: string, traits: any) => {
+function identify(userId: string, traits: any) {
   try {
     posthog?.identify(userId, traits);
 
@@ -64,7 +64,7 @@ const identify = (userId: string, traits: any) => {
     if (traits.email) w?.crisp?.push(["set", "user:email", traits.email]);
     if (traits.name) w?.crisp?.push(["set", "user:nickname", traits.name]);
 
-    w?.crisp.push([
+    w?.crisp?.push([
       "set",
       "session:data",
       [
@@ -82,7 +82,7 @@ const identify = (userId: string, traits: any) => {
   } catch (e) {
     console.error(e);
   }
-};
+}
 
 const analytics = {
   track,

diff --git a/packages/frontend/utils/dataHooks/views.ts b/packages/frontend/utils/dataHooks/views.ts
@@ -1,4 +1,4 @@
-import { hasAccess } from "shared";
+import { deserializeLogic, hasAccess, serializeLogic } from "shared";
 import { useProjectMutation, useProjectSWR, useUser } from ".";
 import { fetcher } from "../fetcher";
 
@@ -33,6 +33,10 @@ export function useView(id: string | null, initialData?: any) {
     fallbackData: initialData,
   });
 
+  if (view) {
+    view.data = deserializeLogic(serializeLogic(view?.data || [])); // because the params values are serialized in the server json response, we serialize everything first, then deserialize it
+  }
+
   const { trigger: update } = useProjectMutation(
     id && `/views/${id}`,
     fetcher.patch,

diff --git a/packages/frontend/utils/datatable.tsx b/packages/frontend/utils/datatable.tsx
@@ -22,7 +22,7 @@ export function timeColumn(timeColumn, label = "Time") {
       new Date(b.getValue(timeColumn)).getTime(),
     cell: (info) => {
       const isToday =
-        new Date(info.getValue()).toDateString() === new Date().toDateString();
+        new Date(info.getValue())?.toDateString() === new Date().toDateString();
       if (isToday) {
         return new Date(info.getValue()).toLocaleTimeString(
           typeof window !== "undefined" ? window.navigator.language : "en-US",