Removed ring focus from toasts container and

simplified some error message handling on the account page

Author: chriscarrollsmith

app/account/page.tsx

@@ -5,6 +5,7 @@ import {
   getSubscription,
   createClient
 } from '@/utils/supabase/server';
+import { getURL } from '@/utils/helpers';
 import Button from '@/components/ui/Button';
 import { cookies } from 'next/headers';
 import Link from 'next/link';
@@ -54,7 +55,7 @@ export default async function Account() {
           )}&error_description=${encodeURI('Your name could not be updated.')}`
         );
       }
-      redirect(
+        redirect(
         `/account?status=${encodeURI('Success!')}&status_description=${encodeURI(
           'Your name has been updated.'
         )}`
@@ -71,7 +72,7 @@ export default async function Account() {
       { email: newEmail },
       {
         emailRedirectTo:
-          process.env.NEXT_PUBLIC_SITE_URL +
+          getURL() +
           `/account?status=${encodeURI(
             'Success!'
           )}&status_description=${encodeURI(
@@ -82,21 +83,10 @@ export default async function Account() {
 
     if (error) {
       console.log(error);
-      console.log(error.message);
-      if (
-        error.message ===
-        'A user with this email address has already been registered'
-      ) {
-        return redirect(
-          `/account?error=${encodeURI('Oops!')}&error_description=${encodeURI(
-            'It looks like that email is already in use. Please try another one.'
-          )}`
-        );
-      }
-      redirect(
-        `/account?error=${encodeURI(
-          'Hmm... Something went wrong.'
-        )}&error_description=${encodeURI('Your email could not be updated.')}`
+      return redirect(
+        `/account?error=${encodeURI('Oops!')}&error_description=${encodeURI(
+          error.message
+        )}`
       );
     }
     redirect(

app/layout.tsx

@@ -1,7 +1,7 @@
 import SupabaseProvider from './supabase-provider';
 import Footer from '@/components/ui/Footer';
 import Navbar from '@/components/ui/Navbar';
-import { Toaster } from '@/components/ui/toaster';
+import { Toaster } from '@/components/ui/Toasts/toaster';
 import { PropsWithChildren } from 'react';
 import 'styles/main.css';
 

components/ui/Toasts/toast.tsx

@@ -43,6 +43,7 @@ const Toast = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
     VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
+  
   return (
     <ToastPrimitives.Root
       ref={ref}

components/ui/Toasts/toaster.tsx

@@ -20,18 +20,19 @@ export function Toaster() {
 
   useEffect(() => {
     const status = searchParams.get('status');
+    const status_description = searchParams.get('status_description');
     const error = searchParams.get('error');
-    const message = searchParams.get('message');
+    const error_description = searchParams.get('error_description');
     if (error || status) {
       toast({
         title: error
           ? error ?? 'Hmm... Something went wrong.'
           : status ?? 'Alright!',
-        description: message,
+        description: error ? error_description : status_description,
         variant: error ? 'destructive' : undefined
       });
       // Clear the search params so that the toast doesn't show up again on refresh
-      router.replace(pathname, { replace: true, scroll: false });
+      router.replace(pathname, { scroll: false });
     }
   }, [searchParams]);
 

styles/main.css

@@ -8,7 +8,7 @@
   box-sizing: inherit;
 }
 
-*:focus {
+*:focus:not(ol) {
   @apply outline-none ring-2 ring-pink-500 ring-opacity-50;
 }
 
@@ -49,4 +49,4 @@ a {
 
 .height-screen-helper {
   height: calc(100vh - 80px);
-}
+}