Implement toggleHideComplete

Author: codypearce

src/pages/Home.js

@@ -7,6 +7,7 @@ const useItemsState = createPersistedState("items");
 
 const Home = () => {
   const [items, setItems] = useItemsState([]);
+  const [hideCompleted, setHideCompleted] = useState(false);
 
   const handleItems = questionId => {
     if (items && items.find(item => item == questionId)) {
@@ -20,25 +21,33 @@ const Home = () => {
     setItems([]);
   };
 
+  const toggleHideCompleted = () => {
+    setHideCompleted(!hideCompleted);
+  };
+
   return (
     <main className="container">
       <QuestionsHeader
         items={items}
         questions={questions}
         resetItems={resetItems}
+        toggleHideCompleted={toggleHideCompleted}
       />
       <QuestionsHeader
         items={items}
         questions={questions}
         isFixed
         resetItems={resetItems}
+        toggleHideCompleted={toggleHideCompleted}
       />
       <ol>
         {questions.map(question => (
           <Question
+            key={question.id}
             question={question}
             handleItems={handleItems}
             items={items}
+            hideCompleted={hideCompleted}
           />
         ))}
       </ol>

src/ui/Question/Question.css

@@ -3,6 +3,13 @@
   flex-direction: row;
   align-items: center;
   margin-bottom: 26px;
+  transition: 0.5s ease opacity;
+  opacity: 1;
+}
+
+.question--hidden {
+  display: none;
+  opacity: 0;
 }
 
 .question__number {

src/ui/Question/Question.js

@@ -2,11 +2,16 @@ import React, { useState } from "react";
 import Collapsible from "../Collapsible";
 import "./Question.css";
 
-const Question = ({ question, handleItems, items }) => {
+const Question = ({ question, handleItems, items, hideCompleted }) => {
   const [hidden, setHidden] = useState(true);
   const isSelected = items && items.find(item => item == question.id);
+
   return (
-    <div className={`question`}>
+    <div
+      className={`question ${
+        hideCompleted && isSelected ? "question--hidden" : ""
+      }`}
+    >
       <div className="question__number">{question.position}</div>
       <li
         className={`question__card ${isSelected && "question__card--checked"}`}

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.js

@@ -1,15 +1,15 @@
 import React from "react";
 import "./HeaderButtons.css";
 
-const HeaderButtons = ({ resetItems }) => {
+const HeaderButtons = ({ resetItems, toggleHideCompleted }) => {
   return (
     <div className="HeaderButtons">
       <button className="HeaderButtons__button" onClick={resetItems}>
         Reset
       </button>
       <button
         className="HeaderButtons__button HeaderButtons__button--completed"
-        onClick={resetItems}
+        onClick={toggleHideCompleted}
       >
         Hide Completed
       </button>

src/ui/QuestionsHeader/QuestionsHeader.css

@@ -15,6 +15,7 @@
   justify-content: space-between;
   width: 100%;
   padding-left: 56px;
+  padding-right: 0px;
 }
 
 .question__header--hide {

src/ui/QuestionsHeader/QuestionsHeader.js

@@ -3,7 +3,13 @@ import useWindowScroll from "@react-hook/window-scroll";
 import "./QuestionsHeader.css";
 import HeaderButtons from "./HeaderButtons/HeaderButtons";
 
-const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
+const QuestionsHeader = ({
+  items,
+  questions,
+  isFixed,
+  resetItems,
+  toggleHideCompleted
+}) => {
   const scrollY = useWindowScroll(60);
   const scrollPoint = scrollY > 238;
   const fixedClass = isFixed && "question__header__fixed";
@@ -18,7 +24,10 @@ const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
       <div className="questions__header_text">
         {!items ? 0 : items.length}/{questions.length}
       </div>
-      <HeaderButtons resetItems={resetItems} />
+      <HeaderButtons
+        resetItems={resetItems}
+        toggleHideCompleted={toggleHideCompleted}
+      />
     </div>
   );
 };