mocked searching

Author: mbaghel

src/assets/images/icon-earth-search.svg

@@ -1,20 +1,46 @@
 import Button from "components/Button";
 import React from "react";
+import cn from "classnames";
 import CompleteProgress from "../CompleteProgress";
 import "./styles.module.scss";
 import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
 
-function Completeness({ isDisabled }) {
+function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
   return (
     <div styleName="completeness">
-      <CompleteProgress percentDone={26} />
+      <CompleteProgress
+        percentDone={stage === 1 ? 26 : stage === 2 ? 52 : 98}
+      />
       <ul styleName="list">
-        <li styleName="list-item done">Input Skills</li>
-        <li styleName="list-item">Search Member</li>
-        <li styleName="list-item">Overview of the Results</li>
+        <li
+          styleName={cn(
+            "list-item",
+            { active: stage === 1 },
+            { done: stage > 1 }
+          )}
+        >
+          Input Skills
+        </li>
+        <li
+          styleName={cn(
+            "list-item",
+            { active: stage === 2 },
+            { done: stage === 3 }
+          )}
+        >
+          Search Member
+        </li>
+        <li styleName={cn("list-item", { active: stage === 3 })}>
+          Overview of the Results
+        </li>
       </ul>
-      <Button size="medium" type="primary" disabled={isDisabled}>
-        Search
+      <Button
+        size="medium"
+        type="secondary"
+        disabled={isDisabled}
+        onClick={onClick}
+      >
+        {buttonLabel}
       </Button>
       <IconListQuill styleName="transparent-icon" />
     </div>

src/routes/InputSkills/components/Completeness/index.jsx

@@ -29,12 +29,20 @@
     float: left;
   }
 
-  &.done {
+  &.active {
     font-weight: 700;
     &:before {
       background-color: #fff;
     }
   }
+
+  &.done {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.6);
+    &:before {
+      content: "✓";
+    }
+  }
 }
 
 .transparent-icon {

src/routes/InputSkills/components/Completeness/styles.module.scss

@@ -0,0 +1,19 @@
+import React from "react";
+import "./styles.module.scss";
+import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";
+import CenteredSpinner from "components/CenteredSpinner";
+
+function SearchCard() {
+  return (
+    <div styleName="search-card">
+      <div styleName="heading">
+        <IconEarthSearch />
+        <h3>Search..</h3>
+        <p>Matching the criteria with 1.5 million members around the world..</p>
+      </div>
+      <CenteredSpinner />
+    </div>
+  );
+}
+
+export default SearchCard;

src/routes/InputSkills/components/SearchCard/index.jsx

@@ -0,0 +1,33 @@
+@import "styles/include";
+
+.search-card {
+  @include rounded-card;
+  max-width: 746px;
+  width: 50vw;
+  margin-right: 30px;
+  height: 80vh;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 30px 0 30px 0;
+
+  svg {
+    margin-bottom: 8px;
+  }
+
+  h3 {
+    @include font-barlow-condensed;
+    text-transform: uppercase;
+    font-size: 34px;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 14px;
+    color: #555555;
+  }
+}

src/routes/InputSkills/components/SearchCard/styles.module.scss

@@ -1,15 +1,19 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import SkillsList from "./components/SkillsList";
 import Completeness from "./components/Completeness";
 import "./styles.module.scss";
 import { useData } from "hooks/useData";
 import { getSkills } from "services/skills";
 import LoadingIndicator from "components/LoadingIndicator";
+import SearchCard from "./components/SearchCard";
 
 function InputSkills() {
   const [selectedSkills, setSelectedSkills] = useState([]);
+  const [searchState, setSearchState] = useState("done");
   const [skills, loadingError] = useData(getSkills);
 
+  let searchTimer;
+
   const toggleSkill = useCallback(
     (id) => {
       if (selectedSkills.includes(id)) {
@@ -23,17 +27,38 @@ function InputSkills() {
     [selectedSkills]
   );
 
+  const search = () => {
+    setSearchState("searching");
+    searchTimer = setTimeout(() => {
+      setSearchState("done");
+    }, 2000);
+  };
+
+  useEffect(() => clearTimeout(searchTimer));
+
   return !skills ? (
     <LoadingIndicator error={loadingError} />
-  ) : (
+  ) : !searchState ? (
     <div styleName="page">
       <SkillsList
         skills={skills}
         selectedSkills={selectedSkills}
         toggleSkill={toggleSkill}
       />
-      <Completeness isDisabled={selectedSkills.length < 1} />
+      <Completeness
+        isDisabled={selectedSkills.length < 1}
+        onClick={search}
+        buttonLabel="Search"
+        stage={1}
+      />
+    </div>
+  ) : searchState === "searching" ? (
+    <div styleName="page">
+      <SearchCard />
+      <Completeness isDisabled buttonLabel="Submit Request" stage={2} />
     </div>
+  ) : (
+    <div>Done!</div>
   );
 }