Monday, 18 November 2019

Filtering todos assigned to the user (hidden and displayed)

I have an array of users andtodos. There are objects in the todos array, and todos and user ids in them. I display users and their todos. When I click on a user, it hides his todos. Problem: How to set up filtering so that clicking the user again shows his todos. A disabled user obtains a class with the opacity property.

Intended effect: : I click the user (id 1) -> hide todos assigned to this user (only todos for the user (id2) and user (id3) are visible -> click the user (id2) -> hide the todos assigned to this user user (only todos for user (id3) are visible) -> click user (id1) again -> displays hidden todos for this user (user todos are visible (id1 and id3)

Demo here: https://stackblitz.com/edit/react-s7aags

   class App extends Component {
      constructor() {
        super();
        this.state = {
          users: [{id:1, name: 'Martin'}, {id:3, name: 'Gregor'}, {id:2, name: 'Paul'}],
          todos: [{user_id:3, todos:['swim', 'feed']}, {user_id:1, todos:['sleep', 'read']}, {user_id:2, todos:['drinking', 'dancing']} ],
          hideTodosUserId: ''
        };
      }

      filterTodos = (userId) => {
        console.log(userId);
        const hideTodos = this.state.todos.filter(item => item.user_id !== userId);
        console.log(hideTodos);

        this.setState({
          todos: hideTodos,
          hideTodosUserId: userId
        })
      }

      render() {
        return (
          <div>
           <ul>
            {this.state.users.map(user => {
              return <li key={user.id} onClick={() => this.filterTodos(user.id)} className={this.state.hideTodosUserId === user.id ? 'hideTodos' : '' }>{user.name}</li>
            })}
           </ul>
            <ul>
            {this.state.todos.map(items => {
              return <li key={items.id}>{items.todos.map(todo => <li key={todo.id}>{todo}</li>)}</li>
            })}
           </ul>
          </div>
        );
      }
    }

css

.hideTodos {
  opacity: 0.5;
}


from Filtering todos assigned to the user (hidden and displayed)

No comments:

Post a Comment