Improvement/User flow (#99)

src/features/authorization/managers/registerManager.ts

@@ -1,10 +1,12 @@
+import { useState } from 'react';
 import { FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import { useApplicationContext } from './../../application/context';
 import { registerWithEmailAndPassword } from 'src/firebase';
 
 export const useRegisterManager = () => {
   const { changeDisplayName } = useApplicationContext();
+  const [isRegistering, setIsRegistering] = useState(false);
 
   const initialValues = {
     name: '',
@@ -32,6 +34,7 @@ export const useRegisterManager = () => {
     values: FormValues,
     { resetForm, setFieldError }: FormikHelpers<FormValues>
   ) => {
+    setIsRegistering(true);
     try {
       await registerWithEmailAndPassword({
         name: values.name,
@@ -43,11 +46,13 @@ export const useRegisterManager = () => {
     } catch (e) {
       setFieldError('message', 'Error while signing in!');
     }
+    setIsRegistering(false);
   };
 
   return {
     onSubmit,
     SignupSchema,
     initialValues,
+    isRegistering,
   };
 };

src/features/settings/settingsManager.ts

@@ -8,25 +8,15 @@ import {
 } from 'firebase/firestore';
 import toast from 'react-hot-toast';
 import { useState } from 'react';
-import { User } from 'firebase/auth';
 import { signOut } from 'firebase/auth';
 import { useRouter } from 'next/router';
 import { useApplicationContext } from 'src/features/application/context';
 import { auth, db } from 'src/firebase';
 
-interface SettingsManager {
-  loading: boolean;
-  error: Error | undefined;
-  user: User | null | undefined;
-  isOpen: boolean;
-  closeDeleteModal: () => void;
-  openDeleteModal: () => void;
-  handleOnAccountDelete: () => void;
-}
-
-export const useSettingsManager = (): SettingsManager => {
+export const useSettingsManager = () => {
   const { loading, error, user } = useApplicationContext();
   const [isOpen, setIsOpen] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
   const router = useRouter();
 
   function closeDeleteModal() {
@@ -42,6 +32,8 @@ export const useSettingsManager = (): SettingsManager => {
       if (!user) {
         return;
       }
+      setIsRemoving(true);
+      await user.delete();
       const q = query(
         collection(db, 'surveys'),
         where('creatorId', '==', user?.uid)
@@ -59,16 +51,15 @@ export const useSettingsManager = (): SettingsManager => {
 
       await deleteDoc(doc(db, 'users', user.uid));
 
-      await user.delete();
-
       closeDeleteModal();
+      await router.replace('/login');
       toast.success('Account deleted');
       signOut(auth);
-      router.replace('/');
     } catch (error) {
       toast.error('Error deleting account');
       console.error(error);
     }
+    setIsRemoving(false);
   };
 
   return {
@@ -79,5 +70,6 @@ export const useSettingsManager = (): SettingsManager => {
     closeDeleteModal,
     openDeleteModal,
     handleOnAccountDelete,
+    isRemoving,
   };
 };

src/features/surveys/components/EmojiButton/EmojiButton.tsx

@@ -11,7 +11,7 @@ function EmojiButton({ icon, onClick, selected = false }: EmojiButtonProps) {
     <button
       type="button"
       className={`flex items-center justify-center rounded-lg border-4 border-transparent bg-white p-3 shadow  duration-100 ${
-        selected ? 'scale-90 border-slate-300' : ''
+        selected ? 'scale-90 !border-slate-300' : ''
       }`}
       onClick={() => onClick(icon)}
     >

src/features/surveys/components/SurveyRow/SurveyRow.tsx

@@ -9,9 +9,7 @@ import { db } from '../../../../firebase';
 import Button, {
   ButtonVariant,
 } from '../../../../shared/components/Button/Button';
-import IconButton, {
-  IconButtonVariant,
-} from '../../../../shared/components/IconButton/IconButton';
+
 import StyledDialog from 'src/shared/components/StyledDialog/StyledDialog';
 
 interface SurveyRowProps {
@@ -30,6 +28,7 @@ export default function SurveyRow({
   const [, copy] = useCopyToClipboard();
   const navigate = useRouter();
   const [isOpen, setIsOpen] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
 
   function closeDeleteModal() {
     setIsOpen(false);
@@ -52,6 +51,7 @@ export default function SurveyRow({
   };
 
   const handleOnDelete = (id: string) => async () => {
+    setIsRemoving(true);
     try {
       await deleteDoc(doc(db, 'surveys', id));
       closeDeleteModal();
@@ -60,6 +60,7 @@ export default function SurveyRow({
       toast.error('Error deleting survey');
       console.error(error);
     }
+    setIsRemoving(false);
   };
 
   return (
@@ -83,17 +84,17 @@ export default function SurveyRow({
           More
         </Button>
 
-        <IconButton
-          variant={IconButtonVariant.PRIMARY}
+        <Button
+          variant={ButtonVariant.PRIMARY}
           className={
             'mt-2 w-full justify-center px-3 text-center sm:mt-0 md:w-auto'
           }
           title="Copy link to clipboard"
           icon={<LinkIcon className="h-5 w-5" />}
           onClick={handleCopyLink}
         />
-        <IconButton
-          variant={IconButtonVariant.DANGER}
+        <Button
+          variant={ButtonVariant.DANGER}
           title="Delete survey"
           className="mt-2 ml-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
           onClick={openDeleteModal}
@@ -118,17 +119,19 @@ export default function SurveyRow({
                 variant={ButtonVariant.SECONDARY}
                 onClick={closeDeleteModal}
                 className="uppercase"
+                disabled={isRemoving}
               >
                 Cancel
               </Button>
-              <IconButton
-                variant={IconButtonVariant.DANGER}
+              <Button
+                variant={ButtonVariant.DANGER}
                 onClick={handleOnDelete(id)}
                 icon={<TrashIcon className="h-5 w-5" />}
                 className="uppercase"
+                isLoading={isRemoving}
               >
                 Delete
-              </IconButton>
+              </Button>
             </div>
           </>
         }

src/features/surveys/managers/createSurveyManager.ts

@@ -12,6 +12,7 @@ export const useCreateSurveyManager = () => {
 
   const { user } = useApplicationContext();
   const [buttonDisable, setButtonDisable] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
 
   const router = useRouter();
   const [, copy] = useCopyToClipboard();
@@ -47,6 +48,8 @@ export const useCreateSurveyManager = () => {
 
   const createSurvey = async () => {
     setButtonDisable(true);
+    setIsCreating(true);
+
     try {
       const newSurvey = await addDoc(collection(db, 'surveys'), {
         title,
@@ -59,12 +62,13 @@ export const useCreateSurveyManager = () => {
         window.location.hostname === 'localhost' ? 'http://' : 'https://';
       const link = `${domain}${window.location.host}/survey/${newSurvey.id}`;
       copy(link);
-      router.push(`/survey/answer/${newSurvey.id}`);
+      await router.push(`/survey/answer/${newSurvey.id}`);
 
       toast.success('Survey created and link copied to clipboard');
     } catch (error) {
       toast.error('Survey creation failed');
     }
+    setIsCreating(false);
     setButtonDisable(false);
   };
 
@@ -94,5 +98,6 @@ export const useCreateSurveyManager = () => {
     handleEmotePick,
     createSurvey,
     buttonDisable,
+    isCreating,
   };
 };

src/features/surveys/managers/surveyAnswerManager.ts

@@ -15,6 +15,7 @@ export const useSurveyAnswerManager = () => {
   const [selectedIcon, setSelectedIcon] = useState('');
   const [buttonDisable, setButtonDisable] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [isAnswering, setIsAnswering] = useState(false);
 
   const getSurveyData = useCallback(async () => {
     const surveyData = await getDoc(doc(db, 'surveys', surveyId));
@@ -60,7 +61,7 @@ export const useSurveyAnswerManager = () => {
 
   const handleSave = async () => {
     setButtonDisable(true);
-    setIsLoading(true);
+    setIsAnswering(true);
 
     try {
       if (!surveyId) {
@@ -72,13 +73,13 @@ export const useSurveyAnswerManager = () => {
         answer,
         answerDate: new Date(),
       });
+      await router.replace('/');
       toast.success('The reply has been sent');
-      router.replace('/');
     } catch (error) {
       toast.error('Error occured');
     } finally {
       setButtonDisable(false);
-      setIsLoading(false);
+      setIsAnswering(false);
     }
   };
 
@@ -96,5 +97,6 @@ export const useSurveyAnswerManager = () => {
     handleInputAnswer,
     buttonDisable,
     handleSave,
+    isAnswering,
   };
 };

src/layout/Navigation/Navigation.tsx

@@ -8,10 +8,8 @@ import { auth } from '../../firebase';
 import Logo from '../Logo/Logo';
 import ButtonLink from '../../shared/components/ButtonLink/ButtonLink';
 import BurgerMenu from '../BurgerMenu/BurgerMenu';
-import { ButtonVariant } from '../../shared/components/Button/Button';
-import IconButton, {
-  IconButtonVariant,
-} from '../../shared/components/IconButton/IconButton';
+import Button, { ButtonVariant } from '../../shared/components/Button/Button';
+
 import AvatarIcon from '../../../public/images/avatar.svg';
 import GithubCorner from '../GithubCorner/GithubCorner';
 import { useApplicationContext } from 'src/features/application/context';
@@ -105,14 +103,14 @@ function Navigation() {
                         </Link>
                       </Menu.Item>
                       <Menu.Item>
-                        <IconButton
+                        <Button
                           onClick={logoutDesktop}
-                          variant={IconButtonVariant.FLAT}
+                          variant={ButtonVariant.FLAT}
                           className="w-40 text-red-600 hover:bg-red-100"
                           icon={<LogoutIcon className="h-5 w-5" />}
                         >
                           Sign Out
-                        </IconButton>
+                        </Button>
                       </Menu.Item>
                     </div>
                   </Menu.Items>
@@ -164,14 +162,14 @@ function Navigation() {
             Settings
           </IconButtonLink>
         </Link>
-        <IconButton
+        <Button
           onClick={logoutMobile}
-          variant={IconButtonVariant.FLAT}
+          variant={ButtonVariant.FLAT}
           className="w-[95%] justify-center text-red-600 hover:bg-red-100 lg:w-auto"
           icon={<LogoutIcon className="h-5 w-5" />}
         >
           Sign Out
-        </IconButton>
+        </Button>
       </BurgerMenu>
     </nav>
   );

src/pages/_app.tsx

@@ -12,8 +12,8 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ApplicationContext.Provider value={manager}>
+      <Toaster position="bottom-center" />
       <PageLayout>
-        <Toaster position="bottom-center" />
         <Component {...pageProps} />
       </PageLayout>
     </ApplicationContext.Provider>

src/pages/settings/index.tsx

@@ -3,9 +3,7 @@ import { TrashIcon } from '@heroicons/react/outline';
 import withAnimation from '../../shared/HOC/withAnimation';
 import Header from 'src/shared/components/Header/Header';
 import withProtectedRoute from 'src/shared/HOC/withProtectedRoute';
-import IconButton, {
-  IconButtonVariant,
-} from 'src/shared/components/IconButton/IconButton';
+
 import Button, { ButtonVariant } from 'src/shared/components/Button/Button';
 import { useSettingsManager } from 'src/features/settings/settingsManager';
 import StyledDialog from 'src/shared/components/StyledDialog/StyledDialog';
@@ -18,6 +16,7 @@ function SettingsPage() {
     openDeleteModal,
     closeDeleteModal,
     handleOnAccountDelete,
+    isRemoving,
   } = useSettingsManager();
 
   return (
@@ -30,15 +29,15 @@ function SettingsPage() {
         <Header>Hi {user?.displayName}!</Header>
         <div className="flex flex-col items-center justify-center space-y-2">
           <div className="flex w-full md:ml-2 md:w-auto">
-            <IconButton
-              variant={IconButtonVariant.DANGER}
+            <Button
+              variant={ButtonVariant.DANGER}
               title="Delete my account"
               className="mt-2 ml-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
               onClick={openDeleteModal}
               icon={<TrashIcon className="h-5 w-5" />}
             >
               Delete my account
-            </IconButton>
+            </Button>
           </div>
         </div>
         <StyledDialog
@@ -58,17 +57,19 @@ function SettingsPage() {
                   variant={ButtonVariant.SECONDARY}
                   onClick={closeDeleteModal}
                   className="uppercase"
+                  disabled={isRemoving}
                 >
                   Cancel
                 </Button>
-                <IconButton
-                  variant={IconButtonVariant.DANGER}
+                <Button
+                  variant={ButtonVariant.DANGER}
                   onClick={handleOnAccountDelete}
                   icon={<TrashIcon className="h-5 w-5" />}
                   className="uppercase"
+                  isLoading={isRemoving}
                 >
                   Confirm
-                </IconButton>
+                </Button>
               </div>
             </>
           }