27 | {children}
28 |
29 | );
30 | };
31 |
32 | /**
33 | * ViewHorizontalContainer
34 | * - height: 100vh
35 | * - flexDirection: row
36 | */
37 | export const ViewHorizontalContainer = ({
38 | testId = 'view-horizontal-container',
39 | className = '',
40 | children,
41 | onClick,
42 | }: ContainerProps) => {
43 | return (
44 |
49 | {children}
50 |
51 | );
52 | };
53 |
54 | /**
55 | * VerticalContainer
56 | * - flex: 1
57 | * - flexDirection: column
58 | */
59 | export const VerticalContainer = ({
60 | testId = 'vertical-container',
61 | className = '',
62 | children,
63 | onClick,
64 | }: ContainerProps) => {
65 | return (
66 |
71 | {children}
72 |
73 | );
74 | };
75 |
76 | /**
77 | * ViewVerticalContainer
78 | * - height: 100vh
79 | * - flexDirection: column
80 | */
81 | export const ViewVerticalContainer = ({
82 | testId = 'view-vertical-container',
83 | className = '',
84 | children,
85 | onClick,
86 | }: ContainerProps) => {
87 | return (
88 |
93 | {children}
94 |
95 | );
96 | };
97 |
98 | /**
99 | * CenteredContainer
100 | * - Centers content inside a flex container
101 | * - flex: 1
102 | */
103 | export const CenteredContainer = ({
104 | testId = 'centered-container',
105 | className = '',
106 | children,
107 | onClick,
108 | }: ContainerProps) => {
109 | return (
110 |
115 | {children}
116 |
117 | );
118 | };
119 |
120 | /**
121 | * ViewCenteredContainer
122 | * - Centers content in the entire view
123 | * - height: 100vh
124 | */
125 | export const ViewCenteredContainer = ({
126 | testId = 'centered-container',
127 | className = '',
128 | children,
129 | onClick,
130 | }: ContainerProps) => {
131 | return (
132 |
137 | {children}
138 |
139 | );
140 | };
141 |
142 | /**
143 | * ScrollingContainer
144 | * - overflow: 'auto'
145 | */
146 | export const ScrollingContainer = ({
147 | testId = 'scrolling-container',
148 | className = '',
149 | children,
150 | onClick,
151 | }: ContainerProps) => {
152 | return (
153 |
158 | {children}
159 |
160 | );
161 | };
162 |
--------------------------------------------------------------------------------
/app/components/Containers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Containers';
2 |
--------------------------------------------------------------------------------
/app/components/Form/ErrorMessage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface ErrorMessageProps {
4 | error?: string;
5 | }
6 |
7 | export const ErrorMessage = ({ error }: ErrorMessageProps) =>
8 | error !== undefined ? {error}
: null;
9 |
--------------------------------------------------------------------------------
/app/components/Form/TextField.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { ErrorMessage } from './ErrorMessage';
3 |
4 | export interface TextFieldProps {
5 | /** used to make label and errorText accessible for screen readers */
6 | id?: string;
7 |
8 | /** used to create data-testid property on element for testing */
9 | testId?: string;
10 |
11 | /** passed directly to the input element */
12 | name?: string;
13 |
14 | /** the label content */
15 | label?: React.ReactNode;
16 |
17 | /** the input type (defaults to text) */
18 | type?: string;
19 |
20 | /** error text */
21 | error?: string;
22 | }
23 |
24 | export const TextField = ({
25 | id,
26 | testId,
27 | name,
28 | label,
29 | type = 'text',
30 | error,
31 | }: TextFieldProps) => {
32 | return (
33 |
8 |
10 | | {item.productName} | 19 |20 | {item.quantity} 21 | | 22 |26 | {NumberUtils.formatAsMoney(OrderItemUtils.totalItem(item))} 27 | | 28 |
| Total | 34 |35 | {NumberUtils.formatAsMoney(OrderItemUtils.totalItems(items))} 36 | | 37 |
18 |
19 |
22 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/app/components/OrderView/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './OrderItemList';
2 | export * from './OrderView';
3 |
--------------------------------------------------------------------------------
/app/components/ProductView/ProductView.css:
--------------------------------------------------------------------------------
1 | .product {
2 | margin-bottom: var(--sp-2);
3 | padding: var(--sp-2);
4 | border-radius: var(--px-4);
5 | cursor: pointer;
6 | user-select: none;
7 | }
8 |
9 | .product__photo {
10 | object-fit: cover;
11 | height: 100%;
12 | width: 10rem;
13 | }
14 |
--------------------------------------------------------------------------------
/app/components/ProductView/ProductView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NumberUtils } from '@react-force/number-utils';
3 | import { Product } from '../../models';
4 | import { HorizontalContainer } from '../Containers';
5 |
6 | export interface ProductViewProps {
7 | product: Product;
8 | onClick: (productId: string) => void;
9 | }
10 |
11 | export const ProductView = ({ product, onClick }: ProductViewProps) => {
12 | const { id, name, description, price, photo } = product;
13 |
14 | return (
15 | {DateUtils.formatISODate(createdAt)}
21 |
22 |
26 | {name}
23 |{description}
24 |${NumberUtils.formatAsMoney(price)}
25 |
84 |
88 | );
89 | }
90 |
91 | export function CatchBoundary() {
92 | let caught = useCatch();
93 |
94 | let message;
95 | switch (caught.status) {
96 | case 401:
97 | message = (
98 |
85 |
87 | {children}
86 | 99 | Oops! Looks like you tried to visit a page that you do not have access 100 | to. 101 |
102 | ); 103 | break; 104 | case 404: 105 | message = ( 106 |Oops! Looks like you tried to visit a page that does not exist.
107 | ); 108 | break; 109 | 110 | default: 111 | throw new Error(caught.data || caught.statusText); 112 | } 113 | 114 | return ( 115 |118 | {caught.status}: {caught.statusText} 119 |
120 | {message} 121 |
132 |
135 |
140 | There was an error
133 |{error.message}
134 |135 |
136 | Hey, developer, you should replace this with what you want your 137 | users to see. 138 |
139 |
195 | {innerHtml}
196 |
197 | );
198 | });
199 |
--------------------------------------------------------------------------------
/app/routes/checkout.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Form,
3 | json,
4 | redirect,
5 | useActionData,
6 | useLoaderData,
7 | useTransition,
8 | } from 'remix';
9 | import type { ActionFunction, LoaderFunction, MetaFunction } from 'remix';
10 | import * as yup from 'yup';
11 | import { ValidationError } from 'yup';
12 | import {
13 | CartSummary,
14 | Header,
15 | HorizontalContainer,
16 | ScrollingContainer,
17 | TextField,
18 | ViewVerticalContainer,
19 | } from '../components';
20 | import { Cart, Catalog } from '../models';
21 | import { API_URL, yupLocale, yupToFormErrors } from '../utils';
22 |
23 | type CheckoutPageData = {
24 | cart: Cart;
25 | };
26 |
27 | export let loader: LoaderFunction = async () => {
28 | const resCart = await fetch(`${API_URL}/cart`);
29 | const cart = await resCart.json();
30 |
31 | let data: CheckoutPageData = {
32 | cart,
33 | };
34 |
35 | return json(data);
36 | };
37 |
38 | export let action: ActionFunction = async ({ request }) => {
39 | await new Promise((res) => setTimeout(res, 1000));
40 | const formData = await request.formData();
41 |
42 | // set up yup errors
43 | yup.setLocale(yupLocale);
44 |
45 | const addressSchema = yup.object().shape({
46 | firstName: yup.string().required().min(2),
47 | lastName: yup.string().required().min(2),
48 | company: yup.string(),
49 | address: yup.string().required(),
50 | city: yup.string().required(),
51 | state: yup.string().required(),
52 | zip: yup.string().required(),
53 | });
54 |
55 | const address = Object.fromEntries(await request.formData());
56 |
57 | try {
58 | await addressSchema.validate(address, { abortEarly: false });
59 | await fetch(`${API_URL}/orders`, {
60 | method: 'POST',
61 | headers: {
62 | 'Content-Type': 'application/json',
63 | },
64 | body: JSON.stringify({ shippingAddress: address }),
65 | });
66 | return redirect('/orders');
67 | } catch (e) {
68 | const errors = yupToFormErrors(e as ValidationError);
69 | return errors;
70 | }
71 | };
72 |
73 | export let meta: MetaFunction = () => {
74 | return {
75 | title: 'React Test Shop',
76 | description: 'Welcome to React Test Shop!',
77 | };
78 | };
79 |
80 | export default function CheckoutPage() {
81 | let { cart } = useLoaderDataYour have no orders.
51 | ) : ( 52 | orders.map((order) => ( 53 |
54 |
56 | ))
57 | )}
58 |