(feat) Add login modal when searching projects for non-authenticated users

zubhub_frontend/zubhub/public/locales/en/translation.json

@@ -481,6 +481,9 @@
     "errors": {
       "unexpected": "Uh oh! Seems like we hit a snag :( Maybe try again later?",
       "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 {{type}}"
     }
   },
 

zubhub_frontend/zubhub/src/assets/js/styles/views/error/errorPageStyles.js

@@ -19,7 +19,7 @@ const styles = theme => ({
     // filter:
     //   "progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary-color2)', endColorstr='#ffffff', GradientType=0 )",
     '& .MuiGrid-root.MuiGrid-container': {
-      width: '100%',
+      width: '100dvw',
     },
   },
   mainContainerStyle: {

zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js

@@ -19,7 +19,7 @@ const styles = theme => ({
     },
   },
   cardStyle: {
-    border: 0,
+    border: 'none',
     borderRadius: 15,
     boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
     color: 'white',

zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js

@@ -1,4 +1,6 @@
-const styles = theme => ({
+import { colors } from "../../../colors";
+
+export const styles = theme => ({
   root: {
     paddingBottom: '2em',
     flex: '1 0 auto',
@@ -19,8 +21,9 @@ const styles = theme => ({
 
   pageHeaderStyle: {
     marginTop: '1em',
-    fontWeight: 'bold',
+    fontWeight: '800',
     textAlign: 'center',
+    fontSize: '36px'
   },
   cardStyle: {
     display: 'flex',
@@ -91,4 +94,54 @@ const styles = theme => ({
   },
 });
 
-export default styles;
+export const resultModal = (theme) => ({
+  root: {
+    maxWidth: '72rem',
+    backgroundColor: colors.white,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '50px',
+    borderRadius: '8px 8px 0 0',
+    height: '1013px',
+
+    '& .MuiGrid-root.MuiGrid-container': {
+      width: '100%',
+      backgroundColor: colors.white,
+    },
+  },
+  projectContainer: {
+    width: '100%', 
+    backgroundColor: colors.white, 
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  gridBlur: {
+    background: `linear-gradient(to top, ${colors.white} 0%, ${colors.white} 25%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%)`,
+    position: 'absolute', 
+    height: '588px', 
+    width: '100%', 
+    top: 0, 
+    zIndex: 1
+  },
+  loginModal: {
+    zIndex: 2,
+    position: 'absolute',
+    marginTop: '25%',
+    [theme.breakpoints.down('756')]: {
+      marginTop: '35%'
+    },
+    [theme.breakpoints.down('556')]: {
+      marginTop: '45%'
+    },
+    [theme.breakpoints.down('400')]: {
+      marginTop: '65%'
+    }
+  },
+  containerStylesOverrides: { boxShadow: 'none' }, 
+  titleStylesOverrides: { textAlign: 'center'},
+  errorPage: { width: '80dvw'}
+})
+

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

@@ -225,6 +225,17 @@ function PageWrapper(props) {
   };
 
   const { anchor_el, loading, open_search_form } = state;
+
+  const renderer = (() => {
+    if (!props.auth.token && props.match.path === '/search') {
+      return props.children
+    } 
+
+    if (props.auth.token) {
+      return (<DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout>)
+    }
+  })()
+
   const { t } = props;
   const { zubhub, hero } = props.projects;
 
@@ -238,7 +249,7 @@ function PageWrapper(props) {
       <Navbar {...props} />
 
       <Container className={classes.childrenContainer} maxWidth="lg">
-        {props.auth?.token ? <DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout> : null}
+        {renderer}
         {!props.auth?.token &&
           ![
             '/',
@@ -253,7 +264,8 @@ function PageWrapper(props) {
             '/challenge',
             '/password-reset',
             '/email-confirm',
-            '/password-reset-confirm'
+            '/password-reset-confirm',
+            '/search'
           ].includes(props.match?.path) && (
             <div style={{ minHeight: '80vh' }}>
               <NotFoundPage />

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx'
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Typography, Container } from '@material-ui/core';
@@ -19,7 +20,7 @@ function ErrorPage(props) {
   const classes = useStyles();
   const propStyle = props.style;
   return (
-    <Box className={classes.root} 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/login/Login.jsx

@@ -61,12 +61,12 @@ function Login(props) {
   };
 
   const { show_password } = state;
-  const { t } = props;
+  const { t } = props
 
   return (
     <Box className={classes.root}>
-      <Container className={classes.containerStyle}>
-        <Card className={classes.cardStyle}>
+      <Container className={classes.containerStyle} >
+        <Card className={clsx([classes.cardStyle, props.styleOverrides?.containerStyles])}>
           <CardActionArea>
             <CardContent>
               <form
@@ -80,17 +80,17 @@ function Login(props) {
                   variant="h5"
                   component="h2"
                   color="textPrimary"
-                  className={classes.titleStyle}
+                  className={clsx([classes.titleStyle, props.styleOverrides?.titleStyles])}
                 >
-                  {t('login.welcomeMsg.primary')}
+                  {props.primaryTitle ?? t('login.welcomeMsg.primary')}
                 </Typography>
                 <Typography
                   className={classes.descStyle}
                   variant="body2"
                   color="textSecondary"
                   component="p"
                 >
-                  {t('login.welcomeMsg.secondary')}
+                  {props.secondaryTitle ?? t('login.welcomeMsg.secondary')}
                 </Typography>
                 <Grid container spacing={3}>
                   <Grid item xs={12}>

zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import clsx from 'clsx';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -13,7 +12,6 @@ import {
   Grid,
   Box,
   ButtonGroup,
-  Button,
   Typography,
   Container,
   Card,
@@ -34,10 +32,12 @@ import CustomButton from '../../components/button/Button';
 import ErrorPage from '../error/ErrorPage';
 import LoadingPage from '../loading/LoadingPage';
 import Project from '../../components/project/Project';
-import styles from '../../assets/js/styles/views/search_results/searchResultsStyles';
+import {styles, resultModal} from '../../assets/js/styles/views/search_results/searchResultsStyles';
 import commonStyles from '../../assets/js/styles';
+import Login from '../login/Login';
 
 const useStyles = makeStyles(styles);
+const useModalStyles = makeStyles(resultModal)
 const useCommonStyles = makeStyles(commonStyles);
 
 /**
@@ -107,6 +107,7 @@ const buildCreatorProfiles = (
  */
 function SearchResults(props) {
   const classes = useStyles();
+  const modalClasses = useModalStyles()
   const common_classes = useCommonStyles();
 
   const [state, setState] = React.useState({
@@ -131,8 +132,16 @@ function SearchResults(props) {
     }
   };
 
-  const getResults = (type, 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 },
@@ -141,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}
@@ -164,7 +178,7 @@ function SearchResults(props) {
         </Grid>
       )
     }
-  };
+  }, [classes, common_classes, modalClasses.errorPage, props, state, t])
 
   const {
     count,
@@ -173,7 +187,39 @@ function SearchResults(props) {
     next: next_page,
     loading,
   } = state;
-  const { t } = props;
+
+  if (!auth.token) {
+    return (
+      <Container className={modalClasses.root}>
+        <Grid className={modalClasses.projectContainer}>
+          <Grid item xs={12}>
+            <Typography
+              className={classes.pageHeaderStyle}
+              variant="h3"
+              gutterBottom
+            >
+              {`${t('searchResults.resultsFound')} "${getQueryParams(window.location.href).get('q')}"`}
+            </Typography>
+          </Grid>
+          {getResults(
+            getQueryParams(window.location.href).get('type'),
+            results
+          )}
+          <Grid className={modalClasses.gridBlur}></Grid>
+        </Grid>
+        <Grid className={modalClasses.loginModal}>
+          <Login {...props}
+           primaryTitle={t('searchResults.loginModal.title', {
+            type: getQueryParams(window.location.href).get('type')
+           })}
+           secondaryTitle='' 
+           styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
+          />
+        </Grid>
+      </Container>
+    )
+  }
+
   if (loading) {
     return <LoadingPage />;
   } else {
@@ -197,7 +243,7 @@ function SearchResults(props) {
               </Grid>
               {getResults(
                 getQueryParams(window.location.href).get('type'),
-                results,
+                results
               )}
             </Grid>
             <ButtonGroup
@@ -264,8 +310,10 @@ function SearchResults(props) {
   }
 }
 
+
 SearchResults.propTypes = {
   auth: PropTypes.object.isRequired,
+  getStaffPicks: PropTypes.object.isRequired,
   searchProjects: PropTypes.func.isRequired,
   searchCreators: PropTypes.func.isRequired,
   searchTags: PropTypes.func.isRequired,
@@ -282,6 +330,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    getStaffPicks: args => {
+      return dispatch(ProjectActions.getStaffPicks(args))
+    },
     searchProjects: args => {
       return dispatch(ProjectActions.searchProjects(args));
     },