Project Filtering

Author: raulclassico7

app/src/components/left/HTMLPanel.tsx

@@ -339,7 +339,7 @@ const useStyles = makeStyles({
     border: '1px solid #186BB4'
   },
   lightThemeFontColor: {
-    color: '#155084',
+    color: 'white',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }

app/src/components/marketplace/MarketplaceCard.tsx

@@ -17,6 +17,9 @@ import { MoreVert } from '@mui/icons-material';
 import React from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
+import {useDispatch, useSelector} from 'react-redux'
+import { RootState } from '../../redux/store';
+import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 
 interface Project {
   comments: string[]
@@ -34,12 +37,16 @@ const ITEM_HEIGHT = 48;
 const MarketplaceCard = ({proj} :{proj: Project}) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const state = useSelector((store:RootState) => store.appState);
+  console.log('HEY', state)
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
+
+
   return (
     <>
       <Card

app/src/components/right/OpenProjects.tsx

@@ -24,6 +24,7 @@ export interface ProjectDialogProps {
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
   const { onClose, open, projects } = props;
+  console.log(projects)
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   // If no projects selected, keep the name of the current displayed
@@ -40,6 +41,14 @@ function ProjectsDialog(props: ProjectDialogProps) {
     dispatch(openProject(selectedProject))
     onClose();
   };
+  // these two filter between user projects and market projects
+  // const userProjects = projects.filter((project: any) => {
+  //   project.forked === undefined
+  // })
+  // const marketProjects = projects.filter((project: any) => {
+  //   project.forked !== undefined
+  // })
+
   return (
     <Dialog
       onClose={handleClose}
@@ -48,20 +57,44 @@ function ProjectsDialog(props: ProjectDialogProps) {
     >
       <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Open Project</DialogTitle>
       <List style={{ color: "#000" }}>
-        {projects.map((project: any, index: number) => (
-          <ListItem
-            button
-            onClick={() => handleListItemClick(project.name)}
-            key={index}
-          >
-            <ListItemAvatar>
-              <Avatar className={classes.avatar}>
-                <FolderOpenIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={project.name} />
-          </ListItem>
-        ))}
+      {projects.filter((project: any) => project.forked === undefined).map((project: any, index: number) => {
+  console.log("Logging something inside the map:", project.forked); // Add this line
+  return (
+    <ListItem
+      button
+      onClick={() => handleListItemClick(project.name)}
+      key={index}
+    >
+      <ListItemAvatar>
+        <Avatar className={classes.avatar}>
+          <FolderOpenIcon />
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={project.name} />
+    </ListItem>
+  );
+})}
+      </List>
+      {/* this section handles the projects cloned from the marketplace */}
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">MP Projects</DialogTitle>
+      <List style={{ color: "#000" }}>
+      {projects.filter((project: any) => project.forked !== undefined).map((project: any, index: number) => {
+  console.log("Logging something inside the second map:", project.forked); // Add this line
+  return (
+    <ListItem
+      button
+      onClick={() => handleListItemClick(project.name)}
+      key={index}
+    >
+      <ListItemAvatar>
+        <Avatar className={classes.avatar}>
+          <FolderOpenIcon />
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={project.name} />
+    </ListItem>
+  );
+})}
       </List>
     </Dialog>
   );

app/src/interfaces/Interfaces.ts

@@ -2,6 +2,7 @@ import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
   name: string;
+  forked: boolean;
   isLoggedIn: boolean;
   components: Component[];
   rootComponents: number[];

app/src/redux/reducers/slice/appStateSlice.ts

@@ -13,6 +13,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 
 export const initialState: State = {
   name: '',
+  forked: false,
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
   components: [

server/models/reactypeModels.ts

@@ -78,7 +78,8 @@ const sessionSchema = new Schema({
 
 const projectSchema = new Schema(
   {
-    name: String,
+    name: {type: String, required: true},
+    forked: {type: String},
     likes: { type: Number, default: 0 },
     published: { type: Boolean, default: false },
     project: { type: Object, required: true },