🚧 Setup routes & component skeletons [@asegers]

.env

+PORT=8090
\ No newline at end of file

package.json

@@ -2,7 +2,12 @@
   "name": "order-management-client",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8080",
   "dependencies": {
+    "@chakra-ui/react": "^1.6.0",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@hookform/resolvers": "^2.4.0",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -11,16 +16,21 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "bootstrap": "^4.6.0",
+    "framer-motion": "^4",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.4.0",
     "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.tsx

 import React from 'react';
+import MainRouter from 'router/MainRouter';
 
 function App() {
   return (
     <div className="App">
-      App
+      <MainRouter />  
     </div>
   );
 }

src/components/AccountForm.tsx

+import React from 'react'
+
+const AccountForm = () => {
+    return (
+        <div>
+            <h3>Account</h3>
+            <form >
+                <input type="text" name="firstName"/>
+                <input type="text" name="lastName"/>
+                <input type="text" name="email"/>
+                <input type="password" name="password"/>
+                <button type="submit">Log In</button>
+            </form>
+        </div>
+    )
+}
+
+export default AccountForm

src/components/LoginForm.tsx

+import React from 'react'
+import { useForm } from "react-hook-form";
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from "yup";
+
+const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+  email: yup.string().email().required(),
+  password: yup.string().required(),
+});
+
+
+export default function LoginForm() {
+  const { register, handleSubmit, watch, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const onSubmit = (data: any) => console.log(data);
+
+  console.log(watch("example")); // watch input value by passing the name of it
+
+  return (
+    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* register your input into the hook by invoking the "register" function */}
+      <input defaultValue="First name" {...register("firstName", { required: true })} />
+      {/* include validation with required or other standard HTML validation rules */}
+      <input defaultValue="Last name" {...register("lastName", { required: true })} />
+      <input defaultValue="Email" {...register("email", { required: true })} />
+      <input  defaultValue="Password" {...register("password", { required: true })} />
+      {/* errors will return when field validation fails  */}
+      {errors.password&& <span>This field is required</span>}
+      <input type="submit" />
+    </form>
+  );
+}

src/components/Nav.tsx

+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const Nav = () => {
+    return (
+        <header role="navigation">
+            <div>Order Management Console PRO</div>
+            <ul>
+                <li><Link to="/orders">All orders</Link></li>
+                <li><Link to="/account">(account logo here)</Link></li>
+                <li><Link to="/">Login / Logout</Link></li>
+            </ul>
+        </header>
+    )
+}
+
+export default Nav

src/components/OrderDetails.tsx

+import React from 'react'
+
+const OrderDetails = () => {
+    return (
+            <tr>
+                <td>6396964924168</td>
+                <td>shfd87tw878w</td>
+                <td>Apex One</td>
+            </tr>
+    )
+}
+
+export default OrderDetails

src/components/SignUpForm.tsx

+import React from 'react'
+
+const SignUpForm = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default SignUpForm

src/components/index.ts

+export {default as AccountForm} from './AccountForm'
+export {default as LoginForm} from './LoginForm'
+export {default as Nav} from './Nav'
+export {default as OrderDetails} from './OrderDetails'
+export {default as SignUpForm} from './SignUpForm'
\ No newline at end of file

src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+* {
+  border: 2px solid orangered;
+}

src/pages/AccountPage.tsx

+import React from 'react'
+
+import {AccountForm} from 'components'
+const AccountPage = () => {
+    return (
+        <div>
+            <AccountForm />
+        </div>
+    )
+}
+
+export default AccountPage

src/pages/AuthPage.tsx

+import React from 'react'
+import { LoginForm } from 'components';
+
+const AuthPage = () => {
+    return (
+        <div>
+            <LoginForm />
+            <LoginForm />
+        </div>
+    )
+}
+
+export default AuthPage

src/pages/OrderIndexPage.tsx

+import React from 'react'
+import {OrderDetails} from 'components'
+
+const OrderIndexPage = () => {
+    return (
+        <table>
+            <tr>
+                <th>sku</th>
+                <th>upc</th>
+                <th>productName</th>
+            </tr>
+            <OrderDetails />
+            <OrderDetails />
+            <OrderDetails />
+        </table>
+        
+    )
+}
+
+export default OrderIndexPage

src/pages/OrderShowPage.tsx

+import React from 'react'
+import { OrderService } from 'services'
+import {OrderDetails} from 'components'
+
+const OrderShowPage = () => {
+
+    // const [order, setOrder] = React.useState(null)
+
+    // React.useEffect(() => {
+    //     OrderService.orderById()
+    //         .then(orderData => setOrder(orderData))
+
+
+    //     return () => {
+    //         // componentDidUnmount
+    //     }
+    // })
+
+    return (
+        <table>
+            <tr>
+                <th>sku</th>
+                <th>upc</th>
+                <th>productName</th>
+            </tr>
+            <OrderDetails />
+        </table>
+        
+    )
+}
+
+export default OrderShowPage

src/pages/index.ts

+export { default as AccountPage } from './AccountPage'
+export { default as AuthPage } from './AuthPage'
+export { default as OrderIndexPage } from './OrderIndexPage'
+export { default as OrderShowPage } from './OrderShowPage'

src/router/MainRouter.tsx

+import {
+    BrowserRouter,
+    Switch,
+    Route,
+  } from "react-router-dom";
+  import {Nav} from 'components'
+
+import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
+
+const MainRouter: React.FC = () => {
+    return (
+        <BrowserRouter>
+            <Nav />
+            <Switch>
+                <Route path="/account" component={AccountPage} />
+                <Route exact path="/" component={AuthPage} />
+                <Route path="/orders/:id" component={OrderShowPage} />
+                <Route path="/orders" component={OrderIndexPage} />
+                {/* <Route component={NotFoundPage} /> */}
+            </Switch>
+        </BrowserRouter>
+    )
+}
+
+export default MainRouter
+
+  
\ No newline at end of file

src/services/OrderService.ts

+import orderData from './mock-order-data.json'
+
+// type Order {
+//     sku: number
+// }
+
+export const allOrders = () => new Promise((res, rej) => {
+    setTimeout(() => { res(orderData) }, 2000)
+});
+
+export const orderById = () => new Promise((res, rej) => {
+        setTimeout(() => { res(orderData[0]) }, 2000)
+    })
+
+
+
+export default {
+    allOrders,
+    orderById
+}
\ No newline at end of file

src/services/index.ts

+export {default as OrderService} from './OrderService'
\ No newline at end of file

src/services/mock-order-data.json

+[
+    {
+        "_id": "x588s78xvhs",
+        "sku": "2192649",
+        "upc": "221481649",
+        "productName": "Apex One",
+        "productDescription": "Janky",
+        "price": 5500.50,
+        "stock": 9,
+        "productImageUrl": "https://picsum.photos/300/300",
+        "brand": "Apex",
+        "category": "Security"
+    }
+]
\ No newline at end of file

src/styles/StyleProvider.tsx

+import { ChakraProvider } from "@chakra-ui/react"
+
+import { extendTheme } from "@chakra-ui/react"
+// 2. Extend the theme to include custom colors, fonts, etc
+const colors = {
+  brand: {
+    900: "#1a365d",
+    800: "#153e75",
+    700: "#2a69ac",
+  },
+}
+const theme = extendTheme({ colors })
+
+const StyleProvider = () => {
+    return (
+        <ChakraProvider theme={theme}>
+            
+        </ChakraProvider>
+    )
+}
+
+export default StyleProvider

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "src"
   },
   "include": [
     "src"