Revert "feat: add login modal when searching projects for non-authent…

…icated users (#918)"

This reverts commit dce90e7.

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

@@ -480,9 +480,6 @@
     "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 projects"
     }
   },
 

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: '100dvw',
+      width: '100%',
     },
   },
   mainContainerStyle: {

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

@@ -19,7 +19,7 @@ const styles = theme => ({
     },
   },
   cardStyle: {
-    border: 'none',
+    border: 0,
     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,6 +1,4 @@
-import { colors } from "../../../colors";
-
-export const styles = theme => ({
+const styles = theme => ({
   root: {
     paddingBottom: '2em',
     flex: '1 0 auto',
@@ -21,9 +19,8 @@ export const styles = theme => ({
 
   pageHeaderStyle: {
     marginTop: '1em',
-    fontWeight: '800',
+    fontWeight: 'bold',
     textAlign: 'center',
-    fontSize: '36px'
   },
   cardStyle: {
     display: 'flex',
@@ -94,54 +91,4 @@ export const styles = theme => ({
   },
 });
 
-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'}
-})
-
+export default styles;

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

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

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

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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -12,6 +13,7 @@ import {
   Grid,
   Box,
   ButtonGroup,
+  Button,
   Typography,
   Container,
   Card,
@@ -32,12 +34,10 @@ import CustomButton from '../../components/button/Button';
 import ErrorPage from '../error/ErrorPage';
 import LoadingPage from '../loading/LoadingPage';
 import Project from '../../components/project/Project';
-import {styles, resultModal} from '../../assets/js/styles/views/search_results/searchResultsStyles';
+import styles 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,7 +107,6 @@ const buildCreatorProfiles = (
  */
 function SearchResults(props) {
   const classes = useStyles();
-  const modalClasses = useModalStyles()
   const common_classes = useCommonStyles();
 
   const [state, setState] = React.useState({
@@ -133,10 +132,6 @@ function SearchResults(props) {
   };
 
   const getResults = (type, results) => {
-    if (!results) {
-      return <ErrorPage error={t('searchResults.errors.noResult')} styleOverrides={{ width: modalClasses.errorPage }}/>
-    }
-
     if (type === SearchType.CREATORS) {
       return buildCreatorProfiles(
         results,
@@ -148,7 +143,7 @@ function SearchResults(props) {
     } else {
       return (
         <Grid container spacing={3}>
-          {results?.map(project => (
+          {results.map(project => (
             <Grid
               item
               xs={12}
@@ -178,38 +173,7 @@ function SearchResults(props) {
     next: next_page,
     loading,
   } = state;
-  const { t, auth } = 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'),
-            props.auth.token ? results : results[0]?.projects?.results,
-          )}
-          <Grid className={modalClasses.gridBlur}></Grid>
-        </Grid>
-        <Grid className={modalClasses.loginModal}>
-          <Login {...props}
-           primaryTitle={t('searchResults.loginModal.title')}
-           secondaryTitle='' 
-           styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
-          />
-        </Grid>
-      </Container>
-    )
-  }
-
+  const { t } = props;
   if (loading) {
     return <LoadingPage />;
   } else {
@@ -233,7 +197,7 @@ function SearchResults(props) {
               </Grid>
               {getResults(
                 getQueryParams(window.location.href).get('type'),
-                results
+                results,
               )}
             </Grid>
             <ButtonGroup
@@ -300,10 +264,8 @@ 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,
@@ -320,9 +282,6 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    getStaffPicks: args => {
-      return dispatch(ProjectActions.getStaffPicks(args))
-    },
     searchProjects: args => {
       return dispatch(ProjectActions.searchProjects(args));
     },

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,