Replace match.params as props with hooks (#155)

* Install react-router types.

* Migrate EventDetailsPage to useParam hook + typescript.

* Migrate EventSignInForm to useParam hook + typescript.

* Migrate EventRsvpPage to useParam hook + typescript.

* Migrate EventEditPage to useParam hook + typescript.

* Migrate ProfilePages to hooks + useParams hook.

* Add yup typing.

* Add @types to dependencies instead of devDep.

@types should be in dev dep to prevent build size bloat, but somehow
netlify builds fail when @types are not deps.

* Modify CardProps to take in className.

* Change pages to use new Card component.

* Make className optional for cards.

package.json

@@ -15,6 +15,8 @@
     "@storybook/react": "^6.0.13",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
+    "@types/react-router": "^5.1.8",
+    "@types/yup": "^0.29.6",
     "@typescript-eslint/parser": "^3.9.1",
     "classnames": "^2.2.6",
     "customize-cra": "^0.9.1",

src/components/cards/Card.tsx

@@ -8,11 +8,12 @@ import {
 export interface CardProps {
   title?: string;
   children: JSX.Element;
+  className?: string;
 }
 
-export function Card({ children, title, ...props }: CardProps): JSX.Element {
+export function Card({ children, title, className }: CardProps): JSX.Element {
   return (
-    <MuiCard elevation={3} {...props}>
+    <MuiCard elevation={3} className={className}>
       {title ? <MuiCardHeader title={title} /> : null}
       <MuiCardContent>{children}</MuiCardContent>
     </MuiCard>

src/components/formSections/PersonalInfoSection.js

@@ -12,7 +12,7 @@ const getPersonalInfoSection = params => {
     readOnly = params.readOnly;
   }
 
-  const { firstName, lastName, major, gradYear } = params || {};
+  const { firstName, lastName, major, graduationYear } = params || {};
 
   return {
     title: 'Personal Info',
@@ -50,7 +50,7 @@ const getPersonalInfoSection = params => {
             </Grid>
             <Grid item>
               {readOnly ? (
-                <InputField readOnly label='Grad Year' value={gradYear} />
+                <InputField readOnly label='Grad Year' value={graduationYear} />
               ) : (
                 <YearDropdownField name='gradYear' label='Grad Year' />
               )}

src/pages/EventDetailsPage/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router';
+
+import EventDetailsComponent from './components/EventDetails';
+
+import { Loading } from '@SharedComponents';
+import { getEventById } from '@Services/EventService';
+import { EventResponse } from '@Services/api/models';
+
+function EventDetailsPage(): JSX.Element {
+  const { id } = useParams();
+  const [eventInfo, setEventInfo] = useState<EventResponse | null>(null);
+
+  useEffect(() => {
+    const getEvent = async () => {
+      const eventResponse = await getEventById(id);
+      setEventInfo(eventResponse);
+    };
+
+    getEvent();
+  }, [id]);
+
+  return eventInfo == null ? (
+    <Loading />
+  ) : (
+    <EventDetailsComponent eventId={id} eventInfo={eventInfo} />
+  );
+}
+
+export default EventDetailsPage;

src/pages/EventEditPage/components/EventEditForm/edit_form.js

@@ -180,7 +180,7 @@ EventEditForm.propTypes = {
     startDate: PropTypes.string.isRequired,
     endDate: PropTypes.string.isRequired,
     hosts: PropTypes.array.isRequired,
-    location: PropTypes.string.isRequired,
+    location: PropTypes.string,
     name: PropTypes.string.isRequired,
     type: PropTypes.string,
     status: PropTypes.string.isRequired,

src/pages/EventEditPage/event_edit.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useParams } from 'react-router';
+
+import EventEditForm from './components/EventEditForm';
+
+import { Card } from '@SharedComponents';
+import { getEventById, updateEvent } from '@Services/EventService';
+import { EventResponse, EventRequest } from '@Services/api/models';
+
+function EventEditPage(): JSX.Element {
+  const { eventId: id } = useParams();
+  const history = useHistory();
+  const [event, setEvent] = useState<EventResponse | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const getEvent = async () => {
+      const eventResponse = await getEventById(id);
+      setEvent(eventResponse);
+      setLoading(false);
+    };
+    getEvent();
+  }, [id]);
+
+  const handleCancel = () => {
+    history.push(`/events/${id}`);
+  };
+
+  const handleSubmit = async (
+    values: EventRequest,
+    setSubmitting: (_: boolean) => void
+  ) => {
+    const eventRequest: EventRequest = {
+      ...values,
+      hosts: values.hosts.map(host => {
+        return {
+          id: host.id,
+        };
+      }),
+    };
+
+    await updateEvent(id, eventRequest);
+    setSubmitting(false);
+    history.push(`/events/${id}`);
+  };
+
+  if (loading) {
+    return <></>;
+  }
+  return (
+    <Card>
+      <EventEditForm
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        initialValues={event}
+      />
+    </Card>
+  );
+}
+
+export default EventEditPage;

src/pages/EventEditPage/index.js → src/pages/EventEditPage/index.ts

@@ -1,3 +1,3 @@
-import EventEditPage from './event_edit';
-
-export default EventEditPage;
+import EventEditPage from './event_edit';
+
+export default EventEditPage;

src/pages/EventRsvpPage/components/EventRsvpForm/index.js

@@ -26,8 +26,9 @@ const EventRsvpForm = props => {
     <Formik
       initialValues={INITIAL_INPUT_VALUES}
       validationSchema={schema}
-      onSubmit={(values, { setSubmitting, resetForm }) => {
-        handleSubmit(values, setSubmitting);
+      onSubmit={async (values, { setSubmitting, resetForm }) => {
+        await handleSubmit(values);
+        setSubmitting(false);
         resetForm({ values: '' });
       }}
     >