Merge pull request #3147 from PiyushChandra17/piyush/refactor-createRedirectWithUsername

refactor createRedirectWithUserName cleanup version

Author: raclim

client/components/createRedirectWithUsername.jsx

@@ -1,29 +1,24 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import browserHistory from '../browserHistory';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const history = useHistory();
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  useEffect(() => {
+    if (username) {
+      history.replace(url.replace(':username', username));
     }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
+  }, [history, url, username]);
 
   return null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;

client/routes.jsx

@@ -17,7 +17,7 @@ import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
-import createRedirectWithUsername from './components/createRedirectWithUsername';
+import RedirectToUser from './components/createRedirectWithUsername';
 import { getUser } from './modules/User/actions';
 import {
   userIsAuthenticated,
@@ -84,11 +84,11 @@ const routes = (
 
     <Route
       path="/sketches"
-      component={createRedirectWithUsername('/:username/sketches')}
+      component={() => <RedirectToUser url="/:username/sketches" />}
     />
     <Route
       path="/assets"
-      component={createRedirectWithUsername('/:username/assets')}
+      component={() => <RedirectToUser url="/:username/assets" />}
     />
     <Route path="/account" component={userIsAuthenticated(AccountView)} />
     <Route path="/about" component={IDEView} />