preloader(not work) little fixes

src/actions/index.js

@@ -1,7 +1,6 @@
 import {actionPromise} from '../reducers'
 import {actionAuthLogin, actionAuthLogout} from '../reducers'
 import {store} from "../reducers";
-import {connect} from "react-redux";
 
 const getGQL = url =>
     async (query, variables = {}) => {
@@ -44,6 +43,8 @@ export const actionFullLogin = (login, password) =>
         if (token) {
             dispatch(actionAuthLogin(token));
             dispatch(actionAboutMe())
+            dispatch(actionUserFind())
+            dispatch(actionFindMyTracks())
         }
     }
 
@@ -111,6 +112,7 @@ export const actionUserFindOne = (_id, name = "userFindOne") =>
         )
     );
 
+
 export const actionAboutMe = () => async (dispatch, getState) => {
     let { auth } = getState();
     let id = auth?.payload?.sub.id;
@@ -119,6 +121,7 @@ export const actionAboutMe = () => async (dispatch, getState) => {
     }
 };
 
+
 export const actionUploadImage = (file) => {
     let fd = new FormData();
     fd.append("photo", file);
@@ -166,5 +169,5 @@ export const actionSetAvatar = (file) => async (dispatch, getState) => {
     );
     await dispatch(actionAboutMe());
 };
-store.dispatch(actionAboutMe())
 
+store.dispatch(actionAboutMe())

src/pages/header/avatar.js

@@ -8,7 +8,9 @@ function AvatarDropzone({ onLoad }) {
     const onDrop = useCallback((acceptedFiles) => {
         // Do something with the files
         onLoad(acceptedFiles[0]);
+
         store.dispatch(actionSetAvatar(acceptedFiles[0]));
+
     }, []);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 

src/pages/pageMain.js

@@ -3,6 +3,8 @@ import {store} from "../reducers";
 import {useDropzone} from "react-dropzone";
 import {connect} from "react-redux";
 import {actionUploadTrack, actionFindMyTracks, backURL} from "../actions";
+import {CPreloaded} from "./preloader";
+
 
 const defaultTrack = {
     "_id": "61dc5a42e9472933a6785f18",
@@ -36,7 +38,10 @@ function TrackDropZone({ onLoad }) {
                 <p>Для добавления трэка перетащите файлы в плейлист</p>
 
             )}
-            <CMyTracks />
+           {/*<CPreloaded>*/}
+               <CMyTracks />
+           {/*</CPreloaded>*/}
+
         </div>
     );
 

src/pages/preloader/index.js

@@ -0,0 +1,4 @@
+export {CPreloaded} from "./preloader";
+
+
+

src/pages/preloader/preloader.js

@@ -0,0 +1,27 @@
+import logo from "../../logo.svg";
+import preloader1 from './preloader1.css'
+import {connect} from "react-redux";
+
+
+export const Preloader1 = () =>
+    <div className="loadingio-spinner-eclipse-leb3x7lyjtj">
+        <div className="ldio-vhhfhwlovld">
+            <div></div>
+        </div>
+    </div>
+
+const RejectAlert = ({error}) =>
+    <div>
+        <h2>{error}</h2>
+        <img src={logo}/>
+    </div>
+
+export const Preloaded = ({promiseName, promiseState, children}) =>
+    <>
+        {promiseState[promiseName]?.status === 'RESOLVED' ? children :
+            promiseState[promiseName]?.status === 'REJECTED' ?
+                <RejectAlert error={promiseState[promiseName]?.error}/>:
+                <Preloader1/>}
+    </>
+
+export const CPreloaded = connect(state => ({promiseState: state.promise}))(Preloaded)

src/pages/preloader/preloader1.css

@@ -0,0 +1,32 @@
+@keyframes ldio-vhhfhwlovld {
+    0 % {transform: rotate(0deg)}
+    50% {transform: rotate(180deg)}
+    100% {transform: rotate(360deg)}
+}
+.ldio-vhhfhwlovld div {
+    position: absolute;
+    animation: ldio-vhhfhwlovld 1s linear infinite;
+    width: 160px;
+    height: 160px;
+    top: 20px;
+    left: 20px;
+    border-radius: 50%;
+    box-shadow: 0 4px 0 0 #e15b64;
+    transform-origin: 80px 82px;
+}
+.loadingio-spinner-eclipse-leb3x7lyjtj {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: #ffffff;
+}
+.ldio-vhhfhwlovld {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0; /* see note above */
+}
+/* generated by https://loading.io/ */

src/pages/userTracks.js

@@ -2,6 +2,7 @@ import {connect} from "react-redux";
 import {actionTrackFindByOwner} from "../actions";
 import {backURL} from "../actions";
 import {useEffect} from 'react';
+import {CPreloaded} from "./preloader";
 
 
 const defaultTracks = [
@@ -49,7 +50,9 @@ export const UserTracks = ({match:{params:{_id}}, getData}, history) => {
         getData(_id)
     }, [_id])
     return (
+        // <CPreloaded>
         <CTracks/>
+        // </CPreloaded>
     )}
 
 export const CUserTracks = connect(null, {getData: actionTrackFindByOwner})(UserTracks)

src/reducers/index.js

@@ -1,8 +1,3 @@
 export {store} from './store'
 export {actionPromise} from './promiseReducer'
 export {actionAuthLogin, actionAuthLogout} from './authReducer'
-
-
-
-
-

src/reducers/localStoredReducer.js

@@ -0,0 +1,11 @@
+export const localStoredReducer = (reducer, localStorageName) => (
+    (state, action) => {
+        if (!state && localStorage[localStorageName]) {
+            return JSON.parse(localStorage[localStorageName])
+        } else {
+            let newState = reducer(state, action)
+            localStorage.setItem(localStorageName, JSON.stringify(newState))
+            return newState
+        }
+    }
+)

src/reducers/promiseReducer.js

@@ -1,5 +1,3 @@
-
-
 export function promiseReducer(state = {}, { type, status, payload, error, name }) {
     if (type === 'PROMISE') {
         return {

src/reducers/store.js

@@ -1,11 +1,12 @@
 import {applyMiddleware, combineReducers, createStore} from "redux";
 import {authReducer} from "./authReducer";
 import {promiseReducer} from "./promiseReducer";
+import {localStoredReducer} from "./localStoredReducer";
 import thunk from "redux-thunk";
 
-export const store = createStore(combineReducers({promise: promiseReducer,
-        auth: authReducer,}),
-    applyMiddleware(thunk))
+export const store = createStore(combineReducers({promise: localStoredReducer(promiseReducer, 'promise'),
+                                                             auth: localStoredReducer(authReducer, 'auth')}),
+                                                                   applyMiddleware(thunk))
 
 store.subscribe(() => console.log(store.getState()))