fixed duplicate HTML5Backend

Author: dentonwong

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/containers/MarketplaceContainer.tsx

@@ -1,8 +1,11 @@
 import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardContainer';
-import React from 'react';
 import SearchBar from '../components/marketplace/Searchbar';
+import React from 'react';
 
 const MarketplaceContainer = () => {
+
+
+  
   return (
     <div style={containerStyles}>
       <div style={contentStyles}>

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={App} />
           <Route exact path="/tutorial" component={Tutorial} />
           <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
         </Switch>

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)
 );