CSCI 344: Spring 2023

Advanced Web Technology

CSCI 344: Spring 2023

UNCA Logo

Assignments > HW6: React Client

Due on Wed, 03/29 @ 11:59PM. 40 Points.

Overview

In this homework assignment, you will re-implement your HW4 & HW5 code in React. I recommend that you build from the code you started in Tutorial 8, but that’s not required. I won’t be grading you on CSS, but please do make it look nice. You’re also welcome to customize the look and feel to make it your own.

When you’re done, your React version of the PhotoApp should behave like this one: https://photo-app-secured.herokuapp.com/.

Tasks

In the section below, I’ve mapped out a suggested implementation strategy. If you implement your React functionality differently, that’s fine, but I will be verifying that you did indeed make a series of components (versus just copying your HW4-5 file into a React folder and only making minor changes).

Points Component / Task Description
2pts NavBar.js
Displays the Header 		(Already done for you) Create a NavLinks component that displays the username of the logged in user, a logout button, and a link to the API tester as shown in the demo. Notes:
  • This task requires that you fetch data from the /api/profile endpoint.
  • It's OK that the logout and api functionality hasn't yet been implemented (this will come later).
2pts Profile.js
Display Profile 		Create a Profile component that displays the current user's profile (inside of the right panel) using data from the /api/profile endpoint.
  • Hint: Since both Profile and NavBar require you to fetch data from /api/profile, you may want to put your fetch functionality in App, and then pass the requisite user information to the child components as one or more properties.
2pts Stories.js
Display Stories 		Create a Stories component that displays stories from the user's network. This component will both fetch the stories from /api/stories, and draw the stories.
2pts Suggestions.js
Display All Suggestions 		Create a Suggestions component that displays suggested user accounts. This component will both fetch the suggestions from /api/suggestions, and draw the suggested users with the help of the Suggestion.js child component (see below).
5pts Suggestion.js
Display Individual Suggestion 		Create a Suggestion component that will:
  • Render a representation fo each user
  • Handle the follow/unfollow fetch requests to the /api/following and /api/following/<id> endpoints.
  • Redraw the HTML after a follow / unfollow requests is successfully issued.
2pts Posts.js
Display All Posts 		Create a Posts component that displays all of the posts user accounts. This component will both fetch the posts from /api/posts, and draw each post users with the help of the Post.js child component (see below).
3pts Post.js
Display Individual Post 		Create a Post component so that it looks like the post from HW4. To do this:
  • The Like/Unlike functionality should be handled by a LikeButton child component (details below).
  • The Bookmark/Unbookmark functionality should be handled by a BookmarkButton child component (details below).
  • The "add comment" functionality should be handled by a AddComment child component (details below).
  • You can handle the display of the "comment button" and "last comment" any way you like. You could create a Comments and/or Comment child component, or you could render comments directly in your Post's render method.
2pts Post.js
Fetch and Redraw Post 		Within your Post component, you will also have to write some code to redraw a post after its structure is modified (liked/unliked, bookmarked/unbookmarked, etc.). We recommend that you create a function called requeryPost that:
  • Re-queries the post from /api/posts/<id>
  • Updates the state of your component to reflect that the post data has changed (which will in turn re-render the component).
You will also want to give some of your child components access to this function (e.g., LikeButton, BookmarkButton, etc.) by passing a reference to this function as a property. This way, the child components can also trigger a post redraw by invoking its parent's requeryPost function.
4pts LikeButton.js
Like / Unlike Post 		Create a LikeButton component that will:
  • Render a solid / filled in heart (depending on whether the post is liked / unliked by the current user).
  • Handle the like / unlike fetch requests to the /api/posts/<post_id>/likes and /api/posts/<post_id>/likes/<id> endpoints.
  • Redraw the Post if the like / unlike requests is successful (hint: use the Post's requeryPost function).
4pts BookmarkButton.js
Bookmark / Un-Bookmark Post 		Create a BookmarkButton component that will:
  • Render a solid / filled in bookmark (depending on whether the post is bookmarked / un-bookmarked by the current user).
  • Handle the bookmark / un-bookmark fetch requests to the /api/posts/bookmarks and /api/bookmarks/<id> endpoints.
  • Redraw the Post if the bookmark / un-bookmark request is successful (hint: use the Post's requeryPost function).
5pts AddComment.js
Add a Comment 		Create an AddComment component that will:
  • Render an "Add comment" textbox and button.
  • Handle the add comment fetch request to the /api/comments endpoint.
  • Redraw the Post (parent component) after if the "add comment" request is successful (hint: use the Post's requeryPost function).
1pt Keyboard Navigation
  • Ensure that all of the buttons are tabbable
  • Ensure that all the event handlers can be triggered using the "spacebar" or "enter / return" keys.
2pts Aria attributes Use the "aria-label" and "aria-checked" attributes (in conjunction with the role="switch" attribute) to indicate to the screen reader whether the following buttons are turned on or off:
  • Like / Unlike button
  • Bookmark / Unbookmark button
  • Follow / Unfollow button
4pts Form Accessibility
Extra handling for "Add Comment"
  • After a comment is submitted by the user, ensure that the focus is set back to the input. Hint: use React's built-in "autoFocus" property.
  • Add an event handler to the input control so that it submits when the user presses the "Enter/Return" key. To do this, consider using the form's "onSubmit" event versus attaching event handlers to the input and button.

What to Turn In

Please review the requirements above and ensure you have met them. When you’re done, please submit a zip file that includes the following files:

Note: We will eventually be deploying your React App to the cloud, but there are a few other steps that are necessary to “teach” GitHub how to issue the appropriate Node.js build processes. We will tackle this later in the semester.