Update search

client/src/Components/Pages/Search/Header/index.js

@@ -4,7 +4,6 @@ import AutosuggestComponent from "../AutoSuggest";
 
 import { HeaderWrapper, SearchBarContainer } from "./Header.style";
 import Tabs from "./Tabs";
-import GeneralTabs from "../../../Common/GeneralTabs";
 
 export default class SearchHeader extends Component {
   state = {
@@ -44,14 +43,7 @@ export default class SearchHeader extends Component {
   // };
 
   render() {
-    const {
-      isMobile,
-      isTablet,
-      data,
-      category,
-      setActiveTab,
-      activeTab = "all",
-    } = this.props;
+    const { isMobile, isTablet, data, category, setActiveTab } = this.props;
     const { shrink } = this.state;
     return (
       <HeaderWrapper category={category} shrink={shrink}>
@@ -72,13 +64,6 @@ export default class SearchHeader extends Component {
             category={category}
           />
         </SearchBarContainer>
-        <GeneralTabs
-          setActiveTab={setActiveTab}
-          activeTab={activeTab}
-          tabOne="all"
-          tabTwo="recent"
-          zIndex="1"
-        />
       </HeaderWrapper>
     );
   }

client/src/Components/Pages/Search/OrganisationRow.js

@@ -28,7 +28,7 @@ const renderLogo = (orgType) => {
   }
   return (
     <LogoWrapper orgColor={organizations[orgType].primary}>
-      <p>LOGO</p>
+      <p>{orgType}</p>
     </LogoWrapper>
   );
 };

client/src/Components/Pages/Search/OrganisationsList.js

@@ -2,7 +2,13 @@ import React, { Component, createRef } from "react";
 
 import { Skeleton, Spin } from "antd";
 
-import { OrgsListWrapper, MainKey, SubKey, NoDataTitle } from "./Search.style";
+import {
+  OrgsListWrapper,
+  MainKey,
+  SubKey,
+  NoDataTitle,
+  ListTitle,
+} from "./Search.style";
 
 import Suggestion from "./OrganisationRow";
 
@@ -82,8 +88,9 @@ class OrganisationsList extends Component {
           <>
             {sortedOrgs.length > 0 ? (
               <>
+                <ListTitle>Latest reviews by workers</ListTitle>
                 <div ref={this.listRef}>
-                  {sortedOrgs.slice(0, rederedListLength).map(org => (
+                  {sortedOrgs.slice(0, rederedListLength).map((org) => (
                     <div key={org._id}>
                       {org.mainKey && <MainKey>{org.mainKey}</MainKey>}
                       {org.subKey && <SubKey>{org.subKey}</SubKey>}

client/src/Components/Pages/Search/Search.style.js

@@ -22,7 +22,7 @@ export const classNames = {
 
 export const AutosuggestWrapper = styled.div.attrs(classNames)`
   position: relative;
-  /* width: ${props => props.width}; */
+  /* width: ${(props) => props.width}; */
   width: 100%;
   outline: none;
 
@@ -37,7 +37,7 @@ export const AutosuggestWrapper = styled.div.attrs(classNames)`
   }
   .${classNames.containerOpen} {
     border: ${borders.searchBox};
-    height: ${props => props.height};
+    height: ${(props) => props.height};
     padding: 10px 20px;
     font-weight: 300;
     font-size: 15px;
@@ -49,7 +49,7 @@ export const AutosuggestWrapper = styled.div.attrs(classNames)`
 
   }
   input {
-    text-indent: ${props => (props.searchIcon ? "0px" : "45px")};
+    text-indent: ${(props) => (props.searchIcon ? "0px" : "45px")};
   }
 
   .${classNames.containerInputOpen} {
@@ -105,10 +105,10 @@ export const AutosuggestWrapper = styled.div.attrs(classNames)`
 export const IconDiv = styled.div`
   width: 32px;
   height: 32px;
-  /* background: url(${props => props.bgr}) no-repeat; */
+  /* background: url(${(props) => props.bgr}) no-repeat; */
   object-fit: fill;
   position: absolute;
-  top: ${props => props.iconTop};
+  top: ${(props) => props.iconTop};
   margin-left: 20px;
   cursor: pointer;
   z-index: 1;
@@ -133,7 +133,7 @@ export const SearchLegendDiv = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: ${props => (props.isMobile ? "0" : "0 2rem 1rem 2rem")};
+  padding: ${(props) => (props.isMobile ? "0" : "0 2rem 1rem 2rem")};
   width: 100%;
   max-width: 600px;
 `;
@@ -144,7 +144,7 @@ export const LastReviewsContainer = styled.div`
 `;
 
 export const LegendTitle = styled.h2`
-  color: ${props => organizations[props.orgType].primary};
+  color: ${(props) => organizations[props.orgType].primary};
   font-size: 15px;
   margin: 0;
 `;
@@ -153,7 +153,7 @@ export const SuggestionBox = styled.div`
   border: ${({ withoutBorder }) =>
     withoutBorder ? "none" : `0.2px solid ${colors.lightGray}`};
   box-shadow: ${colors.searchBoxShadow};
-  color: ${props => organizations[props.orgType].primary};
+  color: ${(props) => organizations[props.orgType].primary};
   border-color: ${colors.lightGray};
 `;
 
@@ -184,8 +184,8 @@ export const SymbolDiv = styled.div`
 `;
 
 export const ImgDiv = styled.div`
-  height: ${props => props.height};
-  width: ${props => props.width};
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
 `;
 
 export const OrganisationDetailsDiv = styled.div`
@@ -288,15 +288,24 @@ export const LogoWrapper = styled.div`
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  background-color: ${props => props.orgColor || colors.heliotrope};
+  background-color: ${(props) => props.orgColor || colors.heliotrope};
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 1rem;
 
   p {
-    font-size: 8px;
+    font-size: 6px;
     color: white;
     margin-bottom: 0;
+    text-transform: capitalize;
+    font-weight: bold;
   }
 `;
+
+export const ListTitle = styled.h2`
+  color: ${colors.dustyGray1};
+  font-weight: bold;
+  font-size: 1.25rem;
+  padding-left: 0.75rem;
+`;

client/src/Components/Pages/Search/index.js

@@ -14,7 +14,7 @@ import { API_SEARCH_URL } from "../../../apiUrls";
 import { SearchWrapper } from "./Search.style";
 
 // gets all organisations from db
-export const axiosCall = async category => {
+export const axiosCall = async (category) => {
   const response = await axios.get(
     API_SEARCH_URL.replace(":category", category),
   );
@@ -49,7 +49,7 @@ export default class Search extends Component {
       agency: [],
     },
 
-    activeTab: "all",
+    activeTab: "recent",
   };
 
   componentDidMount() {
@@ -76,9 +76,11 @@ export default class Search extends Component {
         axiosCall(category)
           .then(({ data: [{ searchData: newData, lastReviewed }] }) => {
             const sortedOrgs = sortAndCategorizeOrgs(newData);
-            const lastReviewedOrgs = lastReviewed.map(org => org.lastReviewed);
+            const lastReviewedOrgs = lastReviewed.map(
+              (org) => org.lastReviewed,
+            );
 
-            this.setState(prevState => {
+            this.setState((prevState) => {
               return {
                 searchData: { ...prevState.searchData, [category]: newData },
                 category,
@@ -94,6 +96,7 @@ export default class Search extends Component {
             });
           })
           .finally(() => {
+            this.filterRecentReviews();
             this.setState({ loading: false });
           });
       } else {
@@ -102,13 +105,9 @@ export default class Search extends Component {
     });
   };
 
-  setActiveTab = e => {
+  setActiveTab = (e) => {
     const { tab } = e.target.dataset;
     this.setState({ activeTab: tab });
-
-    if (tab === "recent") {
-      this.filterRecentReviews();
-    }
   };
 
   filterRecentReviews = () => {
@@ -125,13 +124,7 @@ export default class Search extends Component {
   };
 
   render() {
-    const {
-      searchData,
-      sortedOrgs,
-      loading,
-      activeTab,
-      recentReviews,
-    } = this.state;
+    const { searchData, loading, activeTab, recentReviews } = this.state;
 
     const { isMobile, isTablet, match } = this.props;
     const { category = "agency" } = match.params;
@@ -146,20 +139,13 @@ export default class Search extends Component {
             activeTab={activeTab}
             setActiveTab={this.setActiveTab}
           />
-          {activeTab === "all" ? (
-            <OrganisationsList
-              sortedOrgs={sortedOrgs[category]}
-              loading={loading}
-              category={category}
-            />
-          ) : (
-            <OrganisationsList
-              sortedOrgs={recentReviews[category]}
-              loading={loading}
-              category={category}
-              recentReviews
-            />
-          )}
+
+          <OrganisationsList
+            sortedOrgs={recentReviews[category]}
+            loading={loading}
+            category={category}
+            recentReviews
+          />
         </SearchWrapper>
       </Layout>
     );