From e24ea4afeb72895017253751c09919e5409403dc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 4 Jan 2022 21:22:44 +0700 Subject: [PATCH] added more toasts --- src/constants/errors.ts | 8 +++---- src/constants/phrases.ts | 7 +++++- src/redux/auth/sagas.ts | 34 +++++++++++++++++++----------- src/utils/toast/index.tsx | 12 +++++++++++ src/utils/toast/styles.module.scss | 16 ++++++++++---- 5 files changed, 56 insertions(+), 21 deletions(-) diff --git a/src/constants/errors.ts b/src/constants/errors.ts index bf88f347..2c35ba5a 100644 --- a/src/constants/errors.ts +++ b/src/constants/errors.ts @@ -46,16 +46,16 @@ export const ERRORS = { }; export const ERROR_LITERAL = { - [ERRORS.NOT_AN_EMAIL]: 'Введите правильный e-mail', - [ERRORS.TOO_SHIRT]: 'Добавьте хоть что-нибудь', + [ERRORS.NOT_AN_EMAIL]: 'Введи правильный e-mail', + [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]: 'Пользователь не найден', diff --git a/src/constants/phrases.ts b/src/constants/phrases.ts index 0f283477..07379f64 100644 --- a/src/constants/phrases.ts +++ b/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]); diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 8c9bf979..df18f05b 100644 --- a/src/redux/auth/sagas.ts +++ b/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): SagaIterator { @@ -192,7 +197,9 @@ function* getUpdates() { }) ); } - } catch (error) {} + } catch (error) { + showErrorToast(error); + } } function* startPollingSaga() { @@ -220,8 +227,9 @@ function* patchUser(payload: ReturnType) { 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) { 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) yield call(refreshUser); } catch (error) { - return yield put( - authSetRestore({ is_loading: false, error: error.message || ERRORS.CODE_IS_INVALID }) - ); + showErrorToast(error); } } @@ -295,7 +305,7 @@ function* getSocials() { const data: Unwrap = 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) { yield call(getSocials); } catch (error) { - yield put(authSetSocials({ error: error.message })); + showErrorToast(error); } } @@ -335,8 +345,8 @@ function* attachSocial({ token }: ReturnType) { } yield put(authSetSocials({ accounts: [...accounts, data.account] })); - } catch (e) { - yield put(authSetSocials({ error: e.message })); + } catch (error) { + showErrorToast(error); } finally { yield put(authSetSocials({ is_loading: false })); } @@ -370,7 +380,7 @@ function* loginWithSocial({ token }: ReturnType) { return; } - yield put(userSetLoginError(error.message)); + showErrorToast(error); } } @@ -422,7 +432,7 @@ function* authRegisterSocial({ username, password }: ReturnType className: classNames(styles.toast, styles.error), }); +export const showToastSuccess = (message: string) => + toast.success(t => toast.dismiss(t.id)}>{message}, { + ...defaultOptions, + className: classNames(styles.toast, styles.success), + }); + +export const showToastInfo = (message: string) => + toast.success(t => toast.dismiss(t.id)}>{message}, { + ...defaultOptions, + className: classNames(styles.toast, styles.info), + }); + export const hideToast = (id: string) => toast.dismiss(id); diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss index 71bfde4e..e0738133 100644 --- a/src/utils/toast/styles.module.scss +++ b/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; }