Add interaction with server on channel renaming + modal ux improve

1. Add renaming channel fuction in socket 2. Modal emitting on server event of renaming 3. Validating new name: it must be unique 4. Improved usability: if validating failed, input will be focused again
SamIvan-ark · Dec 20, 2023 · 45cee6a · 45cee6a
1 parent a153f86
commit 45cee6a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/frontend/src/components/chat/Chat.jsx b/frontend/src/components/chat/Chat.jsx
@@ -8,6 +8,7 @@ import { addMessage } from '../../slices/messagesSlice';
 import {
   addChannel,
   removeChannel,
+  renameChannel,
   setNeedToMove,
   setActive,
 } from '../../slices/channelsSlice';
@@ -19,9 +20,19 @@ const Chat = () => {
 
   useEffect(() => {
     const onNewMessage = (message) => dispatch(addMessage(message));
+    const onRenamingChannel = ({ id, name }) => {
+      dispatch(renameChannel({
+        id,
+        changes: {
+          name,
+        },
+      }));
+    };
     socket.on('newMessage', onNewMessage);
+    socket.on('renameChannel', onRenamingChannel);
     return () => {
       socket.off('newMessage', onNewMessage);
+      socket.off('renameChannel', onRenamingChannel);
     };
   }, []);
 

diff --git a/frontend/src/components/modals/AddChannelModal.jsx b/frontend/src/components/modals/AddChannelModal.jsx
@@ -1,7 +1,7 @@
+import { useRef, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Modal, Form } from 'react-bootstrap';
 import { useFormik } from 'formik';
-
 import { closeModal } from '../../slices/modalsSlice';
 import { setNeedToMove } from '../../slices/channelsSlice';
 import { addChannel } from '../../socket';
@@ -34,6 +34,12 @@ const AddChannel = () => {
     },
   });
 
+  const inputRef = useRef();
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [formik.errors.channelName]);
+
   return (
     <Modal show onHide={() => handleClose()}>
       <Modal.Header closeButton>
@@ -46,9 +52,10 @@ const AddChannel = () => {
               Имя канала
             </Form.Label>
             <Form.Control
+              ref={inputRef}
+              isInvalid={formik.errors.channelName && formik.touched.channelName}
               disabled={formik.isSubmitting}
               className="form-control"
-              autoFocus
               required
               id="channelName"
               name="channelName"

diff --git a/frontend/src/components/modals/RenameChannelModal.jsx b/frontend/src/components/modals/RenameChannelModal.jsx
@@ -4,32 +4,38 @@ import { useFormik } from 'formik';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { closeModal } from '../../slices/modalsSlice';
-import { renameChannel } from '../../slices/channelsSlice';
+import { renameChannel } from '../../socket';
 
 const RenameChannelModal = () => {
+  const allChannels = useSelector((state) => state.channels.entities);
+  const takenNames = Object.values(allChannels).map(({ name }) => name);
   const dispatch = useDispatch();
   const { invokedOn } = useSelector((state) => state.modals);
   const { name } = useSelector((state) => state
     .channels
     .entities[invokedOn]);
 
   const handleClose = () => dispatch(closeModal());
-  const handleSubmit = ({ name: newName, id }) => {
-    dispatch(renameChannel({
-      id,
-      changes: {
-        name: newName,
-      },
-    }));
-    handleClose();
-  };
 
   const formik = useFormik({
     initialValues: {
       newNameOfChannel: name,
     },
     onSubmit: ({ newNameOfChannel }) => {
-      handleSubmit({ name: newNameOfChannel, id: invokedOn });
+      if (takenNames.includes(newNameOfChannel)) {
+        formik.setErrors({ newNameOfChannel: 'Канал с таким именем уже существует' });
+        formik.setSubmitting(false);
+        return;
+      }
+      formik.setErrors({});
+      renameChannel(
+        { name: newNameOfChannel, id: invokedOn },
+        ({ status }) => {
+          if (status === 'ok') {
+            handleClose();
+          }
+        },
+      );
     },
   });
 
@@ -39,6 +45,10 @@ const RenameChannelModal = () => {
     inputRef.current.select();
   }, []);
 
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [formik.errors.newNameOfChannel]);
+
   return (
     <Modal show onHide={() => handleClose()}>
       <Modal.Header closeButton>
@@ -51,6 +61,8 @@ const RenameChannelModal = () => {
               Новое имя канала:
             </Form.Label>
             <Form.Control
+              isInvalid={formik.errors.newNameOfChannel && formik.touched.newNameOfChannel}
+              disabled={formik.isSubmitting}
               ref={inputRef}
               className="form-control"
               selected
@@ -61,9 +73,10 @@ const RenameChannelModal = () => {
               onChange={formik.handleChange}
               value={formik.values.newNameOfChannel}
             />
+            {formik.errors.newNameOfChannel ? <div className="text-danger">{formik.errors.newNameOfChannel}</div> : null}
             <div className="d-flex justify-content-end">
               <Form.Control onClick={() => handleClose()} className="me-2 btn btn-secondary" type="button" value="Отменить" />
-              <Form.Control className="btn btn-primary" type="submit" value="Отправить" />
+              <Form.Control disabled={formik.isSubmitting} className="btn btn-primary" type="submit" value="Отправить" />
             </div>
           </Form.Group>
         </Form>

diff --git a/frontend/src/socket.js b/frontend/src/socket.js
@@ -4,14 +4,18 @@ const socketEventsNames = {
   NEW_MESSAGE: 'newMessage',
   NEW_CHANNEL: 'newChannel',
   REMOVE_CHANNEL: 'removeChannel',
+  RENAME_CHANNEL: 'renameChannel',
 };
 
 const socket = io({
   autoConnect: false,
 });
 
 socket.on('connect', () => console.log('connected'));
-
+// TODO: а как лучше — оставить так, что на каждое событие своя функция,
+// или сделать одну функцию на все события сразу?
+// Если одна абстракция лучше, где хранить все эти красивые имена событий?
+// С одной стороны, сейчас достаточно удобно сделано, с другой — много дублирования
 export const sendMessage = (data, cb = null) => {
   socket.emit(socketEventsNames.NEW_MESSAGE, data, cb);
 };
@@ -24,4 +28,8 @@ export const removeChannel = (data, cb = null) => {
   socket.emit(socketEventsNames.REMOVE_CHANNEL, data, cb);
 };
 
+export const renameChannel = (data, cb = null) => {
+  socket.emit(socketEventsNames.RENAME_CHANNEL, data, cb);
+};
+
 export default socket;