From 8c8f5c356b81241e1224df2d4928fa84aa04db76 Mon Sep 17 00:00:00 2001 From: Amir Movahedi Date: Sun, 23 May 2021 09:14:54 +0700 Subject: [PATCH] fix: does not show empty page when profile not exist Signed-off-by: Amir Movahedi --- package.json | 1 + src/App.tsx | 5 ++- src/components/img/index.tsx | 1 - .../photoAlbum/PhotoAlbumComponent.tsx | 1 - src/containers/profile/index.tsx | 33 +++++++++++++++---- src/index.tsx | 5 +-- src/layouts/postAlbum/index.tsx | 1 - src/store/reducers/chat/chatReducer.ts | 1 - src/store/sagas/userSaga.ts | 3 +- yarn.lock | 5 +++ 10 files changed, 39 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 27e841a..7896459 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,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", "web-vitals": "^1.1.1", "workbox-background-sync": "^6.1.5", diff --git a/src/App.tsx b/src/App.tsx index d0372c7..2002dd3 100644 --- a/src/App.tsx +++ b/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 {routing}; }; diff --git a/src/components/img/index.tsx b/src/components/img/index.tsx index c7effb9..96fe852 100644 --- a/src/components/img/index.tsx +++ b/src/components/img/index.tsx @@ -1,4 +1,3 @@ - import { withStyles } from '@material-ui/core/styles'; import SvgImage from '@material-ui/icons/Image'; import { Map } from 'immutable'; diff --git a/src/components/photoAlbum/PhotoAlbumComponent.tsx b/src/components/photoAlbum/PhotoAlbumComponent.tsx index 34c886e..dbd7137 100644 --- a/src/components/photoAlbum/PhotoAlbumComponent.tsx +++ b/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'; diff --git a/src/containers/profile/index.tsx b/src/containers/profile/index.tsx index 142e7f3..9de709b 100644 --- a/src/containers/profile/index.tsx +++ b/src/containers/profile/index.tsx @@ -20,6 +20,17 @@ 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(); @@ -27,10 +38,7 @@ 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 ? ( <>
+ ) : ( + + + ); } diff --git a/src/index.tsx b/src/index.tsx index 543e850..420e14a 100644 --- a/src/index.tsx +++ b/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 */ diff --git a/src/layouts/postAlbum/index.tsx b/src/layouts/postAlbum/index.tsx index 7988aab..18ea5d2 100644 --- a/src/layouts/postAlbum/index.tsx +++ b/src/layouts/postAlbum/index.tsx @@ -1,4 +1,3 @@ - import withStyles from '@material-ui/core/styles/withStyles'; import Typography from '@material-ui/core/Typography'; import NoAlbumIcon from '@material-ui/icons/SettingsSystemDaydream'; diff --git a/src/store/reducers/chat/chatReducer.ts b/src/store/reducers/chat/chatReducer.ts index c0708c6..e79e306 100644 --- a/src/store/reducers/chat/chatReducer.ts +++ b/src/store/reducers/chat/chatReducer.ts @@ -1,4 +1,3 @@ - import { ChatActionType } from 'constants/chatActionType'; import { Map } from 'immutable'; diff --git a/src/store/sagas/userSaga.ts b/src/store/sagas/userSaga.ts index aaf5dfe..78c7bee 100644 --- a/src/store/sagas/userSaga.ts +++ b/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)); } } diff --git a/yarn.lock b/yarn.lock index 056febb..2ec36a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15794,6 +15794,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"