nathanielmillard / rancid-tomatillos Goto Github PK

-This should be a seperate repo
-Backend issues should likely be stored on that repo's project board.

As a user, when I log into the Rancid tomatillos app, I want to be able to see a list of all the movies that are available to be rated.

• When a user first comes to the website, regardless of whether they are logged in or not, they should be able to see individual MovieTile components that represent each movie that is available for them to eventually do a rating on.
• Rather than testing all of the MovieTile components that are rendered, we can ensure that they are being displayed to the DOM.
• Test the first MovieTile component that comes in and match the data that is should display on the screen based on the MovieTile component structure.

• show the app title
• the user if signed in
• the log in button

As a user when I click on a tile poster I am routed to a new page that shows more details on just that movie.
The url should have the movie id in it and show that its a "movieshowpage"

• shows the poster
• shows the average rating bellow

• Display feedback to the user if their login failed with wrong username and password.
• The component should be able to render.
• Should be able to log in a user with the correct credentials.

• does the user get error messages on their interface?

As a user I should only see average rating on movies, until I log in, and then I should see average ratings and my own ratings for movies if I have left a rating for on both the main page, and the movie show page.

Map out how we want the project to actually look.

As a user, I want to be able to click on a poster and see the full details of a movie from the home page.

• Create a MovieShowPage component that will show the user full details.

As a user I should be able to click on a star in a series of stars to set and display a rating. These stars should demonstrate the average rating, as well as any user ratings with a color change denoting highest possible (ten) and the actual rating.
Ideally as well there will be an x after user ratings to give them the availability to remove their rating and set a new one.

• This component should display all MovieTiles found after a fetch call.
• This component should throw an error message if the fetch call fails.

As a user, I want to be able to delete my previous rating and re-submit a new one.

• Implement a method to delete a user's rating.
• If a user does not have a rating for movie, regardless of whether it is a deleted rating or one they have not rated yet, they should be able to leave a rating.

As a user, I want to be able to see all of the movies, however I want them to be displayed with the highest rated movies first going down to the lowest rated movies last.

• Sort by rating on default page load.

-fetch requests keep firing after the conditional should be satified...

Comments Component Testing

• A user should see a message to login if they want to leave a comment on the MovieShowPage component.
• A user should be able to see when a movie has no comments
• A user should be able to see all comments for a movie whether they are logged in or not.
• A user should be able to see a form when they are logged in to leave a comment for a movie.
• A user will not be able to leave a blank comment.
• A user will be able to submit their comment and see it displayed on the page with successful submission.
• A user will be able to see an error message if something is wrong with the server.

• Move all API calls from their components files into another file.

As a user, I want to be able to sort the movie tiles with a search bar when I enter in a title or related title to a movie.

• Create a SearchBar component.
• Filter the MovieTile components on the page when a user is typing.
• Decide whether this component will need access to state or if it can be functional.

• Should be able to display the information for a single movie.

Agree on a PR template for all PR reviews.

As a user, I want to be able to log into the website.

• Create a login page and login system
• Error handling on form if username/password does not match
• Redirect user to home page if the sign in is successful.

As a user, once signed in, I should be able to click on a button to toggle active or innactive favorite status on a speicific movie
This should work on the MovieMain, and the MovieShowPage.

As a user I should be able to leave a rating on a movie, just once, and have it continue to show up once I have logged in again.

As a user, while waiting for the movies to be loaded, I want see a loading screen to know that the app is working.

• On initial render of a component, have a default property on this.state to let the state know when something has completed finished loading.
• While waiting for a component to finish loading, have some kind of graphic or text on the screen letting the user know that it is working
• Add proper error handling if something goes wrong

As a user I should be able ot filter movies on MovieMain by if they are favorited or not.
This should have its own dynamic route with a different url path of '/favorites'.

The propTypes for the components MovieShowPage and Comments, are set up to expect a string for userID. When there is no user logged in, the userID state it is set as an empty string by default, therefore it passes. However, when a user is logged in, that string is converted into a number data type, and the propTypes start throwing errors. When changing the propType for userID into a number, it will fail and throw errors when a user is logged out due to the default empty string data type when no user is logged in, but will be successful when a user is logged in.

As a user, when I click on a specific MovieTile, I want to be able to see a full detailed page of the movie.

• Test that the MovieShowPage component displays to the page when a user clicks on a MovieTile.

• Should be able to render without crashing.
• Should be able to render that is is loading movies until movies have finished loading.

• Create the styling for the Movie Show Page Component based on the wire frame styling.

While writing the test for the Comments component. I learned a way that was causing some of our tests in other files to fail and a way to reduce fetch calls, improving app performance.

When a user has submitted some new data (logging in, new comments, new rating, etc...), we call a fetch after our post to make sure that the data is in sync with each other. This second time of repeating the fetch call is what is causing the test to fail with an undefined reference, since we can only reference a particular set of data inside of a testing it block to be mocked once.

To combat this, I removed the extra fetch call that was being used after a user posted a new comment and had it simply update state to render all previous comments as well as the new comment onto the page. The user will see no difference, as their new comment has showed up and state has been updated to reflect all of the most current data that would be on the server as well.

Stopping that second fetch call and letting state update through setting state in react fixed the undefined reference having to attempt a 2nd mock call for new data within the same test. On the live app, the user will still see their new comment posted immediately.

Leaving the page and coming back in will trigger the componentDidMount lifecycle method, which in turn will do the fetch call again, and show all comments on the page. In testing, I have learned that the 2nd fetch call is unnecessary and actually some of our tests to fail and not work as intended.

Let's use this new knowledge and fix any other areas where we are attempting to re-sync our state after a post that is an unnecessary fetch call and causing our tests, as well as react, to have unintended behavior.

• create all the tiles from the API movie data base
• populate all of the tiles on the page

As a user, when I log into the Rancid Tomatillos, I want to be able to see my name when I am logged in.

• On App.js, when currentUser in our state is not set to null, the h3 inside Navbar.js has the name of the currentUser display.
• When a user is logged into the website, the button inside Navbar.js should have an innerText of 'Logout'.
• If a user is not logged into the website, the h3 displays nothing.
• When a user is not logged into the website, the button inside Navbar.js should have an innerText of 'Login'.

As a user I should now be able to see the comments on a movie from all users, and the comments should include the user who left it.

Get slack channel up with instructors.

• Test that a comment is able to render to the page with the correct information.

As a user, I want to be able to log into the website.

• When a user clicks on the login button, it will change their url location to /sign-in.
• A user will be able to see the form where they can enter in their email and password to login.

• Should display on the App at all times.
• Should display a user name if they are logged in.
• Should not display a user name if no one is logged in.

As a user, when I click on the 'Login' button, I want to be able to see a form that will allow me to sign into my account.

• Since we can test by when a specific component shows up on the page, we can test when they click on the button that the Sign-In component shows up on the screen.
• Since we can test by specific components, decide and clarify if we need to have a full login page for routing of if the original modal idea would still work.

• When a user navigates to a specific movie page when clicking on the movie tile, have a new fetch request that gets the movie from the API.
• Important to use the single movie id fetch call as that API has more details and information about the movie than the one to show all movies.

Fill Out Group DTR

As a user, only if I am logged in, I should be able to fill out a form on the MovieShowPage that will then update and add my own comment onto the movie, that will persist across reloads.