Marketplace: Create,View, Edit, and Delete Listings (#53)

* Shoe market listings by course selected (unstyled)

* Various styling to market listing

* Styling improvements to market listings

* Create Listing Dialog button and form functionality

* Update listings with optimistic UI when adding

* Add image in temp object

* Added loading circle

* Removed picture

* Show listing details when clicked

* Added delete button to market listing

* Centered listing loading bar

* Edit listing dialog

* Fixed lint errors

Co-authored-by: Destin Estrela <[email protected]>

Author: destin-estrela

graphql.schema.json

@@ -5,7 +5,6 @@ import { withAuthenticator } from 'aws-amplify-react';
 import Sidebar from '../Components/Sidebar';
 import Content from '../Components/Content';
 import Navigation from '../Navigation/Navigation';
-import StudentPicture from '../assets/images/images-1.png';
 
 import './App.scss';
 
@@ -58,9 +57,6 @@ function App() {
          <div className="main container-fluid">
             <div className="row h-100">
                <div className="sidebar-container col-md-2 p-0 side">
-                  <div className="img-container">
-                     <img src={StudentPicture} alt="" className="img-fluid" />
-                  </div>
                   <div className="pl-2 pt-2 pr-2">{fname}</div>
                   <Sidebar />
                </div>

src/App/App.tsx

@@ -6,21 +6,21 @@ import TaskSubmissionOverview from '../TaskSubmissionOverview';
 import ViewTaskSubmission from '../ViewTaskSubmission';
 import SingleStudentOverview from '../SingleStudentOverview/SingleStudentOverview';
 import SingleStudentMasteryOverview from '../SingleStudentMasteryOverview/SingleStudentMasteryOverview';
-import CourseHome from '../CourseHome/CourseHome';
 import SingleTargetOverview from '../SingleTargetOverview/SingleTargetOverview';
 import SingleMissionOverview from '../SingleStudentOverview/SingleMissionOverview';
 import TaskView from '../../Screens/TaskView/TaskView';
 import TaskListView from '../TaskListView';
 import TaskSubmissionSummaryView from '../TaskSubmissionSummaryView';
 import { ClassMastery } from '../../Screens/ClassMastery';
 import './Content.css';
+import MarketHome from '../MarketHome/MarketHome';
 
 export default function Content() {
    return (
       <div className="content">
          <Switch>
             <Route path="/courseHome/:className">
-               <CourseHome />
+               <MarketHome />
             </Route>
             <Route path="/addNewCourse">
                <CreateCourseDialog />

src/Components/Content/Content.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import { Button, Dialog, DialogTitle, DialogContent } from '@material-ui/core';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { MarketListingInput, useAddListingMutation } from '../../__generated__/types';
+import ListingForm, { MarketListingFormInput } from './ListingForm';
+
+const Container = styled.div`
+   text-align: left;
+   fontfamily: 'Poppins', sans-serif;
+   margin-left: 36px;
+`;
+
+type Props = {
+   course: string;
+   callback: any;
+   refetch: any;
+};
+
+export function listingFormToInputType(values: MarketListingFormInput): MarketListingInput {
+   return {
+      listingName: values.listingName,
+      description: values.description,
+      image: values.image,
+      price: parseInt(values.price, 10),
+      stock: values.stock === '' ? -1 : parseInt(values.stock, 10),
+   };
+}
+
+function CreateListingDialog(props: Props) {
+   const [open, setOpen] = useState(false);
+   const [addListing] = useAddListingMutation();
+
+   const initialValues: MarketListingFormInput = {
+      price: '',
+      stock: '',
+      image: 'https://d29fhpw069ctt2.cloudfront.net/icon/image/73614/preview.svg',
+      description: '',
+      listingName: '',
+   };
+
+   const handleClickOpen = () => {
+      setOpen(true);
+   };
+
+   const handleClose = () => {
+      setOpen(false);
+   };
+
+   const handleSubmit = (values: MarketListingFormInput) => {
+      props.callback({
+         listingName: values.listingName,
+         price: values.price,
+         image: values.image,
+      });
+      handleClose();
+      addListing({
+         variables: {
+            course: props.course,
+            input: listingFormToInputType(values),
+         },
+         optimisticResponse: {
+            __typename: 'Mutation',
+            addMarketListing: {
+               course: props.course,
+               timesPurchased: 0,
+               __typename: 'MarketListing',
+               id: 'temp',
+               listedDate: new Date(),
+               listingName: values.listingName,
+               description: values.description,
+               image: values.image,
+               price: parseInt(values.price, 10),
+               stock: values.stock === '' ? -1 : parseInt(values.stock, 10),
+            },
+         },
+      })
+         .then(() => props.refetch())
+         .catch((error) => console.log(error));
+   };
+
+   return (
+      <Container>
+         <div>
+            <Button
+               style={{
+                  width: 200,
+                  marginTop: 20,
+                  backgroundColor: '#4274F3',
+                  color: 'white',
+               }}
+               onClick={handleClickOpen}
+               data-testid="create-btn"
+            >
+               Create New Listing
+            </Button>
+            <Dialog
+               open={open}
+               fullWidth
+               onClose={handleClose}
+               aria-labelledby="form-dialog-title"
+               maxWidth="sm"
+               data-testid="create-dialog"
+            >
+               <DialogTitle
+                  style={{ backgroundColor: '#4274F3', color: 'white' }}
+                  id="form-dialog-title"
+               >
+                  New Listing
+               </DialogTitle>
+               <DialogContent>
+                  <ListingForm
+                     initialValues={initialValues}
+                     handleClose={handleClose}
+                     onSubmit={handleSubmit}
+                  />
+               </DialogContent>
+            </Dialog>
+         </div>
+      </Container>
+   );
+}
+
+export default CreateListingDialog;

src/Components/MarketHome/CreateListingDialog.tsx

@@ -0,0 +1,75 @@
+.market-course-header {
+   margin-left: 36px;
+}
+
+.center {
+   margin: auto;
+   margin-top: 5em;
+   width: 50%;
+}
+
+.listing-card-outer {
+   display: inline-block;
+}
+
+.listing-card {
+   border: 1px solid rgb(255, 255, 255);
+   margin: 12px;
+   box-sizing: border-box;
+   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
+   border-radius: 8px;
+   overflow: hidden;
+   background: #fff;
+   width: 300px;
+   height: 150px;
+   display: inline-block;
+   vertical-align: top;
+   position: relative;
+}
+
+.listing-card-details {
+   margin-top: 1em;
+}
+
+.listing-card {
+   .listing-card-image {
+      padding-left: 15px;
+      float: left;
+      margin: 0px auto;
+      position: absolute;
+      top: 50%;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      width: 40;
+      height: 40;
+      border-radius: 50%;
+   }
+
+   .listing-card-header {
+      display: block;
+      height: 0px;
+   }
+
+   .listing-card-body {
+      float: right;
+      width: 55%;
+      padding-top: 10%;
+      padding-right: 9%;
+      .listing-title {
+         font-size: 1.4em;
+         color: black;
+         display: inline-flex;
+         align-content: center;
+      }
+      .listing-points {
+         color: rgb(0, 0, 0);
+         font-size: 1.5em;
+         font-weight: bold;
+      }
+   }
+}
+
+.listing-icon {
+   margin-left: 10px;
+   margin-bottom: 10px;
+}