Merge pull request #56 from naveteam/feature/CRUD-SAMPLE

Feature/crud sample

Author: Juliano Reis

.eslintrc.json

@@ -6,10 +6,13 @@
     "quotes": [2, "single"],
     "semi": [2, "never"],
     "comma-dangle": [2, "never"],
+    "no-console": "warn",
+    "no-debugger": "warn",
     "no-trailing-spaces": [2],
     "jsx-quotes": ["error", "prefer-single"],
     "react/jsx-boolean-value": [0],
     "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "prettier/prettier": [
       "error",
       {

package.json

@@ -7,27 +7,30 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.7",
+    "@hookform/resolvers": "^1.3.4",
     "@naveteam/dispatcher": "^1.1.0",
-    "@naveteam/pandora-frontend": "^1.0.2",
+    "@naveteam/pandora-frontend": "^1.0.4",
     "@sentry/browser": "5.14",
     "@styled-system/prop-types": "^5.1.5",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.19.0",
+    "date-fns": "^2.18.0",
     "graphql": "^15.5.0",
     "graphql-anywhere": "^4.2.7",
     "graphql-tag": "^2.11.0",
-    "react": "^16.9.0",
+    "react": "^17.0.1",
     "react-apollo": "^3.1.5",
     "react-app-polyfill": "^1.0.6",
-    "react-dom": "^16.9.0",
+    "react-datepicker": "^3.6.0",
+    "react-dom": "^17.0.1",
     "react-helmet": "^5.2.1",
-    "react-hook-form": "^5.5.3",
+    "react-hook-form": "^6.15.1",
     "react-is": "^16.13.1",
-    "react-query": "^2.26.2",
-    "react-query-devtools": "^2.6.3",
+    "react-query": "^3.9.8",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.3.0",
+    "react-text-mask": "^5.4.3",
     "sanitize.css": "^11.0.0",
     "styled-components": "^5.0.1",
     "styled-system": "^5.1.5",

public/menu.png

@@ -1,6 +1,7 @@
-import React, { useEffect, Suspense, lazy } from 'react'
+import React, { Suspense, lazy } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { ReactQueryDevtools } from 'react-query-devtools'
+import { ReactQueryDevtools } from 'react-query/devtools'
+
 import { createGlobalStyle } from 'styled-components'
 import { ApolloProvider } from '@apollo/client'
 import Helmet from 'react-helmet'
@@ -14,8 +15,7 @@ import Theme from 'theme'
 
 import 'sanitize.css/sanitize.css'
 
-const loadAuthenticatedApp = () => import('./AuthenticatedApp')
-const AuthenticatedApp = lazy(loadAuthenticatedApp)
+const AuthenticatedApp = lazy(() => import('./AuthenticatedApp'))
 const UnauthenticatedApp = lazy(() => import('./UnauthenticatedApp'))
 
 const GlobalStyle = createGlobalStyle`
@@ -38,20 +38,19 @@ button, a {
 const App = () => {
   const { user, isLoading } = useUser()
 
-  useEffect(() => {
-    loadAuthenticatedApp()
-  }, [])
+  if (isLoading) {
+    return <Loader />
+  }
 
   return (
     <ApolloProvider client={apolloClient}>
       <Theme>
         <Helmet titleTemplate='Nave.rs | %s' />
         <GlobalStyle />
         <Suspense fallback={<Loader />}>
-          {isLoading && <Loader />}
           <Router>{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}</Router>
         </Suspense>
-        <ReactQueryDevtools initialIsOpen={false} />
+        <ReactQueryDevtools />
       </Theme>
     </ApolloProvider>
   )

src/App.js

@@ -3,13 +3,21 @@ import { Route, Redirect, Switch } from 'react-router-dom'
 
 import Home from 'routes/Home'
 import Dashboard from 'routes/Dashboard'
+import UsersList from 'routes/UsersList'
+import UserForm from 'routes/UserForm'
+
+import Drawer from 'components/Drawer'
 
 const AuthenticatedApp = () => (
-  <Switch>
-    <Route path='/home' component={Home} />
-    <Route path='/dashboard' component={Dashboard} />
-    <Redirect to='/home' />
-  </Switch>
+  <Drawer>
+    <Switch>
+      <Route path='/home' component={Home} />
+      <Route path='/dashboard' component={Dashboard} />
+      <Route exact path='/usuarios' component={UsersList} />
+      <Route exact path={['/usuarios/criar', '/usuarios/:id']} component={UserForm} />
+      <Redirect to='/home' />
+    </Switch>
+  </Drawer>
 )
 
 export default AuthenticatedApp

src/AuthenticatedApp.js

@@ -6,8 +6,10 @@ import propTypes from '@styled-system/prop-types'
 
 import Loader from 'components/Loader'
 
-const ButtonComponent = ({ children, isLoading, ...props }) => (
-  <Button {...props}>{isLoading ? <Loader /> : children}</Button>
+const ButtonComponent = ({ children, disabled, isLoading, ...props }) => (
+  <Button {...props} disabled={disabled || isLoading}>
+    {isLoading ? <Loader /> : children}
+  </Button>
 )
 
 const Button = styled.button(space, layout, typography, color, border)
@@ -16,7 +18,8 @@ ButtonComponent.defaultProps = {
   width: 'regular',
   height: 'small',
   borderRadius: 4,
-  color: 'white'
+  color: 'white',
+  backgroundColor: 'primary.main'
 }
 
 ButtonComponent.propTypes = {

src/components/Button/Button.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import Datepicker from 'react-datepicker'
+
+import Column from 'components/Column'
+import Text from 'components/Text'
+
+const DatepickerComponent = forwardRef(
+  ({ label, error, containerProps, dateFormat = 'dd/MM/yyyy', value, ...props }, ref) => {
+    return (
+      <Column {...containerProps}>
+        {label && <Text mb={5}>{label}</Text>}
+        <Column height={60} position='relative'>
+          <StyledDatepicker ref={ref} dateFormat={dateFormat} selected={value} {...props} />
+          <Text position='absolute' bottom={0} color='red' variant='small'>
+            {error}
+          </Text>
+        </Column>
+      </Column>
+    )
+  }
+)
+
+const StyledDatepicker = styled(Datepicker)`
+  height: 40px;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 4px 8px;
+  width: 100%;
+`
+
+DatepickerComponent.propTypes = {
+  label: PropTypes.string,
+  error: PropTypes.string,
+  containerProps: PropTypes.object,
+  dateFormat: PropTypes.string
+}
+
+export default DatepickerComponent

src/components/Datepicker/Datepicker.js

@@ -0,0 +1 @@
+export { default } from './Datepicker'

src/components/Datepicker/index.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import styled, { css } from 'styled-components'
+import { Link as RouterLink } from 'react-router-dom'
+
+const NAV_BAR_HEIGHT = 60
+const SIDE_BAR_WIDTH = 200
+const ROUTES = [
+  {
+    path: '/usuarios',
+    label: 'Usuários'
+  },
+  {
+    path: '/usuarios/criar',
+    label: 'Criar usuário'
+  }
+]
+
+const DrawerComponent = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(true)
+
+  return (
+    <Container>
+      <NavBar>
+        <BurgerMenu src='/menu.png' onClick={() => setIsOpen(!isOpen)} />
+      </NavBar>
+      <SideBar isOpen={isOpen}>
+        {ROUTES.map(route => (
+          <Link key={route.path} to={route.path}>
+            {route.label}
+          </Link>
+        ))}
+      </SideBar>
+      <Content isOpen={isOpen}>{children}</Content>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+`
+
+const Content = styled.div`
+  padding: 20px;
+  padding-top: ${NAV_BAR_HEIGHT + 20}px;
+  padding-left: ${({ isOpen }) => (isOpen ? SIDE_BAR_WIDTH + 20 : 20)}px;
+  height: 100vh;
+  width: 100vw;
+  overflow: auto;
+  background-color: #fafafa;
+  transition: all 0.3s ease-in-out;
+`
+
+const Link = styled(RouterLink)`
+  color: black;
+  text-decoration: none;
+`
+
+const NavBar = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: ${NAV_BAR_HEIGHT}px;
+  width: 100%;
+  z-index: 2;
+  padding: 0 20px;
+  background-color: ${({ theme }) => theme.colors.primary.main};
+`
+
+const BurgerMenu = styled.img`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+`
+
+const SideBar = styled.div`
+  ${({ isOpen, theme }) => css`
+    position: absolute;
+    height: 100%;
+    background-color: white;
+    border-right: 1px solid lightgray;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: all 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    ${isOpen
+      ? css`
+          width: ${SIDE_BAR_WIDTH}px;
+          padding: 20px;
+          padding-top: ${NAV_BAR_HEIGHT + 20}px;
+        `
+      : css`
+          width: 0px;
+        `};
+  `}
+`
+
+export default DrawerComponent

src/components/Drawer/Drawer.js

@@ -0,0 +1 @@
+export { default } from './Drawer'