Start by accepting the assignment at https://classroom.github.com/a/brD5a4SQ and cloning the repository. This is a React application created with Create React App. Next, cd into your project run npm install. You can now start it with npm start.
Requirements
Build the following reusable components. Here is a demo of them in action: https://tranquil-druid-499024.netlify.app. 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 (35 points)
<CollapsiblePanel
header="TAC 404 - Advanced Frontend Web Development"
isOpen={true}
renderTriggerIcon={(isOpen) => {
return <FontAwesomeIcon icon={isOpen ? faMinus : faPlus} />;
}}
>
<p>
TAC 404 is a class about building modern frontend applications on the web.
</p>
</CollapsiblePanel>Reactions (35 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.
SortableTable (30 points)
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. Please explain your code. Put a link to this recording in the README.md file at the root of your project.
Also, deploy your project using Netlify or Surge and include this link on your README.md.
Make a commit and push up all your changes. Visit your repo in the browser and verify all of your changes were pushed to GitHub.
