Fix flicker

midday-ai · Dec 21, 2023 · 893db02 · 893db02
1 parent a8d2431
commit 893db02
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 30 deletions.
diff --git a/apps/dashboard/next.config.mjs b/apps/dashboard/next.config.mjs
@@ -3,9 +3,6 @@ import "./src/env.mjs";
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
-  experimental: {
-    ppr: true,
-  },
   images: {
     remotePatterns: [
       {

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -30,7 +30,7 @@
     "fast-csv": "^4.3.6",
     "framer-motion": "^10.16.16",
     "ms": "^2.1.3",
-    "next": "14.0.5-canary.17",
+    "next": "14.0.4",
     "next-international": "^1.1.4",
     "next-safe-action": "^5.2.3",
     "next-themes": "^0.2.1",

diff --git a/apps/dashboard/src/app/[locale]/page.tsx b/apps/dashboard/src/app/[locale]/page.tsx
@@ -0,0 +1,63 @@
+import { Chart } from "@/components/charts/chart";
+import { ChartSelectors } from "@/components/charts/chart-selectors";
+import { Spending } from "@/components/charts/spending";
+import { Transactions } from "@/components/charts/transactions";
+import { OverviewModal } from "@/components/modals/overview-modal";
+import { Cookies } from "@/utils/constants";
+import {
+  getBankConnectionsByTeamId,
+  getUser,
+} from "@midday/supabase/cached-queries";
+import { cn } from "@midday/ui/utils";
+import { startOfMonth, startOfYear } from "date-fns";
+import { Metadata } from "next";
+import { cookies } from "next/headers";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Overview | Midday",
+};
+
+const defaultValue = {
+  from: startOfYear(startOfMonth(new Date())).toISOString(),
+  to: new Date().toISOString(),
+  period: "monthly",
+};
+
+export default async function Overview({ searchParams }) {
+  const { data: userData } = await getUser();
+  const { data } = await getBankConnectionsByTeamId();
+  const chartPeriod = cookies().has(Cookies.ChartPeriod)
+    ? JSON.parse(cookies().get(Cookies.ChartPeriod)?.value)
+    : {};
+
+  const value = {
+    ...chartPeriod,
+    ...(searchParams.from && { from: searchParams.from }),
+    ...(searchParams.to && { to: searchParams.to }),
+    period: searchParams.period,
+  };
+
+  const isOpen = Boolean(searchParams.step);
+  const empty = !data?.length && !isOpen;
+
+  return (
+    <>
+      <div className={cn(empty && "opacity-20 pointer-events-none")}>
+        <div className="h-[450px]">
+          <ChartSelectors value={value} defaultValue={defaultValue} />
+
+          <Suspense>
+            <Chart value={value} defaultValue={defaultValue} disabled={empty} />
+          </Suspense>
+        </div>
+
+        <div className="flex space-x-8 mt-14">
+          <Spending disabled={empty} />
+          <Transactions disabled={empty} />
+        </div>
+      </div>
+      {!isOpen && empty && <OverviewModal />}
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/[locale]/providers.tsx b/apps/dashboard/src/app/[locale]/providers.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ThemeProvider } from "@/components/theme-provider";
 import { I18nProviderClient } from "@/locales/client";
 import { TriggerProvider } from "@trigger.dev/react";
 import { ReactNode } from "react";
@@ -16,7 +17,14 @@ export function Providers({ locale, children }: ProviderProps) {
         publicApiKey={process.env.NEXT_PUBLIC_TRIGGER_API_KEY!}
         apiUrl={process.env.NEXT_PUBLIC_TRIGGER_API_URL}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </TriggerProvider>
     </I18nProviderClient>
   );

diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { ThemeProvider } from "@/components/theme-provider";
 import "@/styles/globals.css";
 import "@midday/ui/globals.css";
 import { Toaster } from "@midday/ui/toaster";
@@ -39,16 +38,9 @@ export default function Layout({
   return (
     <html lang={params.locale} suppressHydrationWarning>
       <body className={cn(fontSans.variable, "whitespace-pre-line")}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-          <SpeedInsights />
-          <Toaster />
-        </ThemeProvider>
+        {children}
+        <SpeedInsights />
+        <Toaster />
       </body>
     </html>
   );

diff --git a/apps/website/next.config.mjs b/apps/website/next.config.mjs
@@ -2,9 +2,6 @@
 const config = {
   reactStrictMode: true,
   transpilePackages: ["@midday/ui", "@midday/tailwind"],
-  experimental: {
-    ppr: true,
-  },
   eslint: {
     ignoreDuringBuilds: true,
   },

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -15,7 +15,7 @@
     "@midday/location": "workspace:*",
     "@midday/ui": "workspace:*",
     "@vercel/analytics": "^1.1.1",
-    "next": "14.0.5-canary.17",
+    "next": "14.0.4",
     "next-international": "^1.1.4",
     "next-themes": "^0.2.1",
     "react": "18.2.0",

diff --git a/apps/website/src/app/[locale]/provider.tsx b/apps/website/src/app/[locale]/provider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ThemeProvider } from "@/components/theme-provider";
 import { I18nProviderClient } from "@/locales/client";
 import { ReactNode } from "react";
 
@@ -9,5 +10,16 @@ type ProviderProps = {
 };
 
 export function Provider({ locale, children }: ProviderProps) {
-  return <I18nProviderClient locale={locale}>{children}</I18nProviderClient>;
+  return (
+    <I18nProviderClient locale={locale}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        {children}
+      </ThemeProvider>
+    </I18nProviderClient>
+  );
 }
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { ThemeProvider } from "@/components/theme-provider";
 import "@/styles/globals.css";
 import "@midday/ui/globals.css";
 import { cn } from "@midday/ui/utils";
@@ -38,14 +37,7 @@ export default function Layout({
   return (
     <html lang={locale} suppressHydrationWarning>
       <body className={cn(fontSans.variable, "whitespace-pre-line")}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-        </ThemeProvider>
+        {children}
         <Analytics />
       </body>
     </html>

diff --git a/bun.lockb b/bun.lockb