added more toasts

src/constants/errors.ts

@@ -46,16 +46,16 @@ export const ERRORS = {
 };
 
 export const ERROR_LITERAL = {
-  [ERRORS.NOT_AN_EMAIL]: 'Введите правильный e-mail',
+  [ERRORS.NOT_AN_EMAIL]: 'Введи правильный e-mail',
-  [ERRORS.TOO_SHIRT]: 'Добавьте хоть что-нибудь',
+  [ERRORS.TOO_SHIRT]: 'Добавь хоть что-нибудь',
   [ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
   [ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
-  [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
+  [ERRORS.FILES_REQUIRED]: 'Добавь файлы',
   [ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
   [ERRORS.UNKNOWN_NODE_TYPE]: 'Неизвестный тип поста',
   [ERRORS.URL_INVALID]: 'Неизвестный адрес',
   [ERRORS.FILES_AUDIO_REQUIRED]: 'Нужна хотя бы одна песня',
-  [ERRORS.NOT_ENOUGH_RIGHTS]: 'У вас недостаточно прав',
+  [ERRORS.NOT_ENOUGH_RIGHTS]: 'У тебя недостаточно прав',
   [ERRORS.INCORRECT_DATA]: 'Недопустимые данные',
   [ERRORS.IMAGE_CONVERSION_FAILED]: 'Не удалось изменить изображение',
   [ERRORS.USER_NOT_FOUND]: 'Пользователь не найден',

src/constants/phrases.ts

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 
 export const PHRASES = {
+  WELCOME: ['Ого! Кто это тут у нас?'],
+  GOODBYE: ['Возвращайся, мы будем скучать'],
   SIMPLE: [
     'Ответ на твоё одиночество кроется в одиночестве. Удивительно? Нет.',
     'Ах, Боря, Боренька, неужели это всё, на что мы с тобою способны?',
@@ -63,5 +65,8 @@ export const PHRASES = {
   ],
 };
 
+export const getRandomPhrase = (key: keyof typeof PHRASES) =>
+  PHRASES[key][Math.floor(Math.random() * PHRASES[key].length)];
+
 export const useRandomPhrase = (key: keyof typeof PHRASES) =>
-  useMemo(() => PHRASES[key][Math.floor(Math.random() * PHRASES[key].length)], [key]);
+  useMemo(() => getRandomPhrase(key), [key]);

src/redux/auth/sagas.ts

@@ -58,6 +58,9 @@ import { AxiosError } from 'axios';
 import { labGetUpdates } from '~/redux/lab/actions';
 import { getMOBXStore } from '~/store';
 import { Dialog } from '~/constants/modal';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { showToastSuccess, showToastInfo } from '~/utils/toast';
+import { getRandomPhrase } from '~/constants/phrases';
 
 const modalStore = getMOBXStore().modal;
 
@@ -79,8 +82,9 @@ function* sendLoginRequestSaga({ username, password }: ReturnType<typeof userSen
     yield put(authLoggedIn());
 
     modalStore.hide();
+    showToastInfo(getRandomPhrase('WELCOME'));
   } catch (error) {
-    yield put(userSetLoginError(error.message));
+    showErrorToast(error);
   }
 }
 
@@ -128,6 +132,7 @@ function* logoutSaga() {
       notifications: [],
     })
   );
+  showToastInfo(getRandomPhrase('GOODBYE'));
 }
 
 function* loadProfile({ username }: ReturnType<typeof authLoadProfile>): SagaIterator<boolean> {
@@ -192,7 +197,9 @@ function* getUpdates() {
         })
       );
     }
-  } catch (error) {}
+  } catch (error) {
+    showErrorToast(error);
+  }
 }
 
 function* startPollingSaga() {
@@ -220,8 +227,9 @@ function* patchUser(payload: ReturnType<typeof authPatchUser>) {
     yield put(authSetUser({ ...me, ...user }));
     yield put(authSetProfile({ user: { ...me, ...user }, tab: 'profile' }));
   } catch (error) {
-    if (isEmpty(error.response.data.errors)) return;
+    showErrorToast(error);
 
+    if (isEmpty(error.response.data.errors)) return;
     yield put(authSetProfile({ patch_errors: error.response.data.errors }));
   }
 }
@@ -237,6 +245,8 @@ function* requestRestoreCode({ field }: ReturnType<typeof authRequestRestoreCode
 
     yield put(authSetRestore({ is_loading: false, is_succesfull: true }));
   } catch (error) {
+    showErrorToast(error);
+
     return yield put(authSetRestore({ is_loading: false, error: error.message }));
   }
 }
@@ -255,6 +265,8 @@ function* showRestoreModal({ code }: ReturnType<typeof authShowRestoreModal>) {
 
     modalStore.setCurrent(Dialog.RestoreRequest);
   } catch (error) {
+    showErrorToast(error);
+
     yield put(
       authSetRestore({ is_loading: false, error: error.message || ERRORS.CODE_IS_INVALID })
     );
@@ -283,9 +295,7 @@ function* restorePassword({ password }: ReturnType<typeof authRestorePassword>)
 
     yield call(refreshUser);
   } catch (error) {
-    return yield put(
+    showErrorToast(error);
-      authSetRestore({ is_loading: false, error: error.message || ERRORS.CODE_IS_INVALID })
-    );
   }
 }
 
@@ -295,7 +305,7 @@ function* getSocials() {
     const data: Unwrap<typeof apiGetSocials> = yield call(apiGetSocials);
     yield put(authSetSocials({ accounts: data.accounts }));
   } catch (error) {
-    yield put(authSetSocials({ error: error.message }));
+    showErrorToast(error);
   } finally {
     yield put(authSetSocials({ is_loading: false }));
   }
@@ -312,7 +322,7 @@ function* dropSocial({ provider, id }: ReturnType<typeof authDropSocial>) {
 
     yield call(getSocials);
   } catch (error) {
-    yield put(authSetSocials({ error: error.message }));
+    showErrorToast(error);
   }
 }
 
@@ -335,8 +345,8 @@ function* attachSocial({ token }: ReturnType<typeof authAttachSocial>) {
     }
 
     yield put(authSetSocials({ accounts: [...accounts, data.account] }));
-  } catch (e) {
+  } catch (error) {
-    yield put(authSetSocials({ error: e.message }));
+    showErrorToast(error);
   } finally {
     yield put(authSetSocials({ is_loading: false }));
   }
@@ -370,7 +380,7 @@ function* loginWithSocial({ token }: ReturnType<typeof authLoginWithSocial>) {
       return;
     }
 
-    yield put(userSetLoginError(error.message));
+    showErrorToast(error);
   }
 }
 
@@ -422,7 +432,7 @@ function* authRegisterSocial({ username, password }: ReturnType<typeof authSendR
       return;
     }
 
-    yield put(authSetRegisterSocial({ error: error.message }));
+    showErrorToast(error);
   }
 }
 

src/utils/toast/index.tsx

@@ -17,4 +17,16 @@ export const showToastError = (message: string) =>
     className: classNames(styles.toast, styles.error),
   });
 
+export const showToastSuccess = (message: string) =>
+  toast.success(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
+    ...defaultOptions,
+    className: classNames(styles.toast, styles.success),
+  });
+
+export const showToastInfo = (message: string) =>
+  toast.success(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
+    ...defaultOptions,
+    className: classNames(styles.toast, styles.info),
+  });
+
 export const hideToast = (id: string) => toast.dismiss(id);

src/utils/toast/styles.module.scss

@@ -3,12 +3,20 @@
 .toast {
   @include outer_shadow;
   cursor: pointer;
+  font: $font_14_semibold;
+  user-select: none;
+  text-transform: uppercase;
+  color: white;
 }
 
 .error {
-  font: $font_14_semibold;
   background: $red_gradient_alt;
-  color: white;
+}
-  user-select: none;
+
-  text-transform: uppercase;
+.success {
+  background: $green_gradient;
+}
+
+.info {
+  background: $cyan_gradient;
 }