Merge pull request #49 from red-gold/fixbug/1.0/41

fix: does not show empty page when profile not exist #41

package.json

@@ -120,6 +120,7 @@
     "socket.io-client": "4.0.0",
     "source-map-explorer": "^1.8.0",
     "typeface-roboto": "0.0.54",
+    "use-bus": "^2.3.1",
     "uuid": "^3.3.2",
     "validator": "^13.6.0",
     "web-vitals": "^1.1.1",

src/App.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import { useRoutes } from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@material-ui/core';
 import { socialTheme } from 'config/socialTheme';
 import routes from 'routes/index';
 import { useSelector } from 'react-redux';
 import { authorizeSelector } from 'store/reducers/authorize/authorizeSelector';
+import { useNavigate, useRoutes } from 'react-router-dom';
+import useBus from 'use-bus';
 
 const theme = createTheme(socialTheme);
 
 const App = () => {
+    const navigate = useNavigate();
     const isLoggedIn = useSelector(authorizeSelector.selectUserAuthStatus());
     const routing = useRoutes(routes(isLoggedIn));
+    useBus('@@ui/navigate', (action) => navigate(action.payload.url), []);
 
     return <ThemeProvider theme={theme}>{routing}</ThemeProvider>;
 };

src/components/photoAlbum/PhotoAlbumComponent.tsx

@@ -1,4 +1,3 @@
-
 import withStyles from '@material-ui/core/styles/withStyles';
 import queryString from 'query-string';
 import React, { Component } from 'react';

src/containers/profile/index.tsx

@@ -20,17 +20,25 @@ import { serverSelector } from 'store/reducers/server/serverSelector';
 import { userSelector } from 'store/reducers/users/userSelector';
 import { useParams } from 'react-router-dom';
 import { useStyles } from './profileStyles';
+import classNames from 'classnames';
+import RightPanel from 'components/profileRightPanel';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+
+const LoadingRoot = styled('div')({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 50,
+});
 
 // Create selctors
 const selectCurrentUser = authorizeSelector.selectCurrentUser();
 const selectRequest = serverSelector.selectRequest();
 const selectProfilePosts = postSelector.selectProfilePosts();
 const selectHasMorePostProfile = postSelector.selectHasMorePostProfile();
 const selectUserProfileById = userSelector.selectUserProfileById();
-
-import classNames from 'classnames';
-import RightPanel from 'components/profileRightPanel';
-
+let profileUpdateTimeOut: NodeJS.Timeout | null = null;
 export function ProfileComponent() {
     const [timeout, setProfileTimeout] = useState(false);
     const location = useLocation();
@@ -61,12 +69,19 @@ export function ProfileComponent() {
             setHeaderTitle(profile.get('fullName'));
         }
         setProfileTimeout(true);
-        setTimeout(() => {
+        if (profileUpdateTimeOut) {
+            clearTimeout(profileUpdateTimeOut);
+        }
+        profileUpdateTimeOut = setTimeout(() => {
             setProfileTimeout(false);
         }, 100);
+        return () => {
+            if (profileUpdateTimeOut) {
+                clearTimeout(profileUpdateTimeOut);
+            }
+        };
     }, [location]);
-
-    return (
+    return profile.size > 0 ? (
         <>
             <div className={classes.bannerContainer}>
                 <ImgCover
@@ -98,6 +113,10 @@ export function ProfileComponent() {
                 </Grid>
             </Grid>
         </>
+    ) : (
+        <LoadingRoot>
+            <CircularProgress color="primary" />
+        </LoadingRoot>
     );
 }
 

src/index.tsx

@@ -23,10 +23,7 @@ import reportWebVitals from './reportWebVitals';
 import App from 'App';
 
 // import 'moment/locale/es'
-// - Actions
-// - Import app components
-// import { App } from 'components/AWS'
-// App css
+
 /**
  * Execute startup functions
  */

src/store/sagas/userSaga.ts

@@ -12,6 +12,7 @@ import { ServerRequestStatusType } from 'store/actions/serverRequestStatusType';
 import * as userActions from 'store/actions/userActions';
 import { authorizeSelector } from 'store/reducers/authorize/authorizeSelector';
 import { circleSelector } from 'store/reducers/circles/circleSelector';
+import { dispatch } from 'use-bus';
 
 /**
  * Get service providers
@@ -57,7 +58,7 @@ function* getUserProfilePage(action: { type: UserActionType; payload: any }) {
 
             yield put(userActions.addUserInfo(uid, Map({ ...userProfile, userId: uid })));
         } catch (error) {
-            window.location.href = '/404';
+            dispatch({ type: '@@ui/navigate', payload: { url: '/404' } });
             yield put(globalActions.showMessage(error.message));
         }
     }

yarn.lock

@@ -15799,6 +15799,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-bus@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/use-bus/-/use-bus-2.3.1.tgz#b96aebe753d99eca7cb6bd019a986d0f6eb1ca04"
+  integrity sha512-dAmoAiWmM0/YhrytHSt0zU0dJe1CW1HqsuTfe4w1mJaBOCGWe2SxSjyEXmZISgjbCRSJORtjtApYNDLxiWqGCg==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"