Giter Club home page Giter Club logo

react_dynamic-list-of-posts_test-task's Introduction

React dynamic list of Posts

Task

You are given a basic markup and the API.

Implement the app to manage post comments.

Don't use class components. Use React Hooks instead.

  1. Create an /src/api/posts.ts and add a method getUserPosts(userId) there.
  2. Load posts and show them using the PostsList on page load (use useEffect as a componentDidMount). You should add data-cy="postDetails" attribute to the PostsList <ul> or <ol> element.
  3. Implement the UserSelect to show only the posts of the selected user. (call getUserPosts each time when user changes).
  4. post should contain title of the post.
  5. Each post has an Open button that sets a selectedPostId in the App.
  6. After opening the details the Open button becomes Close and will close the details on click.
  7. You should add data-cy="postList" attribute to the element containing post comments.
  8. PostDetails component should be shown only after selecting a post.
  9. Create getPostDetails(postId) method in /src/api/posts.ts and load post details from /posts/:postId.
  10. Create getPostComments(postId) method in /src/api/comments.ts, load comments from /comments?postId={postId}.
  11. Add a button to show/hide comments, which should have the name Show comments/Hide comments respectively.
  12. Add a delete button near each comment to delete it on the server using this symbol X.
  13. Add a form to add a new comment to the current post. The form should have a submit button with the name Add a comment in it and 3 fields:
  • for user name with the placeholder Your name
  • for user email with the placeholder Your email
  • for comment with the placeholder Type comment here
  1. Comments should be immediately updated after adding or removing.

react_dynamic-list-of-posts_test-task's People

Contributors

mgrinko avatar yuriiholiuk avatar yevhs avatar vpolets avatar mykola-yarchuk avatar danmysak avatar varseniuk avatar danheim avatar irenhh avatar elena-brv avatar

Watchers

Marcin Smarzewski avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.