rancid-tomatillos's Issues
Break out Banner and Movies components into a parent component called "Home" and invoke that in App
To Dos:
- Create a home component that contains
Banner
,Movies
, andSearch
Movie details inline styling into CSS file
" I see you've got some inline styling here - but you also have separate CSS files too. I'd encourage you to pick one and stick with it so that your fellow devs always know where to go when adjusting styles
Originally posted by @sertmer in #9 (comment)
"
Add styling to loading
- Loading needs to be fullscreen and possibly animation to show page is loading.
Search Feature
To Dos:
- We need a search input in the top right hand corner (UI), a search component that would filter the displayed movies by any word in the titles
bonus: search by genre
Break out input into it's own Search component
- Move the input functionality from App into its own
Search component
to help with modularizing our app.
When the user enters a bad URL, they are given an easy way to navigate to a working page
To Dos:
- When a url doesn't exist, the user get's a redirect or an error
As a user, I can click a movie, and see that movie’s details
User Story:
As a user, when I click on a movie then I will see the details for that movie
Acceptance Criteria:
When a user clicks on any movie displayed that they can click and see the movie details
Definition of Done:
- Have a
currentMovie
inApp State
that defaults to{}
on load - Create an
onClick
for the movie components -> this will be used to trigger the display for movie details - Have a
handleClick
in App that takes theevent target id
and searchesApp's movies state
to find the movie that was clicked on. Once the movie is found, thecurrentMovie
state is then set to thefound movie
- Have
conditional rendering
ifcurrentMovie
is defined then to render theMovieDetails component
REMAINING:
- Create
MovieDetails component
to take incurrentMovie
as a prop - Create
JSX elements
to display movie details - Create
initial css styling
As a user, when a movie’s details are displayed, I should have a way to return to the main view of all movies
User Story:
As a user, when a movie’s details are displayed, I should have a way to return to the main view of all movies
Acceptance Criteria:
When a movie’s details are displayed, I should have a clear way to navigate back to the main page
Definition of Done:
- Have a button on the
MovieDetails
component - Button needs to have an event handler that
closes the MoviesDetail component
this can be done by setting App'scurrentMovie
state back to empty object since we have conditional rendering in place already
Add defaultProps to banner
User Story:
N/A
Acceptance Criteria:
When banner receives no props, the banner should use the default props
Definition of Done:
- Add defaultProps to banner
Remove unused Test Files
- Remove unused unit testings files from component files
As a user, when I load the application, I can see the title of the application left top corner
User Story:
As a user, when I load the application, I can see the title of the application left top corner so I know what app I'm visiting
Acceptance Criteria:
When a user lands on on the app page, they can clearly see the app title
Definition of Done:
-
JSX element
is rendered on load as anH1
element - Title is visible and easily readable in the top left corner
- User Story has been manually tested
Refine Movie Details UI
To Dos:
- Add responsiveness so details don't go past the modal
- Add a star icon to ratings
Double check that any Component that takes in props has PropTypes
As a user, when I load the application, I can see the title of the application
User Story:
As a user, when I load the application, I can see the title of the application
Acceptance Criteria:
When the user lands on the page they see a title
Definition of Done:
- Add Cypress test that looks for the h1 title "Rancid Tomatillos"
As a user, when I land on the page I should see a movie banner img
User Story:
As a user, when I land on the page I should see a movie banner img
Acceptance Criteria:
When the user lands on the app home page, they should see a banner movie image
Definition of Done:
- Add Cypress test the tests the page to contain an image in the banner section
As a user, when I click on a movie, I’m shown additional details about that movie
User Story:
As a user, when I click on a movie, I’m shown additional details about that movie
Acceptance Criteria:
When the user lands on the app home page, they should see all the movies
Definition of Done:
- Add Cypress test the tests the page to contain a div that had movie thumbnails
Add movie details modal - content tests once the layout is done
As a user, when the server returns a 500 error, I should see proper error handling
User Story:
As a user, when the server returns a 500 error, I should see proper error handling
Acceptance Criteria:
When the server returns an error, the user should see some visual that let's them know that something went wrong
Definition of Done:
- Need to add a
catch
to ourfetch
- Need to add an
error state
to our app that starts off as empty and if the catch is trigger it sets our error - Need to add conditional rendering to our app, that if an error is defined to render an error
JSX element
As a user, I should receive a message if something goes wrong with the application network request
User Story:
As a user, I should receive a message if something goes wrong with the application
Acceptance Criteria:
When app has an issue, let the user know that something went wrong.
Definition of Done:
- Add Cypress test the tests if something goes wrong with the server
Add propTypes for our components
User Story:
N/A
Acceptance Criteria:
When props are passed down, they are the expected data type and console receives no errors
Definition of Done:
- Add propType for
Movies
- Add propType for
Movie
- Add propType for
Movie Details
- Add propType for
Banner
Break out fetch call into own file and invoke in app
"For some reason I can't leave this comment on the line I'm about to reference, so I'll just put it here. Be sure to declare you fetch in it's own file, and import it here, rather than invoking it here (line 18) directly, per the rubric :)
Originally posted by @sertmer in #9 (comment)"
Add functionality to prevent movies from loading until all movies have been fetch
- Currently movies are loading before all fetch requests have been made. If one of the movies has an error, then the page stops loading and goes to error message. Need the loading component to last until either all movies have been fetch or until an error has been thrown.
As a user, when I load the application, I can see a collection of movies.
User Story:
As a user, when I load the application, I can see a collection of movies.
Acceptance Criteria:
When the user lands on the app home page, they should see all the movies
Definition of Done:
- Add Cypress test the tests the page to contain a div that had movie thumbnails
Add styling to Title to make it more responsive with the banner
To Dos:
- Add styling to Title to make it more responsive with the banner
Need to add tests for Movie Details Content, Loader and SearchBar
- Movie Details now has the additional content
- Search bar feature has now been added to the Home page
- Loader is now a component
As a user, when a movie’s details are displayed, none of the other movies will be visible to me
User Story:
As a user, when a movie’s details are displayed, none of the other movies will be visible to me
Acceptance Criteria:
When a movie’s details are displayed, none of the other movies will be visible; it should just be that movie’s details I want to see
Definition of Done:
- Have
MovieDetails
JSX elements setup as amodal
ornew page
to display only the movie details
Fix Movie Details from loading blank if no data (normally happens on a refresh of that individual page)
2 possible options:
- Have
Movie Details
render the Error Component ifSelected Movie
is undefined - Have Movie Details make a
getSingleMovie
fetch call ifSelected Movie
is undefined.
As a user, I should see all movies on app launch
User Story:
As a user, I should see all movies on app launch so I know what movies are available to look at
Acceptance Criteria:
When a user lands on on the app page, they should clearly see all the app's movies displayed without having to click on anything
Definition of Done:
- When the app is initialized,
componentDidMount
makes afetch request
that receives all the data for the movies - A
Movies Container Component
maps through allmovie data
and creates instances ofmovie components
and has aonClick
event for showingmovie details
-> future feature - A
Movie component
receives data and creates aJSX Img element
- User Story has been manually tested
Remove shouldLoad from app
- Add a conditional to the
Home component
instead of in App
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.