From 7d550d5a2047eea4828b4293b5ab077e3070bae4 Mon Sep 17 00:00:00 2001 From: HF Date: Tue, 27 Apr 2021 12:14:50 +0200 Subject: [PATCH] merge reducer/modal with reducer/window --- src/components/App.jsx | 2 -- src/components/Chat.jsx | 1 - src/components/ChatButton.jsx | 7 ++-- src/components/ModalRoot.jsx | 19 +++++------ src/components/Window.jsx | 28 +++++++++++++--- src/reducers/index.js | 5 --- src/reducers/modal.js | 62 ----------------------------------- src/reducers/windows.js | 6 ++++ src/styles/default.css | 13 +++++++- 9 files changed, 53 insertions(+), 90 deletions(-) delete mode 100644 src/reducers/modal.js diff --git a/src/components/App.jsx b/src/components/App.jsx index 912102a..14cfdc7 100644 --- a/src/components/App.jsx +++ b/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 = () => ( - diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx index 5be1351..bdb37e7 100644 --- a/src/components/Chat.jsx +++ b/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, '')); } diff --git a/src/components/ChatButton.jsx b/src/components/ChatButton.jsx index f2c0550..459d93d 100644 --- a/src/components/ChatButton.jsx +++ b/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, diff --git a/src/components/ModalRoot.jsx b/src/components/ModalRoot.jsx index 40f032a..ca977c0 100644 --- a/src/components/ModalRoot.jsx +++ b/src/components/ModalRoot.jsx @@ -40,10 +40,8 @@ const MODAL_COMPONENTS = { const ModalRoot = () => { const [render, setRender] = useState(false); - const { - modalType, - modalOpen, - } = useSelector((state) => state.modal); + const modalType = useSelector((state) => state.windows.modalType); + const modalOpen = useSelector((state) => state.windows.modalOpen); const { title, @@ -66,8 +64,8 @@ const ModalRoot = () => { }, [modalOpen]); return ( - (render || modalOpen) && ( -
+ (render || modalOpen) + && [
{ onTransitionEnd={onTransitionEnd} tabIndex={-1} onClick={close} - /> + />,
@@ -88,10 +86,9 @@ const ModalRoot = () => { title={t`Close`} tabIndex={-1} >
- -
-
- ) + + , + ] ); }; diff --git a/src/components/Window.jsx b/src/components/Window.jsx index 273a7d3..b171660 100644 --- a/src/components/Window.jsx +++ b/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 }) => { }} >
Move Here
+ className="win-topbar" + > + + + + + + Move Here + + + ↑ + + + X + + ); diff --git a/src/reducers/index.js b/src/reducers/index.js index 9d50864..cb49e6e 100644 --- a/src/reducers/index.js +++ b/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, diff --git a/src/reducers/modal.js b/src/reducers/modal.js deleted file mode 100644 index 5085d7a..0000000 --- a/src/reducers/modal.js +++ /dev/null @@ -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; - } -} diff --git a/src/reducers/windows.js b/src/reducers/windows.js index 93c8ee4..5ee83ea 100644 --- a/src/reducers/windows.js +++ b/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: {}, }; diff --git a/src/styles/default.css b/src/styles/default.css index a383734..c171fa4 100644 --- a/src/styles/default.css +++ b/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 {