Merge pull request #115 from kube-js/develop

fix: changed cart dropdown

Author: mariocoski

k8s/Chart.yaml

@@ -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.6.2
+appVersion: 1.6.8
 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/values.yaml

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

src/app.tsx

@@ -3,11 +3,13 @@ import React, { Fragment, lazy, StrictMode, Suspense } from 'react';
 import { Route, Switch } from 'react-router';
 import AuthenticatedRoute from './components/Auth/AuthenticatedRoute';
 import UnauthenticatedRoute from './components/Auth/UnauthenticatedRoute';
+import CartView from './components/Cart';
 import CourseView from './components/CourseView';
 import ErrorBoundary from './components/ErrorBoundaries/Page/index';
 import InstructorView from './components/InstructorView';
 import Layout from './components/Layout';
 import {
+  CART,
   COURSE_VIEW,
   DASHBOARD,
   INSTRUCTOR_VIEW,
@@ -63,6 +65,8 @@ const App = () => (
                 component={Dashboard}
               />
 
+              <Route exact path={CART} component={CartView} />
+
               <Route component={NotFound} />
             </Switch>
           </ErrorBoundary>

src/atoms/CartDropdown/index.tsx

@@ -1,19 +1,36 @@
 // tslint:disable:no-magic-numbers
-import { Badge, Typography } from '@material-ui/core';
+import {
+  Badge,
+  ListItemAvatar,
+  ListItemText,
+  MenuItem,
+  MenuList,
+  Typography,
+} from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import { withStyles } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
+import _isNil from 'ramda/src/isNil';
 import React from 'react';
+import { useHistory } from 'react-router';
+import courseImagePlaceholder from '../../images/course_400x180.png';
+import assetsUrl from '../../utils/helpers/assetsUrl';
 
 const StyledMenu = withStyles({
+  list: {
+    padding: 0,
+  },
   paper: {
     border: '1px solid #d3d4d5',
+    borderRadius: 0,
   },
 })((props: any) => (
   <Menu
+    autoFocus={false}
     elevation={0}
     getContentAnchorEl={null}
+    variant="menu"
     anchorOrigin={{
       horizontal: 'center',
       vertical: 'bottom',
@@ -29,6 +46,7 @@ const StyledMenu = withStyles({
 const CartDropdown = () => {
   // TODO: refactor component
   const [anchorEl, setAnchorEl] = React.useState(null);
+  const history = useHistory();
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
@@ -38,19 +56,47 @@ const CartDropdown = () => {
     setAnchorEl(null);
   };
 
+  const goToCart = () => {
+    handleClose();
+    history.push('/cart');
+  };
+
+  const goToCourse = (slug: string) => () => {
+    handleClose();
+    history.push(`/courses/${slug}`);
+  };
+
+  const cartItems: any[] = [
+    {
+      author: 'Martin Cook',
+      price: '£19.99',
+      slug: 'designing-microservices-architecture',
+      title: 'Designing microservices architecture',
+    },
+    {
+      author: 'Thomas Tik',
+      price: '£19.99',
+      slug: 'designing-microservices-architecture',
+      title: 'Designing microservices architecture',
+    },
+    {
+      author: 'Thomas Tik',
+      price: '£19.99',
+      slug: 'designing-microservices-architecture',
+      title: 'Designing microservices architecture',
+    },
+  ];
+
   return (
-    <div style={{ display: 'flex', alignItems: 'center'}}>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
       <Button
         aria-controls="customized-menu"
         aria-haspopup="true"
-        variant="text"
         color="inherit"
         onClick={handleClick}
+        onMouseOver={handleClick}
       >
-        <Badge
-          badgeContent={2}
-          color="secondary"
-        >
+        <Badge badgeContent={cartItems.length || null} color="secondary" >
           <ShoppingCartIcon />
         </Badge>
       </Button>
@@ -61,7 +107,61 @@ const CartDropdown = () => {
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        <Typography style={{padding: 10}}>Learn React from scratch - £17.99</Typography>
+        <MenuList
+          onMouseLeave={handleClose}
+          disablePadding
+          style={{ maxWidth: 400, width: '100%' }}
+        >
+          {cartItems.map(item => {
+            const imageUrl = _isNil(item.imageUrl)
+              ? courseImagePlaceholder
+              : assetsUrl(item.imageUrl);
+
+            return (
+              <MenuItem onClick={goToCourse(item.slug)}>
+                <ListItemAvatar style={{ marginRight: 10 }}>
+                  <img
+                    src={imageUrl}
+                    style={{ width: 100, height: 60 }}
+                    alt={item.title}
+                  />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={item.title}
+                  secondary={
+                    <>
+                      <span>Instructor: {item.author}</span>
+                      <br />
+                      Price:
+                      <span
+                        style={{
+                          color: '#000',
+                          fontWeight: 'bold',
+                          marginLeft: 5,
+                          textAlign: 'right',
+                        }}
+                      >
+                        {item.price}
+                      </span>
+                    </>
+                  }
+                />
+              </MenuItem>
+            );
+          })}
+          <li style={{ padding: 10 }}>
+            <Typography variant="h6" style={{marginBottom: 10}}>Total: £59.97</Typography>
+
+            <Button
+              variant="contained"
+              fullWidth
+              color="secondary"
+              onClick={goToCart}
+            >
+              Go to cart
+            </Button>
+          </li>
+        </MenuList>
       </StyledMenu>
     </div>
   );

src/components/Cart/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Cart = () => <div>Cart</div>;
+
+export default Cart;

src/constants/routes.ts

@@ -7,3 +7,4 @@ export const LOGIN = '/login';
 export const DASHBOARD = '/dashboard';
 export const COURSE_VIEW = '/courses/:courseSlug';
 export const INSTRUCTOR_VIEW = '/instructors/:username';
+export const CART = '/cart';

src/containers/Dashboard/index.tsx

@@ -3,8 +3,7 @@ import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 import _isNil from 'ramda/src/isNil';
 import React, { Fragment, SyntheticEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ErrorMessage from '../../components/ErrorMessage';
 import {
   ResendVerifyTokenOptions,
@@ -27,11 +26,20 @@ export interface HandleVerifyOptions {
   readonly email: string;
 }
 
-const Dashboard = ({ user, resendVerifyToken }: Props) => {
-  const isVerified = !_isNil(user) && !_isNil((user as any).verifiedAt);
+const Dashboard = () => {
   const { t } = useTranslation();
-  // TODO: allow to log in without being verified in kube-ts-server
+  const dispatch = useDispatch();
+  const { user } = useSelector(({ auth }: State) => auth);
+  const isVerified = !_isNil(user) && !_isNil((user as any).verifiedAt);
+
+  const resendVerifyToken = ({ email }: ResendVerifyTokenOptions) =>
+    dispatch(
+      resendVerifyTokenRequested({
+        email,
+      })
+    );
 
+  // TODO: allow to log in without being verified in kube-ts-server
   return (
     <div>
       <h2>{t('dashboard.mainHeader')}</h2>
@@ -40,40 +48,22 @@ const Dashboard = ({ user, resendVerifyToken }: Props) => {
         <ErrorMessage>
           <Fragment>
             <ErrorOutlineIcon />
-            Account has not been verified yet. Click
+            {t('dashboard.accountHasBeenVerified')}
             <Link
               style={{ margin: '0 5px', cursor: 'pointer' }}
               onClick={(e: SyntheticEvent) => {
                 e.preventDefault();
                 resendVerifyToken({ email: user.email });
               }}
             >
-              here
+              {t('global.here')}
             </Link>
-            to verify your account.
+            {t('dashboard.toVerifyYourAccount')}
           </Fragment>
         </ErrorMessage>
       )}
     </div>
   );
 };
 
-const mapStateToProps = (state: State) => ({ user: state.auth.user });
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  resendVerifyToken: ({ email }: ResendVerifyTokenOptions) =>
-    dispatch(
-      // TODO: implement debounce and server throttling
-      // TODO: implement redux hooks
-      resendVerifyTokenRequested({
-        email,
-      })
-    ),
-});
-
-// TODO: how redux connect compare to hooks
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Dashboard);
+export default Dashboard;

src/i18n/translations/enGB/index.ts

@@ -28,9 +28,12 @@ export default {
     learningContent: 'Learning content:'
   },
   dashboard: {
+    accountHasBeenVerified: 'Account has not been verified yet. Click',
     mainHeader: 'Dashboard',
+    toVerifyYourAccount: 'to verify your account.'
   },
   global: {
+    here: 'here',
     loading: 'loading...',
     refreshThePage: ' Refresh the page',
     somethingWentWrong: 'Something went wrong...',

src/i18n/translations/plPL/index.ts

@@ -28,9 +28,12 @@ export default {
     learningContent: 'Treść kursu:'
   },
   dashboard: {
+    accountHasBeenVerified: 'Konto nie zostało jeszcze zweryfikowane. Kliknij',
     mainHeader: 'Panel roboczy',
+    toVerifyYourAccount: 'aby zweryfikować swoje konto.'
   },
   global: {
+    here: 'tutaj',
     loading: 'ładowanie...',
     refreshThePage: ' Odśwież stronę',
     somethingWentWrong: 'Coś poszło nie tak...'