classes useerfilter

classes/src/App.js

@@ -1,10 +1,21 @@
-import Users from './components/Users';
+import UserFinder from './components/UserFinder';
+import UsersContext from './store/users-context';
+
+const DUMMY_USERS = [
+  { id: 'u1', name: 'Max' },
+  { id: 'u2', name: 'Manuel' },
+  { id: 'u3', name: 'Julie' },
+];
 
 function App() {
+  const usersContext = {
+    users: DUMMY_USERS
+  }
+
   return (
-    <div>
-      <Users />
-    </div>
+    <UsersContext.Provider value={usersContext}>
+      <UserFinder />
+    </UsersContext.Provider>
   );
 }
 

classes/src/components/User.js

@@ -2,6 +2,9 @@ import React from "react";
 import classes from "./User.module.css";
 
 class User extends React.Component {
+  componentWillUnmount(){
+    console.log("User will unmount")
+  }
   render() {
     return <li className={classes.user}>{this.props.name}</li>;
   }

classes/src/components/UserFinder.js

@@ -0,0 +1,47 @@
+import { Component, Fragment } from "react";
+import UsersContext from "../store/users-context";
+import classes from "./UserFinder.module.css";
+import Users from "./Users";
+
+class UserFinder extends Component {
+  static contextType = UsersContext;
+
+  constructor() {
+    super();
+    this.state = {
+      filteredUsers: [],
+      searchTerm: "",
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ filteredUsers: this.context.users });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.searchTerm !== this.state.searchTerm) {
+      this.setState({
+        filteredUsers: this.context.users.filter((user) =>
+          user.name.includes(this.state.searchTerm)
+        ),
+      });
+    }
+  }
+
+  searchChangeHandler(event) {
+    this.setState({ searchTerm: event.target.value });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div className={classes.finder}>
+          <input type="search" onChange={this.searchChangeHandler.bind(this)} />
+        </div>
+        <Users users={this.state.filteredUsers} />
+      </Fragment>
+    );
+  }
+}
+
+export default UserFinder;

classes/src/components/UserFinder.module.css

@@ -0,0 +1,8 @@
+.finder {
+  margin: 2rem auto;
+  background-color: white;
+  padding: 1rem;
+  border-radius: 12px;
+  max-width: 40rem;
+  text-align: center;
+}

classes/src/components/Users.js

@@ -1,13 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import User from "./User";
 
 import classes from "./Users.module.css";
 
-const DUMMY_USERS = [
-  { id: "u1", name: "Max" },
-  { id: "u2", name: "Manuel" },
-  { id: "u3", name: "Julie" },
-];
 
 class Users extends React.Component {
   constructor() {
@@ -29,7 +24,7 @@ class Users extends React.Component {
   render() {
     const usersList = (
       <ul>
-        {DUMMY_USERS.map((user) => (
+        {this.props.users.map((user) => (
           <User key={user.id} name={user.name} />
         ))}
       </ul>

classes/src/store/users-context.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const UsersContext = React.createContext({
+  users: []
+});
+
+export default UsersContext;