end of lesson 2

02_state_and_events /project_showcase/src/components/Header.js

@@ -1,14 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 
 const Header = () => {
+  const [isDarkMode, setIsDarkMode] = useState(true);
+
+  const handleToggleDarkMode = (e) => {
+    setIsDarkMode(isDarkMode => !isDarkMode)
+  } 
+
   return (
     <header>
       <h1>
         <span className="logo">{"//"}</span>
         Project Showcase
       </h1>
       <nav>
-        <button>Light Mode</button>
+        <button onClick={handleToggleDarkMode}>{isDarkMode ? "Light Mode" : "Dark Mode"}</button>
       </nav>
     </header>
   );

02_state_and_events /project_showcase/src/components/ProjectList.js

@@ -1,14 +1,30 @@
+import { useState } from "react";
 import ProjectListItem from "./ProjectListItem";
 
 import projects from "../projects";
 
 const ProjectList = () => {
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const projectListItems = projects.map(project => {
+  const handleSearch = (e) => {
+    console.log(e.target.value);
+    setSearchQuery(e.target.value);
+  }
+
+  const searchResults = projects.filter(project => {
+    // return true if the project should be included and false if not
+    return project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+           project.about.toLowerCase().includes(searchQuery.toLowerCase())
+  })
+
+  // console.log(searchResults)
+
+  const projectListItems = searchResults.map(project => {
     return <ProjectListItem key={project.id} project={project} />
   })
 
 
+  // console.log('render');
   return (
     <section>
       <h2>Projects</h2>
@@ -21,7 +37,7 @@ const ProjectList = () => {
         <button>Phase 2</button>
         <button>Phase 1</button>
       </div>
-      <input type="text" placeholder="Search..."/>
+      <input type="text" placeholder="Search..." onChange={handleSearch} />
 
       <ul className="cards">{projectListItems}</ul>
     </section>