Add ApplicantListItem component to display applicant information in a…

[smohyud4]

Description

This adds an ApplicantListItem component to be displayed on the applicants page. It contains the full name, status, netid, and application of each application. The "View Application" button currently does not have functionality.

Relevant issue(s)

#146

Questions

Type of change

• New feature (non-breaking change which adds functionality)

Testing

import ApplicantListItem from '@/components/ApplicantListItem';
import { ApplicantResponse } from '@hack4impact-utk/internal-models';

const applicant: ApplicantResponse = {
  _id: '1',
  firstName: 'John',
  lastName: 'Doe',
  netid: 'jdoe',
  term: 'Fall 2021',
  referrer: 'Jane Doe',
  major: 'Computer Science',
  expectedGraduation: 'Spring 2023',
  status: 'Scheduling Interview', // "Pending Review" | "Scheduling Interview" | "Interview Scheduled" | "Interview Complete" | "Decision Made";
  application: {
    _id: '1',
    questions: [
      {
        _id: '1',
        question: 'Why do you want to join HT4I?',
        response: 'I want to make a difference in the world.',
      },
      {
        _id: '2',
        question: 'What is your experience with web development?',
        response: 'I have taken a few classes on web development.',
      },
      {
        _id: '3',
        question: 'What is your experience with React?',
        response: 'I have used React for a few projects.',
      },
    ],
  },
};

//<ApplicantList applicants={applicants} />
export default function ApplicantsPage() {
  return <ApplicantListItem applicant={applicant} />;
}

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• I have assigned reviewers to this PR

[zaviermiller]

looking good! few quick fixes

[zaviermiller]

use the buttons endIcon prop for this icon (check docs)

[zaviermiller]

instead of making the response type the prop type do

interface ApplicantListItemProps {
  applicant: ApplicantResponse
}

export default function ApplicantListItem({ applicant }: ApplicantListItemResponse) {
...
}

This lets you render the applicant list item by doing:

<ApplicantListItem applicant={applicant} />

Instead of having to pass each field as a different prop.

[zaviermiller]

remove the style from each of these. I see what you're doing and why, but we can define the table component as `<Table sx={{ tableLayout: 'fixed' }}>...

[zaviermiller]

remove the style from this. you can just set the color prop to inherit

[smohyud4]

I forgot about the props stuff, but I knew something was up with the styling. I couldn't get the button color to be black but did not want to mess with palette customization guide. So I just overrode it haha.