merge reducer/modal with reducer/window
This commit is contained in:
parent
baca212686
commit
7d550d5a20
|
@ -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 />
|
||||
|
|
|
@ -95,7 +95,6 @@ const Chat = ({
|
|||
if (!msg) return;
|
||||
// send message via websocket
|
||||
ProtocolClient.sendChatMessage(msg, chatChannel);
|
||||
setInputMessage('');
|
||||
dispatch(setChatInputMessage(windowId, ''));
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) && (
|
||||
<div>
|
||||
(render || modalOpen)
|
||||
&& [
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<SpecificModal windowId={0} />
|
||||
</div>,
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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"
|
||||
onMouseDown={startMove}
|
||||
>Move Here</div>
|
||||
className="win-topbar"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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: {},
|
||||
};
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user