fix: fixed popper z-index issue

Author: mariocoski

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.23
+appVersion: 1.5.25
 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

@@ -6,7 +6,7 @@ replicaCount: 2
 
 image:
   repository: kubejs/kube-ts-react-client
-  tag: 1.5.23
+  tag: 1.5.25
   pullPolicy: Always
   containerPort: 80
 

k8s/values.yaml

@@ -5,10 +5,12 @@ import AuthenticatedRoute from './components/Auth/AuthenticatedRoute';
 import UnauthenticatedRoute from './components/Auth/UnauthenticatedRoute';
 import CourseView from './components/CourseView';
 import ErrorBoundary from './components/ErrorBoundaries/Page/index';
+import InstructorView from './components/InstructorView';
 import Layout from './components/Layout';
 import {
   COURSE_VIEW,
   DASHBOARD,
+  INSTRUCTOR_VIEW,
   LOGIN,
   REGISTER,
   REMIND_PASSWORD,
@@ -41,6 +43,7 @@ const App = () => (
               <Route exact path={COURSE_VIEW} component={CourseView} />
               <Route exact path={RESET_PASSWORD} component={ResetPassword} />
               <Route exact path={VERIFY} component={VerifyAccount} />
+              <Route path={INSTRUCTOR_VIEW} component={InstructorView} />
 
               <UnauthenticatedRoute
                 exact

src/app.tsx

@@ -7,7 +7,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import SearchIcon from '@material-ui/icons/Search';
 import Downshift from 'downshift';
 import _isNil from 'ramda/src/isNil';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { autocompleteRequested } from '../../redux/autocomplete/actionCreators';
@@ -111,13 +111,14 @@ interface Options {
   readonly type: AutocompleteType;
 }
 
+const POPPER_OFFSET = 4;
+
 const Autocomplete = ({ id, type }: Options) => {
   const classes = useStyles();
 
   const additionalOptions = autocompleteOptions[type];
 
-  // TODO: explore useRef, fix popper width
-  let popperNode: any;
+  const popperNode: any = useRef({});
 
   const [value, setValue] = useState('');
   const history = useHistory();
@@ -141,7 +142,8 @@ const Autocomplete = ({ id, type }: Options) => {
       const link =
         item.type === 'course'
           ? `/courses/${item.slug}`
-          : `/instructors/${item.email}`;
+          // TODO: create username property as uniq db field
+          : `/instructors/${String(item.firstName + item.lastName).toLowerCase()}`;
       setValue('');
       history.push(link);
     } else if (changes.hasOwnProperty('inputValue')) {
@@ -179,16 +181,14 @@ const Autocomplete = ({ id, type }: Options) => {
                 classes,
                 fullWidth: true,
                 inputProps,
-                ref: (node: any) => {
-                  popperNode = node;
-                },
+                ref: popperNode
               })}
               {String(inputProps.value).length > 0 && (
                 <div className={[classes.icon, classes.closeIcon].join(' ')}>
                   <CloseIcon onClick={clearSelection as any} />
                 </div>
               )}
-              <Popper open={isOpen} anchorEl={popperNode}>
+              <Popper open={isOpen} anchorEl={popperNode.current} disablePortal>
                 <div
                   {...(isOpen
                     ? getMenuProps({}, { suppressRefError: true })
@@ -197,8 +197,8 @@ const Autocomplete = ({ id, type }: Options) => {
                   <Paper
                     square
                     style={{
-                      marginTop: 8,
-                      width: popperNode ? popperNode.clientWidth : undefined,
+                      marginTop: '4px',
+                      width: popperNode.current && popperNode.current.clientWidth ? popperNode.current.clientWidth - POPPER_OFFSET : undefined,
                     }}
                   >
                     {results.map((suggestion: any, index: number) =>

src/atoms/Autocomplete/index.tsx

@@ -0,0 +1,23 @@
+
+import { Container } from '@material-ui/core';
+import React, { memo } from 'react';
+import { useParams } from 'react-router';
+import useStyles from './styles';
+
+const InstructorView = () => {
+  const classes = useStyles();
+
+  const  params = useParams<{username?: string}>();
+
+  const username = params.username !== undefined ? params.username : 'username';
+
+  return (
+    <div className={classes.root}>
+      <Container component="main" maxWidth="lg">
+        <h2>{username}</h2>
+      </Container>
+    </div>
+  );
+};
+
+export default memo(InstructorView);

src/components/InstructorView/index.tsx

@@ -0,0 +1,9 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    flexGrow: 1,
+  },
+}));
+
+export default useStyles;

src/components/InstructorView/styles.ts

@@ -5,4 +5,5 @@ export const RESET_PASSWORD = '/reset-password';
 export const VERIFY = '/verify';
 export const LOGIN = '/login';
 export const DASHBOARD = '/dashboard';
-export const COURSE_VIEW = '/courses/:courseSlug'
+export const COURSE_VIEW = '/courses/:courseSlug';
+export const INSTRUCTOR_VIEW = '/instructors/:username';