Various Bug Fixes, Students can add themselves to a course (#59)

* Removed phone number and potentially fixed error

* Hide error if authentication not caught up

* Students can join courses

* Display course id in students tab

* Fix lint errors

Author: destin-estrela

package-lock.json

@@ -8,7 +8,7 @@
     "@aws-amplify/interactions": "^3.3.29",
     "@aws-amplify/storage": "^3.3.29",
     "@aws-amplify/ui": "^2.0.2",
-    "@aws-amplify/ui-react": "^1.0.6",
+    "@aws-amplify/ui-react": "^1.2.7",
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -23,7 +23,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "aws-amplify": "^3.3.26",
+    "aws-amplify": "^3.4.3",
     "aws-amplify-react": "^4.2.30",
     "bootstrap": "^4.6.0",
     "clsx": "^1.1.1",

package.json

@@ -1,19 +1,47 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { Auth, Hub } from 'aws-amplify';
 import { useState, useEffect } from 'react';
 import { withAuthenticator } from 'aws-amplify-react';
+import Amplify, { Auth, Hub } from 'aws-amplify';
+import { ApolloError } from '@apollo/client/errors';
+
 import Sidebar from '../Components/Sidebar';
 import Content from '../Components/Content';
 import Navigation from '../Navigation/Navigation';
 
 import './App.scss';
 import { useGetCoursesQuery } from '../__generated__/types';
+import { environment } from '../environment';
+
+Amplify.configure({
+   Auth: {
+      identityPoolId: 'us-east-1:07057d76-612a-4045-8522-f38a759cf216',
+      region: 'us-east-1',
+      userPoolId: 'us-east-1_POfbbYTKF',
+      userPoolWebClientId: '24sdf1brebo58s89ja0b63c51d',
+      oauth: {
+         domain: 'flipted-ios-test.auth.us-east-1.amazoncognito.com',
+         scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
+         redirectSignIn: environment.redirectSignIn,
+         redirectSignOut: environment.redirectSignout,
+         responseType: 'token',
+      },
+   },
+});
 
 // Entry point of the Flitped App
 function App() {
    const [, setUser] = useState(null);
    const [fname, setFirstName] = useState('');
-   const { loading, error, data: courseData, refetch } = useGetCoursesQuery();
+
+   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+   const handleError = (_error: ApolloError) => {
+      // eslint-disable-next-line
+      void refetch();
+   };
+
+   const { loading, error, data: courseData, refetch } = useGetCoursesQuery({
+      onError: handleError,
+   });
 
    function storeToken(): void {
       Auth.currentSession()
@@ -35,6 +63,7 @@ function App() {
       Hub.listen('auth', ({ payload: { event, data } }) => {
          switch (event) {
             case 'signIn':
+            case 'oauthSignIn':
             case 'cognitoHostedUI':
                storeToken();
                break;
@@ -54,7 +83,9 @@ function App() {
    }, []);
 
    if (loading) return <div>Loading...</div>;
-   if (error) return <div>`Error! ${error.message}`</div>;
+   if (error) {
+      return <></>;
+   }
    if (!courseData) {
       return <></>;
    }
@@ -78,4 +109,6 @@ function App() {
    );
 }
 
-export default withAuthenticator(App);
+export default withAuthenticator(App, undefined, undefined, undefined, undefined, {
+   hiddenDefaults: ['phone_number'],
+});

src/App/App.tsx

@@ -2,6 +2,7 @@ import { CourseInfoFieldsFragment, Role } from '../../__generated__/types';
 import CourseCard from './CourseCard';
 import CreateCourseDialog from '../CreateCourseDialog/CreateCourseDialog';
 import './DashBoard.css';
+import { JoinCourseDialog } from '../MarketHome/Student/JoinCourseDialog';
 
 type Props = {
    courses: CourseInfoFieldsFragment[];
@@ -12,7 +13,11 @@ type Props = {
 function Dashboard({ courses, refetchCourses, role }: Props) {
    return (
       <div>
-         {role === Role.Instructor ? <CreateCourseDialog refetch={refetchCourses} /> : <></>}
+         {role === Role.Instructor ? (
+            <CreateCourseDialog refetch={refetchCourses} />
+         ) : (
+            <JoinCourseDialog refetch={refetchCourses} />
+         )}
          {courses.map((courseInfo: CourseInfoFieldsFragment) => (
             <CourseCard key={courseInfo.courseId} courseInfo={courseInfo} />
          ))}

src/Components/Dashboard/Dashboard.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import {
+   IconButton,
+   Dialog,
+   DialogTitle,
+   DialogContent,
+   CircularProgress,
+   Container,
+   Button,
+} from '@material-ui/core';
+import { useState } from 'react';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import { ApolloError } from '@apollo/client';
+import { AddStudentMutation, useAddStudentMutation } from '../../../__generated__/types';
+import { JoinCourseFormInput, joinCourseFormToInputType, JoinCourseForm } from './JoinCourseForm';
+
+type Props = {
+   refetch: any;
+};
+
+export function JoinCourseDialog({ refetch }: Props) {
+   const [error, setError] = useState(false);
+   const [open, setOpen] = useState(false);
+
+   const handleClose = () => {
+      setError(false);
+      setOpen(false);
+   };
+
+   const handleError = (_error: ApolloError) => {
+      setError(true);
+   };
+
+   const onMutationCompleted = (data: AddStudentMutation) => {
+      console.log('Mutation Completed');
+      handleClose();
+      refetch();
+   };
+
+   const [addStudent, { loading: mutationLoading, error: mutationError }] = useAddStudentMutation({
+      onError: handleError,
+      onCompleted: onMutationCompleted,
+   });
+
+   const initialValues: JoinCourseFormInput = {
+      firstName: '',
+      lastName: '',
+      instructorId: '',
+      courseId: '',
+   };
+
+   const handleClickOpen = () => {
+      setError(false);
+      setOpen(true);
+      console.log('Opening and clearing error');
+   };
+
+   const handleSubmit = (values: JoinCourseFormInput) => {
+      addStudent({
+         variables: {
+            student: joinCourseFormToInputType(values),
+         },
+      }).catch((e) => {
+         console.log(e);
+      });
+   };
+   return (
+      <Container>
+         <div>
+            <Button
+               style={{
+                  width: 200,
+                  marginTop: 20,
+                  marginLeft: 0,
+                  backgroundColor: '#4274F3',
+                  color: 'white',
+               }}
+               onClick={handleClickOpen}
+               data-testid="create-btn"
+            >
+               Join Course
+            </Button>
+            <Dialog
+               open={open}
+               fullWidth
+               onClose={handleClose}
+               aria-labelledby="form-dialog-title"
+               maxWidth="sm"
+               data-testid="create-dialog"
+            >
+               <DialogTitle
+                  style={{ backgroundColor: '#4274F3', color: 'white' }}
+                  id="form-dialog-title"
+               >
+                  Join Course
+               </DialogTitle>
+               <DialogContent>
+                  <JoinCourseForm initialValues={initialValues} onSubmit={handleSubmit} />
+               </DialogContent>
+               <div style={{ marginLeft: '4%' }}>
+                  {mutationLoading ? (
+                     <CircularProgress size={25} />
+                  ) : error ? (
+                     <span style={{ color: 'red' }}>ERROR: Could not find ID combination. </span>
+                  ) : (
+                     <></>
+                  )}
+               </div>
+            </Dialog>
+         </div>
+      </Container>
+   );
+}

src/Components/MarketHome/Student/JoinCourseDialog.tsx

@@ -0,0 +1,98 @@
+import { DialogActions } from '@material-ui/core';
+import { Button } from 'aws-amplify-react';
+import { Formik, Form } from 'formik';
+import { StudentInput } from '../../../__generated__/types';
+import { SmallTextField } from '../FieldStyles';
+
+type Props = {
+   initialValues: JoinCourseFormInput;
+   onSubmit: (values: JoinCourseFormInput) => void;
+};
+
+export type JoinCourseFormInput = {
+   firstName: string;
+   lastName: string;
+   courseId: string;
+   instructorId: string;
+};
+
+export function joinCourseFormToInputType(input: JoinCourseFormInput): StudentInput {
+   return {
+      firstName: input.firstName,
+      lastName: input.lastName,
+      studentId: '',
+      instructorId: input.instructorId,
+      courseId: input.courseId,
+   };
+}
+
+export function JoinCourseForm({ initialValues, onSubmit }: Props) {
+   return (
+      <Formik
+         initialValues={initialValues}
+         onSubmit={(values, { setSubmitting }) => {
+            setSubmitting(false);
+            onSubmit(values);
+         }}
+      >
+         {({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
+            <Form onSubmit={handleSubmit}>
+               <SmallTextField
+                  required
+                  id="courseId"
+                  label="Course ID"
+                  type="text"
+                  fullWidth
+                  variant="outlined"
+                  margin="dense"
+                  value={values.courseId}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+               />
+               <SmallTextField
+                  required
+                  id="instructorId"
+                  label="Instructor ID"
+                  type="text"
+                  fullWidth
+                  variant="outlined"
+                  margin="dense"
+                  value={values.instructorId}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+               />
+
+               <SmallTextField
+                  required
+                  id="firstName"
+                  label="First Name"
+                  type="text"
+                  fullWidth
+                  variant="outlined"
+                  margin="dense"
+                  value={values.firstName}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+               />
+               <SmallTextField
+                  required
+                  id="lastName"
+                  label="Last Name"
+                  type="text"
+                  fullWidth
+                  variant="outlined"
+                  margin="dense"
+                  value={values.lastName}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+               />
+               <DialogActions>
+                  <Button type="submit" disabled={isSubmitting} color="primary">
+                     Add
+                  </Button>
+               </DialogActions>
+            </Form>
+         )}
+      </Formik>
+   );
+}

src/Components/MarketHome/Student/JoinCourseForm.tsx

@@ -106,6 +106,8 @@ export function StudentsTab() {
          <div className="table">
             <TableComponent columns={columns} data={rowData} rowClickFunction={rowClicked} />
          </div>
+         <p>Course ID: {classId}</p>
+
          <AddStudentDialog course={classId} refetch={refetch} />
       </div>
    );

src/Components/MarketHome/StudentsTab.tsx

@@ -3,29 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import Amplify from 'aws-amplify';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import apolloClient from './clients/apollo-client';
 import '@aws-amplify/ui/dist/style.css';
 import { environment } from './environment';
 
 console.log(environment);
-Amplify.configure({
-   Auth: {
-      identityPoolId: 'us-east-1:07057d76-612a-4045-8522-f38a759cf216',
-      region: 'us-east-1',
-      userPoolId: 'us-east-1_POfbbYTKF',
-      userPoolWebClientId: '24sdf1brebo58s89ja0b63c51d',
-      oauth: {
-         domain: 'flipted-ios-test.auth.us-east-1.amazoncognito.com',
-         scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
-         redirectSignIn: environment.redirectSignIn,
-         redirectSignOut: environment.redirectSignout,
-         responseType: 'token',
-      },
-   },
-});
 
 ReactDOM.render(
    <React.StrictMode>