Link to URL, select marketplacecontainer

Author: dentonwong

app/src/components/App.tsx

@@ -95,10 +95,8 @@ export const App = (): JSX.Element => {
           style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
         >
           ReacType
-        </header>
-   
+        </header>    
           <AppContainer />
-    
       </DndProvider>
     </div>
   );

app/src/containers/AppContainer.tsx

@@ -13,7 +13,8 @@ import MainContainer from './MainContainer';
 import NavBar from '../components/top/NavBar';
 import { RootState } from '../redux/store';
 import { setStyle } from '../redux/reducers/slice/styleSlice';
-
+import { useHistory } from 'react-router-dom';
+import MarketplaceContainer from './MarketplaceContainer';
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
@@ -23,8 +24,11 @@ declare module '@mui/styles/defaultTheme' {
 const lightTheme = theme1;
 const darkTheme = theme2; // dark mode color in theme.ts not reached
 const AppContainer = () => {
-  // setting state for changing light vs dark themes; linked to NavBar.tsx
+  //useHistory hook to grab the url, if it is /marketplace then selectively render MarketplaceContainer
+  const urlAdd = useHistory();
+  const isMarketplace = urlAdd.location.pathname === '/marketplace';
 
+  // setting state for changing light vs dark themes; linked to NavBar.tsx
   const { isDarkMode, style } = useSelector((store: RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     style: store.styleSlice.style
@@ -47,8 +51,12 @@ const AppContainer = () => {
           <NavBar setTheme={setTheme} isThemeLight={isThemeLight} />
         </div>
         <div className="app-container">
-          <LeftContainer isThemeLight={isThemeLight} />
-          <MainContainer isThemeLight={isThemeLight} />
+          {isMarketplace ? <MarketplaceContainer/> :
+            <>
+              <LeftContainer isThemeLight={isThemeLight} />
+              <MainContainer isThemeLight={isThemeLight} />
+            </>
+          }
         </div>
       </ThemeProvider>
     </StyledEngineProvider>

app/src/containers/MarketplaceContainer.tsx

@@ -1,12 +1,10 @@
 import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardContainer';
-import NavBar from '../components/top/NavBar';
 import React from 'react';
 import SearchBar from '../components/marketplace/Searchbar';
 
 const MarketplaceContainer = () => {
   return (
     <div style={containerStyles}>
-      <NavBar />
       <div style={contentStyles}>
         <h1 style={headingStyles}>Discover components built with ReacType</h1>
         <p style={subheadingStyles}>
@@ -23,7 +21,10 @@ const MarketplaceContainer = () => {
 const containerStyles: React.CSSProperties = {
   backgroundColor: '#111',
   minHeight: '100vh',
-  color: 'white'
+  width: '100vw',
+  color: 'white',
+  paddingBottom: '15vh',
+  overflow: 'auto',
 };
 
 const contentStyles: React.CSSProperties = {

app/src/index.tsx

@@ -51,7 +51,7 @@ ReactDOM.render(
           <Route exact path="/password" component={FBPassWord} />
           <PrivateRoute exact path="/" component={App} />
           <Route exact path="/dashboard" component={ProjectDashboard} />
-          <Route exact path="/marketplace" component={MarketplaceButton} />
+          <Route exact path="/marketplace" component={App} />
           <Route exact path="/tutorial" component={Tutorial} />
           <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
         </Switch>