refactored user component routes into one

src/index.tsx

@@ -5,11 +5,11 @@ import { ApolloClient, InMemoryCache, ApolloProvider, useMutation, createHttpLin
 import { setContext } from '@apollo/client/link/context';
 import { LOG_IN } from './lib/graphql/mutations/LogIn';
 import { LogIn as LogInData, LogInVariables } from './lib/graphql/mutations/LogIn/__generated__/LogIn';
-import './styles/index.less';
 import { Layout, Affix, Spin } from 'antd';
 import { Viewer } from './lib/types';
 import ViewerStateContext from '../src/lib/context/ViewerStateContext';
 import * as serviceWorker from './serviceWorker';
+import './styles/index.less';
 
 // Components
 import { AppHeader, Home, User, Listings, Listing, Host, NotFound, Login, Stripe, EditListing } from './sections';
@@ -110,15 +110,18 @@ const App = () => {
  <Route exact path="/login">
  <Login />
  </Route>
- <Route exact path="/user/:id">
+ <Route exact path="/user/:id/">
  <User />
  </Route>
- <Route exact path="/user/:id/listings">
- <User />
- </Route>
- <Route exact path="/user/:id/bookings">
- <User />
+ <Route exact path={['/user/:id/', '/user/:id/listings', '/user/:id/bookings']}>
+ <User /> {/* User components handles the ".../listings" & ".../bookings" routes */}
  </Route>
+ {/* <Route exact path="/user/:id/listings">
+ <User />
+ </Route>
+ <Route exact path="/user/:id/bookings">
+ <User />
+ </Route> */}
  <Route exact path="/stripe">
  <Stripe />
  </Route>

src/sections/User/Components/UserProfile/index.tsx

@@ -24,7 +24,7 @@ export const UserProfile = ({ user, viewerIsUser, refetch }: Props) => {
  setViewer({ ...viewer, hasWallet: data.stripeDisconnect.hasWallet });
  displaySuccessNotification(
  `You have successfully disconnected from Stripe`,
- `You'll to reconnect Stripe to continue to create listings`
+ `You'll have to reconnect Stripe to continue to create listings.`
  );
  refetch();
  }

src/sections/User/index.tsx

@@ -104,9 +104,10 @@ export const User = () => {
  ? ['2']
  : match.path === '/user/:id/bookings'
  ? ['3']
- : ['']
+ : ['1']
  }>
  <div className="user-sider__menuitem-avatar">
+ {/* <Avatar size={100} style={{ backgroundColor: iconColor }} icon={<UserOutlined />} /> */}
  <Avatar size={100} src={user?.avatar} />
  </div>
  <Menu.Item key="1" icon={<UserOutlined />}>