fixed autocomplete bug

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

@@ -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

@@ -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

@@ -15,6 +15,7 @@ import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 import CourseRating from '../../atoms/CourseRating';
 import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators';
+import assetsUrl from '../../utils/helpers/assetsUrl';
 
 const Slide = ({
   course,
@@ -33,7 +34,7 @@ const Slide = ({
       <Link className={classes.courseLink} to={`/courses/${course.slug}`}>
         <CardMedia
           className={classes.cardMedia}
-          image={course.imageUrl}
+          image={assetsUrl(course.imageUrl)}
           title="Image title"
         />
         <CardContent className={classes.cardContent}>

src/components/CourseSlide/index.tsx

@@ -7,6 +7,7 @@ import { Redirect } from 'react-router-dom';
 import { ROOT } from '../../constants/routes';
 import { getCourseDetailsRequested } from '../../redux/courseDetails/actionCreators';
 import { State } from '../../redux/rootReducer';
+import assetsUrl from '../../utils/helpers/assetsUrl';
 import useStyles from './styles';
 
 export interface Params {
@@ -59,7 +60,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={assetsUrl(course.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(

src/components/HeroContent/index.tsx

@@ -3,13 +3,15 @@ import getStringValue from '../utils/helpers/getStringValue';
 
 export interface Config {
   apiUrl: string;
+  assetsUrl: string;
   logger: LoggerFactoryOptions;
 }
 
 const env = (window as any)._env_;
 
 const config: Config = {
   apiUrl: getStringValue(env.REACT_APP_API_URL, 'http://localhost:9000/api/v1'),
+  assetsUrl: getStringValue(env.REACT_APP_ASSETS_URL, 'http://localhost:3000'),
   logger: {
     dummy: {
       silent: