Assignment 8

Requirements

Build the following reusable components. Here is a demo of them in action: https://itp404-assignment-8.surge.sh. Do not rename the components, rename the props, add props, or remove props. Each should be used as shown below. Your implementation should only use material we've covered in class or what I've called out in this assignment.

`CollapsiblePanel` (50 points)

<CollapsiblePanel
  header="ITP 404 - Advanced Frontend Web Development"
  isOpen={true}
  renderTriggerIcon={(isOpen) => {
    return <FontAwesomeIcon icon={isOpen ? faMinus : faPlus} />;
  }}
>
  <p>
    ITP 404 is a class about building modern frontend applications on the web.
  </p>
</CollapsiblePanel>

`Reactions` (50 points)

const [selectedReaction, setSelectedReaction] = useState();

<Reactions
  selected={selectedReaction}
  onSelect={setSelectedReaction}
  reactions={[
    {
      renderReaction() {
        return <FontAwesomeIcon icon={faHeart} color="red" size="2xl" />;
      },
      name: "love",
    },
    {
      renderReaction() {
        return <FontAwesomeIcon icon={faThumbsUp} color="blue" size="2xl" />;
      },
      name: "like",
    },
    {
      renderReaction() {
        return <FontAwesomeIcon icon={faThumbsDown} size="2xl" />;
      },
      name: "dislike",
    },
    {
      renderReaction() {
        return <FontAwesomeIcon icon={faAngry} color="orange" size="2xl" />;
      },
      name: "angry",
    },
  ]}
  renderNoSelection={() => {
    return <FontAwesomeIcon icon={faHeart} color="#eee" size="2xl" />;
  }}
/>;

name should be used as the key when rendering each reaction.

Extra Credit (10 points): `SortableTable`

The implementation of this component should be flexible such that someone using it could change the data (people could be an array of objects with different keys).

const columns = [
  {
    field: "firstName",
    header: "First Name",
  },
  {
    field: "lastName",
    header: "Last Name",
  },
];

const people = [
  {
    firstName: "David",
    lastName: "Tang",
  },
  {
    firstName: "Zune",
    lastName: "Nguyen",
  },
  {
    firstName: "Patrick",
    lastName: "Dent",
  },
];

<SortableTable
  rows={people}
  columns={columns}
  renderSortIcon={(isAscending) => {
    return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
  }}
/>;

For this one, you'll need to install lodash.sortby via npm install lodash.sortby.

import sortBy from "lodash.sortby";

const people = [
  {
    firstName: "David",
    lastName: "Tang",
  },
  {
    firstName: "Zune",
    lastName: "Nguyen",
  },
  {
    firstName: "Patrick",
    lastName: "Dent",
  },
];

const sortedPeopleByFirstNameInAscendingOrder = sortBy(people, ["firstName"]);
// [
//   {
//     firstName: "David",
//     lastName: "Tang",
//   },
//   {
//     firstName: "Patrick",
//     lastName: "Dent",
//   },
//   {
//     firstName: "Zune",
//     lastName: "Nguyen",
//   },
// ];

const sortedPeopleByLastNameInAscendingOrder = sortBy(people, ["lastName"]);
// [
//   {
//     firstName: "Patrick",
//     lastName: "Dent",
//   },
//   {
//     firstName: "Zune",
//     lastName: "Nguyen",
//   },
//   {
//     firstName: "David",
//     lastName: "Tang",
//   },
// ];

const sortedPeopleByLastNameInDescendingOrder =
  sortedPeopleByLastNameInAscendingOrder.reverse();
// [
//   {
//     firstName: "David",
//     lastName: "Tang",
//   },
//   {
//     firstName: "Zune",
//     lastName: "Nguyen",
//   },
//   {
//     firstName: "Patrick",
//     lastName: "Dent",
//   },
// ];

The last example makes use of the reverse() method on arrays.

Submission

Create a video with audio using Zoom where you demo your assignment and explain where you fulfilled or did not fulfill each requirement. Put a link to this recording in the README.md file at the root of your project. Verify that the link to the recording works.

Also, deploy your project using Surge and include this link on your README.md. Verify that the link works.

Submit your code: https://classroom.github.com/a/S-CNv2st

If you're having problems uploading to GitHub, please zip up your project and email it to the instructor and TA. Be sure to exclude the node_modules folder from your zip file. Please include the Zoom recording URL in the email. You can also zip up your project, put it in Google Drive or Dropbox, make the link sharable, and email that link to us.

Points will be deducted for the following:

Surge link is missing or doesn't work
Zoom link is missing or doesn't work
You push up node_modules to GitHub or include node_modules in your zip file if you submit it via email

You will get a 0 on the assignment if:

Code isn't pushed up to GitHub
Code is submitted after the deadline

Requirements

CollapsiblePanel (50 points)

Reactions (50 points)

Extra Credit (10 points): SortableTable

Submission

`CollapsiblePanel` (50 points)

`Reactions` (50 points)

Extra Credit (10 points): `SortableTable`