fix regression

Author: coderatomy

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}}"
     }
   },
 

zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx

@@ -20,7 +20,7 @@ function ErrorPage(props) {
   const classes = useStyles();
   const propStyle = props.style;
   return (
-    <Box className={clsx([classes.root, props.styleOverrides.width])} style={propStyle ? propStyle : null}>
+    <Box className={clsx([classes.root, props.styleOverrides?.width])} style={propStyle ? propStyle : null}>
       <Container className={classes.mainContainerStyle}>
         <img className={classes.disconnectedStyle} src={disconnected} alt={props.error} />
         <Box className={classes.errorBoxStyle}>

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 <ErrorPage error={t('searchResults.errors.noResult')} styleOverrides={{ width: modalClasses.errorPage }}/>
     }
-
+    
     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 (
         <Grid container spacing={3}>
-          {results?.map(project => (
+          {limitedResults?.map(project => (
             <Grid
               item
               xs={12}
@@ -169,7 +178,7 @@ function SearchResults(props) {
         </Grid>
       )
     }
-  };
+  }, [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) {
           </Grid>
           {getResults(
             getQueryParams(window.location.href).get('type'),
-            props.auth.token ? results : results[0]?.projects?.results,
+            results
           )}
           <Grid className={modalClasses.gridBlur}></Grid>
         </Grid>
         <Grid className={modalClasses.loginModal}>
           <Login {...props}
-           primaryTitle={t('searchResults.loginModal.title')}
+           primaryTitle={t('searchResults.loginModal.title', {
+            type: getQueryParams(window.location.href).get('type')
+           })}
            secondaryTitle='' 
            styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
           />

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,