Merge pull request #103 from kube-js/develop

fix: fix autocomplete bug and added course image placeholder

Author: mariocoski

.env

@@ -1,6 +1,8 @@
 # DO NOT PUT SECRETS HERE AS IT'S NOT GITIGNORED
 # FOR local only, for production scripts/deploy.sh recreate .env file
 # all env vars should be passed from CI/CD env (circleci) and starts with 'REACT_APP_' prefix
+REACT_APP_ASSETS_URL=https://kube-ts-server.s3.eu-west-2.amazonaws.com
+
 REACT_APP_API_URL=https://demo.mariuszrajczakowski.me/api/v1
 # available values: dummy, sentry
 REACT_APP_LOGGER_TYPE=dummy

.gitignore

@@ -63,3 +63,4 @@ build
 env-config.js
 
 /k8s/override.yaml
+.env

assets/jscpd-badge.svg

@@ -2,7 +2,7 @@ apiVersion: v1
 description: A Helm chart for kube-ts-react-client
 name: kube-ts-react-client
 version: 1.0.0
-appVersion: 1.5.14
+appVersion: 1.5.17
 home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
 icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
 sources:

k8s/Chart.yaml

@@ -3,6 +3,7 @@ secret: {}
 
 configMap: 
   REACT_APP_API_URL: $REACT_APP_API_URL
+  REACT_APP_ASSETS_URL: $REACT_APP_ASSETS_URL
   REACT_APP_SENTRY_DSN: $REACT_APP_SENTRY_DSN
   REACT_APP_LOGGER_TYPE: $REACT_APP_LOGGER_TYPE
   REACT_APP_NODE_ENV: $REACT_APP_NODE_ENV

k8s/values-circleci.yaml

@@ -6,7 +6,7 @@ replicaCount: 2
 
 image:
   repository: kubejs/kube-ts-react-client
-  tag: 1.5.14
+  tag: 1.5.17
   pullPolicy: Always
   containerPort: 80
 
@@ -69,6 +69,7 @@ secret:
 # Configmap [remove "{}", uncomment and change the values below]
 configMap:
   {}
+  # REACT_APP_ASSETS_URL: https://localhost:3000
   # REACT_APP_API_URL: https://localhost:9000/api/v1
   # REACT_APP_SENTRY_DSN: https://[email protected]/yourSentryNumber
   # REACT_APP_LOGGER_TYPE: sentry

k8s/values.yaml

@@ -133,4 +133,3 @@ const Autocomplete = ({value, onChange, suggestions}: any) => {
 
 // tslint:disable-next-line:max-file-line-count
 export default Autocomplete;
-

src/atoms/Autocomplete/index.tsx

@@ -7,14 +7,17 @@ import {
   Typography,
 } from '@material-ui/core';
 import _find from 'ramda/src/find';
+import _isNil from 'ramda/src/isNil';
 import _propEq from 'ramda/src/propEq';
 import React from 'react';
 import { Link } from 'react-router-dom';
 // tslint:disable:no-import-side-effect
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 import CourseRating from '../../atoms/CourseRating';
+import courseImagePlaceholder from '../../images/course_400x180.png';
 import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators';
+import assetsUrl from '../../utils/helpers/assetsUrl';
 
 const Slide = ({
   course,
@@ -28,12 +31,14 @@ const Slide = ({
   // tslint:disable-next-line:no-magic-numbers
   const coursePrice = Number(Math.random() * 10 + 9).toFixed(2);
 
+  const imageUrl = !_isNil(course.imageUrl) ? assetsUrl(course.imageUrl) : courseImagePlaceholder;
+
   return (
     <Card className={classes.card}>
       <Link className={classes.courseLink} to={`/courses/${course.slug}`}>
         <CardMedia
           className={classes.cardMedia}
-          image={course.imageUrl}
+          image={imageUrl}
           title="Image title"
         />
         <CardContent className={classes.cardContent}>

src/components/CourseSlide/index.tsx

@@ -1,12 +1,15 @@
 // tslint:disable:no-magic-numbers
 import { Avatar, Button, Container, Grid, Paper } from '@material-ui/core';
+import _isNil from 'ramda/src/isNil';
 import React, { memo, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RouteComponentProps } from 'react-router';
 import { Redirect } from 'react-router-dom';
 import { ROOT } from '../../constants/routes';
+import courseImagePlaceholder from '../../images/course_400x180.png';
 import { getCourseDetailsRequested } from '../../redux/courseDetails/actionCreators';
 import { State } from '../../redux/rootReducer';
+import assetsUrl from '../../utils/helpers/assetsUrl';
 import useStyles from './styles';
 
 export interface Params {
@@ -33,7 +36,7 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
     // TODO: make course placeholder
     return <div>Loading...</div>;
   }
-
+  const imageUrl = !_isNil(course.imageUrl) ? assetsUrl(course.imageUrl) : courseImagePlaceholder;
   const coursePrice = Number(Math.random() * 10 + 9).toFixed(2);
 
   return (
@@ -59,7 +62,7 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
           </Grid>
           <Grid item xs={12} sm={3}>
             <Paper className={classes.paper}>
-              <img src={course.imageUrl} style={{ width: '100%' }} />
+              <img src={imageUrl} style={{ width: '100%' }} />
               <h4>{`£${coursePrice}`}</h4>
               <Button variant="contained" fullWidth color="primary">
                 Add to cart

src/components/CourseView/index.tsx

@@ -2,6 +2,7 @@
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
+import _isNil from 'ramda/src/isNil';
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -11,69 +12,6 @@ import { State } from '../../redux/rootReducer';
 import Course from '../../types/items/Course';
 import User from '../../types/items/User';
 import useStyles from './styles';
-
-const initialResults = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
-function getSuggestions(
-  value: string | null,
-  { showEmpty }: { showEmpty: boolean } = { showEmpty: false }
-) {
-  const inputValue = String(value)
-    .trim()
-    .toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0 && !showEmpty
-    ? []
-    : initialResults.filter(suggestion => {
-        const keep =
-          count < 5 &&
-          suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
 export interface GetFormattedResultsOptions {
   readonly courses: Course[];
   readonly users: User[];
@@ -114,7 +52,7 @@ const HeroContent = () => {
 
   const handleChange = (changes: any) => {
     // TODO: abstract this operations
-    if (changes.hasOwnProperty('selectedItem')) {
+    if (changes.hasOwnProperty('selectedItem') && !_isNil(changes.selectedItem)) {
       setValue(changes.selectedItem);
 
       const item: any = results.filter(