Merge pull request #114 from kube-js/develop

fix: added 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.1
+appVersion: 1.6.2
 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.1
+  tag: 1.6.2
   pullPolicy: Always
   containerPort: 80
 

src/atoms/CartDropdown/index.tsx

@@ -0,0 +1,71 @@
+// tslint:disable:no-magic-numbers
+import { Badge, 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 React from 'react';
+
+const StyledMenu = withStyles({
+  paper: {
+    border: '1px solid #d3d4d5',
+  },
+})((props: any) => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      horizontal: 'center',
+      vertical: 'bottom',
+    }}
+    transformOrigin={{
+      horizontal: 'center',
+      vertical: 'top',
+    }}
+    {...props}
+  />
+));
+
+const CartDropdown = () => {
+  // TODO: refactor component
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center'}}>
+      <Button
+        aria-controls="customized-menu"
+        aria-haspopup="true"
+        variant="text"
+        color="inherit"
+        onClick={handleClick}
+      >
+        <Badge
+          badgeContent={2}
+          color="secondary"
+        >
+          <ShoppingCartIcon />
+        </Badge>
+      </Button>
+      <StyledMenu
+        id="customized-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <Typography style={{padding: 10}}>Learn React from scratch - £17.99</Typography>
+      </StyledMenu>
+    </div>
+  );
+};
+
+// tslint:disable-next-line:max-file-line-count
+export default CartDropdown;

src/components/CoursesTabs/index.tsx

@@ -68,7 +68,6 @@ const CoursesTabs = ({ categories, courses }: Options) => {
     <div className={classes.root}>
       <Tabs
         centered={false}
-        disableRipple
         orientation="vertical"
         value={value}
         onChange={handleChange}

src/components/Footer/index.tsx

@@ -0,0 +1,30 @@
+import { Container, Link, Typography } from '@material-ui/core';
+import React from 'react';
+import LanguageDropdown from '../../atoms/LanguageDropdown';
+import useStyles from './styles';
+
+const Copyright = () => (
+  <Typography variant="body2" color="inherit" align="center">
+    {'Copyright © '}
+    <Link color="inherit" href="https://material-ui.com/">
+      Kudemy
+    </Link>{' '}
+    {new Date().getFullYear()}
+    {'.'}
+  </Typography>
+);
+
+const Footer = () => {
+  const classes = useStyles();
+
+  return (
+    <footer className={classes.footer}>
+      <Container maxWidth="lg">
+        <LanguageDropdown />
+        <Copyright />
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Footer/styles.ts

@@ -0,0 +1,19 @@
+// tslint:disable:no-magic-numbers
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    footer: {
+      backgroundColor: theme.palette.primary.main,
+      color: '#fff',
+      marginTop: theme.spacing(2),
+      minHeight: '150px',
+      padding: theme.spacing(2),
+    },
+  })
+);
+
+export default useStyles;

src/components/Layout/index.tsx

@@ -1,6 +1,7 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import Footer from '../Footer';
 import NavBar from '../NavBar';
 import Sidebar from '../Sidebar';
 import useStyles from './styles';
@@ -11,7 +12,7 @@ export interface Options {
 
 const Layout = ({ children }: Options) => {
   const classes = useStyles();
-  
+
   const [open, setOpen] = useState(false);
 
   function handleSidebarOpen() {
@@ -37,6 +38,7 @@ const Layout = ({ children }: Options) => {
       >
         <div className={classes.drawerHeader} />
         {children}
+        <Footer />
       </main>
     </div>
   );

src/components/NavBar/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import Autocomplete from '../../atoms/Autocomplete';
-import LanguageDropdown from '../../atoms/LanguageDropdown';
+import CartDropdown from '../../atoms/CartDropdown';
 import LogoutButton from '../../atoms/LogoutButton';
 import { LOGIN, REGISTER } from '../../constants/routes';
 // source: https://www.freepik.com
@@ -93,7 +93,7 @@ const NavBar = ({ handleSidebarOpen, open }: any) => {
           <div className={classes.grow} />
 
           <div className={classes.sectionDesktop}>
-            <LanguageDropdown />
+            <CartDropdown />
 
             <OnlyUnauthenticated>
               <Button