Add react-modal, replace confirm usage with it

client/js/components/App.js

@@ -1,9 +1,10 @@
-import React, { Suspense, lazy } from 'react';
+import React, { Suspense, lazy, useState } from 'react';
 import Route from 'containers/Route';
 import AppInfo from 'components/AppInfo';
 import TabList from 'components/TabList';
 import cn from 'classnames';
 
+const Modals = lazy(() => import('components/modals'));
 const Chat = lazy(() => import('containers/Chat'));
 const Connect = lazy(() => import('containers/Connect'));
 const Settings = lazy(() => import('containers/Settings'));
@@ -18,8 +19,14 @@ const App = ({
   select,
   push,
   hideMenu,
-  newVersionAvailable
+  newVersionAvailable,
+  hasOpenModals
 }) => {
+  const [renderModals, setRenderModals] = useState(false);
+  if (!renderModals && hasOpenModals) {
+    setRenderModals(true);
+  }
+
   const mainClass = cn('main-container', {
     'off-canvas': showTabList
   });
@@ -54,10 +61,8 @@ const App = ({
           push={push}
         />
         <div className={mainClass}>
-          <Suspense
-            maxDuration={1000}
-            fallback={<div className="suspense-fallback">...</div>}
-          >
+          <Suspense fallback={<div className="suspense-fallback">...</div>}>
+            {renderModals && <Modals />}
             <Route name="chat">
               <Chat />
             </Route>

client/js/components/modals/Confirm.js

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import withModal from 'components/modals/withModal';
+import Button from 'components/ui/Button';
+
+const Confirm = ({
+  payload: { question, confirmation, onConfirm },
+  onClose
+}) => {
+  const handleConfirm = useCallback(() => {
+    onClose(false);
+    onConfirm();
+  }, []);
+
+  return (
+    <>
+      <p>{question}</p>
+      <Button onClick={handleConfirm}>{confirmation || 'OK'}</Button>
+      <Button category="normal" onClick={onClose}>
+        Cancel
+      </Button>
+    </>
+  );
+};
+
+export default withModal({
+  name: 'confirm'
+})(Confirm);

client/js/components/modals/index.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import Confirm from 'components/modals/Confirm';
+
+const Modals = () => (
+  <>
+    <Confirm />
+  </>
+);
+
+export default memo(Modals, () => true);

client/js/components/modals/withModal.js

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import Modal from 'react-modal';
+import { createSelector } from 'reselect';
+import { getModals, closeModal } from 'state/modals';
+import connect from 'utils/connect';
+
+Modal.setAppElement('#root');
+
+export default function withModal({ name, ...modalProps }) {
+  modalProps = {
+    className: {
+      base: `modal modal-${name}`,
+      afterOpen: 'modal-opening',
+      beforeClose: 'modal-closing'
+    },
+    overlayClassName: {
+      base: 'modal-overlay',
+      afterOpen: 'modal-overlay-opening',
+      beforeClose: 'modal-overlay-closing'
+    },
+    closeTimeoutMS: 200,
+    ...modalProps
+  };
+
+  return WrappedComponent => {
+    const ReduxModal = ({ onRequestClose, ...props }) => {
+      const handleRequestClose = useCallback(
+        (dismissed = true) => {
+          onRequestClose();
+
+          if (dismissed && props.payload.onDismiss) {
+            props.payload.onDismiss();
+          }
+        },
+        [props.payload.onDismiss]
+      );
+
+      return (
+        <Modal
+          contentLabel={name}
+          onRequestClose={handleRequestClose}
+          {...modalProps}
+          {...props}
+        >
+          <WrappedComponent onClose={handleRequestClose} {...props} />
+        </Modal>
+      );
+    };
+
+    const mapState = createSelector(
+      getModals,
+      modals => modals[name] || { payload: {} }
+    );
+
+    const mapDispatch = dispatch => ({
+      onRequestClose: () => dispatch(closeModal(name))
+    });
+
+    return connect(
+      mapState,
+      mapDispatch
+    )(ReduxModal);
+  };
+}

client/js/components/pages/Chat/ChatTitle.js

@@ -26,10 +26,7 @@ const ChatTitle = ({
   let serverError = null;
   if (!tab.name && status.error) {
     serverError = (
-      <span className="chat-topic error">
-        Error:
-        {status.error}
-      </span>
+      <span className="chat-topic error">Error: {status.error}</span>
     );
   }
 

client/js/components/ui/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const Button = ({ children, ...props }) => (
-  <button type="button" {...props}>
+const Button = ({ children, category, ...props }) => (
+  <button className={`button-${category}`} type="button" {...props}>
     {children}
   </button>
 );

client/js/containers/App.js

@@ -2,6 +2,7 @@ import { createStructuredSelector } from 'reselect';
 import App from 'components/App';
 import { getConnected } from 'state/app';
 import { getSortedChannels } from 'state/channels';
+import { getHasOpenModals } from 'state/modals';
 import { getPrivateChats } from 'state/privateChats';
 import { getServers } from 'state/servers';
 import { getSelectedTab, select } from 'state/tab';
@@ -16,7 +17,8 @@ const mapState = createStructuredSelector({
   servers: getServers,
   showTabList: getShowTabList,
   tab: getSelectedTab,
-  newVersionAvailable: state => state.app.newVersionAvailable
+  newVersionAvailable: state => state.app.newVersionAvailable,
+  hasOpenModals: getHasOpenModals
 });
 
 const mapDispatch = { push, select, hideMenu };

client/js/modules/socket.js

@@ -7,6 +7,7 @@ import {
   addMessage,
   addMessages
 } from 'state/messages';
+import { openModal } from 'state/modals';
 import { reconnect } from 'state/servers';
 import { select } from 'state/tab';
 import { find, normalizeChannel } from 'utils';
@@ -123,15 +124,17 @@ export default function handleSocket({
     },
 
     connection_update({ server, errorType }) {
-      if (
-        errorType === 'verify' &&
-        window.confirm(
-          'The server is using a self-signed certificate, continue anyway?'
-        )
-      ) {
+      if (errorType === 'verify') {
         dispatch(
-          reconnect(server, {
-            skipVerify: true
+          openModal('confirm', {
+            question:
+              'The server is using a self-signed certificate, continue anyway?',
+            onConfirm: () =>
+              dispatch(
+                reconnect(server, {
+                  skipVerify: true
+                })
+              )
           })
         );
       }

client/js/state/actions.js

@@ -19,6 +19,9 @@ export const FETCH_MESSAGES = 'FETCH_MESSAGES';
 export const RAW = 'RAW';
 export const UPDATE_MESSAGE_HEIGHT = 'UPDATE_MESSAGE_HEIGHT';
 
+export const OPEN_MODAL = 'OPEN_MODAL';
+export const CLOSE_MODAL = 'CLOSE_MODAL';
+
 export const CLOSE_PRIVATE_CHAT = 'CLOSE_PRIVATE_CHAT';
 export const OPEN_PRIVATE_CHAT = 'OPEN_PRIVATE_CHAT';
 

client/js/state/app.js

@@ -1,4 +1,3 @@
-import assign from 'lodash/assign';
 import createReducer from 'utils/createReducer';
 import * as actions from './actions';
 
@@ -31,7 +30,7 @@ const initialState = {
 export default createReducer(initialState, {
   [actions.APP_SET](state, { key, value }) {
     if (typeof key === 'object') {
-      assign(state, key);
+      Object.assign(state, key);
     } else {
       state[key] = value;
     }

client/js/state/index.js

@@ -3,6 +3,7 @@ import app from './app';
 import channels from './channels';
 import input from './input';
 import messages from './messages';
+import modals from './modals';
 import privateChats from './privateChats';
 import search from './search';
 import servers from './servers';
@@ -20,6 +21,7 @@ export default function createReducer(router) {
     channels,
     input,
     messages,
+    modals,
     privateChats,
     search,
     servers,

client/js/state/modals.js

@@ -0,0 +1,50 @@
+import { createSelector } from 'reselect';
+import createReducer from 'utils/createReducer';
+import * as actions from './actions';
+
+export const getModals = state => state.modals;
+
+export const getHasOpenModals = createSelector(
+  getModals,
+  modals => {
+    const keys = Object.keys(modals);
+
+    for (let i = 0; i < keys.length; i++) {
+      if (modals[keys[i]].isOpen) {
+        return true;
+      }
+    }
+    return false;
+  }
+);
+
+export default createReducer(
+  {},
+  {
+    [actions.OPEN_MODAL](state, { name, payload = {} }) {
+      state[name] = {
+        isOpen: true,
+        payload
+      };
+    },
+
+    [actions.CLOSE_MODAL](state, { name }) {
+      state[name].isOpen = false;
+    }
+  }
+);
+
+export function openModal(name, payload) {
+  return {
+    type: actions.OPEN_MODAL,
+    name,
+    payload
+  };
+}
+
+export function closeModal(name) {
+  return {
+    type: actions.CLOSE_MODAL,
+    name
+  };
+}

client/js/state/settings.js

@@ -1,4 +1,3 @@
-import assign from 'lodash/assign';
 import createReducer from 'utils/createReducer';
 import * as actions from './actions';
 
@@ -41,7 +40,7 @@ export default createReducer(
 
     [actions.SETTINGS_SET](state, { key, value, settings }) {
       if (settings) {
-        assign(state, settings);
+        Object.assign(state, settings);
       } else {
         state[key] = value;
       }