Modified both dropdowns so that they allow props to bubble down. (#86)

This is so that the dropdowns can have their specific characteristics,
while still allowing users to customize them.

src/components/dropdowns/MajorDropdownField/index.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'formik';
+import { TextField } from 'formik-material-ui';
+
+import ELIGIBLE_MAJORS from '../../../constants/eligibleMajors';
+import styles from './styles';
+
+const createFullMajorTitle = (department, major) => {
+  let fullMajorTitle = '';
+
+  if (ELIGIBLE_MAJORS[department][major] === 'Computer Engineering') {
+    if (department === 'CSE')
+      fullMajorTitle = `${ELIGIBLE_MAJORS[department][major]} - CSE`;
+    else if (department === 'ECE')
+      fullMajorTitle = `${ELIGIBLE_MAJORS[department][major]} - ECE`;
+  } else fullMajorTitle = ELIGIBLE_MAJORS[department][major];
+
+  return fullMajorTitle;
+};
+
+const MajorDropdownField = props => {
+  const { classes, ...otherProps } = props;
+
+  return (
+    <Field
+      className={classes.root}
+      component={TextField}
+      select
+      {...otherProps}
+    >
+      {Object.keys(ELIGIBLE_MAJORS).map(department =>
+        Object.keys(ELIGIBLE_MAJORS[department]).map(major => {
+          const fullMajorTitle = createFullMajorTitle(department, major);
+          return <MenuItem value={fullMajorTitle}>{fullMajorTitle}</MenuItem>;
+        })
+      )}
+    </Field>
+  );
+};
+
+export default withStyles(styles)(MajorDropdownField);

src/components/dropdowns/MajorDropdownField/styles.js

@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    minWidth: '273.333px',
+  },
+});
+
+export default styles;

src/components/dropdowns/YearDropdownField/index.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { MenuItem } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'formik';
+import { TextField } from 'formik-material-ui';
+
+import styles from './styles';
+
+const yearDropdownChoices = (minYear, maxYear) => {
+  const yearChoices = [];
+
+  for (let year = 0; year <= maxYear - minYear; year += 1) {
+    yearChoices.push(year + minYear);
+  }
+
+  return yearChoices;
+};
+
+const YearDropdownField = props => {
+  const { classes, minYear, maxYear, ...otherProps } = props;
+
+  return (
+    <Field
+      className={classes.root}
+      component={TextField}
+      select
+      {...otherProps}
+    >
+      {yearDropdownChoices(minYear, maxYear).map(year => (
+        <MenuItem key={year} value={year}>
+          {year}
+        </MenuItem>
+      ))}
+    </Field>
+  );
+};
+
+YearDropdownField.propTypes = {
+  minYear: PropTypes.number.isRequired,
+  maxYear: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(YearDropdownField);

src/components/dropdowns/YearDropdownField/styles.js

@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    minWidth: '124.667px',
+  },
+});
+
+export default styles;

src/components/dropdowns/index.js

@@ -1,4 +1,5 @@
-import MajorDropdown from './MajorDropdown';
-import YearDropdown from './YearDropdown';
+import MajorDropdownField from './MajorDropdownField';
+import YearDropdownField from './YearDropdownField';
+
+export { MajorDropdownField, YearDropdownField };
 
-export { MajorDropdown, YearDropdown };