From 04987471290a858d9e020865a3e85240f92cb023 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Wed, 5 Jun 2024 23:00:44 +0530
Subject: [PATCH] refactor createRedirectWithUserName cleanup version

---
 .../components/createRedirectWithUsername.jsx | 39 ++++++++-----------
 client/routes.jsx                             |  6 +--
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/client/components/createRedirectWithUsername.jsx b/client/components/createRedirectWithUsername.jsx
index a6b69233c4..a1d782e15f 100644
--- a/client/components/createRedirectWithUsername.jsx
+++ b/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;
diff --git a/client/routes.jsx b/client/routes.jsx
index 418a5bf99d..c0e189441d 100644
--- a/client/routes.jsx
+++ b/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} />