Merge pull request #37 from cmu-jsa/career_fair

Added Career Fair page

package.json

@@ -73,7 +73,11 @@
     "webpack-dev-server": "^2.5.1"
   },
   "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@material-ui/core": "^4.11.3",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
     "body-parser": "^1.18.2",
     "d3-dsv": "^1.0.8",
     "express": "^4.16.3",

src/routes/career/CompanyListItem.js

@@ -0,0 +1,172 @@
+/**
+ * Company List Item Component
+ *
+ * @module src/routes/career
+ */
+
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Chip from '@mui/material/Chip';
+import Collapse from '@mui/material/Collapse';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {
+    number, object
+} from 'prop-types';
+import ReactMarkdown from 'react-markdown';
+
+import { 
+    PlaidDescription,
+    JmcDescription,
+    MujinDescription,
+    MenuDescription,
+    PlaystationDescription
+} from './descriptions';
+
+const descriptions = {
+    0: PlaidDescription,
+    1: JmcDescription,
+    2: MujinDescription,
+    3: MenuDescription,
+    4: PlaystationDescription
+};
+
+/* eslint-disable no-unused-vars */
+const ExpandMore = styled((props) => {
+    const { expand, ...other } = props;
+    return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+    transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shortest
+    }) }));
+/* eslint-enable no-unused-vars */
+
+const CompanyListItem = (props) => {
+    const { company, index } = props;
+    const [expanded, setExpanded] = React.useState(false);
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
+
+    return (
+        <ListItem>
+            <Card sx={{ minWidth: 768 }}> 
+                <CardMedia
+                    component='img'
+                    height='250'
+                    image={company.imagePath}
+                    alt={company.name}
+                />
+                <CardContent>
+                    <Typography 
+                        gutterBottom variant="h5"
+                        component="div">
+                        {company.name}
+                    </Typography>
+                    <Typography variant="body2">
+                        {company.industry}
+                    </Typography>
+                </CardContent>
+                <CardContent>
+                    <Stack spacing={1}>
+                        <Stack direction="row" spacing={1}>
+                            {company.intern === "1" && 
+                                <Chip
+                                    label="Internship"
+                                    color="primary"
+                                    size ='small'
+                                />
+                            }
+                            {company.fulltime === "1" &&
+                                <Chip
+                                    label="Fulltime"
+                                    color="primary"
+                                    size ='small'
+                                />
+                            }
+                        </Stack>
+                        <Stack direction="row" spacing={1}>
+                            {company.japan === "1" &&
+                                <Chip
+                                    label="Japan"
+                                    color="secondary"
+                                    size ='small'
+                                />
+                            }
+                            {company.us === "1" &&
+                                <Chip
+                                    label="US"
+                                    color="secondary"
+                                    size ='small'
+                                />
+                            }
+                            {company.china === "1" &&
+                                <Chip
+                                    label="China"
+                                    color="secondary"
+                                    size ='small'
+                                />
+                            }
+                        </Stack>
+                        <Stack direction="row" spacing={1}>
+                            {company.japanese === "1" &&
+                                <Chip
+                                    label="Japanese required"
+                                    color="success"
+                                    size ='small'
+                                />
+                            }
+                            {company.english === "1" &&
+                                <Chip
+                                    label="English required"
+                                    color="success"
+                                    size ='small'
+                                />
+                            }
+                        </Stack>
+                    </Stack>
+                </CardContent>
+                <CardActions>
+                    <Button
+                        size="small"
+                        href={company.url}
+                        target="_blank">
+                        Website
+                    </Button>
+                    <ExpandMore
+                        expand={expanded}
+                        onClick={handleExpandClick}
+                        aria-expanded={expanded}
+                        aria-label="show more"
+                    >
+                        <ExpandMoreIcon />
+                    </ExpandMore>
+                </CardActions>
+                <Collapse in={expanded} timeout="auto" unmountOnExit>
+                    <CardContent>
+                        <ReactMarkdown>
+                            {descriptions[index]}
+                        </ReactMarkdown>
+                    </CardContent>
+                </Collapse>
+            </Card>
+        </ListItem>
+    );
+};
+
+CompanyListItem.propTypes = {
+    company: object,
+    index: number
+};
+
+export default CompanyListItem;

src/routes/career/careerSchedule.csv

@@ -0,0 +1,6 @@
+Category,Start Date,End Date,Event,Time,Culture Tag,"Day (not used, keep for \r issues)",,,,,,
+English,"Thursday, October 21",,Sony Interactive Entertainment,20:00-20:30,playstation,1,,,,,,
+English,"Thursday, October 21",,Japan Medical Company,20:40-21:10,jmc,0,,,,,,
+English,"Friday, October 22",,Mujin,20:00-20:30,mujin,0,,,,,,
+English,"Friday, October 22",,Menu,20:40-21:10,menu,0,,,,,,
+Japanese,"Friday, October 22",,Plaid,21:20-22:50,plaid,0,,,,,,

src/routes/career/careerSchedule.js

@@ -0,0 +1,146 @@
+/**
+ * Matsuri Schedule page
+ *
+ * @module src/routes/matsuri/schedule
+ */
+
+
+ import React from 'react';
+ import './index.less';
+
+ /**
+  * Schedule Table Component
+  *  
+  * @returns {ReactElement} The component's elements.
+  */
+ class ScheduleTable extends React.PureComponent {
+     /**
+      * Initializes the component.
+      */
+     constructor() {
+         super();
+
+         let csvData = require('./careerSchedule.csv');
+         let headerDates = new Set();
+         csvData.forEach(event => { headerDates.add(event['Start Date']);});
+         const currYear = 2021;
+         headerDates = Array.from(headerDates);
+         headerDates.sort((s1, s2) => {
+             const date1 = new Date(s1);
+             const date2 = new Date(s2);
+             date1.setFullYear(currYear);
+             date2.setFullYear(currYear);
+             return (date1 < date2 ? -1 : 1);
+         });
+
+         this.state = {
+             scheduleData: csvData,
+             headerDates: headerDates
+         };
+     }
+     /**
+      * Get label for type of event
+      * 
+      * @param {string} type Type of event
+      * @returns {JSX.Element} Event label
+      */
+     getLabel(type) {
+         let color;
+         switch (type) {
+             case 'English':
+                 color = 'green';
+                 break;
+             case 'Japanese':
+                 color = 'blue';
+                 break;
+             case 'Game':
+                 color = 'green';
+                 break;
+             default:
+                 break;
+         }
+         return (
+             <span style={{
+                 backgroundColor: color,
+                 borderRadius: '12px',
+                 color: 'white',
+                 padding: '5px',
+                 marginLeft: '24px' }}>
+                 {type}
+             </span>
+         );
+     }
+
+     /**
+      * Get event link
+      * 
+      * @param {Object} event Event object
+      * @returns {JSX.Element} Event label
+      */
+     getEventLink(event) {
+         const cultureTag = event['Culture Tag'];
+         let link;
+         switch (cultureTag) {
+             case 'Food':
+                 link = '/matsuriculture/food/';
+                 break;
+             case 'Art':
+                 link = '/matsuriculture/art/';
+                 break;
+             case 'Music':
+                 link = '/matsuriculture/music/';
+                 break;
+             case 'Games':
+                 link = '/matsuriculture/games/';
+                 break;
+             case 'Literature':
+                 link = '/matsuriculture/literature/';
+                 break;
+             case 'Culture':
+                 link = '/matsuriculture/';
+                 break;
+             default:
+                 link = false;
+         }
+         return link;
+     }
+
+     /**
+      * Renders the component.
+      *
+      * @returns {ReactElement} The component's elements.
+      */
+     render() {
+         return (
+             <div className='schedule'>
+                 {this.state.headerDates.map(headerDate => (
+                     <div className='matsuri-day' style={{ position: 'relative' }} key={headerDate.key}>
+                         <div style={{ position: 'sticky', top: '43px', borderRadius: '6px', color: 'white', backgroundColor: '#2e3192', padding: '10px' }}>
+                             {headerDate}
+                         </div>
+                         <table style={{ width: '100%' }}>
+                             {this.state.scheduleData.filter(event => event['Start Date'] === headerDate).map(event => (
+                                 <tr className='row' style={{ width: '100%', margin: '10px' }} key={event.key}>
+                                     <div className='flex-row' style={{ display: 'flex', justifyContent: 'space-between', padding: '10px' }}>
+                                         <div className='event-time' style={{ width: '20%' }}>
+                                             {event['Time']}
+                                         </div>
+                                         <div className='event-detials' style={{ width: '80%', display: 'flex', justifyContent: 'space-between' }}>
+                                             {this.getEventLink(event)
+                                                 ? <a href={this.getEventLink(event)}>{event.Event}</a>
+                                                 : event.Event
+                                             }
+                                             {this.getLabel(event['Category'])}
+                                         </div>
+                                     </div>
+                                 </tr>
+                             ))}
+                         </table>
+                     </div>
+                 ))}
+             </div>
+         );
+     }
+ }
+
+ export default ScheduleTable;

src/routes/career/companies.csv

@@ -0,0 +1,6 @@
+name,industry,imagePath,url,intern,fulltime,japan,us,china,japanese,english,
+Plaid Inc.,Marketing/Analytics,/images/career/plaid.png,https://plaid.co.jp/,1,0,1,0,0,1,0
+Japan Medical Company,Medical Technology,/images/career/jmc.png,https://japanmedicalcompany.co.jp/en/,1,1,1,0,0,1,0,
+Mujin,Computer Science and Robotics,/images/career/mujin.png,https://mujin-corp.com/,1,1,1,1,1,0,1,
+Menu,Food Delivery,/images/career/menu.png,https://app.menu.jp/,1,1,1,0,0,0,1,
+Sony Interactive Entertainment,Entertainment Technology,/images/career/playstation.png,https://www.sie.com/jp/saiyo/newgrad/internship.html,1,0,1,0,0,1,1,