- {sortedOrgs.slice(0, rederedListLength).map(org => (
+ {sortedOrgs.slice(0, rederedListLength).map((org) => (
{org.mainKey && {org.mainKey}}
{org.subKey && {org.subKey}}
diff --git a/client/src/Components/Pages/Search/Search.style.js b/client/src/Components/Pages/Search/Search.style.js
index c116341c..a490b640 100644
--- a/client/src/Components/Pages/Search/Search.style.js
+++ b/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;
+`;
diff --git a/client/src/Components/Pages/Search/index.js b/client/src/Components/Pages/Search/index.js
index acede714..2e77d2e2 100644
--- a/client/src/Components/Pages/Search/index.js
+++ b/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" ? (
-
- ) : (
-
- )}
+
+
);