diff --git a/src/index.html b/src/index.html index 4ea9131..86070f0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,13 +13,55 @@
-
+
+
+
ЗАГРУЗКА
+
+
+
+
+

Хранилище недоступно.

+ Повторите попытку позже. +
+
+
diff --git a/src/index.js b/src/index.js index 68b231d..c05acff 100644 --- a/src/index.js +++ b/src/index.js @@ -35,9 +35,12 @@ import '$styles/main.less'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { configureStore } from '$redux/store'; +import { pushLoaderState } from '$utils/history'; const { store, persistor } = configureStore(); +pushLoaderState(10); + export const Index = () => ( diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index f4ca7ac..b534474 100644 --- a/src/redux/user/sagas.js +++ b/src/redux/user/sagas.js @@ -6,12 +6,10 @@ import { checkUserToken, getGuestToken, getStoredMap, - getVkIframeUser, - getVkUserInfo, postMap } from '$utils/api'; import { - hideRenderer, iframeLoginVk, + hideRenderer, setActiveSticker, setAddress, setChanged, setDialogActive, setEditing, @@ -20,7 +18,7 @@ import { setSaveOverwrite, setSaveSuccess, setTitle, setUser } from '$redux/user/actions'; -import { getUrlData, parseQuery, pushPath } from '$utils/history'; +import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath } from '$utils/history'; import { editor } from '$modules/Editor'; import { ACTIONS } from '$redux/user/constants'; import { MODES } from '$constants/modes'; @@ -114,6 +112,8 @@ function* iframeLoginVkSaga({ viewer_id, access_token, auth_key }) { } function* mapInitSaga() { + pushLoaderState(90); + const { hash } = getUrlData(); if (hash && /^#map/.test(hash)) { @@ -146,25 +146,29 @@ function* mapInitSaga() { yield call(startEmptyEditorSaga); yield put(setReady(true)); + + pushLoaderState(100); + return true; } function* authCheckSaga() { + pushLoaderState(70); + const { id, token } = yield select(getUser); + const { ready } = yield select(getState); if (window.location.search || true) { const { viewer_id, auth_key } = yield parseQuery(window.location.search); - // https://alpha-map.vault48.org:3000/auth/iframe/vk?viewer_id=360004&access_token=e558a05d5cb1fcb195316703a2d5e5ec9d19b2c608844c986ec56798f8ac642379bb37fbc58270435e077&auth_key=b0ff47f659d21b6b880a1eee60b6e794 - // const viewer_id = '360004'; - // const auth_key = 'b0ff47f659d21b6b880a1eee60b6e794'; - - // console.log('Already logged in?', viewer_id, auth_key, id !== `vk:${viewer_id}`); if (viewer_id && auth_key && id !== `vk:${viewer_id}`) { const user = yield call(checkIframeToken, { viewer_id, auth_key }); if (user) { yield put(setUser(user)); + + pushLoaderState(' ...готово'); + return yield call(mapInitSaga); } } @@ -175,11 +179,19 @@ function* authCheckSaga() { if (user) { yield put(setUser(user)); + + pushLoaderState(' ...готово'); + return yield call(mapInitSaga); + } else if (!ready) { + pushNetworkInitError(); } } yield call(generateGuestSaga); + + pushLoaderState(80); + return yield call(mapInitSaga); } diff --git a/src/utils/api.js b/src/utils/api.js index 6a64b7c..5366b1f 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -11,7 +11,7 @@ export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, { id, token, routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {}, -})); +})).catch(() => null); export const getGuestToken = () => axios.get(API.GET_GUEST).then(result => (result && result.data)); diff --git a/src/utils/history.js b/src/utils/history.js index 601efb5..f847ec2 100644 --- a/src/utils/history.js +++ b/src/utils/history.js @@ -26,3 +26,11 @@ export const parseQuery = (queryString: string) => { } return params; }; + +export const pushLoaderState = state => { + document.getElementById('loader-bar').style.width = `${state}%`; +}; + +export const pushNetworkInitError = state => { + document.getElementById('loader-error').style.opacity = 1; +};