added toasts

src/constants/dom/index.ts

@@ -0,0 +1 @@
+export const isTablet = () => window.innerWidth < 599;

src/containers/App.tsx

@@ -13,6 +13,8 @@ import { SWRConfigProvider } from '~/utils/providers/SWRConfigProvider';
 import { observer } from 'mobx-react';
 import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 import { SearchProvider } from '~/utils/providers/SearchProvider';
+import { Toaster } from 'react-hot-toast';
+import { ToastProvider } from '~/utils/providers/ToastProvider';
 
 const App: VFC = observer(() => {
   useGlobalLoader();
@@ -25,6 +27,7 @@ const App: VFC = observer(() => {
             <PageCoverProvider>
               <SearchProvider>
                 <MainLayout>
+                  <ToastProvider />
                   <Modal />
                   <Sprites />
 

src/hooks/comments/useCommentFormFormik.ts

@@ -44,7 +44,6 @@ export const useCommentFormFormik = (
         await sendData(values);
         onSuccess(helpers)();
       } catch (error) {
-        console.log('error', error);
         onSuccess(helpers)(error);
       }
     },

src/hooks/node/useNodeFormFormik.ts

@@ -8,14 +8,13 @@ import { showErrorToast } from '~/utils/errors/showToast';
 
 const validationSchema = object().shape({});
 
-const afterSubmit = ({ resetForm, setStatus, setSubmitting, setErrors }: FormikHelpers<INode>) => (
+const afterSubmit = ({ resetForm, setSubmitting, setErrors }: FormikHelpers<INode>) => (
   e?: string,
   errors?: Record<string, string>
 ) => {
   setSubmitting(false);
 
   if (e) {
-    setStatus(e);
     showErrorToast(e);
     return;
   }

src/utils/errors/showToast.ts

@@ -1,8 +1,21 @@
-const handle = (message: string) => console.warn(message);
+import { hideToast, showToastError } from '~/utils/toast';
+import { has, path } from 'ramda';
+import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
+
+let toastId = '';
+
+const handleUnknown = (message: string) => console.warn(message);
+const handleTranslated = (message: string) => {
+  if (toastId) {
+    hideToast(toastId);
+  }
+
+  toastId = showToastError(ERROR_LITERAL[message]);
+};
 
 export const showErrorToast = (error: unknown) => {
-  if (typeof error === 'string') {
-    handle(error);
+  if (typeof error === 'string' && has(error, ERROR_LITERAL)) {
+    handleTranslated(error);
     return;
   }
 
@@ -11,5 +24,17 @@ export const showErrorToast = (error: unknown) => {
     return;
   }
 
-  handle(error.message);
+  // TODO: Network error
+  if (error.message === 'Network Error') {
+    handleTranslated(ERRORS.NETWORK_ERROR);
+    return;
+  }
+
+  const messageFromBackend = String(path(['response', 'data', 'error'], error));
+  if (messageFromBackend && has(messageFromBackend, ERROR_LITERAL)) {
+    handleTranslated(messageFromBackend);
+    return;
+  }
+
+  handleUnknown(error.message);
 };

src/utils/providers/ToastProvider.tsx

@@ -0,0 +1,11 @@
+import { Toaster } from 'react-hot-toast';
+import React from 'react';
+
+const containerStyle = {
+  top: 10,
+  left: 10,
+  bottom: 10,
+  right: 10,
+};
+
+export const ToastProvider = () => <Toaster containerStyle={containerStyle} />;

src/utils/toast/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import toast from 'react-hot-toast';
+import styles from './styles.module.scss';
+import { ToastOptions } from 'react-hot-toast/dist/core/types';
+import classNames from 'classnames';
+import { isTablet } from '~/constants/dom';
+
+const defaultOptions: ToastOptions = {
+  icon: null,
+  duration: 3000,
+  position: isTablet() ? 'top-center' : 'bottom-center',
+};
+
+export const showToastError = (message: string) =>
+  toast.error(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
+    ...defaultOptions,
+    className: classNames(styles.toast, styles.error),
+  });
+
+export const hideToast = (id: string) => toast.dismiss(id);

src/utils/toast/styles.module.scss

@@ -0,0 +1,14 @@
+@import "src/styles/variables";
+
+.toast {
+  @include outer_shadow;
+  cursor: pointer;
+}
+
+.error {
+  font: $font_14_semibold;
+  background: $red_gradient_alt;
+  color: white;
+  user-select: none;
+  text-transform: uppercase;
+}