├── .gitignore
├── index.html
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── App.css
├── App.tsx
├── assets
│ └── react.svg
├── components
│ ├── CartItem.tsx
│ ├── CartItems.tsx
│ ├── CheckoutButton.tsx
│ ├── CheckoutPage.tsx
│ ├── CheckoutSummary.tsx
│ └── errors
│ │ ├── ErrorBoundrayComponent.tsx
│ │ └── ProductsFetchingError.tsx
├── errorHanlding
│ ├── usingErrorBoundaries.tsx
│ ├── usingState.tsx
│ └── usingTheRightWay.tsx
├── fetchers
│ └── products.ts
├── index.css
├── main.tsx
└── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-errors",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "react-error-boundary": "^4.0.3"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.0.28",
18 | "@types/react-dom": "^18.0.11",
19 | "@vitejs/plugin-react-swc": "^3.0.0",
20 | "autoprefixer": "^10.4.14",
21 | "postcss": "^8.4.21",
22 | "tailwindcss": "^3.3.1",
23 | "typescript": "^4.9.3",
24 | "vite": "^4.2.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import { UsingState } from "./errorHanlding/usingState";
3 | import {
4 | StandardErrorBoundary,
5 | UsingErrorBoundaries,
6 | } from "./errorHanlding/usingErrorBoundaries";
7 | import { UsingTheRightWay } from "./errorHanlding/usingTheRightWay";
8 | import { ErrorBoundary } from "react-error-boundary";
9 | import { ProductsFetchingError } from "./components/errors/ErrorBoundrayComponent";
10 |
11 | function App() {
12 | return (
13 |
14 | {/* */}
15 | {/*
16 |
17 | */}
18 |
19 | console.log("Error happened!")}
22 | >
23 |
24 |
25 |
26 | );
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/CartItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CartItem = ({ item }) => {
4 | return (
5 |
6 |
11 |
12 |
{item.name}
13 |
14 | ${item.price} x {item.quantity}
15 |
16 |
17 |
7 | {items.map((item) => (
8 |
9 | ))}
10 |
11 | );
12 | };
13 |
14 | export default CartItems;
15 |
--------------------------------------------------------------------------------
/src/components/CheckoutButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CheckoutButton = ({ onClick }) => {
4 | return (
5 |
11 | );
12 | };
13 |
14 | export default CheckoutButton;
15 |
--------------------------------------------------------------------------------
/src/components/CheckoutPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import CartItems from "./CartItems";
3 | import CheckoutSummary from "./CheckoutSummary";
4 | import CheckoutButton from "./CheckoutButton";
5 |
6 | const fetchCartItems = async () => {
7 | const response = await fetch("https://fakestoreapi.com/products?limit=5");
8 | const products = await response.json();
9 | const cartItems = products.map((product) => ({
10 | id: product.id,
11 | name: product.title,
12 | image: product.image,
13 | price: product.price,
14 | quantity: Math.floor(Math.random() * 5) + 1, // Generate a random quantity between 1 and 5
15 | }));
16 | return cartItems;
17 | };
18 |
19 | export { fetchCartItems };
20 |
21 | const CheckoutPage = () => {
22 | const [cartItems, setCartItems] = useState([
23 | // Add your cart items here
24 | ]);
25 |
26 | const handlePayClick = () => {
27 | // Handle the payment process here
28 | };
29 |
30 | const subtotal = cartItems.reduce(
31 | (sum, item: any) => sum + item.price * item.quantity,
32 | 0
33 | );
34 | const discount = 0; // Calculate any discount here
35 | const total = subtotal - discount;
36 |
37 | useEffect(() => {
38 | const fetchItems = async () => {
39 | const items = await fetchCartItems();
40 | setCartItems(items);
41 | };
42 | fetchItems();
43 | }, []);
44 |
45 | return (
46 |
47 |
48 |
Checkout
49 |
50 |
55 |
56 |
57 |
58 |
59 |
8 |
Summary
9 |
Subtotal: ${subtotal}
10 |
Discount: ${discount}
11 |
Total: ${total}
12 |
12 |
13 |
Error!! 🌍
14 |
{error.message}
15 |
18 |
19 |
10 |
11 |
Error!! 🌍
12 |
{error}
13 |
14 |
78 |
79 |
Checkout
80 |
81 |
86 |
87 |
88 |
89 |
90 |
40 |
41 |
Checkout
42 |
43 |
48 |
49 |
50 |
51 |
52 |
39 |
40 |
Checkout
41 |
42 |
47 |
48 |
49 |
50 |
51 |