reorganize store and make popup connect to websocket when needed
This commit is contained in:
parent
ee8f58440b
commit
a4d6b7b1d9
|
@ -2,6 +2,8 @@
|
||||||
* Entrypoint for main client script
|
* Entrypoint for main client script
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { persistStore } from 'redux-persist';
|
||||||
|
|
||||||
import createKeyPressHandler from './controls/keypress';
|
import createKeyPressHandler from './controls/keypress';
|
||||||
import {
|
import {
|
||||||
initTimer,
|
initTimer,
|
||||||
|
@ -22,14 +24,15 @@ import {
|
||||||
receivePixelReturn,
|
receivePixelReturn,
|
||||||
} from './ui/placePixel';
|
} from './ui/placePixel';
|
||||||
import store from './store/store';
|
import store from './store/store';
|
||||||
|
|
||||||
|
|
||||||
import renderApp from './components/App';
|
import renderApp from './components/App';
|
||||||
|
|
||||||
import { initRenderer, getRenderer } from './ui/renderer';
|
import { initRenderer, getRenderer } from './ui/renderer';
|
||||||
import SocketClient from './socket/SocketClient';
|
import SocketClient from './socket/SocketClient';
|
||||||
|
|
||||||
function init() {
|
persistStore(store, {}, () => {
|
||||||
|
window.addEventListener('message', store.dispatch);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'HYDRATED' });
|
||||||
|
|
||||||
initRenderer(store, false);
|
initRenderer(store, false);
|
||||||
|
|
||||||
SocketClient.on('pixelUpdate', ({
|
SocketClient.on('pixelUpdate', ({
|
||||||
|
@ -112,8 +115,7 @@ function init() {
|
||||||
|
|
||||||
store.dispatch(fetchMe());
|
store.dispatch(fetchMe());
|
||||||
SocketClient.connect();
|
SocketClient.connect();
|
||||||
}
|
});
|
||||||
init();
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
renderApp(document.getElementById('app'), store);
|
renderApp(document.getElementById('app'), store);
|
||||||
|
|
73
src/popup.js
73
src/popup.js
|
@ -2,19 +2,84 @@
|
||||||
* Main Script for windows (pop-ups and stuff)
|
* Main Script for windows (pop-ups and stuff)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { persistStore } from 'redux-persist';
|
||||||
|
|
||||||
import store from './store/storePopUp';
|
import store from './store/storePopUp';
|
||||||
import {
|
import {
|
||||||
urlChange,
|
urlChange,
|
||||||
|
receiveOnline,
|
||||||
|
receiveChatMessage,
|
||||||
|
removeChatChannel,
|
||||||
|
addChatChannel,
|
||||||
} from './store/actions';
|
} from './store/actions';
|
||||||
|
import {
|
||||||
|
fetchMe,
|
||||||
|
} from './store/actions/thunks';
|
||||||
|
import SocketClient from './socket/SocketClient';
|
||||||
import renderAppPopUp from './components/AppPopUp';
|
import renderAppPopUp from './components/AppPopUp';
|
||||||
|
|
||||||
function init() {
|
persistStore(store, {}, () => {
|
||||||
|
window.addEventListener('message', (evt) => {
|
||||||
|
if (evt.data.type === 't/UNLOAD') {
|
||||||
|
if (!window.opener || window.opener.closed) {
|
||||||
|
console.log('Parent window closed');
|
||||||
|
SocketClient.connect();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
store.dispatch(evt);
|
||||||
|
});
|
||||||
|
|
||||||
|
store.dispatch({ type: 'HYDRATED' });
|
||||||
|
|
||||||
window.addEventListener('popstate', () => {
|
window.addEventListener('popstate', () => {
|
||||||
store.dispatch(urlChange());
|
store.dispatch(urlChange());
|
||||||
});
|
});
|
||||||
}
|
|
||||||
init();
|
SocketClient.on('onlineCounter', (online) => {
|
||||||
|
store.dispatch(receiveOnline(online));
|
||||||
|
});
|
||||||
|
SocketClient.on('chatMessage', (
|
||||||
|
name,
|
||||||
|
text,
|
||||||
|
country,
|
||||||
|
channelId,
|
||||||
|
userId,
|
||||||
|
) => {
|
||||||
|
const state = store.getState();
|
||||||
|
|
||||||
|
// assume that if one chat window is not hidden, all are
|
||||||
|
const isRead = state.popup.windowType === 'CHAT'
|
||||||
|
&& state.popup.args.chatChannel === channelId;
|
||||||
|
|
||||||
|
// TODO ping doesn't work since update
|
||||||
|
// const { nameRegExp } = state.user;
|
||||||
|
// const isPing = (nameRegExp && text.match(nameRegExp));
|
||||||
|
store.dispatch(receiveChatMessage(
|
||||||
|
name,
|
||||||
|
text,
|
||||||
|
country,
|
||||||
|
channelId,
|
||||||
|
userId,
|
||||||
|
false,
|
||||||
|
!!isRead,
|
||||||
|
));
|
||||||
|
});
|
||||||
|
SocketClient.on('changedMe', () => {
|
||||||
|
store.dispatch(fetchMe());
|
||||||
|
});
|
||||||
|
SocketClient.on('remch', (cid) => {
|
||||||
|
store.dispatch(removeChatChannel(cid));
|
||||||
|
});
|
||||||
|
SocketClient.on('addch', (channel) => {
|
||||||
|
store.dispatch(addChatChannel(channel));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!window.opener || window.opener.closed) {
|
||||||
|
store.dispatch(fetchMe());
|
||||||
|
SocketClient.connect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
|
|
|
@ -17,9 +17,6 @@ export default () => (next) => (action) => {
|
||||||
if (action.origin !== origin) {
|
if (action.origin !== origin) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
if (action.data.type === 't/UNLOAD') {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
console.log('GOT', action.data);
|
console.log('GOT', action.data);
|
||||||
return next(action.data);
|
return next(action.data);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,9 @@ import storage from 'redux-persist/lib/storage';
|
||||||
import gui from './reducers/gui';
|
import gui from './reducers/gui';
|
||||||
import ranks from './reducers/ranks';
|
import ranks from './reducers/ranks';
|
||||||
import chatRead from './reducers/chatRead';
|
import chatRead from './reducers/chatRead';
|
||||||
|
import user from './reducers/user';
|
||||||
|
import chat from './reducers/chat';
|
||||||
|
import fetching from './reducers/fetching';
|
||||||
|
|
||||||
export const CURRENT_VERSION = 11;
|
export const CURRENT_VERSION = 11;
|
||||||
|
|
||||||
|
@ -48,4 +51,7 @@ export default {
|
||||||
gui: guiPersist,
|
gui: guiPersist,
|
||||||
ranks: ranksPersist,
|
ranks: ranksPersist,
|
||||||
chatRead: chatReadPersist,
|
chatRead: chatReadPersist,
|
||||||
|
user,
|
||||||
|
chat,
|
||||||
|
fetching,
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,7 +6,7 @@ import {
|
||||||
applyMiddleware, createStore, combineReducers,
|
applyMiddleware, createStore, combineReducers,
|
||||||
} from 'redux';
|
} from 'redux';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import { persistStore, persistReducer } from 'redux-persist';
|
import { persistReducer } from 'redux-persist';
|
||||||
import storage from 'redux-persist/lib/storage';
|
import storage from 'redux-persist/lib/storage';
|
||||||
|
|
||||||
import sharedReducers, {
|
import sharedReducers, {
|
||||||
|
@ -19,10 +19,7 @@ import sharedReducers, {
|
||||||
*/
|
*/
|
||||||
import windows from './reducers/windows';
|
import windows from './reducers/windows';
|
||||||
import canvas from './reducers/canvas';
|
import canvas from './reducers/canvas';
|
||||||
import user from './reducers/user';
|
|
||||||
import alert from './reducers/alert';
|
import alert from './reducers/alert';
|
||||||
import chat from './reducers/chat';
|
|
||||||
import fetching from './reducers/fetching';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* middleware
|
* middleware
|
||||||
|
@ -47,10 +44,7 @@ const reducers = combineReducers({
|
||||||
...sharedReducers,
|
...sharedReducers,
|
||||||
windows: windowsPersist,
|
windows: windowsPersist,
|
||||||
canvas,
|
canvas,
|
||||||
user,
|
|
||||||
alert,
|
alert,
|
||||||
chat,
|
|
||||||
fetching,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const store = createStore(
|
const store = createStore(
|
||||||
|
@ -68,9 +62,8 @@ const store = createStore(
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
export const persistor = persistStore(store, {}, () => {
|
/*
|
||||||
window.addEventListener('message', store.dispatch);
|
* persistStore of redix-persist is called in client.js
|
||||||
store.dispatch({ type: 'HYDRATED' });
|
*/
|
||||||
});
|
|
||||||
|
|
||||||
export default store;
|
export default store;
|
||||||
|
|
|
@ -8,7 +8,6 @@ import {
|
||||||
applyMiddleware, createStore, combineReducers,
|
applyMiddleware, createStore, combineReducers,
|
||||||
} from 'redux';
|
} from 'redux';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import { persistStore } from 'redux-persist';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* reducers
|
* reducers
|
||||||
|
@ -16,9 +15,6 @@ import { persistStore } from 'redux-persist';
|
||||||
import sharedReducers from './sharedReducers';
|
import sharedReducers from './sharedReducers';
|
||||||
import canvas from './reducers/canvas';
|
import canvas from './reducers/canvas';
|
||||||
import popup from './reducers/popup';
|
import popup from './reducers/popup';
|
||||||
import user from './reducers/user';
|
|
||||||
import chat from './reducers/chat';
|
|
||||||
import fetching from './reducers/fetching';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* middleware
|
* middleware
|
||||||
|
@ -30,9 +26,6 @@ const reducers = combineReducers({
|
||||||
...sharedReducers,
|
...sharedReducers,
|
||||||
canvas,
|
canvas,
|
||||||
popup,
|
popup,
|
||||||
user,
|
|
||||||
chat,
|
|
||||||
fetching,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const store = createStore(
|
const store = createStore(
|
||||||
|
@ -44,9 +37,8 @@ const store = createStore(
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
export const persistor = persistStore(store, {}, () => {
|
/*
|
||||||
window.addEventListener('message', store.dispatch);
|
* persistStore of redux-persist is called in popup.js
|
||||||
store.dispatch({ type: 'HYDRATED' });
|
*/
|
||||||
});
|
|
||||||
|
|
||||||
export default store;
|
export default store;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user