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 />