Toggle text

Author: codypearce

src/pages/Home.js

@@ -32,13 +32,15 @@ const Home = () => {
         questions={questions}
         resetItems={resetItems}
         toggleHideCompleted={toggleHideCompleted}
+        hideCompleted={hideCompleted}
       />
       <QuestionsHeader
         items={items}
         questions={questions}
         isFixed
         resetItems={resetItems}
         toggleHideCompleted={toggleHideCompleted}
+        hideCompleted={hideCompleted}
       />
       <ol>
         {questions.map(question => (

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.js

@@ -1,7 +1,7 @@
 import React from "react";
 import "./HeaderButtons.css";
 
-const HeaderButtons = ({ resetItems, toggleHideCompleted }) => {
+const HeaderButtons = ({ resetItems, toggleHideCompleted, hideCompleted }) => {
   return (
     <div className="HeaderButtons">
       <button className="HeaderButtons__button" onClick={resetItems}>
@@ -11,7 +11,7 @@ const HeaderButtons = ({ resetItems, toggleHideCompleted }) => {
         className="HeaderButtons__button HeaderButtons__button--completed"
         onClick={toggleHideCompleted}
       >
-        Hide Completed
+        {hideCompleted ? "Show" : "Hide"} Done
       </button>
     </div>
   );

src/ui/QuestionsHeader/QuestionsHeader.js

@@ -8,7 +8,8 @@ const QuestionsHeader = ({
   questions,
   isFixed,
   resetItems,
-  toggleHideCompleted
+  toggleHideCompleted,
+  hideCompleted
 }) => {
   const scrollY = useWindowScroll(60);
   const scrollPoint = scrollY > 238;
@@ -27,6 +28,7 @@ const QuestionsHeader = ({
       <HeaderButtons
         resetItems={resetItems}
         toggleHideCompleted={toggleHideCompleted}
+        hideCompleted={hideCompleted}
       />
     </div>
   );