refactor(item-card): show presenter name and cost in more info modal

AAISS · Nov 27, 2023 · 9d8d5f1 · 9d8d5f1
1 parent 7f28b22
commit 9d8d5f1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/frontend/src/components/item-card/item-card.jsx b/frontend/src/components/item-card/item-card.jsx
@@ -4,7 +4,7 @@ import { Button, Card, CardActions, CardContent, CardHeader, Chip, Divider, Stac
 import PropTypes from 'prop-types';
 import MoreInfoModal from './more-info-modal';
 
-const Presenter = ({ presenterName }) => (
+export const Presenter = ({ presenterName }) => (
   <Stack flexDirection="row" alignItems="center" gap={1}>
     <Person />
     <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
@@ -14,7 +14,7 @@ const Presenter = ({ presenterName }) => (
 );
 
 // TODO: format cost with commas
-const Cost = ({ cost }) => (
+export const Cost = ({ cost }) => (
   <Stack flexDirection="row" alignItems="center" gap={1}>
     <CreditCard />
     <Typography variant="overline" sx={{ fontSize: 14 }} color="text.secondary">
@@ -106,6 +106,8 @@ const ItemCard = ({
         visibility={moreInfoModalVisibility}
         onVisibilityChange={() => setMoreInfoModalVisibility(false)}
         title={title}
+        presenterName={presenterName}
+        cost={cost}
         purchaseState={purchaseState}
         hasProject={hasProject}
         prerequisites={prerequisites}

diff --git a/frontend/src/components/item-card/more-info-modal.jsx b/frontend/src/components/item-card/more-info-modal.jsx
@@ -13,6 +13,7 @@ import {
   Chip,
 } from '@mui/material';
 import PropTypes from 'prop-types';
+import { Cost, Presenter } from './item-card';
 
 const Prerequisites = ({ prerequisites }) => (
   <>
@@ -42,6 +43,8 @@ const MoreInfoModal = ({
   visibility,
   onVisibilityChange,
   title,
+  presenterName,
+  cost,
   purchaseState,
   hasProject,
   prerequisites,
@@ -68,6 +71,9 @@ const MoreInfoModal = ({
     >
       <DialogTitle variant="h5">{title}</DialogTitle>
       <DialogContent>
+        <Presenter presenterName={presenterName} />
+        <Cost cost={cost} />
+        <Divider sx={{ my: 2 }} />
         <Prerequisites prerequisites={prerequisites} />
         <Divider sx={{ my: 2 }} />
         <Syllabus syllabus={syllabus} />
@@ -96,6 +102,8 @@ const MoreInfoModal = ({
 
 MoreInfoModal.propTypes = {
   title: PropTypes.string,
+  presenterName: PropTypes.string,
+  cost: PropTypes.number,
   isBought: PropTypes.bool,
   purchaseState: PropTypes.number,
   prerequisites: PropTypes.string,