rancid-tomatillos's Issues
TDD MovieTile Component
- Should be able to display the information for a single movie.
Login Interface TDD
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'.
Group DTR
Fill Out Group DTR
TDD Comments Component
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.
Navigate to login page TDD
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.
Loading while Movies API is fetching
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
Movie Show Page Navigation
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"
Add Comments on MovieShowPage
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.
Show specifcally favorite movies
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'.
Create movie tile component
- shows the poster
- shows the average rating bellow
Search by specific movies
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.
Add a movie comment
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.
Implement Star Rating System
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.
TDD Sign-in Component
- 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.
Movie Show Page Component
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.
Favorite a Movie
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.
Error handling
- does the user get error messages on their interface?
Pr Template
Agree on a PR template for all PR reviews.
WireFrame/Visual Plan
Map out how we want the project to actually look.
TDD Comment Component
- Test that a comment is able to render to the page with the correct information.
MovieTile Component TDD
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.
Bug - propTypes
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.
Movie Show Page Component Styling
- Create the styling for the Movie Show Page Component based on the wire frame styling.
Create a Microserver
-This should be a seperate repo
-Backend issues should likely be stored on that repo's project board.
Adding ratings.
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.
TDD App Component
- Should be able to render without crashing.
- Should be able to render that is is loading movies until movies have finished loading.
Sort MovieTiles on Home Page in Descending Order
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.
Slack Chanel
Get slack channel up with instructors.
Infinite Loop on Movie Show Page
-fetch requests keep firing after the conditional should be satified...
Login Page Routing
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.
Enhancement - Reduced fetch calls
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.
Movie fetch single movie
- 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.
Navigate to Movie Show TDD
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.
Move fetch API calls to another file
- Move all API calls from their components files into another file.
TDD MovieMain Component
- This component should display all MovieTiles found after a fetch call.
- This component should throw an error message if the fetch call fails.
Set up NavBar component
- show the app title
- the user if signed in
- the log in button
Delete user rating
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.
TDD Navbar Component
- 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.
Populate Movie tiles on Movie Main component
- create all the tiles from the API movie data base
- populate all of the tiles on the page
User Login
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.
Viewing Ratings
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.