merge reducer/modal with reducer/window

src/components/App.jsx

@@ -15,7 +15,6 @@ import CoordinatesBox from './CoordinatesBox';
 import CanvasSwitchButton from './CanvasSwitchButton';
 import OnlineBox from './OnlineBox';
 import ChatButton from './ChatButton';
-import ChatBox from './ChatBox';
 import Menu from './Menu';
 import UI from './UI';
 import ExpandMenuButton from './ExpandMenuButton';
@@ -30,7 +29,6 @@ const App = () => (
       <CanvasSwitchButton />
       <Menu />
       <ChatButton />
-      <ChatBox />
       <OnlineBox />
       <CoordinatesBox />
       <ExpandMenuButton />

src/components/Chat.jsx

@@ -95,7 +95,6 @@ const Chat = ({
     if (!msg) return;
     // send message via websocket
     ProtocolClient.sendChatMessage(msg, chatChannel);
-    setInputMessage('');
     dispatch(setChatInputMessage(windowId, ''));
   }
 

src/components/ChatButton.jsx

@@ -14,7 +14,6 @@ import { showChatModal, openChatWindow } from '../actions';
 
 
 const ChatButton = ({
-  chatOpen,
   modalOpen,
   chatNotify,
   channels,
@@ -23,6 +22,8 @@ const ChatButton = ({
   open,
 }) => {
   const [unreadAny, setUnreadAny] = useState(false);
+  // TODO what do here?
+  const chatOpen = false;
 
   /*
    * almost the same as in ChannelDropDown
@@ -88,9 +89,8 @@ function mapDispatchToProps(dispatch) {
 
 function mapStateToProps(state) {
   const {
-    chatOpen,
     modalOpen,
-  } = state.modal;
+  } = state.windows;
   const {
     chatNotify,
   } = state.audio;
@@ -102,7 +102,6 @@ function mapStateToProps(state) {
     mute,
   } = state.chatRead;
   return {
-    chatOpen,
     modalOpen,
     chatNotify,
     channels,

src/components/ModalRoot.jsx

@@ -40,10 +40,8 @@ const MODAL_COMPONENTS = {
 const ModalRoot = () => {
   const [render, setRender] = useState(false);
 
-  const {
+  const modalType = useSelector((state) => state.windows.modalType);
-    modalType,
+  const modalOpen = useSelector((state) => state.windows.modalOpen);
-    modalOpen,
-  } = useSelector((state) => state.modal);
 
   const {
     title,
@@ -66,8 +64,8 @@ const ModalRoot = () => {
   }, [modalOpen]);
 
   return (
-    (render || modalOpen) && (
+    (render || modalOpen)
-      <div>
+      && [
         <div
           className={(modalOpen && render)
             ? 'OverlayModal show'
@@ -75,7 +73,7 @@ const ModalRoot = () => {
           onTransitionEnd={onTransitionEnd}
           tabIndex={-1}
           onClick={close}
-        />
+        />,
         <div
           className={(modalOpen && render) ? 'Modal show' : 'Modal'}
         >
@@ -88,10 +86,9 @@ const ModalRoot = () => {
             title={t`Close`}
             tabIndex={-1}
           ><MdClose /></div>
-          <SpecificModal />
+          <SpecificModal windowId={0} />
-        </div>
+        </div>,
-      </div>
+      ]
-    )
   );
 };
 

src/components/Window.jsx

@@ -25,7 +25,6 @@ const Window = ({ id }) => {
 
   const startMove = useCallback((event) => {
     event.preventDefault();
-    event.stopPropagation();
     let {
       clientX: startX,
       clientY: startY,
@@ -69,9 +68,30 @@ const Window = ({ id }) => {
       }}
     >
       <div
-        className="topbar"
+        className="win-topbar"
-        onMouseDown={startMove}
+      >
-      >Move Here</div>
+        <span
+          className="win-topbtnn"
+        >
+          +
+        </span>
+        <span
+          className="win-title"
+          onMouseDown={startMove}
+        >
+          Move Here
+        </span>
+        <span
+          className="win-topbtnn"
+        >
+          ↑
+        </span>
+        <span
+          className="win-topbtnn"
+        >
+          X
+        </span>
+      </div>
       <Content windowId={id} />
     </div>
   );

src/reducers/index.js

@@ -5,7 +5,6 @@ import localForage from 'localforage';
 import audio from './audio';
 import canvas from './canvas';
 import gui from './gui';
-import modal from './modal';
 import windows from './windows';
 import user from './user';
 import ranks from './ranks';
@@ -18,7 +17,6 @@ import fetching from './fetching';
 import type { AudioState } from './audio';
 import type { CanvasState } from './canvas';
 import type { GUIState } from './gui';
-import type { ModalState } from './modal';
 import type { UserState } from './user';
 import type { RanksState } from './ranks';
 import type { AlertState } from './alert';
@@ -30,7 +28,6 @@ export type State = {
   audio: AudioState,
   canvas: CanvasState,
   gui: GUIState,
-  modal: ModalState,
   user: UserState,
   ranks: RanksState,
   alert: AlertState,
@@ -48,7 +45,6 @@ const config = {
     'ranks',
     'canvas',
     'alert',
-    'modal',
     'chat',
     'contextMenu',
     'fetching',
@@ -59,7 +55,6 @@ export default persistCombineReducers(config, {
   audio,
   canvas,
   gui,
-  modal,
   windows,
   user,
   ranks,

src/reducers/modal.js

@@ -1,62 +0,0 @@
-/**
- * https://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680#35641680
- *
- * @flow
- */
-
-import type { Action } from '../actions/types';
-
-export type ModalState = {
-  modalOpen: boolean,
-  modalType: ?string,
-  chatOpen: boolean,
-};
-
-const initialState: ModalState = {
-  modalOpen: false,
-  modalType: null,
-  chatOpen: false,
-};
-
-
-export default function modal(
-  state: ModalState = initialState,
-  action: Action,
-): ModalState {
-  switch (action.type) {
-    case 'SHOW_MODAL': {
-      const { modalType } = action;
-      const chatOpen = (modalType === 'CHAT') ? false : state.chatOpen;
-      return {
-        ...state,
-        modalType,
-        chatOpen,
-        modalOpen: true,
-      };
-    }
-
-    case 'SELECT_CANVAS':
-    case 'HIDE_MODAL':
-      return {
-        ...state,
-        modalOpen: false,
-      };
-
-    case 'TOGGLE_CHAT_BOX': {
-      return {
-        ...state,
-        chatOpen: !state.chatOpen,
-      };
-    }
-
-    case 'LOGOUT': {
-      return {
-        ...state,
-        chatOpen: false,
-      };
-    }
-
-    default:
-      return state;
-  }
-}

src/reducers/windows.js

@@ -7,6 +7,10 @@
 import type { Action } from '../actions/types';
 
 export type WindowsState = {
+  // modal is considerd as "fullscreen window"
+  // its windowId is considered 0 and args are under args[0]
+  modalOpen: boolean,
+  modalType: ?string,
   // [
   //   {
   //     windowId: number,
@@ -28,6 +32,8 @@ export type WindowsState = {
 }
 
 const initialState: WindowsState = {
+  modalOpen: false,
+  modalType: null,
   windows: [],
   args: {},
 };

src/styles/default.css

@@ -142,8 +142,19 @@ tr:nth-child(even) {
   overflow: hidden;
 }
 
-.topbar {
+.win-topbar {
+  display: flex;
+}
+
+.win-title {
   cursor: move;
+  flex-grow: 1;
+}
+
+.win-topbtn {
+  border: solid black;
+  border-width: thin;
+  background-color: blue;
 }
 
 .contextmenu {