feat: add creation user required step #102
Conversation
|
Warning Rate limit exceeded@yassinedorbozgithub has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 3 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe changes introduce two new React components, Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Outside diff range and nitpick comments (5)
src/app/services/endpoints/user.class.ts (3)
11-17: LGTM: Well-structured class definition with proper use of generics.The User class is well-defined, extending BaseApi and utilizing generics for type safety. The constructor is correctly implemented.
Consider adding JSDoc comments to describe the class and its generic parameters for better documentation:
/** * User class for handling user-related API operations. * @template TPath - The path type extending keyof IPathMapTypes * @template TOperations - The operations type, defaulting to TPathToOperations<TPath> */ export class User< TPath extends keyof IPathMapTypes, TOperations extends TBaseApiProps<TOperations> = TPathToOperations<TPath>, > extends BaseApi<TOperations> { constructor(protected readonly instance: AxiosInstance) { super(instance); } }
19-30: LGTM: Well-implemented async methods with proper API calls.The createUser and getUser methods are correctly implemented as async functions and make appropriate use of base class methods.
Consider the following improvements:
- Add return type annotations for better type safety:
async createUser(data: TOperations['create']['req']): Promise<TOperations['create']['res']> { // ... } async getUser(userId: string): Promise<TOperations['get']['res']> { // ... }
- Implement error handling to manage potential API errors:
async createUser(data: TOperations['create']['req']): Promise<TOperations['create']['res']> { try { return await this.create({ url: `/${EPath.users}`, data, }); } catch (error) { // Log the error or handle it appropriately console.error('Error creating user:', error); throw error; } }Apply similar error handling to the getUser method as well.
33-34: LGTM: Exports provide flexibility and convenience.The exported createApiUser function and apiUser constant offer both flexibility and convenience for using the User class.
Consider lazy initialization for apiUser to potentially improve performance, especially if it's not always used:
export const createApiUser = () => new User<EPath.users>(instance); export const getApiUser = (() => { let apiUser: User<EPath.users> | null = null; return () => { if (!apiUser) { apiUser = createApiUser(); } return apiUser; }; })();This approach ensures that apiUser is only created when it's first needed.
src/app/layout.tsx (1)
5-5: Consider removing the unnecessary React import.In modern versions of Next.js and React, explicitly importing React is no longer required for JSX transformation. This import can be safely removed to keep the code clean and up-to-date with current best practices.
-import React from 'react';src/app/services/api.types.ts (1)
89-97: LGTM: New entry for user operations inIPathMapTypes.The new entry for
[EPath.users]is well-structured and aligns with the existing pattern in the interface. It correctly defines the create and read operations while marking update and delete as unsupported.For consistency with other entries, consider using the following format for the read operation:
- read: UserDto; + read: { + req: never; + res: UserDto; + };This change would make the
usersentry more consistent with other entries likeipsandshareLinks.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- src/app/components/RequiredSteps.tsx (1 hunks)
- src/app/components/dialogs/AddUserDialog.tsx (1 hunks)
- src/app/layout.tsx (2 hunks)
- src/app/services/api.types.ts (2 hunks)
- src/app/services/endpoints/user.class.ts (1 hunks)
🔇 Additional comments (7)
src/app/services/endpoints/user.class.ts (2)
1-9: LGTM: Imports are appropriate and concise.The imports are well-organized and relevant to the file's functionality. They include necessary types and classes for API operations.
1-34: Overall, excellent implementation of the User class for API operations.This new file aligns well with the PR objective of adding a creation user required step. The User class provides a robust and type-safe way to handle user-related API operations, including user creation and retrieval.
Key strengths:
- Proper use of TypeScript generics for type safety.
- Well-structured class extending BaseApi for consistent API handling.
- Async methods for user creation and retrieval.
- Flexible exports allowing both factory-style creation and immediate use.
The suggested improvements (documentation, error handling, return type annotations, and lazy initialization) will further enhance the code's robustness and maintainability.
Great job on implementing this feature!
src/app/layout.tsx (1)
10-10: Approved: RequiredSteps component added as per PR objective.The addition of the RequiredSteps component aligns with the PR objective of adding a "creation user required step". This change appears to implement a step-based user flow or validation process.
To ensure the implementation is complete and doesn't introduce any layout issues, please provide more information:
- Can you share details about the RequiredSteps component's functionality?
- Does it handle layout concerns previously managed by the removed Grid component?
Run the following script to verify the RequiredSteps component implementation:
Also applies to: 36-36
src/app/components/RequiredSteps.tsx (1)
1-9: LGTM: Imports and component declaration are well-structured.The 'use client' directive, imports, and component declaration are correctly implemented. The use of TypeScript for prop typing is a good practice.
src/app/services/api.types.ts (2)
13-13: LGTM: Import statement for user DTOs.The import statement is correctly formatted and imports the necessary types (
CreateUserDtoandUserDto) that are used in the newIPathMapTypesentry.
Line range hint
1-97: Overall assessment: Changes look good and align with PR objectives.The changes to
src/app/services/api.types.tssuccessfully add the necessary types and interface entries to support user creation, which aligns with the PR objective of adding a "creation user required step". The code is well-structured and consistent with the existing patterns in the file.A minor suggestion was made to improve consistency in the
readoperation definition, but this is not a blocking issue.src/app/components/dialogs/AddUserDialog.tsx (1)
1-120: Overall assessment of AddUserDialog componentThe
AddUserDialogcomponent is well-structured and implements the required functionality for creating a user. However, there are several areas where it could be improved:
- Refine the props interface for better type safety.
- Enhance error handling and form state management in the submission logic.
- Add a safety check for the session token when setting the userId.
- Implement proper validation for the patientId field.
These improvements will enhance the component's robustness, type safety, and user experience. Consider implementing these changes before merging this pull request.
src/app/components/RequiredSteps.tsx
Outdated
| 'use client'; | ||
| import { Grid } from '@mui/material'; | ||
| import React from 'react'; | ||
|
|
||
| import { AddUserDialog } from './dialogs/AddUserDialog'; | ||
| import { useAuth } from '../context/AuthProvider'; | ||
| import { apiUser } from '../services/endpoints/user.class'; | ||
|
|
||
| export const RequiredSteps = ({ children }: { children: React.ReactNode }) => { | ||
| const { user } = useAuth(); | ||
|
|
||
| const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = | ||
| React.useState(false); | ||
| const [hasUser, setHasUser] = React.useState(false); | ||
| React.useEffect(() => { | ||
| const fetchUser = async () => { | ||
| await apiUser | ||
| .getUser(user.id) | ||
| .then(({ data }) => { | ||
| setHasUser(true); | ||
| return data; | ||
| }) | ||
| .catch((e) => { | ||
| setHasUser(false); | ||
| setIsCreateUserDialogOpened(true); | ||
| }); | ||
| }; | ||
| fetchUser(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Grid minHeight={'calc(100vh - 137px)'}> | ||
| {hasUser ? ( | ||
| children | ||
| ) : ( | ||
| <AddUserDialog | ||
| open={isCreateUserDialogOpened} | ||
| onClose={() => { | ||
| setIsCreateUserDialogOpened(false); | ||
| }} | ||
| callback={() => { | ||
| setHasUser(true); | ||
| }} | ||
| /> | ||
| )} | ||
| </Grid> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding error handling and loading states.
While the component functions correctly, it could benefit from some additional features to improve user experience and error handling:
- Add a loading state while fetching user data.
- Implement error handling for network issues or other unexpected errors.
- Add a retry mechanism if the initial user fetch fails.
Here's a high-level suggestion for implementing these improvements:
export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
const { user } = useAuth();
const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = React.useState(false);
const [hasUser, setHasUser] = React.useState(false);
const [isLoading, setIsLoading] = React.useState(true);
const [error, setError] = React.useState<Error | null>(null);
const fetchUser = React.useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const { data } = await apiUser.getUser(user.id);
setHasUser(true);
} catch (e) {
setError(e instanceof Error ? e : new Error('An unknown error occurred'));
setIsCreateUserDialogOpened(true);
} finally {
setIsLoading(false);
}
}, [user.id]);
React.useEffect(() => {
fetchUser();
}, [fetchUser]);
if (isLoading) {
return <LoadingSpinner />; // Implement a loading component
}
if (error && !isCreateUserDialogOpened) {
return <ErrorMessage error={error} onRetry={fetchUser} />; // Implement an error component with retry functionality
}
return (
<Grid minHeight={'calc(100vh - var(--header-height, 137px))'}>
{hasUser ? (
children
) : (
<AddUserDialog
open={isCreateUserDialogOpened}
onClose={() => setIsCreateUserDialogOpened(false)}
onUserCreated={() => {
setHasUser(true);
setIsCreateUserDialogOpened(false);
}}
/>
)}
</Grid>
);
};This refactored version includes loading and error states, as well as a retry mechanism. It improves the overall robustness and user experience of the component.
src/app/components/RequiredSteps.tsx
Outdated
| return ( | ||
| <Grid minHeight={'calc(100vh - 137px)'}> | ||
| {hasUser ? ( | ||
| children | ||
| ) : ( | ||
| <AddUserDialog | ||
| open={isCreateUserDialogOpened} | ||
| onClose={() => { | ||
| setIsCreateUserDialogOpened(false); | ||
| }} | ||
| callback={() => { | ||
| setHasUser(true); | ||
| }} | ||
| /> | ||
| )} | ||
| </Grid> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using a more flexible approach for minimum height calculation.
The current minimum height calculation ('calc(100vh - 137px)') might be brittle if the layout changes. Consider using a more flexible approach, such as CSS variables or a theme value.
Here's a suggested improvement:
- <Grid minHeight={'calc(100vh - 137px)'}>
+ <Grid minHeight={'calc(100vh - var(--header-height, 137px))'}>Then, define the --header-height CSS variable in your global styles or theme. This approach makes it easier to maintain and adjust the layout across the application.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <Grid minHeight={'calc(100vh - 137px)'}> | |
| {hasUser ? ( | |
| children | |
| ) : ( | |
| <AddUserDialog | |
| open={isCreateUserDialogOpened} | |
| onClose={() => { | |
| setIsCreateUserDialogOpened(false); | |
| }} | |
| callback={() => { | |
| setHasUser(true); | |
| }} | |
| /> | |
| )} | |
| </Grid> | |
| ); | |
| return ( | |
| <Grid minHeight={'calc(100vh - var(--header-height, 137px))'}> | |
| {hasUser ? ( | |
| children | |
| ) : ( | |
| <AddUserDialog | |
| open={isCreateUserDialogOpened} | |
| onClose={() => { | |
| setIsCreateUserDialogOpened(false); | |
| }} | |
| callback={() => { | |
| setHasUser(true); | |
| }} | |
| /> | |
| )} | |
| </Grid> | |
| ); |
src/app/components/RequiredSteps.tsx
Outdated
| const { user } = useAuth(); | ||
|
|
||
| const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = | ||
| React.useState(false); | ||
| const [hasUser, setHasUser] = React.useState(false); | ||
| React.useEffect(() => { | ||
| const fetchUser = async () => { | ||
| await apiUser | ||
| .getUser(user.id) | ||
| .then(({ data }) => { | ||
| setHasUser(true); | ||
| return data; | ||
| }) | ||
| .catch((e) => { | ||
| setHasUser(false); | ||
| setIsCreateUserDialogOpened(true); | ||
| }); | ||
| }; | ||
| fetchUser(); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve useEffect implementation and error handling.
Consider the following suggestions:
- Add 'user.id' to the useEffect dependency array to ensure the effect runs when the user changes.
- Move the fetchUser function declaration outside of useEffect for better readability.
- Simplify the error handling in the API call.
Here's a suggested refactor:
const { user } = useAuth();
const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] =
React.useState(false);
const [hasUser, setHasUser] = React.useState(false);
+const fetchUser = async (userId: string) => {
+ try {
+ const { data } = await apiUser.getUser(userId);
+ setHasUser(true);
+ return data;
+ } catch (e) {
+ setIsCreateUserDialogOpened(true);
+ return null;
+ }
+};
React.useEffect(() => {
- const fetchUser = async () => {
- await apiUser
- .getUser(user.id)
- .then(({ data }) => {
- setHasUser(true);
- return data;
- })
- .catch((e) => {
- setHasUser(false);
- setIsCreateUserDialogOpened(true);
- });
- };
- fetchUser();
-}, []);
+ fetchUser(user.id);
+}, [user.id]);This refactor improves code readability and ensures the effect runs when the user changes.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { user } = useAuth(); | |
| const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = | |
| React.useState(false); | |
| const [hasUser, setHasUser] = React.useState(false); | |
| React.useEffect(() => { | |
| const fetchUser = async () => { | |
| await apiUser | |
| .getUser(user.id) | |
| .then(({ data }) => { | |
| setHasUser(true); | |
| return data; | |
| }) | |
| .catch((e) => { | |
| setHasUser(false); | |
| setIsCreateUserDialogOpened(true); | |
| }); | |
| }; | |
| fetchUser(); | |
| }, []); | |
| const { user } = useAuth(); | |
| const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = | |
| React.useState(false); | |
| const [hasUser, setHasUser] = React.useState(false); | |
| const fetchUser = async (userId: string) => { | |
| try { | |
| const { data } = await apiUser.getUser(userId); | |
| setHasUser(true); | |
| return data; | |
| } catch (e) { | |
| setIsCreateUserDialogOpened(true); | |
| return null; | |
| } | |
| }; | |
| React.useEffect(() => { | |
| fetchUser(user.id); | |
| }, [user.id]); |
| <AddUserDialog | ||
| open={isCreateUserDialogOpened} | ||
| onClose={() => { | ||
| setIsCreateUserDialogOpened(false); | ||
| }} | ||
| callback={() => { | ||
| setHasUser(true); | ||
| }} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve AddUserDialog prop naming and callback handling.
The current implementation of AddUserDialog props could be improved for clarity and maintainability.
Consider the following changes:
- Rename the
callbackprop to something more descriptive, likeonUserCreated. - Use a single function to handle both dialog closing and user creation callback.
Here's a suggested refactor:
<AddUserDialog
open={isCreateUserDialogOpened}
- onClose={() => {
- setIsCreateUserDialogOpened(false);
- }}
- callback={() => {
+ onClose={() => setIsCreateUserDialogOpened(false)}
+ onUserCreated={() => {
setHasUser(true);
+ setIsCreateUserDialogOpened(false);
}}
/>This change improves the readability and maintainability of the component.
Committable suggestion was skipped due to low confidence.
| const { | ||
| reset, | ||
| register, | ||
| formState: { errors }, | ||
| resetField, | ||
| handleSubmit, | ||
| } = useForm<CreateUserDto>(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance type safety for the useForm hook.
To improve type safety and autocompletion, consider using a more specific type for the useForm hook. Instead of CreateUserDto, which might include fields not present in the form, create a dedicated interface for the form fields.
Example:
interface AddUserFormData {
userId: string;
patientId: string;
}
const {
reset,
register,
formState: { errors },
resetField,
handleSubmit,
} = useForm<AddUserFormData>();This change will ensure that the form fields and their types are explicitly defined, improving type checking and developer experience.
src/app/components/RequiredSteps.tsx
Outdated
| const [hasUser, setHasUser] = React.useState(false); | ||
| const isAnonymous = !isAuthenticated && pathname === '/viewer'; | ||
|
|
||
| console.log(pathname); |
There was a problem hiding this comment.
You are right the mentioned code need to be removed, nice catch
| const pathname = usePathname(); | ||
|
|
||
| const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] = | ||
| React.useState(false); |
There was a problem hiding this comment.
Hello @yassinedorbozgithub, I suggest we import everything we need from react once and for all, to keep the code aligned with other files.
| React.useState(false); | |
| useState(false); |
There was a problem hiding this comment.
Sure we will do that
src/app/components/RequiredSteps.tsx
Outdated
|
|
||
| console.log(pathname); | ||
|
|
||
| React.useEffect(() => { |
There was a problem hiding this comment.
| React.useEffect(() => { | |
| useEffect(() => { |
| @@ -0,0 +1,120 @@ | |||
| 'use client'; | |||
|
|
|||
| import { KeyboardBackspace, Send } from '@mui/icons-material'; | |||
There was a problem hiding this comment.
| import { KeyboardBackspace, Send } from '@mui/icons-material'; | |
| import { Send } from '@mui/icons-material'; |
| Grid, | ||
| Alert, | ||
| TextField, | ||
| Button, |
There was a problem hiding this comment.
| Button, | |
|
Hi @amalessid, all the comments are addressed ✅ |
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/app/components/RequiredSteps.tsx (1 hunks)
- src/app/components/dialogs/AddUserDialog.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/components/RequiredSteps.tsx
🔇 Additional comments (2)
src/app/components/dialogs/AddUserDialog.tsx (2)
1-16: LGTM: Imports are appropriate and used in the component.The imports cover all necessary dependencies for the component's functionality, including React hooks, Material-UI components, and custom hooks/components.
1-113: LGTM: Overall component structure and functionality are well-implemented.The
AddUserDialogcomponent effectively implements a dialog for adding a user with proper form handling, validation, and error management. It makes good use of Material-UI components and custom styled components. The component's structure is clear and follows React best practices.Consider implementing the suggested improvements in the previous comments to further enhance the component's robustness and user experience.
| interface AddUserDialogProps { | ||
| open?: boolean; | ||
| onClose?: () => void; | ||
| callback?: () => void; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider refining the AddUserDialogProps interface.
While the current interface allows for flexibility, consider the following improvements for better type safety:
- Make the
openprop required, as it's crucial for controlling the dialog's visibility. - Consider making
onCloserequired to ensure proper handling of dialog closure.
Example refactored interface:
interface AddUserDialogProps {
open: boolean;
onClose: () => void;
callback?: () => void;
}This change would enforce better prop usage and potentially prevent runtime errors.
| export const AddUserDialog: FC<AddUserDialogProps> = ({ | ||
| open, | ||
| onClose, | ||
| callback, | ||
| }) => { | ||
| const { session } = useAuth(); | ||
| const [hasError, setHasError] = useState(false); | ||
| const [disableButton, setDisableButton] = useState(false); | ||
|
|
||
| const { | ||
| reset, | ||
| register, | ||
| formState: { errors }, | ||
| resetField, | ||
| handleSubmit, | ||
| } = useForm<CreateUserDto>(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance type safety for the useForm hook.
To improve type safety and autocompletion, consider using a more specific type for the useForm hook. Instead of CreateUserDto, which might include fields not present in the form, create a dedicated interface for the form fields.
Example:
interface AddUserFormData {
userId: string;
patientId: string;
}
const {
reset,
register,
formState: { errors },
resetField,
handleSubmit,
} = useForm<AddUserFormData>();This change will ensure that the form fields and their types are explicitly defined, improving type checking and developer experience.
| const onSubmitForm = async (data: CreateUserDto) => { | ||
| setDisableButton(true); | ||
| try { | ||
| await apiUser | ||
| .createUser(data) | ||
| .then(() => { | ||
| onClose?.(); | ||
| callback?.(); | ||
| }) | ||
| .catch(() => { | ||
| setHasError(true); | ||
| setDisableButton(false); | ||
| }); | ||
| } catch (error) { | ||
| console.error('Failed to create user:', error); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance error handling and form state management in onSubmitForm.
Consider the following improvements:
-
Provide more specific error messages:
.catch((error) => { setHasError(true); setDisableButton(false); console.error('Failed to create user:', error.message); });
-
Reset the form state on successful submission:
.then(() => { reset(); // Reset form fields onClose?.(); callback?.(); })
-
Use a more descriptive error message in the catch block:
} catch (error) { console.error('Unexpected error during user creation:', error); setHasError(true); setDisableButton(false); }
These changes will improve error handling, provide better feedback to users, and ensure the form is in a clean state after successful submission.
| useEffect(() => { | ||
| if (session?.token?.sub) | ||
| resetField('userId', { defaultValue: session.token.sub }); | ||
| }, [session?.token?.sub]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add a safety check for the session token in the useEffect hook.
To prevent potential runtime errors, consider adding a safety check:
useEffect(() => {
if (session?.token?.sub) {
resetField('userId', { defaultValue: session.token.sub });
} else {
console.warn('Session token is undefined. Unable to set userId.');
// Optionally, set a default value or handle this case as needed
}
}, [session?.token?.sub, resetField]);This change will make the code more robust and prevent potential issues if the session token is unexpectedly undefined.
| <TextField | ||
| type="number" | ||
| label="National identity number *" | ||
| {...register('patientId', { | ||
| setValueAs: (value) => value || undefined, | ||
| })} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add validation rules for the patientId field.
The patientId field currently lacks validation rules. Consider adding appropriate validation:
<TextField
type="number"
label="National identity number *"
error={!!errors.patientId}
helperText={errors.patientId?.message}
{...register('patientId', {
required: 'National identity number is required',
validate: (value) => {
// Add custom validation logic here
// For example, check if it's a valid length for a national ID
return value.length === 10 || 'Invalid national identity number';
},
setValueAs: (value) => value || undefined,
})}
/>This change will ensure that the patientId field is properly validated before form submission, improving data integrity and user experience.
src/app/components/RequiredSteps.tsx
Outdated
| setHasUser(true); | ||
| return data; | ||
| }) | ||
| .catch((e) => { |
There was a problem hiding this comment.
Hello @yassinedorbozgithub, Or maybe you prefer to log the error instead?
| .catch((e) => { | |
| .catch(() => { |
There was a problem hiding this comment.
Hi @amalessid, i think that we can remove e prop like you suggest
Summary by CodeRabbit
RequiredStepscomponent for user authentication and account creation.AddUserDialogcomponent for user creation via a dialog interface.Gridcomponent with theRequiredStepscomponent.