1- import React from 'react' ;
1+ import React , { useCallback } from 'react' ;
22import PropTypes from 'prop-types' ;
33import { Link } from 'react-router-dom' ;
44import { connect } from 'react-redux' ;
@@ -132,12 +132,16 @@ function SearchResults(props) {
132132 }
133133 } ;
134134
135- const getResults = ( type , results ) => {
136- if ( ! results ) {
135+
136+ const { t, auth } = props ;
137+
138+ const getResults = useCallback ( ( type , results ) => {
139+ if ( ! loading && ! results ?. length ) {
137140 return < ErrorPage error = { t ( 'searchResults.errors.noResult' ) } styleOverrides = { { width : modalClasses . errorPage } } />
138141 }
139-
142+
140143 if ( type === SearchType . CREATORS ) {
144+ results . slice ( 0 , 4 )
141145 return buildCreatorProfiles (
142146 results ,
143147 { classes, common_classes } ,
@@ -146,9 +150,14 @@ function SearchResults(props) {
146150 handleSetState ,
147151 ) ;
148152 } else {
153+ // Sort the results array
154+ results . sort ( ( a , b ) => {
155+ return a . title . localeCompare ( b . title ) ;
156+ } ) ;
157+ const limitedResults = results . slice ( 0 , 3 ) ;
149158 return (
150159 < Grid container spacing = { 3 } >
151- { results ?. map ( project => (
160+ { limitedResults ?. map ( project => (
152161 < Grid
153162 item
154163 xs = { 12 }
@@ -169,7 +178,7 @@ function SearchResults(props) {
169178 </ Grid >
170179 )
171180 }
172- } ;
181+ } , [ classes , common_classes , modalClasses . errorPage , props , state , t ] )
173182
174183 const {
175184 count,
@@ -178,7 +187,6 @@ function SearchResults(props) {
178187 next : next_page ,
179188 loading,
180189 } = state ;
181- const { t, auth } = props ;
182190
183191 if ( ! auth . token ) {
184192 return (
@@ -195,13 +203,15 @@ function SearchResults(props) {
195203 </ Grid >
196204 { getResults (
197205 getQueryParams ( window . location . href ) . get ( 'type' ) ,
198- props . auth . token ? results : results [ 0 ] ?. projects ?. results ,
206+ results
199207 ) }
200208 < Grid className = { modalClasses . gridBlur } > </ Grid >
201209 </ Grid >
202210 < Grid className = { modalClasses . loginModal } >
203211 < Login { ...props }
204- primaryTitle = { t ( 'searchResults.loginModal.title' ) }
212+ primaryTitle = { t ( 'searchResults.loginModal.title' , {
213+ type : getQueryParams ( window . location . href ) . get ( 'type' )
214+ } ) }
205215 secondaryTitle = ''
206216 styleOverrides = { { containerStyles : modalClasses . containerStylesOverrides , titleStyles : modalClasses . titleStylesOverrides } }
207217 />
0 commit comments