Convert withModal to useModal

client/js/components/modals/AddChannel.js

@@ -1,20 +1,23 @@
-import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
-import get from 'lodash/get';
+import React, { memo, useState, useEffect, useRef } from 'react';
+import Modal from 'react-modal';
+import { useSelector, useDispatch } from 'react-redux';
 import { FiUsers, FiX } from 'react-icons/fi';
-import withModal from 'components/modals/withModal';
+import useModal from 'components/modals/useModal';
 import Button from 'components/ui/Button';
 import { join } from 'state/channels';
 import { select } from 'state/tab';
 import { searchChannels } from 'state/channelSearch';
 import { linkify } from 'utils';
 
-const Channel = memo(({ server, name, topic, userCount, joined, ...props }) => {
-  const handleJoinClick = useCallback(() => props.join([name], server), []);
+const Channel = memo(({ server, name, topic, userCount, joined }) => {
+  const dispatch = useDispatch();
+
+  const handleClick = () => dispatch(join([name], server));
 
   return (
     <div className="modal-channel-result">
       <div className="modal-channel-result-header">
-        <h2 className="modal-channel-name" onClick={handleJoinClick}>
+        <h2 className="modal-channel-name" onClick={handleClick}>
           {name}
         </h2>
         <FiUsers />
@@ -25,7 +28,7 @@ const Channel = memo(({ server, name, topic, userCount, joined, ...props }) => {
           <Button
             className="modal-channel-button-join"
             category="normal"
-            onClick={handleJoinClick}
+            onClick={handleClick}
           >
             Join
           </Button>
@@ -36,7 +39,12 @@ const Channel = memo(({ server, name, topic, userCount, joined, ...props }) => {
   );
 });
 
-const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
+const AddChannel = () => {
+  const [modal, server, closeModal] = useModal('channel');
+
+  const channels = useSelector(state => state.channels);
+  const search = useSelector(state => state.channelSearch);
+  const dispatch = useDispatch();
   const [q, setQ] = useState('');
 
   const inputEl = useRef();
@@ -44,52 +52,51 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
   const prevSearch = useRef('');
 
   useEffect(() => {
-    inputEl.current.focus();
-    props.searchChannels(server, '');
-  }, []);
+    if (modal.isOpen) {
+      dispatch(searchChannels(server, ''));
+      setTimeout(() => inputEl.current.focus(), 0);
+    } else {
+      setQ('');
+    }
+  }, [modal.isOpen]);
 
-  const handleSearch = useCallback(
-    e => {
-      let nextQ = e.target.value.trim().toLowerCase();
-      setQ(nextQ);
+  const handleSearch = e => {
+    let nextQ = e.target.value.trim().toLowerCase();
+    setQ(nextQ);
 
-      if (nextQ !== q) {
-        resultsEl.current.scrollTop = 0;
+    if (nextQ !== q) {
+      resultsEl.current.scrollTop = 0;
 
-        while (nextQ.charAt(0) === '#') {
-          nextQ = nextQ.slice(1);
-        }
-
-        if (nextQ !== prevSearch.current) {
-          prevSearch.current = nextQ;
-          props.searchChannels(server, nextQ);
-        }
+      while (nextQ.charAt(0) === '#') {
+        nextQ = nextQ.slice(1);
       }
-    },
-    [q]
-  );
 
-  const handleKey = useCallback(e => {
+      if (nextQ !== prevSearch.current) {
+        prevSearch.current = nextQ;
+        dispatch(searchChannels(server, nextQ));
+      }
+    }
+  };
+
+  const handleKey = e => {
     if (e.key === 'Enter') {
       let channel = e.target.value.trim();
 
       if (channel !== '') {
-        onClose(false);
+        closeModal(false);
 
         if (channel.charAt(0) !== '#') {
           channel = `#${channel}`;
         }
 
-        props.join([channel], server);
-        props.select(server, channel);
+        dispatch(join([channel], server));
+        dispatch(select(server, channel));
       }
     }
-  }, []);
+  };
 
-  const handleLoadMore = useCallback(
-    () => props.searchChannels(server, q, search.results.length),
-    [q, search.results.length]
-  );
+  const handleLoadMore = () =>
+    dispatch(searchChannels(server, q, search.results.length));
 
   let hasMore = !search.end;
   if (hasMore) {
@@ -104,7 +111,7 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
   }
 
   return (
-    <>
+    <Modal {...modal}>
       <div className="modal-channel-input-wrap">
         <input
           ref={inputEl}
@@ -117,7 +124,7 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
         <Button
           icon={FiX}
           className="modal-close modal-channel-close"
-          onClick={onClose}
+          onClick={closeModal}
         />
       </div>
       <div ref={resultsEl} className="modal-channel-results">
@@ -125,12 +132,7 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
           <Channel
             key={`${server} ${channel.name}`}
             server={server}
-            join={props.join}
-            joined={get(
-              props.channels,
-              [server, channel.name, 'joined'],
-              false
-            )}
+            joined={channels[server]?.[channel.name]?.joined}
             {...channel}
           />
         ))}
@@ -143,15 +145,8 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
           </Button>
         )}
       </div>
-    </>
+    </Modal>
   );
 };
 
-export default withModal({
-  name: 'channel',
-  state: {
-    channels: state => state.channels,
-    search: state => state.channelSearch
-  },
-  actions: { searchChannels, join, select }
-})(AddChannel);
+export default AddChannel;