diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json index df75f484b..907395192 100644 --- a/zubhub_frontend/zubhub/public/locales/en/translation.json +++ b/zubhub_frontend/zubhub/public/locales/en/translation.json @@ -483,7 +483,7 @@ "noResult": "We could not find anything for your search term! Maybe try to search something else?" }, "loginModal": { - "title": "Log in or Sign up to search for projects" + "title": "Log in or Sign up to search for {{type}}" } }, diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx index 00cd4d402..4985e0e64 100644 --- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx +++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; @@ -132,12 +132,16 @@ function SearchResults(props) { } }; - const getResults = (type, results) => { - if (!results) { + + const { t, auth } = props; + + const getResults = useCallback((type, results) => { + if (!loading && !results?.length) { return } - + if (type === SearchType.CREATORS) { + results.slice(0, 4) return buildCreatorProfiles( results, { classes, common_classes }, @@ -146,9 +150,14 @@ function SearchResults(props) { handleSetState, ); } else { + // Sort the results array + results.sort((a, b) => { + return a.title.localeCompare(b.title); + }); + const limitedResults = results.slice(0, 3); return ( - {results?.map(project => ( + {limitedResults?.map(project => ( ) } - }; + }, [classes, common_classes, modalClasses.errorPage, props, state, t]) const { count, @@ -178,7 +187,6 @@ function SearchResults(props) { next: next_page, loading, } = state; - const { t, auth } = props; if (!auth.token) { return ( @@ -195,13 +203,15 @@ function SearchResults(props) { {getResults( getQueryParams(window.location.href).get('type'), - props.auth.token ? results : results[0]?.projects?.results, + results )} diff --git a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js index 333931a75..f21740109 100644 --- a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js +++ b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js @@ -31,18 +31,13 @@ export const getQueryParams = url => { */ export const fetchPage = (page, props, query_string, type) => { if (type === SearchType.PROJECTS) { - if (props.auth?.token) { - return props.searchProjects({ - page, - query_string, - t: props.t, - token: props.auth.token, - tab: 'projects', - }); - } else { - return props.getStaffPicks({ token: props.token }) - } - + return props.searchProjects({ + page, + query_string, + t: props.t, + token: props.auth.token, + tab: 'projects', + }); } else if (type === SearchType.CREATORS) { return props.searchCreators({ page,