Done resolving issue 211

fixed failed to load api specification error (unstructuredstudio#363)

fixed failed to load api specification error

added style to fix text wrap (unstructuredstudio#373)

Add hot reloading to media container (unstructuredstudio#382)

Add new search features (unstructuredstudio#362)

* Finish creators and projects search migration

* Finish creators and projects search migration

* Add tag search

* Add search for projects with tags

* Fix search bar on mobile

* use 0 rather than 0 with units in css

* Remove print

* Default search type to projects

* Disable scroll lock

Revert package-lock (unstructuredstudio#383)

improveConsistency: fixed title text small, extra vertical space ... (unstructuredstudio#369)

* improveConsistency: fixed title text small, extra vertical space and inconsitent padding of buttons

fix text overflow issue in signup page phone number field  (unstructuredstudio#378)

removed spacing between icons

zubhub_backend/docker-compose.yml

@@ -25,6 +25,7 @@ services:
       dockerfile: ./compose/media/dev/Dockerfile
     restart: on-failure
     volumes:
+      - ./media:/home/media
       - media_data:/home/media/media_store
       - ./compose/media/requirements.txt:/home/requirements.txt:ro
     ports:

zubhub_backend/zubhub/creators/views.py

@@ -80,9 +80,12 @@ def get(self, request, format=None):
 class UserProfileAPIView(RetrieveAPIView):
     """
     Fetch Profile of user with given username.
-
     Requires username of user.
     Returns user profile.
+
+    Note that this schema returns the full user profile, but the api sometimes
+    returns a minimal version of the user profile, omitting certain fields that
+    are not neccessary or are sensitive.
     """
 
     queryset = Creator.objects.filter(is_active=True)
@@ -91,10 +94,10 @@ class UserProfileAPIView(RetrieveAPIView):
     throttle_classes = [GetUserRateThrottle, SustainedRateThrottle]
 
     def get_serializer_class(self):
-        if self.kwargs.get("username") == self.request.user.username:
-            return CreatorSerializer
-        else:
+        if self.request and self.kwargs.get("username") != self.request.user.username:
             return CreatorMinimalSerializer
+        else:
+            return CreatorSerializer
 
 
 class RegisterCreatorAPIView(RegisterView):

zubhub_backend/zubhub/projects/utils.py

@@ -1,4 +1,6 @@
+from enum import IntEnum
 import re
+from typing import Optional, Set
 from akismet import Akismet
 from lxml.html.clean import Cleaner
 from lxml.html import document_fromstring
@@ -366,8 +368,14 @@ def clean_project_desc(string):
     return cleaner.clean_html(string)
 
 
+class ProjectSearchCriteria(IntEnum):
+    CATGEORY = 0
+    TAG = 1
+    TITLE_DESCRIPTION = 2
 
-def perform_project_search(user, query_string):
+
+default_search_criteria = {ProjectSearchCriteria.CATGEORY, ProjectSearchCriteria.TAG, ProjectSearchCriteria.TITLE_DESCRIPTION}
+def perform_project_search(user, query_string, search_criteria: Optional[Set[ProjectSearchCriteria]] = None):
     """
     Perform search for projects matching query.
 
@@ -397,25 +405,23 @@ def perform_project_search(user, query_string):
         else:
             result_categories_tree = Category.get_tree(parent=category)
 
-    if result_categories_tree:
+    if search_criteria is None:
+        search_criteria = default_search_criteria
+
+    result_projects = Project.objects.none()
+    if ProjectSearchCriteria.CATGEORY in search_criteria and result_categories_tree:
         prefetch_related_objects(result_categories_tree, 'projects')
 
         for category in result_categories_tree:
-            if result_projects:
-                result_projects |= category.projects.all().annotate(rank=rank).order_by('-rank')
-            else:
-                result_projects = category.projects.all().annotate(rank=rank).order_by('-rank')
+            result_projects |= category.projects.all().annotate(rank=rank).order_by('-rank')
     #################################################################
 
     # fetch all projects whose tag(s) matches the search query
     result_tags = Tag.objects.filter(
         search_vector=query).prefetch_related("projects")
-
-    for tag in result_tags:
-        if result_projects:
+    if ProjectSearchCriteria.TAG in search_criteria:
+        for tag in result_tags:
             result_projects |= tag.projects.all().annotate(rank=rank).order_by('-rank')
-        else:
-            result_projects = tag.projects.all().annotate(rank=rank).order_by('-rank')
     ############################################################
 
 
@@ -436,16 +442,12 @@ def perform_project_search(user, query_string):
     # ############################################################
 
     # fetch all projects that matches the search term
-    if result_projects:
-        result_projects |= Project.objects.annotate(rank=rank).filter(
-            search_vector=query ).order_by('-rank')
-    else:
-        result_projects = Project.objects.annotate(rank=rank).filter(
-            search_vector=query ).order_by('-rank')
+    if ProjectSearchCriteria.TITLE_DESCRIPTION in search_criteria:
+        result_projects |= Project.objects.annotate(rank=rank).filter(search_vector=query ).order_by('-rank')
     ##############################################################
 
     result = []
-    
+
     """ make sure that user can view all projects in search result """
     for project in result_projects:
         if can_view(user, project):

zubhub_backend/zubhub/projects/views.py

@@ -14,7 +14,7 @@
 from projects.permissions import (IsOwner, IsStaffOrModerator, SustainedRateThrottle,
                                   PostUserRateThrottle, GetUserRateThrottle, CustomUserRateThrottle)
 from .models import Project, Comment, StaffPick, Category, Tag, PublishingRule
-from .utils import (project_changed, detect_mentions, 
+from .utils import (ProjectSearchCriteria, project_changed, detect_mentions, 
                     perform_project_search, can_view, get_published_projects_for_user)
 from creators.utils import activity_notification
 from .serializers import (ProjectSerializer, ProjectListSerializer,
@@ -155,7 +155,8 @@ def get_queryset(self):
         query_string = self.request.GET.get('q')
         query = SearchQuery(query_string)
         rank = SearchRank(F('search_vector'), query)
-        return Tag.objects.annotate(rank=rank).filter(search_vector=query).order_by('-rank')
+        tags = Tag.objects.annotate(rank=rank).filter(search_vector=query).order_by('-rank')
+        return tags
 
 
 class ProjectSearchAPIView(ListAPIView):
@@ -172,7 +173,11 @@ class ProjectSearchAPIView(ListAPIView):
     pagination_class = ProjectNumberPagination
 
     def get_queryset(self):
-        return perform_project_search(self.request.user, self.request.GET.get("q"))
+        try:
+            search_criteria = {ProjectSearchCriteria(int(self.request.GET.get('criteria', '')))}
+        except (KeyError, ValueError):
+            search_criteria = None
+        return perform_project_search(self.request.user, self.request.GET.get("q"), search_criteria)
 
 
 class ProjectDetailsAPIView(RetrieveAPIView):

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

@@ -379,8 +379,8 @@
   "searchResults": {
     "projects": "Projects",
     "creators": "Creators",
-    "resultFound": "Result found",
-    "resultsFound": "Results found",
+    "resultFound": "Result for",
+    "resultsFound": "Results for",
     "prev": "Prev",
     "next": "Next",
     "ariaLabels": {

zubhub_frontend/zubhub/src/App.js

@@ -75,7 +75,6 @@ const LazyImport = props => {
 };
 
 function App(props) {
-  console.log("hey alice");
   return (
     <Router>
       <Switch>

zubhub_frontend/zubhub/src/api/api.js

@@ -282,14 +282,15 @@ class API {
    *
    * @todo - describe method's signature
    */
-  searchProjects = ({ page, token, query_string }) => {
-    let url;
+  searchProjects = ({ page, token, query_string, criteria }) => {
+    const params = { q: query_string, criteria };
     if (page) {
-      url = `projects/search/?q=${query_string}&page=${page}`;
-    } else {
-      url = `projects/search/?q=${query_string}`;
+      params[page] = page;
     }
 
+    const searchParams = new URLSearchParams(params);
+    const url = `projects/search/?${searchParams.toString()}`;
+
     return this.request({ url, token }).then(res => res.json());
   };
 
@@ -310,6 +311,17 @@ class API {
     return this.request({ url, token }).then(res => res.json());
   };
 
+  searchTags = ({ page, token, query_string }) => {
+    let url;
+    if (page) {
+      url = `projects/tags/search/?q=${query_string}&page=${page}`;
+    } else {
+      url = `projects/tags/search/?q=${query_string}`;
+    }
+
+    return this.request({ url, token }).then(res => res.json());
+  };
+
   /**
    * @method getFollowers - get a list of users that a username is following
    * @author Raymond Ndibe <[email protected]>

zubhub_frontend/zubhub/src/assets/css/index.css

@@ -595,3 +595,7 @@ html,
 .display-none {
   display: none !important;
 }
+
+.MuiInputBase-root #phone{
+  width: 80%;
+}

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

@@ -77,6 +77,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   dividerText: {
+    whiteSpace: 'nowrap',
     [theme.breakpoints.up('1600')]: {
       fontSize: '1.2rem',
     },

zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js

@@ -23,16 +23,17 @@ const styles = theme => ({
   searchFormStyle: {
     display: 'inline-block',
     position: 'relative',
-    marginLeft: '1em',
+    marginLeft: '2em',
+    verticalAlign: 'bottom',
     '& .search-form-input': {
       height: '2.5em',
-      position: 'absolute',
-      top: '-1em',
       maxWidth: '40em',
-      width: '40em',
+      width: '35em',
       backgroundColor: 'rgba(255,255,255,0.2)',
       color: 'black',
       borderRadius: '50px',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
       '&:hover': {
         backgroundColor: 'rgba(255,255,255,0.8)',
         '& .MuiInputAdornment-root .MuiButtonBase-root': {
@@ -61,22 +62,20 @@ const styles = theme => ({
       },
     },
   },
-
   smallSearchFormStyle: {
-    height: '2.5em',
+    height: '4em',
     width: '100%',
-    '& .MuiFormControl-root': {
-      width: '100%',
-    },
-
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center',
+    justifyContent: 'center',
     '& .search-form-input': {
-      height: '2em',
-      position: 'absolute',
-      top: '-0.3em',
-      width: '100%',
+      height: '2.5em',
       backgroundColor: 'rgba(255,255,255,0.2)',
       color: 'black',
       borderRadius: '50px',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
       '&:hover': {
         backgroundColor: 'rgba(255,255,255,0.8)',
         '& .MuiInputAdornment-root .MuiButtonBase-root': {

zubhub_frontend/zubhub/src/assets/js/styles/views/project_details/projectDetailsStyles.js

@@ -98,6 +98,7 @@ const styles = theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
+
     boxShadow:
       '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
     [theme.breakpoints.down('1080')]: {
@@ -253,6 +254,9 @@ const styles = theme => ({
   error: {
     color: '#a94442',
   },
+  dialogButtonContainer: {
+    padding: '16px 24px',
+  },
 });
 
 export const sliderSettings = images_num => ({

zubhub_frontend/zubhub/src/components/input_select/InputSelect.jsx

@@ -0,0 +1,64 @@
+import { InputBase, Select, withStyles } from '@material-ui/core';
+import React from 'react';
+
+const BootstrapInput = withStyles(theme => ({
+  input: {
+    borderRadius: 0,
+    borderTopLeftRadius: 250,
+    borderBottomLeftRadius: 250,
+    position: 'relative',
+    fontSize: 16,
+    padding: '10px 26px 10px 18px',
+    backgroundColor: '#00B8C4',
+    color: 'white',
+    transition: 'background-color 250ms ease',
+    textAlign: 'center',
+    '& ~ svg': {
+      color: 'white',
+    },
+    '&:focus': {
+      borderTopLeftRadius: 250,
+      borderBottomLeftRadius: 250,
+      backgroundColor: '#00B8C4',
+    },
+    '&[aria-expanded]': {
+      borderRadius: 0,
+      borderTopLeftRadius: 250,
+      borderBottomLeftRadius: 250,
+      backgroundColor: 'white',
+      color: '#00B8C4',
+      '& ~ svg': {
+        color: '#00B8C4',
+      },
+    },
+  },
+}))(InputBase);
+
+const InputSelect = ({
+  searchType,
+  onSearchTypeChange,
+  children,
+  ...selectProps
+}) => {
+  return (
+    <Select
+      labelId="demo-customized-select-label"
+      id="demo-customized-select"
+      value={searchType}
+      onChange={({ target: { value } }) => onSearchTypeChange(value)}
+      input={<BootstrapInput />}
+      style={{ minWidth: '115px' }}
+      MenuProps={{
+        getContentAnchorEl: null,
+        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+        transformOrigin: { vertical: 'top', horizontal: 'center' },
+        disableScrollLock: true,
+      }}
+      {...selectProps}
+    >
+      {children}
+    </Select>
+  );
+};
+
+export default InputSelect;