Abstract away card component. (#154)

* Add Card component with story. * Replace card usage throughout codebase. (EventDetails is messed up.) * Add prop passthrough to Card. * Fix EventDetails component. * Add title prop to card. * Refactor usage of CardHeader. * Change Card export syntax.
HKN-UCSD · Sep 20, 2020 · 458800e · 458800e
1 parent f565de4
commit 458800e
Show file tree

Hide file tree

Showing 16 changed files with 236 additions and 222 deletions.
diff --git a/frontend/src/components/cards/Card.stories.tsx b/frontend/src/components/cards/Card.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Card, CardProps } from './Card';
+
+export default {
+  title: 'Cards/Card',
+  component: Card,
+} as Meta;
+
+const Template: Story<CardProps> = args => {
+  const { children, title } = args;
+  return <Card title={title}>{children}</Card>;
+};
+
+export const SampleCard = Template.bind({});
+SampleCard.args = {
+  children: <h3>Put stuff here!</h3>,
+};
+
+export const SampleCardWithTitle = Template.bind({});
+SampleCardWithTitle.args = {
+  children: <h3>This is the body</h3>,
+  title: 'Title',
+};
diff --git a/frontend/src/components/cards/Card.tsx b/frontend/src/components/cards/Card.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  Card as MuiCard,
+  CardHeader as MuiCardHeader,
+  CardContent as MuiCardContent,
+} from '@material-ui/core';
+
+export interface CardProps {
+  title?: string;
+  children: JSX.Element;
+}
+
+export function Card({ children, title, ...props }: CardProps): JSX.Element {
+  return (
+    <MuiCard elevation={3} {...props}>
+      {title ? <MuiCardHeader title={title} /> : null}
+      <MuiCardContent>{children}</MuiCardContent>
+    </MuiCard>
+  );
+}
diff --git a/frontend/src/components/cards/index.ts b/frontend/src/components/cards/index.ts
@@ -0,0 +1 @@
+export { Card } from './Card';
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
@@ -8,6 +8,7 @@ import FormLayout from './FormLayout';
 import InputField from './InputField';
 import Loading from './Loading';
 import { ButtonWithConfirmationModal, ButtonWithAlertModal } from './modals';
+import { Card } from './cards';
 import { PublicPageLayout } from './layouts';
 import NavBar from './NavBar';
 import Table from './Table';
@@ -17,6 +18,7 @@ export { OfficerNameAutocomplete } from './autocomplete';
 
 export {
   Button,
+  Card,
   MajorDropdownField,
   YearDropdownField,
   AffiliateDropdownField,

diff --git a/frontend/src/pages/CalendarPage/components/EventCard/index.js b/frontend/src/pages/CalendarPage/components/EventCard/index.js
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Typography,
-  Box,
-  Card,
-  CardHeader,
-  CardContent,
-  Button,
-} from '@material-ui/core';
+import { Typography, Box, Button } from '@material-ui/core';
 import RoomIcon from '@material-ui/icons/Room';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
@@ -15,31 +8,30 @@ import { Link } from 'react-router-dom';
 
 import styles from './styles';
 
+import { Card } from '@SharedComponents';
+
 function EventCard({ event, classes }) {
   return (
     <>
       {event && (
-        <Card>
-          <CardHeader title={event.name} />
-          <CardContent>
-            <Typography variant='h6' color='textSecondary' gutterBottom>
-              {format(parseISO(event.startDate), 'PP')} -{' '}
-              {format(parseISO(event.startDate), 'p')} to{' '}
-              {format(parseISO(event.endDate), 'p')}
-            </Typography>
-            <Box className={classes.locationContainer}>
-              <RoomIcon color='disabled' />
-              <Typography color='textSecondary'>{event.location}</Typography>
-            </Box>
-            <Button
-              variant='outlined'
-              color='primary'
-              to={`/events/${event.id}`}
-              component={Link}
-            >
-              See More
-            </Button>
-          </CardContent>
+        <Card title={event.name}>
+          <Typography variant='h6' color='textSecondary' gutterBottom>
+            {format(parseISO(event.startDate), 'PP')} -{' '}
+            {format(parseISO(event.startDate), 'p')} to{' '}
+            {format(parseISO(event.endDate), 'p')}
+          </Typography>
+          <Box className={classes.locationContainer}>
+            <RoomIcon color='disabled' />
+            <Typography color='textSecondary'>{event.location}</Typography>
+          </Box>
+          <Button
+            variant='outlined'
+            color='primary'
+            to={`/events/${event.id}`}
+            component={Link}
+          >
+            See More
+          </Button>
         </Card>
       )}
     </>

diff --git a/frontend/src/pages/EventDetailsPage/components/EventDetails/index.js b/frontend/src/pages/EventDetailsPage/components/EventDetails/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography, Card, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import { format, parseISO } from 'date-fns';
@@ -11,7 +11,7 @@ import Links from './Links';
 import styles from './styles';
 
 import { OfficerRenderPermission } from '@HOCs/RenderPermissions';
-import { Tags } from '@SharedComponents';
+import { Tags, Card } from '@SharedComponents';
 import * as ROUTES from '@Constants/routes';
 
 function EventDetailsComponent(props) {
@@ -40,93 +40,97 @@ function EventDetailsComponent(props) {
   const eventType = type || 'Event';
 
   return (
-    <div className={classes.root}>
-      <Card className={classes.eventDetailsCard}>
-        <Grid container direction='column' justify='center' spacing={3}>
-          <Grid item className={classes.firstRow}>
-            <Grid container direction='row' justify='center'>
-              <Grid item xs={6}>
-                <Typography className={classes.title} variant='h4'>
-                  {name}
-                  <Tags tags={[eventType]} />
-                </Typography>
-              </Grid>
+    <Grid container direction='column' alignItems='center'>
+      <Grid item>
+        <Card className={classes.eventDetailsCard}>
+          <Grid container direction='column' justify='center' spacing={3}>
+            <Grid item className={classes.firstRow}>
+              <Grid container direction='row' justify='center'>
+                <Grid item xs={6}>
+                  <Typography className={classes.title} variant='h4'>
+                    {name}
+                    <Tags tags={[eventType]} />
+                  </Typography>
+                </Grid>
 
-              <Grid item xs={5}>
-                {OfficerRenderPermission(DeleteEditButtons)({ eventId })}
+                <Grid item xs={5}>
+                  {OfficerRenderPermission(DeleteEditButtons)({ eventId })}
+                </Grid>
               </Grid>
             </Grid>
-          </Grid>
-
-          <Grid item>
-            <Grid container direction='row' justify='center'>
-              <Grid item xs={6}>
-                <Typography className={classes.hosts} variant='h6'>
-                  Hosts:{' '}
-                  {hosts.map(host => (
-                    <Typography key={host.id} className={classes.hostName}>
-                      {`${host.firstName} ${host.lastName}`}
-                    </Typography>
-                  ))}
-                </Typography>
-              </Grid>
-
-              <Grid item xs={5}>
-                <Grid container direction='column'>
-                  <Grid item>
-                    <Typography variant='h6'>
-                      Location: <Typography>{location}</Typography>
-                    </Typography>
-                  </Grid>
 
-                  <Grid item>
-                    <Typography variant='h6'>
-                      Start Time:{' '}
-                      <Typography>
-                        {format(parseISO(startDate), 'PPP p')}
+            <Grid item>
+              <Grid container direction='row' justify='center'>
+                <Grid item xs={6}>
+                  <Typography className={classes.hosts} variant='h6'>
+                    Hosts:{' '}
+                    {hosts.map(host => (
+                      <Typography key={host.id} className={classes.hostName}>
+                        {`${host.firstName} ${host.lastName}`}
                       </Typography>
-                    </Typography>
-                  </Grid>
+                    ))}
+                  </Typography>
+                </Grid>
 
-                  <Grid item>
-                    <Typography variant='h6'>
-                      End Time:{' '}
-                      <Typography>
-                        {format(parseISO(endDate), 'PPP p')}
+                <Grid item xs={5}>
+                  <Grid container direction='column'>
+                    <Grid item>
+                      <Typography variant='h6'>
+                        Location: <Typography>{location}</Typography>
+                      </Typography>
+                    </Grid>
+
+                    <Grid item>
+                      <Typography variant='h6'>
+                        Start Time:{' '}
+                        <Typography>
+                          {format(parseISO(startDate), 'PPP p')}
+                        </Typography>
+                      </Typography>
+                    </Grid>
+
+                    <Grid item>
+                      <Typography variant='h6'>
+                        End Time:{' '}
+                        <Typography>
+                          {format(parseISO(endDate), 'PPP p')}
+                        </Typography>
                       </Typography>
-                    </Typography>
+                    </Grid>
                   </Grid>
                 </Grid>
               </Grid>
             </Grid>
-          </Grid>
 
-          <Grid item>
-            <Grid container direction='row' justify='center' spacing={3}>
-              <Grid item xs={3}>
-                {OfficerRenderPermission(Links)({ urls })}
-              </Grid>
+            <Grid item>
+              <Grid container direction='row' justify='center' spacing={3}>
+                <Grid item xs={3}>
+                  {OfficerRenderPermission(Links)({ urls })}
+                </Grid>
 
-              <Grid item xs={8}>
-                <Typography variant='h6'>
-                  Description: <Typography>{description}</Typography>
-                </Typography>
+                <Grid item xs={8}>
+                  <Typography variant='h6'>
+                    Description: <Typography>{description}</Typography>
+                  </Typography>
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
-        </Grid>
-      </Card>
-
-      <Button
-        className={classes.calendarButton}
-        variant='outlined'
-        color='secondary'
-        to={ROUTES.CALENDAR}
-        component={Link}
-      >
-        Back To Calendar
-      </Button>
-    </div>
+        </Card>
+      </Grid>
+
+      <Grid item>
+        <Button
+          className={classes.calendarButton}
+          variant='outlined'
+          color='secondary'
+          to={ROUTES.CALENDAR}
+          component={Link}
+        >
+          Back To Calendar
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 

diff --git a/frontend/src/pages/EventDetailsPage/components/EventDetails/styles.js b/frontend/src/pages/EventDetailsPage/components/EventDetails/styles.js
@@ -1,13 +1,5 @@
 const styles = () => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
   eventDetailsCard: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
     width: '536px',
   },
   firstRow: {

diff --git a/frontend/src/pages/EventEditPage/event_edit.js b/frontend/src/pages/EventEditPage/event_edit.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from '@material-ui/core';
 
 import EventEditForm from './components/EventEditForm';
 
+import { Card } from '@SharedComponents';
 import { getEventById, updateEvent } from '@Services/EventService';
 
 class EventEditPage extends React.Component {

diff --git a/frontend/src/pages/EventRsvpPage/index.js b/frontend/src/pages/EventRsvpPage/index.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar, Card, Typography, Grid } from '@material-ui/core';
+import { Avatar, Typography, Grid } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 import EventRsvpForm from './components/EventRsvpForm';
 import styles from './styles';
 
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
-import { Loading, PublicPageLayout } from '@SharedComponents';
+import { Loading, Card, PublicPageLayout } from '@SharedComponents';
 import { getEventById, rsvpToEvent } from '@Services/EventService';
 
-
 class EventRsvpPage extends React.Component {
   constructor(props) {
     const {

diff --git a/frontend/src/pages/EventSignInPage/index.js b/frontend/src/pages/EventSignInPage/index.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar, Card, Typography, Grid } from '@material-ui/core';
+import { Avatar, Typography, Grid } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 import EventSignInForm from './components/EventSignInForm';
 import styles from './styles';
 
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
-import { Loading, PublicPageLayout } from '@SharedComponents';
+import { Loading, Card, PublicPageLayout } from '@SharedComponents';
 import { getEventById, signInToEvent } from '@Services/EventService';
 
-
 class EventSignInPage extends React.Component {
   constructor(props) {
     const {