Refactoring ApiProvider

AxeRicin · Jan 9, 2024 · 8b8f60b · 8b8f60b
1 parent 767ec44
commit 8b8f60b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 41 deletions.
diff --git a/frontend/src/components/modals/AddChannel.js b/frontend/src/components/modals/AddChannel.js
@@ -6,6 +6,7 @@ import {
 } from 'react';
 import * as yup from 'yup';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { modalClose } from '../../slices/modalSlice';
 import { ApiContext } from '../../hoc/ApiProvider';
 import { FilterContext } from '../../hoc/FilterProfanityProvider';
@@ -39,12 +40,16 @@ const ModalAddChannel = () => {
         name: '',
       }}
       validationSchema={newChannelSchema}
-      onSubmit={(values) => {
-        setDisabledButton(true);
-        sendNewChannel(filter.clean(values.name));
-        setTimeout(() => {
+      onSubmit={async (values) => {
+        try {
+          setDisabledButton(true);
+          await sendNewChannel(filter.clean(values.name));
+          dispatch(modalClose());
+          toast.success(t('notifications.channelAdd'));
+        } catch (error) {
           setDisabledButton(false);
-        }, 5500);
+          toast.error(t('notifications.connectionError'));
+        }
       }}
     >
       {(props) => (

diff --git a/frontend/src/components/modals/RemoveChannel.js b/frontend/src/components/modals/RemoveChannel.js
@@ -2,6 +2,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Modal, Button } from 'react-bootstrap';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { modalClose } from '../../slices/modalSlice';
 import { ApiContext } from '../../hoc/ApiProvider';
 
@@ -14,12 +15,16 @@ const RemoveChannel = () => {
 
   const handleCancel = () => dispatch(modalClose());
 
-  const handleRemoveChannel = () => {
-    setDisabledButton(true);
-    sendRemoveChannel(channelId);
-    setTimeout(() => {
+  const handleRemoveChannel = async () => {
+    try {
+      setDisabledButton(true);
+      await sendRemoveChannel(channelId);
+      dispatch(modalClose());
+      toast.success(t('notifications.channelRemove'));
+    } catch (error) {
       setDisabledButton(false);
-    }, 5500);
+      toast.error(t('notifications.connectionError'));
+    }
   };
 
   return (

diff --git a/frontend/src/components/modals/RenameChannel.js b/frontend/src/components/modals/RenameChannel.js
@@ -6,6 +6,7 @@ import {
 } from 'react';
 import * as yup from 'yup';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { modalClose } from '../../slices/modalSlice';
 import { ApiContext } from '../../hoc/ApiProvider';
 import { FilterContext } from '../../hoc/FilterProfanityProvider';
@@ -39,12 +40,16 @@ const RenameChannel = () => {
         name: '',
       }}
       validationSchema={newChannelSchema}
-      onSubmit={(values) => {
-        setDisabledButton(true);
-        sendRenameChannel(channelId, filter.clean(values.name));
-        setTimeout(() => {
+      onSubmit={async (values) => {
+        try {
+          setDisabledButton(true);
+          await sendRenameChannel(channelId, filter.clean(values.name));
+          dispatch(modalClose());
+          toast.success(t('notifications.channelRename'));
+        } catch (err) {
           setDisabledButton(false);
-        }, 5500);
+          toast.error(t('notifications.connectionError'));
+        }
       }}
     >
       {(props) => (

diff --git a/frontend/src/hoc/ApiProvider.js b/frontend/src/hoc/ApiProvider.js
@@ -2,22 +2,18 @@
 
 import { createContext, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 import { io } from 'socket.io-client';
 import { addMessage } from '../slices/messagesSlice';
 import {
   addChannel, setCurrentChannel, removeChannel, renameChannel,
 } from '../slices/channelSlice';
-import { modalClose } from '../slices/modalSlice';
 
 const msTimeout = 5000;
 
 export const ApiContext = createContext(null);
 
 const ApiProvider = ({ children }) => {
   const dispatch = useDispatch();
-  const { t } = useTranslation();
   const socket = io({
     autoConnect: false,
   });
@@ -53,38 +49,40 @@ const ApiProvider = ({ children }) => {
     });
   });
 
-  const sendNewChannel = (nameNewChannel) => {
+  const sendNewChannel = (nameNewChannel) => new Promise((resolve, rejected) => {
     socket.timeout(msTimeout).emit('newChannel', { name: nameNewChannel }, (err, response) => {
-      if (err) return toast.error(t('notifications.connectionError'));
-      const { id } = response.data;
-      dispatch(addChannel(response.data));
-      dispatch(setCurrentChannel(id));
-      dispatch(modalClose());
-      toast.success(t('notifications.channelAdd'));
+      if (err) {
+        rejected(err);
+      } else {
+        const { id } = response.data;
+        dispatch(addChannel(response.data));
+        dispatch(setCurrentChannel(id));
+        resolve();
+      }
     });
-  };
+  });
 
-  const sendRemoveChannel = (id) => {
-    socket.timeout(msTimeout).emit('removeChannel', { id }, (err, response) => {
-      if (err) return toast.error(t('notifications.connectionError'));
-      if (response.status === 'ok') {
+  const sendRemoveChannel = (id) => new Promise((resolve, rejected) => {
+    socket.timeout(msTimeout).emit('removeChannel', { id }, (err) => {
+      if (err) {
+        rejected(err);
+      } else {
         dispatch(removeChannel(id));
-        dispatch(modalClose());
-        toast.success(t('notifications.channelRemove'));
+        resolve();
       }
     });
-  };
+  });
 
-  const sendRenameChannel = (id, newName) => {
-    socket.timeout(msTimeout).emit('renameChannel', { id, name: newName }, (err, response) => {
-      if (err) return toast.error(t('notifications.connectionError'));
-      if (response.status === 'ok') {
+  const sendRenameChannel = (id, newName) => new Promise((resolve, rejected) => {
+    socket.timeout(msTimeout).emit('renameChannel', { id, name: newName }, (err) => {
+      if (err) {
+        rejected(err);
+      } else {
         dispatch(renameChannel({ id, name: newName }));
-        dispatch(modalClose());
-        toast.success(t('notifications.channelRename'));
+        resolve();
       }
     });
-  };
+  });
 
   const value = useMemo(() => ({
     disconnectSocket,