Merge pull request #17 from oslabs-beta/denton/link

Denton/link

Author: liamroh

app/src/Dashboard/NavbarDash.tsx

@@ -93,11 +93,13 @@ export default function NavBar(props) {
     <div className={classes.root} style={style}>
       <AppBar position='static'>
         <Toolbar>
-          <Avatar src={greenLogo}></Avatar>
-          <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
-            ReacType
-          </Typography>
-           <div style ={ { textDecoration: 'none' } }>
+          <Link to="/" style={{display: 'inline-flex', justifyContent: 'center', textDecoration: 'none'}}>  
+            <Avatar src={greenLogo}></Avatar>
+            <Typography variant="h6" style={{ marginTop: '0.3rem', marginLeft: '0.5rem', color: 'silver' }} className={classes.title}>
+              ReacType
+            </Typography>
+          </Link> 
+           <div style ={ { marginLeft: '0.5rem', textDecoration: 'none' } }>
             <Button
             variant='contained'
             color='primary'

app/src/components/App.tsx

@@ -93,15 +93,15 @@ export const App = (): JSX.Element => {
 
   return (
     <div className="app">
-      <DndProvider backend={HTML5Backend}>
+      
         <header
           style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
         >
           ReacType
         </header>
 
         <AppContainer />
-      </DndProvider>
+     
     </div>
   );
 };

app/src/components/bottom/BottomPanel.tsx

@@ -36,12 +36,13 @@ const BottomPanel = (props): JSX.Element => {
   }, []);
 
   return (
+    <>
     <div className="bottom-panel" id="resize" ref={node}>
       <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
         ......
       </div>
       <BottomTabs isThemeLight={props.isThemeLight} />
-    </div>
+    </div></>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -49,7 +49,7 @@ const BottomTabs = (props): JSX.Element => {
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
-      style={{ backgroundColor: '#191919' }}
+      style={{ backgroundColor: '#191919' , zIndex: 1, borderTop: '2px solid grey'}}
     >
       <Box
         display="flex"

app/src/components/left/Sidebar.tsx

@@ -12,6 +12,7 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ value, setValue }) => {
+  console.log('sidebar value', value);
   return (
     <Tabs
       orientation="vertical"

app/src/components/main/CanvasContainer.tsx

@@ -25,31 +25,38 @@ function CanvasContainer(props): JSX.Element {
   const canvasContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
-    border: '2px Solid grey',
-    overflow: 'auto',
+    border: '2px solid grey',
+    borderBottom: 'none',
+    overflow: 'auto',    
   };
 
   const codePreviewStyle = {
-    position: 'absolute',
+    position: 'fixed',
     width: 'max-content',
     height: 'max-content',
     bottom: '100px', 
     right: '51vw', 
     textAlign: 'center',
     color: '#ffffff', 
-    backgroundColor: '#151515'
+    backgroundColor: '#151515',
+    zIndex: 0
+ 
+    
+    
   } as const;
 
   return (
     <div style={canvasContainerStyle}>
       {state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
       {!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
+     
       <Button
         style={codePreviewStyle}
         onClick={onClickCodePreview}
       >
         Code Preview
       </Button>
+     
     </div>
   );
 }

app/src/components/main/DemoRender.tsx

@@ -23,6 +23,7 @@ const DemoRender = (): JSX.Element => {
     width: '100%',
     backgroundColor: '#FBFBFB',
     border: '2px Solid grey',
+    borderBottom: 'none',
     overflow: 'auto'
   };
 

app/src/components/marketplace/MarketplaceCard.tsx

@@ -18,8 +18,20 @@ import React from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
 
+interface Project {
+  comments: string[]
+  createdAt: Date
+  likes: number
+  name: string
+  project: object
+  published: boolean
+  userId: number
+  username: string
+  _id: number
+}
+
 const ITEM_HEIGHT = 48;
-const MarketplaceCard = () => {
+const MarketplaceCard = ({proj} :{proj: Project}) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -58,8 +70,8 @@ const MarketplaceCard = () => {
               <MoreVert />
             </IconButton>
           }
-          title="Gradient Buttons"
-          subheader="Liam Rohn"
+          title={proj.name}
+          subheader={proj.username}
         />
         <Menu
           id="long-menu"

app/src/components/marketplace/MarketplaceCardContainer.tsx

@@ -1,10 +1,32 @@
 import { Container, Grid } from '@mui/material';
 
 import MarketplaceCard from './MarketplaceCard';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import axios from 'axios';
 
 const MarketplaceCardContainer = () => {
-  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  const [marketplaceProjects, setMarketplaceProjects] = useState([]);
+  useEffect(() => {
+    async function marketplaceFetch() {
+      try {
+        const response = await axios.get('/getMarketplaceProjects', {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          withCredentials: true,
+        });
+
+        setMarketplaceProjects(response.data);
+    
+      } catch (error) {
+        console.error('Error fetching MP data:', error);
+      }
+    }
+    marketplaceFetch();
+    
+  }, []);
+  
   return (
     <>
       <Container>
@@ -14,9 +36,10 @@ const MarketplaceCardContainer = () => {
           spacing={{ xs: 2, md: 3 }}
           columns={{ xs: 4, sm: 8, md: 12 }}
         >
-          {numbers.map((num) => (
-            <Grid item xs={4} sm={4} md={4} key={num}>
-              <MarketplaceCard />
+          {marketplaceProjects.map((proj, i) => (
+
+            <Grid item xs={4} sm={4} md={4} key={i}>
+              <MarketplaceCard proj={proj}/>
             </Grid>
           ))}
         </Grid>

app/src/components/top/NavBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-
+import { Link } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -58,12 +58,14 @@ const NavBar = () => {
           : { backgroundColor: '#151515' }
       }
     >
+      <Link to="/" style={{ textDecoration: 'none' }}>
       <div className="main-logo">
         <Avatar src={logo}></Avatar>
         <h1 style={isDarkMode ? { color: 'white' } : { color: 'white' }}>
           ReacType
         </h1>
       </div>
+      </Link>  
       <div style={buttonContainerStyle}>
         <button style={buttonStyle}>Share</button>
         <NewExportButton />

app/src/containers/AppContainer.tsx

@@ -16,7 +16,7 @@ import NavBar from '../components/top/NavBar';
 import { RootState } from '../redux/store';
 
 import { setStyle } from '../redux/reducers/slice/styleSlice';
-
+import { useHistory } from 'react-router-dom';
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
@@ -26,9 +26,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
@@ -51,8 +53,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>
         {/* <MarketplaceContainer /> */}
       </ThemeProvider>

app/src/containers/LeftContainer.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import Sidebar from '../components/left/Sidebar';
 
 function App() {
-  const [value, setValue] = useState<number | null>(null);
+  const [value, setValue] = useState<number | null>(5);
 
   return (
     <div style={{ display: 'flex' }}>

app/src/containers/MainContainer.tsx

@@ -12,11 +12,11 @@ const MainContainer = (props): JSX.Element => {
 
   return (
     <div className="main-container" style={style}>
-      <div className="main">
+      <div className="main" >
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div className="bottom-hide">
+      <div className="bottom-hide" >
         <BottomPanel isThemeLight={props.isThemeLight} />
       </div>
     </div>

app/src/containers/MarketplaceContainer.tsx

@@ -1,12 +1,13 @@
 import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardContainer';
-import NavBar from '../components/top/NavBar';
-import React from 'react';
 import SearchBar from '../components/marketplace/Searchbar';
+import React from 'react';
 
 const MarketplaceContainer = () => {
+
+
+  
   return (
     <div style={containerStyles}>
-      <NavBar />
       <div style={contentStyles}>
         <h1 style={headingStyles}>Discover components built with ReacType</h1>
         <p style={subheadingStyles}>
@@ -23,7 +24,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

@@ -7,7 +7,8 @@ import {
   HashRouter as Router,
   Switch
 } from 'react-router-dom';
-
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import App from './components/App';
 import Cookies from 'js-cookie';
 import FBPassWord from './components/login/FBPassWord';
@@ -49,9 +50,11 @@ ReactDOM.render(
           <Route exact path="/login" component={SignIn} />
           <Route exact path="/signup" component={SignUp} />
           <Route exact path="/password" component={FBPassWord} />
-          <PrivateRoute exact path="/" component={App} />
+          <DndProvider backend={HTML5Backend}>
+            <Route exact path="/marketplace" component={App} />
+            <PrivateRoute exact path="/" component={App} />
+          </DndProvider>
           <Route exact path="/dashboard" component={ProjectDashboard} />
-          <Route exact path="/marketplace" component={MarketplaceButton} />
           <Route exact path="/tutorial" component={Tutorial} />
           <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
         </Switch>

app/src/public/styles/style.css

@@ -493,7 +493,7 @@ BOTTOM PANEL
 */
 
 .bottom-hide {
-  max-height: 76px;
+  max-height: 64px;
   box-sizing: border-box;
   transition: all 0.5s ease-in-out;
 }
@@ -521,26 +521,31 @@ BOTTOM PANEL
 }
 
 #resize-drag {
+
   cursor: row-resize;
-  background-color: silver;
-  height: 16px;
-  top: 0;
-  /* left: 50px; */
-  width: 100%;
-  border: 2px solid black;
-  border-radius: 8px;
+  height: 25px;
+  width: 75px;
+  background-color: rgb(0, 0, 0);
+  outline: 2px solid rgba(192, 192, 192, 0.5);
+  outline-offset: -5px;
   text-align: center;
-  line-height: 0px;
+  border-radius: 10px 10px 0 0;
+  align-self: center;
+  margin-top: -25px;
+  color: silver;
   user-select: none;
-  color: rgb(32, 32, 32);
-  font-size: x-large;
+  z-index: 1;
+
 }
 
 .bottom-panel {
   transition: width 250ms ease-in-out;
   background-color: #003366;
   width: 100%;
   height: 100%;
+  display:flex;
+  flex-direction: column;
+
 }
 
 .htmlattr {

server/server.ts

@@ -212,7 +212,7 @@ app.patch(
 //Get from Marketplace
 app.get(
   '/getMarketplaceProjects',
-  sessionController.isLoggedIn,
+  // sessionController.isLoggedIn, //Maybe don't need to check if they have a session since guests should still see?
   marketplaceController.getPublishedProjects,
   (req, res) => res.status(200).json(res.locals.publishedProjects)
 );