refactor(ex-9): migrate exercise 9

README.md

@@ -256,3 +256,7 @@ If you want to add translations to teach this course in your language of choice
 - Check index.html exercises versions
 - Remove babel warnings
 - Finalize instructions
+- Move test validation
+- Create checkout scenario
+- modify App.js to app.tsx in readmes
+- diff: git diff --no-index --color "apps/exercise-8" "apps/exercise-9"

apps/exercise-8/src/assets/README.md

@@ -13,10 +13,20 @@
 
 Let's create the checkout module !
 
-We need a Checkout page that needs a logged in user. So we also need a Login page.
+We need a Checkout page that expects a logged in user. So we also need a Login page.
 We'll mock the user api and authentication process for now.
 We need to bo redirected to the login page on some routes, not all.
 
 ## Step by step
 
 ### src/modules/checkout/checkout.component.js
+
+### src/modules/checkout/components/review.component.js
+
+### src/modules/checkout/components/addressForm.component.js
+
+### src/modules/checkout/components/paymentForm.component.js
+
+### src/App.js
+
+### src/pages/checkout.page.js

apps/exercise-9/src/app/app.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
-import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-import { HomePage } from './pages/home.page';
-import { AboutPage } from './pages/about.page';
-import { ContactPage } from './pages/contact.page';
+import { UserProvider } from './modules/user/user.context';
+
+import { AppRoutes } from './modules/routing/components/routes.component';
 
 export default function App() {
   return (
-    <Router>
-      <Switch>
-        <Route path="/about">
-          <AboutPage />
-        </Route>
-        <Route path="/contact">
-          <ContactPage />
-        </Route>
-        <Route exact path="/">
-          <HomePage />
-        </Route>
-      </Switch>
-    </Router>
+    <UserProvider>
+      <Router>
+        <AppRoutes />
+      </Router>
+    </UserProvider>
   );
 }

apps/exercise-9/src/app/components/layout.component.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Container from '@material-ui/core/Container';
+import { makeStyles } from '@material-ui/styles';
+
+import NavBar from './navbar.component';
+
+import { CHILDREN_PROP_TYPES } from '../constants/proptypes.constants';
+
+const useStyles = makeStyles({
+  container: {
+    marginTop: '2em',
+  },
+});
+
+export const Layout = ({ children }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <NavBar />
+      <Container className={classes.container}>{children}</Container>
+    </>
+  );
+};
+
+Layout.propTypes = {
+  children: CHILDREN_PROP_TYPES,
+};

apps/exercise-9/src/app/components/navbar.component.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import classnames from 'classnames';
+
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { PowerSettingsNewOutlined } from '@material-ui/icons';
+
+import { ROUTES_PATHS_BY_NAMES } from '../modules/routing/routing.constants';
+import { useUser } from '../modules/user/user.context';
+import { isUserConnected } from '../modules/user/user.selectors';
+import { logout } from '../modules/user/user.actions';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    transition: 'all 0.5s',
+    marginRight: theme.spacing(2),
+  },
+  loginButton: {
+    color: theme.palette.success.main,
+    '&:hover': {
+      background: theme.palette.error.main,
+      color: 'white',
+    },
+  },
+  logoutButton: {
+    color: theme.palette.error.main,
+    '&:hover': {
+      background: theme.palette.success.main,
+      color: 'white',
+    },
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function NavBar() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const [userState, dispatch] = useUser();
+  const isConnected = isUserConnected(userState);
+  const { push } = useHistory();
+
+  const handleMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const logInAndOut = () => {
+    isConnected ? dispatch(logout()) : push(ROUTES_PATHS_BY_NAMES.login);
+  };
+
+  return (
+    <AppBar position="static" data-testid="navbar">
+      <Toolbar>
+        <Typography variant="h6" className={classes.title}>
+          Shopping App
+        </Typography>
+        <IconButton
+          data-testid={`connect-${isConnected ? 'logout' : 'login'}-button`}
+          edge="start"
+          className={classnames([
+            classes.menuButton,
+            isConnected ? classes.loginButton : classes.logoutButton,
+          ])}
+          aria-label={`${isConnected ? 'logout' : 'login'} button`}
+          onClick={logInAndOut}
+        >
+          <PowerSettingsNewOutlined />
+        </IconButton>
+        <div>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+            aria-controls="menu-appbar"
+            aria-haspopup="true"
+            onClick={handleMenu}
+            data-testid="nav-menu"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorEl}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            open={open}
+            onClose={handleClose}
+          >
+            <MenuItem
+              data-testid="nav-menu-item-home"
+              component={Link}
+              to="/"
+              onClick={handleClose}
+            >
+              Home
+            </MenuItem>
+            <MenuItem
+              data-testid="nav-menu-item-contact"
+              component={Link}
+              to="/contact"
+              onClick={handleClose}
+            >
+              Contact
+            </MenuItem>
+            <MenuItem
+              data-testid="nav-menu-item-about"
+              component={Link}
+              to="/about"
+              onClick={handleClose}
+            >
+              About
+            </MenuItem>
+          </Menu>
+        </div>
+      </Toolbar>
+    </AppBar>
+  );
+}

apps/exercise-9/src/app/constants/proptypes.constants.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export const CHILDREN_PROP_TYPES = PropTypes.oneOfType([
+  PropTypes.array.isRequired,
+  PropTypes.object,
+  PropTypes.element,
+]).isRequired;

apps/exercise-9/src/app/hooks/useInput.hook.js

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+export const useInput = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = e => setInputValue(e.target.value);
+
+  return [inputValue, handleChange];
+};