feat: snack-bar component (#626)

* feat: SnackBarProvider and queuing

* feat: use snack bar on onboarding errors

* feat: workspace copy use snackBar

* fix: remove magic number

front/src/pages/auth/CreateProfile.tsx

@@ -16,6 +16,7 @@ import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
+import { useSnackBar } from '@/snack-bar/hooks/useSnackBar';
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
@@ -47,10 +48,6 @@ const StyledComboInputContainer = styled.div`
   }
 `;
 
-const StyledErrorContainer = styled.div`
-  color: ${({ theme }) => theme.color.red};
-`;
-
 const validationSchema = Yup.object()
   .shape({
     firstName: Yup.string().required('First name can not be empty'),
@@ -64,6 +61,8 @@ export function CreateProfile() {
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
 
+  const { enqueueSnackBar } = useSnackBar();
+
   const [currentUser] = useRecoilState(currentUserState);
 
   const [updateUser] = useUpdateUserMutation();
@@ -73,7 +72,6 @@ export function CreateProfile() {
     control,
     handleSubmit,
     formState: { isValid, isSubmitting },
-    setError,
     getValues,
   } = useForm<Form>({
     mode: 'onChange',
@@ -118,10 +116,12 @@ export function CreateProfile() {
 
         navigate('/');
       } catch (error: any) {
-        setError('root', { message: error?.message });
+        enqueueSnackBar(error?.message, {
+          variant: 'error',
+        });
       }
     },
-    [currentUser?.id, navigate, setError, updateUser],
+    [currentUser?.id, enqueueSnackBar, navigate, updateUser],
   );
 
   useScopedHotkeys(
@@ -202,14 +202,6 @@ export function CreateProfile() {
           fullWidth
         />
       </StyledButtonContainer>
-      {/* Will be replaced by error snack bar */}
-      <Controller
-        name="firstName"
-        control={control}
-        render={({ formState: { errors } }) => (
-          <StyledErrorContainer>{errors?.root?.message}</StyledErrorContainer>
-        )}
-      />
     </>
   );
 }

front/src/pages/auth/CreateWorkspace.tsx

@@ -13,6 +13,7 @@ import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
+import { useSnackBar } from '@/snack-bar/hooks/useSnackBar';
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
@@ -36,10 +37,6 @@ const StyledButtonContainer = styled.div`
   width: 200px;
 `;
 
-const StyledErrorContainer = styled.div`
-  color: ${({ theme }) => theme.color.red};
-`;
-
 const validationSchema = Yup.object()
   .shape({
     name: Yup.string().required('Name can not be empty'),
@@ -52,6 +49,8 @@ export function CreateWorkspace() {
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
 
+  const { enqueueSnackBar } = useSnackBar();
+
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 
   // Form
@@ -59,7 +58,6 @@ export function CreateWorkspace() {
     control,
     handleSubmit,
     formState: { isValid, isSubmitting },
-    setError,
     getValues,
   } = useForm<Form>({
     mode: 'onChange',
@@ -90,10 +88,12 @@ export function CreateWorkspace() {
 
         navigate('/auth/create/profile');
       } catch (error: any) {
-        setError('root', { message: error?.message });
+        enqueueSnackBar(error?.message, {
+          variant: 'error',
+        });
       }
     },
-    [navigate, setError, updateWorkspace],
+    [enqueueSnackBar, navigate, updateWorkspace],
   );
 
   useScopedHotkeys(
@@ -156,14 +156,6 @@ export function CreateWorkspace() {
           fullWidth
         />
       </StyledButtonContainer>
-      {/* Will be replaced by error snack bar */}
-      <Controller
-        name="name"
-        control={control}
-        render={({ formState: { errors } }) => (
-          <StyledErrorContainer>{errors?.root?.message}</StyledErrorContainer>
-        )}
-      />
     </>
   );
 }

front/src/pages/auth/PasswordLogin.tsx

@@ -15,6 +15,7 @@ import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+import { useSnackBar } from '@/snack-bar/hooks/useSnackBar';
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
@@ -47,10 +48,6 @@ const StyledButtonContainer = styled.div`
   width: 200px;
 `;
 
-const StyledErrorContainer = styled.div`
-  color: ${({ theme }) => theme.color.red};
-`;
-
 const validationSchema = Yup.object()
   .shape({
     exist: Yup.boolean().required(),
@@ -69,6 +66,8 @@ type Form = Yup.InferType<typeof validationSchema>;
 export function PasswordLogin() {
   const navigate = useNavigate();
 
+  const { enqueueSnackBar } = useSnackBar();
+
   const [isDemoMode] = useRecoilState(isDemoModeState);
   const [authFlowUserEmail] = useRecoilState(authFlowUserEmailState);
   const [showErrors, setShowErrors] = useState(false);
@@ -88,7 +87,6 @@ export function PasswordLogin() {
     control,
     handleSubmit,
     formState: { isSubmitting },
-    setError,
     watch,
     getValues,
   } = useForm<Form>({
@@ -114,16 +112,19 @@ export function PasswordLogin() {
         }
         navigate('/auth/create/workspace');
       } catch (err: any) {
-        setError('root', { message: err?.message });
+        console.log('err', err);
+        enqueueSnackBar(err?.message, {
+          variant: 'error',
+        });
       }
     },
     [
-      login,
+      checkUserExistsData?.checkUserExists.exists,
       navigate,
-      setError,
+      login,
       signUp,
       workspaceInviteHash,
-      checkUserExistsData,
+      enqueueSnackBar,
     ],
   );
   useScopedHotkeys(
@@ -200,14 +201,6 @@ export function PasswordLogin() {
             fullWidth
           />
         </StyledButtonContainer>
-        {/* Will be replaced by error snack bar */}
-        <Controller
-          name="exist"
-          control={control}
-          render={({ formState: { errors } }) => (
-            <StyledErrorContainer>{errors?.root?.message}</StyledErrorContainer>
-          )}
-        />
       </StyledForm>
     </>
   );