Requirements
Build the following reusable components. Here is a demo of them in action: https://itp404-assignment-8.surge.sh.
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 (30 points, 1.2857142857% of your entire grade): 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.
GitHub Classroom Submission Link
If you used Create React App for the assignment, please deploy your assignment to Surge using these instructions and include a link at the top of the README.md file. As of Monday 11/13/23 at 10:17am, I was having issues with Surge. If the problem persists, you can either copy over your code to CodeSandbox or reach out to me and I can provide instructions on how to deploy a Create React App project to Netlify.
