Event API integration complete (#145)

* Got a lot of event api integration done, but not all.

Still event edit page left, probably the trickiest one of them all.
Other than that not sure if there is anything else that uses event
services (if there are then we can refactor with the new event api
functions).

Just set up the user api functions file, have not done any integration
for user api.

* Added autocompletion component

* Finished with integration for event edit page.

* Added changes to address review of PR #145.

* Removed duplicate config to turn off import/prefer-default-export.

* Just for deploy preview.

frontend/.eslintrc

@@ -43,7 +43,7 @@
         "js": "never",
         "jsx": "never",
         "ts": "never",
-        "tsx": "never",
+        "tsx": "never"
       }
     ],
     "import/order": [

frontend/CODEOWNERS

@@ -3,3 +3,4 @@
 
 # These owners will be the default owners for everything in the repo.
 @HKN-UCSD/SoftwareDevs
+

frontend/package.json

@@ -25,6 +25,7 @@
     "firebase-tools": "^7.16.2",
     "formik": "^2.1.4",
     "formik-material-ui": "^2.0.0-beta.1",
+    "formik-material-ui-lab": "0.0.5",
     "formik-material-ui-pickers": "0.0.8",
     "material-table": "1.68.0",
     "material-ui": "^0.20.2",
@@ -48,7 +49,7 @@
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --passWithNoTests",
     "cypress": "npx cypress run",
-    "lint": "eslint --fix './src/**/*.{js,ts,tsx}'",
+    "lint": "eslint --fix ./src/**/*.{js,ts,tsx}",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "precodegen": "rimraf src/api/*",

frontend/src/components/autocomplete/OfficerNameAutocomplete/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+
+import { BaseAutocomplete } from '../base';
+
+import { getMultipleUsers, getUserNames } from '@Services/UserService';
+
+type OfficerNameData = {
+  id: number;
+  firstName: string;
+  lastName: string;
+};
+
+type OfficerAutocompleteProp = {
+  name: string;
+  label: string;
+  fullWidth: boolean;
+};
+
+export const OfficerNameAutocomplete = (props: OfficerAutocompleteProp) => {
+  const { name, label, fullWidth } = props;
+  const [officerNames, setOfficerNames] = useState<OfficerNameData[]>([]);
+
+  useEffect(() => {
+    getMultipleUsers({
+      officers: true,
+      names: true,
+    }).then(officerNameArr => {
+      setOfficerNames(getUserNames(officerNameArr));
+    });
+  }, []);
+
+  return (
+    <BaseAutocomplete
+      name={name}
+      label={label}
+      multiple
+      filterSelectedOptions
+      options={officerNames}
+      getOptionLabel={option => `${option.firstName} ${option.lastName}`}
+      getOptionSelected={(option, value) =>
+        option.id === value.id &&
+        option.firstName === value.firstName &&
+        option.lastName === value.lastName
+      }
+      fullWidth={fullWidth}
+    />
+  );
+};

frontend/src/components/autocomplete/base/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Field } from 'formik';
+import { Autocomplete } from 'formik-material-ui-lab';
+import { TextField } from '@material-ui/core';
+import { AutocompleteRenderInputParams } from '@material-ui/lab/Autocomplete';
+
+type BaseAutoCompleteProp = {
+  name: string;
+  label: string;
+  options: Array<any>;
+  getOptionSelected?: (option: any, value?: any) => any;
+  getOptionLabel?: (option: any) => any;
+  multiple?: boolean;
+  filterSelectedOptions?: boolean;
+  fullWidth?: boolean;
+};
+
+export const BaseAutocomplete = ({
+  name,
+  label,
+  options,
+  getOptionSelected,
+  getOptionLabel,
+  multiple = false,
+  filterSelectedOptions = false,
+  fullWidth = false,
+}: BaseAutoCompleteProp) => {
+  return (
+    <Field
+      name={name}
+      options={options}
+      getOptionLabel={getOptionLabel}
+      getOptionSelected={getOptionSelected}
+      component={Autocomplete}
+      multiple={multiple}
+      filterSelectedOptions={filterSelectedOptions}
+      fullWidth={fullWidth}
+      renderInput={(params: AutocompleteRenderInputParams) => (
+        <TextField {...params} label={label} variant='outlined' />
+      )}
+    />
+  );
+};
+
+BaseAutocomplete.defaultProps = {
+  multiple: false,
+  filterSelectedOptions: false,
+  fullWidth: false,
+  getOptionLabel: () => {
+    return null;
+  },
+  getOptionSelected: () => {
+    return null;
+  },
+};

frontend/src/components/autocomplete/index.ts

@@ -0,0 +1 @@
+export { OfficerNameAutocomplete } from './OfficerNameAutocomplete';

frontend/src/components/dropdowns/AffiliateDropdownField/index.js

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 
 import GenericDropdownField from '../base';
 
-import styles from './styles';
-
 import HKN_AFFILIATIONS from '@Constants/hknAffiliations';
 
 const AffiliateDropdownField = props => {
-  const { classes, name, label, ...otherProps } = props;
+  const { name, label, ...otherProps } = props;
 
   return (
     <GenericDropdownField
-      className={classes.root}
       name={name}
       label={label}
       selections={Object.values(HKN_AFFILIATIONS)}
@@ -27,4 +23,4 @@ AffiliateDropdownField.propTypes = {
   label: PropTypes.string.isRequired,
 };
 
-export default withStyles(styles)(AffiliateDropdownField);
+export default AffiliateDropdownField;

frontend/src/components/dropdowns/MajorDropdownField/index.js

@@ -36,7 +36,6 @@ const MajorDropdownField = props => {
     <GenericDropdownField
       name={name}
       label={label}
-      defaultValue=''
       selections={listOfMajors}
       {...otherProps}
     />

frontend/src/components/dropdowns/base/index.js

@@ -5,7 +5,15 @@ import { TextField as FormikTextField } from 'formik-material-ui';
 import { Field } from 'formik';
 
 const GenericDropdownField = props => {
-  const { name, label, selections, readOnly, ...otherProps } = props;
+  const {
+    name,
+    label,
+    selections,
+    readOnly,
+    capitalizeLabel,
+    ...otherProps
+  } = props;
+  const finalSelections = selections;
 
   if (readOnly) {
     const readOnlyProps = {
@@ -26,9 +34,14 @@ const GenericDropdownField = props => {
       label={label}
       {...otherProps}
     >
-      {selections.map(selection => (
+      {finalSelections.map(selection => (
         <MenuItem key={selection} value={selection}>
-          {selection}
+          {capitalizeLabel
+            ? selection
+                .toString()
+                .charAt(0)
+                .toUpperCase() + selection.toString().slice(1)
+            : selection}
         </MenuItem>
       ))}
     </Field>
@@ -39,11 +52,15 @@ GenericDropdownField.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   readOnly: PropTypes.bool,
+  capitalizeLabel: PropTypes.bool,
+  fullWidth: PropTypes.bool,
   selections: PropTypes.arrayOf(PropTypes.node).isRequired,
 };
 
 GenericDropdownField.defaultProps = {
   readOnly: false,
+  capitalizeLabel: false,
+  fullWidth: false,
 };
 
 export default GenericDropdownField;

frontend/src/components/index.js

@@ -13,6 +13,8 @@ import NavBar from './NavBar';
 import Table from './Table';
 import Tags from './Tags';
 
+export { OfficerNameAutocomplete } from './autocomplete';
+
 export {
   Button,
   MajorDropdownField,

frontend/src/constants/eventStatus.ts

@@ -0,0 +1,7 @@
+const EVENT_STATUS = {
+  PENDING: 'pending',
+  READY: 'ready',
+  COMPLETE: 'complete',
+};
+
+export default EVENT_STATUS;

frontend/src/constants/eventTags.js

@@ -1,7 +1,8 @@
 const EVENT_TAGS = {
-  PROFESSIONAL: 'Professional',
-  TECHNICAL: 'Technical',
-  SOCIAL: 'Social',
+  PROFESSIONAL: 'professional',
+  TECHNICAL: 'technical',
+  SOCIAL: 'social',
+  MENTORSHIP: 'mentorship',
 };
 
 export default EVENT_TAGS;

frontend/src/pages/CalendarPage/components/Calendar/index.js

@@ -48,7 +48,7 @@ export default function Calendar({ events, handleEventClick }) {
 Calendar.propTypes = {
   events: PropTypes.arrayOf(
     PropTypes.shape({
-      title: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
       startDate: PropTypes.string.isRequired,
       endDate: PropTypes.string.isRequired,
     })

frontend/src/pages/CalendarPage/components/EventCard/index.js

@@ -20,7 +20,7 @@ function EventCard({ event, classes }) {
     <>
       {event && (
         <Card>
-          <CardHeader title={event.title} />
+          <CardHeader title={event.name} />
           <CardContent>
             <Typography variant='h6' color='textSecondary' gutterBottom>
               {format(parseISO(event.startDate), 'PP')} -{' '}
@@ -29,7 +29,7 @@ function EventCard({ event, classes }) {
             </Typography>
             <Box className={classes.locationContainer}>
               <RoomIcon color='disabled' />
-              <Typography color='textSecondary'>{event.venue}</Typography>
+              <Typography color='textSecondary'>{event.location}</Typography>
             </Box>
             <Button
               variant='outlined'
@@ -50,10 +50,16 @@ EventCard.propTypes = {
   event: PropTypes.shape({
     startDate: PropTypes.string.isRequired,
     endDate: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    venue: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-  }).isRequired,
+    name: PropTypes.string.isRequired,
+    location: PropTypes.string,
+    id: PropTypes.number.isRequired,
+  }),
+};
+
+EventCard.defaultProps = {
+  event: {
+    location: '',
+  },
 };
 
 export default withStyles(styles)(EventCard);

frontend/src/pages/CalendarPage/components/EventList/index.js

@@ -35,9 +35,10 @@ function EventList({ events, handleEventClick }) {
     const listEvent = {
       id: events[i].id,
       title: events[i].title,
+      name: events[i].title,
       startDateString: format(parseISO(events[i].startDate), 'PPPP p'),
       endDateString: format(parseISO(events[i].endDate), 'PPPP p'),
-      venue: events[i].venue,
+      location: events[i].location,
       startDate: events[i].startDate,
       endDate: events[i].endDate,
     };
@@ -64,11 +65,15 @@ EventList.propTypes = {
       startDate: PropTypes.string.isRequired,
       endDate: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
-      venue: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
+      location: PropTypes.string,
+      id: PropTypes.number.isRequired,
     })
-  ).isRequired,
+  ),
   handleEventClick: PropTypes.func.isRequired,
 };
 
+EventList.defaultProps = {
+  events: [{ location: '' }],
+};
+
 export default EventList;