Merge pull request #21 from oslabs-beta/Hernan/codePreview

MarketPlace Button & CodePreview bottomTabs removal

Author: dentonwong

app/src/components/bottom/BottomTabs.tsx

@@ -80,11 +80,11 @@ const BottomTabs = (props): JSX.Element => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="CSS Editor"
           />
-          <Tab
+          {/* <Tab (there was no more need for this tab since we created an outside button for the codePreview)
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Code Preview"
-          />
+          /> */}
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -129,7 +129,7 @@ const BottomTabs = (props): JSX.Element => {
         {tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
         {tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
         {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
-        {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
+        {/* {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />} */}
         {tab === 4 && <Tree data={components} />}
         {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
         {tab === 6 && (

app/src/components/main/Canvas.tsx

@@ -10,7 +10,7 @@ import {
   changeFocus,
   addChild,
   snapShotAction,
-  toggleCodePreview
+  // toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 

app/src/components/right/DeleteProjects.tsx

@@ -53,9 +53,27 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Delete Project</DialogTitle>
+      <DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">DELETE PROJECTS</DialogTitle>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
       <List style={{ color: "#000" }}>
-        {projects.map((project: any, index: number) => (
+        {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
+          <ListItem
+            button
+            onClick={() => handleDelete(project.name)}
+            key={index}
+          >
+            <ListItemAvatar>
+              <Avatar className={classes.avatar}>
+                <DeleteRoundedIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={project.name} />
+          </ListItem>
+        ))}
+      </List>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title"> MP Projects</DialogTitle>
+      <List style={{ color: "#000" }}>
+        {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
           <ListItem
             button
             onClick={() => handleDelete(project.name)}

app/src/components/right/MarketplaceButton.tsx

@@ -55,11 +55,10 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Open Project</DialogTitle>
+      <DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">SAVED PROJECTS</DialogTitle>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
       <List style={{ color: "#000" }}>
-      {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 (
+      {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
     <ListItem
       button
       onClick={() => handleListItemClick(project.name)}
@@ -72,15 +71,13 @@ function ProjectsDialog(props: ProjectDialogProps) {
       </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 (
+      {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
     <ListItem
       button
       onClick={() => handleListItemClick(project.name)}
@@ -93,8 +90,8 @@ function ProjectsDialog(props: ProjectDialogProps) {
       </ListItemAvatar>
       <ListItemText primary={project.name} />
     </ListItem>
-  );
-})}
+  )
+)}
       </List>
     </Dialog>
   );

app/src/components/right/OpenProjects.tsx

@@ -357,7 +357,21 @@ function navbarDropDown(props) {
       ></input>
       <button onClick={() => joinRoom()}>Join Room</button>
       <p>In Room: {joinedRoom}</p>
-      <MarketplaceButton />
+      <Link to="/marketplace" style={{ textDecoration: 'none' }} target="_blank">
+        <button>
+          Marketplace
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-book"
+            viewBox="0 0 16 16"
+          >
+            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
+          </svg>
+        </button>
+      </Link>
       <LoginButton />
       <StyledMenu // Dropdown menu connected to Manage Project Button
         id="customized-menu"