Middleware matcher

plastic-labs · Sep 2, 2024 · 18a096b · 18a096b
1 parent 2698f81
commit 18a096b
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 115 deletions.
diff --git a/www/app/auth/page.tsx b/www/app/auth/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { createClient } from '@/utils/supabase/client'
-import { useEffect, useState } from "react";
+import { useEffect, useState, Suspense } from "react";
 import { redirect } from "next/navigation";
 
 import Image from "next/image";
@@ -23,19 +23,10 @@ export default function Auth() {
       }
     })
 
-    const { data: subscription } = supabase.auth.onAuthStateChange(async (event, session) => {
-      if (event != "INITIAL_SESSION") {
-        console.log(event)
-      }
-      if (event == "PASSWORD_RECOVERY") {
-        redirect("/auth/reset")
-      }
-
-    })
   }, [supabase])
 
   return (
-    <section className="bg-white">
+    <section className="bg-white" suppressHydrationWarning={true} >
       <div className="lg:grid lg:min-h-screen lg:grid-cols-12">
         <aside
           className="relative block h-16 lg:order-last lg:col-span-5 lg:h-full xl:col-span-6"
@@ -56,7 +47,6 @@ export default function Auth() {
               <span className="sr-only">Home</span>
               <Image src={icon} alt="banner" className="h-10 sm:h-10 w-auto rounded-full" />
             </a>
-
             <h1
               className="mt-6 text-2xl font-bold text-gray-900 sm:text-3xl md:text-4xl"
             >
@@ -66,15 +56,17 @@ export default function Auth() {
             <p className="mt-4 leading-relaxed text-gray-500">
               Your Aristotelian learning companion — here to help you follow your curiosity in whatever direction you like.
             </p>
-            {formType === 'LOGIN' && (
-              <SignIn stateSync={setFormType} handler={login} />
-            )}
-            {formType === 'SIGNUP' && (
-              <SignUp stateSync={setFormType} handler={signup} />
-            )}
-            {formType === 'FORGOT' && (
-              <Forgot stateSync={setFormType} />
-            )}
+              <div suppressHydrationWarning>
+                {formType === 'LOGIN' && (
+                  <SignIn stateSync={setFormType} handler={login} />
+                )}
+                {formType === 'SIGNUP' && (
+                  <SignUp stateSync={setFormType} handler={signup} />
+                )}
+                {formType === 'FORGOT' && (
+                  <Forgot stateSync={setFormType} />
+                )}
+              </div>
 
           </div>
         </main>

diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -2,10 +2,12 @@
 import Image from "next/image";
 import useSWR from "swr";
 
+import dynamic from "next/dynamic";
+
 import banner from "@/public/bloom2x1.svg";
 import darkBanner from "@/public/bloom2x1dark.svg";
 import MessageBox from "@/components/messagebox";
-import Thoughts from "@/components/thoughts";
+// import Thoughts from "@/components/thoughts";
 import Sidebar from "@/components/sidebar";
 import MarkdownWrapper from "@/components/markdownWrapper";
 import { DarkModeSwitch } from "react-toggle-dark-mode";
@@ -19,11 +21,12 @@ import { usePostHog } from "posthog-js/react";
 import { API } from "@/utils/api";
 import { createClient } from "@/utils/supabase/client";
 
+const Thoughts = dynamic(() => import("@/components/thoughts"));
+
 const URL = process.env.NEXT_PUBLIC_API_URL;
 
 export default function Home() {
   const [userId, setUserId] = useState<string>();
-  // const [session, setSession] = useState<Session | null>(null);
 
   const [isThoughtsOpen, setIsThoughtsOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);

diff --git a/www/components/auth/reset.tsx b/www/components/auth/reset.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect } from "react";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";

diff --git a/www/components/auth/signIn.tsx b/www/components/auth/signIn.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useState, useRef } from "react";
 import Swal from 'sweetalert2'
 

diff --git a/www/components/auth/signUp.tsx b/www/components/auth/signUp.tsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+'use client';
+import { useState, useRef } from "react";
 import { useRouter } from "next/navigation";
 
 import Swal from 'sweetalert2'
@@ -10,65 +11,58 @@ export default function SignUp(props: any) {
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const [opt, setOpt] = useState<boolean>(true)
   const [age, setAge] = useState<boolean>(false)
-  const router = useRouter();
-  // const supabase = createClientComponentClient()
-
-  // const handleSignUp = async (e: any) => {
-  //   e.preventDefault();
-  //   if (!age) {
-  //     await Swal.fire({
-  //       title: "Age Verification Required",
-  //       icon: 'error',
-  //       text: 'Please confirm that you are 13 years or older',
-  //     })
-  //     return
-  //   }
-  //   if (password !== passwordConfirmation) {
-  //     await Swal.fire({
-  //       title: "Passwords don't match",
-  //       icon: 'error',
-  //       text: 'Re-confirm you password and try again',
-  //     })
-  //     return
-  //   }
-  //   if (password.length < 6) {
-  //     await Swal.fire({
-  //       title: "Insufficient Password",
-  //       icon: 'error',
-  //       text: 'Make sure the password is atleast 6 characters long',
-  //     })
-  //     return
-  //   }
-  //   const { error } = await supabase.auth.signUp(
-  //     {
-  //       email,
-  //       password,
-  //       options: {
-  //         emailRedirectTo: `${location.origin}/`,
-  //         data: {
-  //           dataOptIn: opt,
-  //           ageVerification: age
-  //         }
-  //       }
-  //     });
-  //   if (error) {
-  //     Swal.fire({
-  //       title: "Something went wrong",
-  //       icon: "error",
-  //       text: "Please try again and make sure the password is atleast 6 characters long",
-  //     })
-  //     console.error(error);
-  //   } else {
-  //     Swal.fire({
-  //       title: "Success",
-  //       icon: "success",
-  //       text: "Please check your email for a verification link"
-  //     })
-  //   }
-  // };
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!formRef.current) return;
+    const formData = new FormData(formRef.current);
+    if (!age) {
+      await Swal.fire({
+        title: "Age Verification Required",
+        icon: 'error',
+        text: 'Please confirm that you are 13 years or older',
+      })
+      return
+    }
+    console.log(password, passwordConfirmation)
+    if (password !== passwordConfirmation) {
+      await Swal.fire({
+        title: "Passwords don't match",
+        icon: 'error',
+        text: 'Re-confirm you password and try again',
+      })
+      return
+    }
+    if (password.length < 6) {
+      await Swal.fire({
+        title: "Insufficient Password",
+        icon: 'error',
+        text: 'Make sure the password is atleast 6 characters long',
+      })
+      return
+    }
+
+    const error = await handler(formData);
+    if (error) {
+      Swal.fire({
+        title: "Something went wrong",
+        icon: "error",
+        text: "Please try again and make sure the password is atleast 6 characters long",
+      })
+      console.error(error);
+    } else {
+      Swal.fire({
+        title: "Success",
+        icon: "success",
+        text: "Please check your email for a verification link"
+      })
+    }
+  }
+
 
   return (
-    <form action="#" className="mt-8 grid grid-cols-6 gap-6">
+    <form action="#" ref={formRef} onSubmit={handleSignUp} className="mt-8 grid grid-cols-6 gap-6">
 
       <div className="col-span-6">
         <label htmlFor="Email" className="block text-sm font-medium text-gray-700">
@@ -169,7 +163,6 @@ export default function SignUp(props: any) {
       <div className="col-span-6 sm:flex sm:items-center sm:gap-4">
         <button
           className="inline-block shrink-0 rounded-md border border-neon-green bg-neon-green px-12 py-3 text-sm font-medium transition hover:bg-transparent hover:text-blue-600 focus:outline-none focus:ring active:text-blue-500"
-          formAction={handler}
         >
           Create an account
         </button>

diff --git a/www/middleware.ts b/www/middleware.ts
@@ -15,5 +15,6 @@ export const config = {
      * Feel free to modify this pattern to include more paths.
      */
     '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+    '/auth/reset',
   ],
 }
diff --git a/www/next.config.mjs b/www/next.config.mjs
@@ -1,6 +1,7 @@
+// import MillionLint from '@million/lint';
 import { withSentryConfig } from "@sentry/nextjs";
 const nextConfig = {
-  output: "standalone"
+  // output: "standalone"
   //  rewrites: async () => {
   //    return [
   //      {
@@ -13,64 +14,38 @@ const nextConfig = {
   //    ];
   //  },
 };
-export default withSentryConfig(withSentryConfig(nextConfig, {
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options
-
-  // Suppresses source map uploading logs during build
-  silent: true,
-  org: "plastic-labs",
-  project: "tutor-gpt-web"
-}, {
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
-  widenClientFileUpload: true,
-  // Transpiles SDK to be compatible with IE11 (increases bundle size)
-  transpileClientSDK: true,
-  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-  tunnelRoute: "/monitoring",
-  // Hides source maps from generated client bundles
-  hideSourceMaps: true,
-  // Automatically tree-shake Sentry logger statements to reduce bundle size
-  disableLogger: true
-}), {
+// export default MillionLint.next({
+//   rsc: true
+// })(
+export default withSentryConfig(nextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
   org: "plastic-labs",
   project: "tutor-gpt-web",
-
   // Only print logs for uploading source maps in CI
   silent: !process.env.CI,
-
   // For all available options, see:
   // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
   // Upload a larger set of source maps for prettier stack traces (increases build time)
   widenClientFileUpload: true,
-
   // Automatically annotate React components to show their full name in breadcrumbs and session replay
   reactComponentAnnotation: {
-    enabled: true,
+    enabled: true
   },
-
   // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
   // This can increase your server load as well as your hosting bill.
   // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
   // side errors will fail.
   tunnelRoute: "/monitoring",
-
   // Hides source maps from generated client bundles
   hideSourceMaps: true,
-
   // Automatically tree-shake Sentry logger statements to reduce bundle size
   disableLogger: true,
-
   // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
   // See the following for more information:
   // https://docs.sentry.io/product/crons/
   // https://vercel.com/docs/cron-jobs
-  automaticVercelMonitors: true,
+  automaticVercelMonitors: true
 });