Merge pull request #122 from kube-js/develop

fix: refactored redux hoc into hooks

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.22
+appVersion: 1.6.23
 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.22
+  tag: 1.6.23
   pullPolicy: Always
   containerPort: 80
 

src/app.tsx

@@ -3,11 +3,7 @@ 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/CartView';
-import CheckoutView from './components/CheckoutView';
-import CourseView from './components/CourseView';
 import ErrorBoundary from './components/ErrorBoundaries/Page/index';
-import InstructorView from './components/InstructorView';
 import Layout from './components/Layout';
 import {
   CART,
@@ -22,7 +18,11 @@ import {
   ROOT,
   VERIFY,
 } from './constants/routes';
+import CartView from './pages/Cart';
+import CheckoutView from './pages/Checkout';
+import CourseView from './pages/Course';
 import Home from './pages/Home';
+import InstructorView from './pages/Instructor';
 import Loading from './pages/Loading';
 import Login from './pages/Login';
 import NotFound from './pages/NotFound';

src/components/CartCheckoutSidebar/index.tsx

@@ -2,7 +2,7 @@
 import { Button, Typography } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
 import _isNil from 'ramda/src/isNil';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Redirect, useHistory } from 'react-router';
@@ -11,14 +11,34 @@ import { State } from '../../redux/rootReducer';
 import sumBy from '../../utils/helpers/sumBy';
 import LoginForm from '../LoginForm';
 import Modal from '../Modal';
+import RegisterForm from '../RegisterForm';
 import useStyles from './styles';
 
 const CartItems = ({ items }: any) => {
   const classes = useStyles();
   const { t } = useTranslation();
   const history = useHistory();
   const noUser = useRef({});
-  
+  const [open, setOpen] = useState(false);
+  const [authView, setAuthView] = useState('register');
+
+  const showRegister = () => {
+    setAuthView('register');
+  };
+
+  const showLogin = () => {
+    setAuthView('login');
+  };
+
+  const handleOpen = (e: any) => {
+    e.preventDefault();
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   const { user } = useSelector(({ auth }: State) => auth);
 
   if (!user) {
@@ -37,37 +57,33 @@ const CartItems = ({ items }: any) => {
     return <Redirect push to={CHECKOUT} />;
   }
 
+  const ctaProps = !_isNil(user)
+    ? { onClick: goTo(CHECKOUT) }
+    : { onClick: handleOpen };
+
+  const registerLinkProps = { to: undefined, onClick: showRegister };
+  const loginLinkProps = { to: undefined, onClick: showLogin };
+
   return (
     <Paper className={classes.paper} square>
       <Typography>
         {t('cart.total')} ({items.length} {courses}): £{total.toFixed(2)}
       </Typography>
 
-      {!_isNil(user) ? (
-        <Button
-          variant="contained"
-          fullWidth
-          color="secondary"
-          onClick={goTo(CHECKOUT)}
-        >
-          {t('cart.proceedToCheckout')}
-        </Button>
-      ) : (
-        <Modal
-          renderCta={({ handleClickOpen }: any) => (
-            <Button
-              variant="contained"
-              fullWidth
-              color="secondary"
-              onClick={handleClickOpen}
-            >
-              {t('cart.proceedToCheckout')}
-            </Button>
-          )}
-        >
-          <LoginForm />
-        </Modal>
-      )}
+      <Button variant="contained" fullWidth color="secondary" {...ctaProps}>
+        {t('cart.proceedToCheckout')}
+      </Button>
+      <Modal open={open} handleClose={handleClose}>
+        {authView === 'register' && (
+          <RegisterForm loginLinkProps={loginLinkProps} />
+        )}
+        {authView === 'login' && (
+          <LoginForm
+            showRemindPassword={false}
+            registerLinkProps={registerLinkProps}
+          />
+        )}
+      </Modal>
     </Paper>
   );
 };

src/components/Home/index.tsx

@@ -17,7 +17,15 @@ import { State } from '../../redux/rootReducer';
 import loginSchema from '../../utils/schemas/login';
 import useStyles from './styles';
 
-const LoginForm = () => {
+export interface Props {
+  readonly showRemindPassword?: boolean;
+  readonly registerLinkProps?: any;
+}
+
+const LoginForm = ({
+  showRemindPassword = true,
+  registerLinkProps = {},
+}: Props) => {
   const classes = useStyles();
 
   const { t } = useTranslation();
@@ -102,11 +110,15 @@ const LoginForm = () => {
               </Button>
 
               <Grid container>
-                <Grid item xs>
-                  <Link to={REMIND_PASSWORD}>{t('auth.forgotPassword')}</Link>
-                </Grid>
+                {showRemindPassword && (
+                  <Grid item xs>
+                    <Link to={REMIND_PASSWORD}>{t('auth.forgotPassword')}</Link>
+                  </Grid>
+                )}
                 <Grid item>
-                  <Link to={REGISTER}>{t('auth.dontHaveAccount')}</Link>
+                  <Link to={REGISTER} {...registerLinkProps}>
+                    {t('auth.dontHaveAccount')}
+                  </Link>
                 </Grid>
               </Grid>
             </form>

src/components/LoginForm/index.tsx

@@ -12,7 +12,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: theme.spacing(1),
   },
   form: {
-    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(2),
     width: '100%', // Fix IE 11 issue.
   },
   paper: {

src/components/LoginForm/styles.ts

@@ -1,30 +1,15 @@
 import { Dialog, DialogContent } from '@material-ui/core';
 import React from 'react';
 
-const Modal = ({ children, renderCta }: any) => {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <div>
-      {renderCta({ handleClickOpen })}
-      <Dialog
-        open={open}
-        maxWidth="xs"
-        onClose={handleClose}
-        aria-labelledby="form-dialog-title"
-      >
-        <DialogContent>{children}</DialogContent>
-      </Dialog>
-    </div>
-  );
-};
+const Modal = ({ open, handleClose, children }: any) => (
+  <Dialog
+    open={open}
+    maxWidth="xs"
+    onClose={handleClose}
+    aria-labelledby="form-dialog-title"
+  >
+    <DialogContent>{children}</DialogContent>
+  </Dialog>
+);
 
 export default Modal;