QOL for frontend, information-rich landing.

[krashanoff]

Adds a new view to the frontend, <Me /> to summarize all information for both students and professors, conditionally rendering based on their permissions. It has some boilerplate in it right now, but if the database is populated, it should render right.

Additionally, fixes a bug in SignUpForm.tsx and makes a few small QOL changes to enforce some pet peeves with ESLint. Specifically, yoda, eqeqeq, and react/jsx-key.

Changes

• Strict ESLint.
• Flatten route declarations in App.tsx.
• Add Me.tsx, combining the important bits of ClassView + ClassListView + AssignmentView. This page generates based on the /class/me endpoint.
• Better API declarations. Generated dynamically through two handy functions in api.ts.

API Example

Writing a new API function is really easy. You just call either authorized<T, R>() or unauthorized<T, R>(). Both generate functions of the following forms, respectively:

export type AuthorizedEndpoint<P, R> = (
  token: string,
  params: P,
  onSuccess: (result: R) => void,
  onFailure: (error: Error) => void
) => void;

export type UnauthorizedEndpoint<P, R> = (
  params: P,
  onSuccess: (result: R) => void,
  onFailure: (error: Error) => void
) => void;

Here is the declaration of the createClass binding:

/**
 * Get information about a student.
 */
export const getMe = authorized<null, UserInformation>(
  () => [`/class/me`, null],
  200,
  true,
  "get"
);

And here's an example of using it from Me.tsx:

// Make a request on component mount to fetch user information.
useEffect(() => {
  getMe(
    cookies.jwt,
    null,
    (data) => setData(data),
    (newErr) => setErrors((errors) => [newErr, ...errors])
  );
}, [cookies.jwt]);

Screenshots

Student View

Professor View

View

out.mp4

[krashanoff]

Alright, it's coding time.