bharatgl / React-Posts-Explorer---Implementation-Assignment-React-12-07-2022---sugletilgupw

React routing

1. Make a Loader component which contains a div with id="loader" and text inside it "Loading...". Display it each time a network request is in progress. For example on index page when fetching the posts

2. On Index Page, make an initial request to https://jsonplaceholder.typicode.com/posts to get all the posts.
   While the request is in progress, display a Loader component.
   Once the request is complete, display a list of posts inside a ul with the id="postsList".
   Each post should be displayed as a PostPreview component inside an li
   The PostPreview component will have either have class even or odd depending on the index of the post.
   On index page only 10 posts should be displayed.
   Assume https://jsonplaceholder.typicode.com/posts returns posts in multiples of 10. By default it returns 100 posts, so display 10 buttons with id="page-${pageNumber}" and text as page number
   Ex:- id=page-1 will have text 1 inside it.
   Your code should not assume that number of posts will be 100, can be 20 or 30 but always in mutiples of 10.
   So show only required number of buttons

3. PostPreview component are the elements which will be used on index page, to display the title of the post which contains a NavLink to the full Post page.

   Post Preview Structure
   1. Root div should have classname="post-preview"
   2. Inside post-preview div add h2 with classname="post-title"
   3. Inside h2 with classname="post-title" use NavLink component pointing to path /post/${postId} where postId is id of the corresponding post. Example:- /post/1
      The link text will be the title of the post.
   On clicking link in PostPreview component navigate to /post/:id, which shows the Post Page. Post Page has following requirements: 1) Make a request to https://jsonplaceholder.typicode.com/posts/:id to get the post.
   2) The returned post will have property userId which will be used to make a request to https://jsonplaceholder.typicode.com/users/:userId to get the user.
   3) While both the requests are in progress, display a Loader component.
   4) Once both the requests are complete, display the information in following manner
   • h1 with class post-id and text as Post id:- {id}
   • h2 with class post-title and text as {post.title}
   • p with class post-body and text as {post.body}
   • p with class post-author and text as {user.name} (use name property from user object)
   • NavLink to / with text as Back to Home which takes to Index page

4. Arrange all your routes in AppRoutes component. Use this component in components/App.js file.

5. Some basic styles are already present in App.css, style as per your creativity, but dont change any classnames.