diff --git a/src/client.js b/src/client.js index 8c50d4e..f299b68 100644 --- a/src/client.js +++ b/src/client.js @@ -2,6 +2,8 @@ * Entrypoint for main client script */ +import { persistStore } from 'redux-persist'; + import createKeyPressHandler from './controls/keypress'; import { initTimer, @@ -22,14 +24,15 @@ import { receivePixelReturn, } from './ui/placePixel'; import store from './store/store'; - - import renderApp from './components/App'; - import { initRenderer, getRenderer } from './ui/renderer'; import SocketClient from './socket/SocketClient'; -function init() { +persistStore(store, {}, () => { + window.addEventListener('message', store.dispatch); + + store.dispatch({ type: 'HYDRATED' }); + initRenderer(store, false); SocketClient.on('pixelUpdate', ({ @@ -112,8 +115,7 @@ function init() { store.dispatch(fetchMe()); SocketClient.connect(); -} -init(); +}); document.addEventListener('DOMContentLoaded', () => { renderApp(document.getElementById('app'), store); diff --git a/src/popup.js b/src/popup.js index bb042c5..80ac6c4 100644 --- a/src/popup.js +++ b/src/popup.js @@ -2,19 +2,84 @@ * Main Script for windows (pop-ups and stuff) */ +import { persistStore } from 'redux-persist'; + import store from './store/storePopUp'; import { urlChange, + receiveOnline, + receiveChatMessage, + removeChatChannel, + addChatChannel, } from './store/actions'; - +import { + fetchMe, +} from './store/actions/thunks'; +import SocketClient from './socket/SocketClient'; 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', () => { 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', () => { // eslint-disable-next-line no-console diff --git a/src/store/middleware/parent.js b/src/store/middleware/parent.js index a7e3037..4772566 100644 --- a/src/store/middleware/parent.js +++ b/src/store/middleware/parent.js @@ -17,9 +17,6 @@ export default () => (next) => (action) => { if (action.origin !== origin) { return null; } - if (action.data.type === 't/UNLOAD') { - return null; - } console.log('GOT', action.data); return next(action.data); } diff --git a/src/store/sharedReducers.js b/src/store/sharedReducers.js index f7c3701..e0d5d43 100644 --- a/src/store/sharedReducers.js +++ b/src/store/sharedReducers.js @@ -10,6 +10,9 @@ import storage from 'redux-persist/lib/storage'; import gui from './reducers/gui'; import ranks from './reducers/ranks'; 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; @@ -48,4 +51,7 @@ export default { gui: guiPersist, ranks: ranksPersist, chatRead: chatReadPersist, + user, + chat, + fetching, }; diff --git a/src/store/store.js b/src/store/store.js index deac930..47e3a06 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -6,7 +6,7 @@ import { applyMiddleware, createStore, combineReducers, } from 'redux'; import thunk from 'redux-thunk'; -import { persistStore, persistReducer } from 'redux-persist'; +import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import sharedReducers, { @@ -19,10 +19,7 @@ import sharedReducers, { */ import windows from './reducers/windows'; import canvas from './reducers/canvas'; -import user from './reducers/user'; import alert from './reducers/alert'; -import chat from './reducers/chat'; -import fetching from './reducers/fetching'; /* * middleware @@ -47,10 +44,7 @@ const reducers = combineReducers({ ...sharedReducers, windows: windowsPersist, canvas, - user, alert, - chat, - fetching, }); const store = createStore( @@ -68,9 +62,8 @@ const store = createStore( ), ); -export const persistor = persistStore(store, {}, () => { - window.addEventListener('message', store.dispatch); - store.dispatch({ type: 'HYDRATED' }); -}); +/* + * persistStore of redix-persist is called in client.js + */ export default store; diff --git a/src/store/storePopUp.js b/src/store/storePopUp.js index 68273c6..b001040 100644 --- a/src/store/storePopUp.js +++ b/src/store/storePopUp.js @@ -8,7 +8,6 @@ import { applyMiddleware, createStore, combineReducers, } from 'redux'; import thunk from 'redux-thunk'; -import { persistStore } from 'redux-persist'; /* * reducers @@ -16,9 +15,6 @@ import { persistStore } from 'redux-persist'; import sharedReducers from './sharedReducers'; import canvas from './reducers/canvas'; import popup from './reducers/popup'; -import user from './reducers/user'; -import chat from './reducers/chat'; -import fetching from './reducers/fetching'; /* * middleware @@ -30,9 +26,6 @@ const reducers = combineReducers({ ...sharedReducers, canvas, popup, - user, - chat, - fetching, }); const store = createStore( @@ -44,9 +37,8 @@ const store = createStore( ), ); -export const persistor = persistStore(store, {}, () => { - window.addEventListener('message', store.dispatch); - store.dispatch({ type: 'HYDRATED' }); -}); +/* + * persistStore of redux-persist is called in popup.js + */ export default store;