fix: error banner on web app

The-Commit-Company · Apr 12, 2024 · c64635f · c64635f
1 parent cdfd65d
commit c64635f
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 85 deletions.
diff --git a/mobile/src/pages/auth/LoginWithEmail.tsx b/mobile/src/pages/auth/LoginWithEmail.tsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
 import { useFrappePostCall } from "frappe-react-sdk";
-import { IonSpinner } from '@ionic/react'
-import { SuccessCallout, CalloutObject, ErrorCallout } from '@/components/common/Callouts'
+import { SuccessCallout, CalloutObject } from '@/components/common/Callouts'
 import { useForm } from 'react-hook-form'
 import { LoginInputs } from "@/types/Auth/Login";
 import { ActiveScreenProps } from "@/components/layout/AuthContainer";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { isEmailValid } from "@/utils/validations/validations";
-import { Button, Link } from "@radix-ui/themes";
+import { Button } from "@radix-ui/themes";
+import { ErrorBanner } from "@/components/layout";
 
 
 export const LoginWithEmail = (props: ActiveScreenProps) => {
@@ -32,7 +32,7 @@ export const LoginWithEmail = (props: ActiveScreenProps) => {
                     state: true,
                     message: "Login Link sent on Email",
                 });
-            }).catch((err)=>{
+            }).catch((err) => {
                 setCallout(null)
             })
     }
@@ -42,7 +42,7 @@ export const LoginWithEmail = (props: ActiveScreenProps) => {
 
 
             <div className="flex flex-col gap-y-6">
-                {error && <ErrorCallout message={error.message} />}
+                {error && <ErrorBanner error={error} />}
                 {callout && <SuccessCallout message={callout.message} />}
                 <div>
                     <Form {...form}>

diff --git a/raven-app/src/components/common/Callouts/ErrorCallouts.tsx b/raven-app/src/components/common/Callouts/ErrorCallouts.tsx
@@ -3,10 +3,10 @@ import { FiAlertTriangle } from "react-icons/fi"
 import { CustomCallout } from "./CustomCallout"
 
 
-export const ErrorCallout = ({ children,...props }: PropsWithChildren<{message?: string}>) => {
+export const ErrorCallout = ({ children, ...props }: PropsWithChildren<{ message?: string }>) => {
     return (<CustomCallout
-            rootProps={{color: "red"}}
-            iconChildren = {<FiAlertTriangle size="18"/>}
-            textChildren = { props.message }
-        />)
+        rootProps={{ color: "red" }}
+        iconChildren={<FiAlertTriangle size="18" />}
+        textChildren={children || props.message || "An error occurred"}
+    />)
 }
diff --git a/...n-app/src/components/feature/channel-member-details/add-members/AddChannelMemberModal.tsx b/...n-app/src/components/feature/channel-member-details/add-members/AddChannelMemberModal.tsx
@@ -39,7 +39,7 @@ export const AddChannelMembersModalContent = ({ channelID, channel_name, onClose
   const onSubmit = (data: AddChannelMemberForm) => {
     if (data.add_members && data.add_members.length > 0) {
       const promises = data.add_members.map(async (member) => {
-        return createDoc('Raven Channel Member', {
+        return createDoc('Raven Channel Mmber', {
           channel_id: channelID,
           user_id: member.name
         })

diff --git a/raven-app/src/pages/auth/Login.tsx b/raven-app/src/pages/auth/Login.tsx
@@ -8,8 +8,8 @@ import { Loader } from "@/components/common/Loader";
 import { ErrorText, Label } from "@/components/common/Form";
 import { LoginInputs, LoginContext } from "@/types/Auth/Login";
 import AuthContainer from "@/components/layout/AuthContainer";
-import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts";
 import { TwoFactor } from "@/pages/auth/TwoFactor";
+import { ErrorBanner } from "@/components/layout/AlertBanner";
 
 const SocialProviderIcons = {
     "github": <BiLogoGithub size="18" />,
@@ -73,7 +73,7 @@ export const Component = () => {
 
     return (
         <AuthContainer>
-            {error && <ErrorCallout message={error.message} />}
+            {error && <ErrorBanner error={error} />}
             {
                 isTwoFactorEnabled ? <TwoFactor loginWithTwoFAResponse={loginWithTwoFAResponse} setError={setError} setIsTwoFactorEnabled={setIsTwoFactorEnabled} /> :
                     <Box>
@@ -136,9 +136,9 @@ export const Component = () => {
                                             asChild
                                             size="2"
                                         >
-                                        <Link to="/forgot-password">
-                                            Forgot Password?
-                                        </Link>
+                                            <Link to="/forgot-password">
+                                                Forgot Password?
+                                            </Link>
                                         </LinkButton>
                                     </Flex>
                                 </Flex>

diff --git a/raven-app/src/pages/auth/LoginWithEmail.tsx b/raven-app/src/pages/auth/LoginWithEmail.tsx
@@ -17,6 +17,7 @@ import { SuccessCallout } from "@/components/common/Callouts/SuccessCallout";
 import { isEmailValid } from "@/utils/validations";
 import { LoginInputs } from "@/types/Auth/Login";
 import AuthContainer from "@/components/layout/AuthContainer";
+import { ErrorBanner } from "@/components/layout/AlertBanner";
 
 
 export const Component = () => {
@@ -32,22 +33,22 @@ export const Component = () => {
 
     async function sendEmailLink(values: LoginInputs) {
         return call({
-                email: values.email,
-            })
+            email: values.email,
+        })
             .then((result) => {
                 setCallout({
                     state: true,
                     message: "Login Link sent on Email",
                 });
-            }).catch((err)=>{
+            }).catch((err) => {
                 setCallout(null)
             })
     }
 
     return (
         <AuthContainer>
 
-            {error && <ErrorCallout message={error.message} />}
+            {error && <ErrorBanner error={error} />}
             {callout && <SuccessCallout message={callout.message} />}
 
             <Box>

diff --git a/raven-app/src/pages/auth/SignUp.tsx b/raven-app/src/pages/auth/SignUp.tsx
@@ -15,8 +15,8 @@ import { Loader } from "@/components/common/Loader";
 import { isEmailValid } from "@/utils/validations";
 import AuthContainer from '@/components/layout/AuthContainer';
 import { CalloutObject } from "@/components/common/Callouts/CustomCallout";
-import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts";
 import { SuccessCallout } from "@/components/common/Callouts/SuccessCallout";
+import { ErrorBanner } from "@/components/layout/AlertBanner";
 
 export type SignUpInputs = {
     email: string,
@@ -45,7 +45,7 @@ export const Component = () => {
             .then((result) => {
                 setCallout({
                     state: true,
-                    message: result?.message[0] ? result?.message[1]:result?.message[1]+". Please Try Login.",
+                    message: result?.message[0] ? result?.message[1] : result?.message[1] + ". Please Try Login.",
                 });
             })
             .catch((err) => {
@@ -55,73 +55,73 @@ export const Component = () => {
 
     return (
         <AuthContainer>
-            {error && <ErrorCallout message={error.message} />}
+            {error && <ErrorBanner error={error} />}
             {callout && <SuccessCallout message={callout.message} />}
-        <Box>
-            <form onSubmit={handleSubmit(signup)}>
-                <Flex direction="column" gap="4">
-                <Flex direction="column" gap="2">
-                    <Label htmlFor="full_name" isRequired>
-                            Full Name
-                        </Label>
-                        <TextField.Root>
-                            <TextField.Input
-                                {...register("full_name")}
-                                name="full_name"
-                                type="text"
-                                required
-                                placeholder="Jane Doe"
-                                tabIndex={0}
-                            />
-                        </TextField.Root>
-                        {errors?.email && (
-                            <ErrorText>{errors?.email?.message}</ErrorText>
-                        )}
-                    </Flex>
+            <Box>
+                <form onSubmit={handleSubmit(signup)}>
+                    <Flex direction="column" gap="4">
+                        <Flex direction="column" gap="2">
+                            <Label htmlFor="full_name" isRequired>
+                                Full Name
+                            </Label>
+                            <TextField.Root>
+                                <TextField.Input
+                                    {...register("full_name")}
+                                    name="full_name"
+                                    type="text"
+                                    required
+                                    placeholder="Jane Doe"
+                                    tabIndex={0}
+                                />
+                            </TextField.Root>
+                            {errors?.email && (
+                                <ErrorText>{errors?.email?.message}</ErrorText>
+                            )}
+                        </Flex>
 
-                    <Flex direction="column" gap="2">
-                        <Label htmlFor="email" isRequired>
-                            Email
-                        </Label>
-                        <TextField.Root>
-                            <TextField.Input
-                                {...register("email", {
-                                    validate: (email) =>
-                                        isEmailValid(email) ||
-                                        "Please enter a valid email address.",
-                                    required: "Email is required.",
-                                })}
-                                name="email"
-                                type="email"
-                                required
-                                placeholder="jane@example.com"
-                                tabIndex={0}
-                            />
-                        </TextField.Root>
-                        {errors?.email && (
-                            <ErrorText>{errors?.email?.message}</ErrorText>
-                        )}
-                    </Flex>
+                        <Flex direction="column" gap="2">
+                            <Label htmlFor="email" isRequired>
+                                Email
+                            </Label>
+                            <TextField.Root>
+                                <TextField.Input
+                                    {...register("email", {
+                                        validate: (email) =>
+                                            isEmailValid(email) ||
+                                            "Please enter a valid email address.",
+                                        required: "Email is required.",
+                                    })}
+                                    name="email"
+                                    type="email"
+                                    required
+                                    placeholder="jane@example.com"
+                                    tabIndex={0}
+                                />
+                            </TextField.Root>
+                            {errors?.email && (
+                                <ErrorText>{errors?.email?.message}</ErrorText>
+                            )}
+                        </Flex>
 
-                    <Flex direction="column" gap="2">
-                        <Button type="submit" disabled={isSubmitting}>
-                            {isSubmitting ? <Loader /> : "Sign Up"}
-                        </Button>
-                    </Flex>
-                    <Flex gap="1" justify="center">
-                        <Text size="2">Have an Account?</Text>
-                        <LinkButton
-                            size="2"
-                            asChild
-                        >
-                            <Link to="/login">
-                            <Text>Login</Text>
-                            </Link>
-                        </LinkButton>
+                        <Flex direction="column" gap="2">
+                            <Button type="submit" disabled={isSubmitting}>
+                                {isSubmitting ? <Loader /> : "Sign Up"}
+                            </Button>
+                        </Flex>
+                        <Flex gap="1" justify="center">
+                            <Text size="2">Have an Account?</Text>
+                            <LinkButton
+                                size="2"
+                                asChild
+                            >
+                                <Link to="/login">
+                                    <Text>Login</Text>
+                                </Link>
+                            </LinkButton>
+                        </Flex>
                     </Flex>
-                </Flex>
-            </form>
-        </Box>
+                </form>
+            </Box>
         </AuthContainer>
     )
 }