Lab3 cleanup

lab3/src/components/App/App.css

@@ -1,31 +1,27 @@
-#root {
-    background: whitesmoke;
-}
-
 .App {
-    padding: 25px 15px 25px 15px;
-    border: 2px solid gray;
-    min-height: 250px;
+  padding: 25px 15px 25px 15px;
+  border: 2px solid gray;
+  min-height: 250px;
 }
 
 .App-header {
-    background-color: #222;
-    height: 150px;
-    padding: 20px;
-    color: white;
-    font-size: 42px;
-    text-align: center;
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+  font-size: 42px;
+  text-align: center;
 }
 
 .App-header-description {
-    font-size: 18px;
+  font-size: 18px;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

lab3/src/components/Container/Container.js

@@ -35,7 +35,7 @@ const Container = () => {
           console.log("FOO");
         }}
       />
-      <List title={"Users"} items={[]} />
+      <List title={"Users"} />
     </div>
   );
 };

lab3/src/components/List/List.js

@@ -4,9 +4,12 @@ import { connect } from "react-redux";
 
 import "./List.css";
 
-const List = ({ items, title }) => {
+const List = ({ title }) => {
   const [searchTerm, setSearchTerm] = useState("");
 
+  // Task 7: Get users from store
+  const users = [];
+
   const onItemClick = (userId) => {
     console.log("Clicked on user", userId);
   };
@@ -15,23 +18,23 @@ const List = ({ items, title }) => {
     setSearchTerm(e.target.value);
   };
 
-  const filterListItemsBySearchTerm = (searchTerm) =>
-    items.filter((item) =>
-      item.name.toLowerCase().includes(searchTerm.toLowerCase())
+  const filterUsersBySearchTerm = (searchTerm) =>
+    users.filter((user) =>
+      user.name.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
-  const filteredItems = filterListItemsBySearchTerm(searchTerm);
+  const filteredUsers = filterUsersBySearchTerm(searchTerm);
 
   return (
     <div className="List">
       <h2 className="List-title">{title}</h2>
       <SearchBar onKeyPressed={onKeyPressed} />
-      {filteredItems.length === 0 ? (
+      {filteredUsers.length === 0 ? (
         <div className="alert alert-warning">Empty list...</div>
       ) : (
         <ul className="list-group">
-          {filteredItems.length > 0 &&
-            filteredItems.map((item) => (
+          {filteredUsers.length > 0 &&
+            filteredUsers.map((item) => (
               <li
                 className="List-item list-group-item"
                 key={item.id}
@@ -46,10 +49,4 @@ const List = ({ items, title }) => {
   );
 };
 
-const mapStateToProps = (state) => {
-  return {
-    items: [], // TODO: Task 6 - Implement mapStateToProps
-  };
-};
-
-export default connect(mapStateToProps, null)(List);
+export default List;

lab3/src/index.css

@@ -1,5 +1,6 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Lato', sans-serif;
+  font-family: "Lato", sans-serif;
+  background: whitesmoke;
 }