Skip to content

Commit 9fa2d45

Browse files
seantokuzoseantokuzo
committed
ms example complete
1 parent 663d188 commit 9fa2d45

39 files changed

Lines changed: 490 additions & 262 deletions

‎examples_new/microservices/auth/src/app.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
import path from 'path';
21
import express from 'express';
32
import 'express-async-errors';
4-
// import dotenv from 'dotenv';
5-
// dotenv.config({ path: path.resolve(__dirname + '../../.env') });
6-
import { NotFoundError, errorHandler } from '@chronosrx/common';
3+
import cors from 'cors';
4+
import cookieParser from 'cookie-parser';
75
import authRouter from './routes/auth-router';
86
import eventRouter from './routes/event-router';
9-
import cookieParser from 'cookie-parser';
10-
import cors from 'cors';
7+
import { NotFoundError, errorHandler } from '@chronosrx/common';
118

129
import chronosConfig from './chronos-config';
1310
const Chronos = require('@chronosmicro/tracker');
@@ -28,15 +25,10 @@ app.use(
2825
app.use(express.json());
2926
app.use(cookieParser());
3027

31-
// app.get('/', (req, res) => {
32-
// console.log('💥 Test Route');
33-
// res.status(200).send({ msg: '💥 Test route' });
34-
// });
35-
3628
app.use('/api/auth', authRouter);
3729
app.use('/events', eventRouter);
3830

39-
app.use('*', (req, res) => {
31+
app.use('*', (_req, _res) => {
4032
throw new NotFoundError();
4133
});
4234

‎examples_new/microservices/client-dev/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/Chronos_C_logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

‎examples_new/microservices/client-dev/public/Chronos_C_logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples_new/microservices/client-dev/src/components/ClothesIcon.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { FaRedhat } from 'react-icons/fa';
2+
import { IoShirtOutline } from 'react-icons/io5';
3+
import { PiPants } from 'react-icons/pi';
4+
5+
import { Clothes } from '../util/types';
6+
7+
type Props = {
8+
clothes: Clothes;
9+
};
10+
11+
const ClothesIcon = ({ clothes }: Props) => {
12+
const clothesIcon = (clothes: Clothes) => {
13+
const classes = 'text-6xl';
14+
15+
switch (clothes) {
16+
case 'hat':
17+
return <FaRedhat className={`text-amber-500 ${classes}`} />;
18+
case 'shirt':
19+
return <IoShirtOutline className={`text-red-400 ${classes}`} />;
20+
case 'pants':
21+
return <PiPants className={`text-blue-400 ${classes}`} />;
22+
default:
23+
return <FaRedhat className={`text-yellow-300 ${classes}`} />;
24+
}
25+
};
26+
27+
return <>{clothesIcon(clothes)}</>;
28+
};
29+
30+
export default ClothesIcon;

‎examples_new/microservices/client-dev/src/components/CreateItemForm.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ import FruitIcon from './FruitIcon';
77
const itemOptions = ['bananas', 'strawberries', 'grapes'];
88

99
const CreateItemForm = () => {
10-
const { createItem } = useAppContext();
10+
const { createItem, isLoading } = useAppContext();
1111
const [fruit, setFruit] = useState<Fruit>('bananas');
1212

1313
const handleSubmit = (e: FormEvent) => {
1414
e.preventDefault();
1515

16-
// TODO
17-
// SEND REQUEST TO CREATE ITEM
16+
if (isLoading) return;
17+
1818
createItem(fruit);
1919
};
2020

2121
return (
2222
<form
23-
className="flex flex-col justify-center items-center bg-white/70 text-dark py-4 px-8 rounded-md"
23+
className="flex flex-col justify-center items-center bg-white/70 text-dark py-4 px-8 rounded-md mx-4 w-[250px]"
2424
onSubmit={e => handleSubmit(e)}
2525
>
2626
<h1 className="text-2xl font-bold">Create an Item</h1>
@@ -42,7 +42,7 @@ const CreateItemForm = () => {
4242
);
4343
})}
4444
</select>
45-
<button className="bg-blue-400 py-2 px-4 rounded-md hover:shadow-blkSm hover:scale-110 mt-4 w-full">
45+
<button className="bg-blue-400 py-2 px-4 rounded-md hover:shadow-blkSm hover:scale-110 transition-all mt-4 w-full">
4646
Create Item
4747
</button>
4848
</form>

‎examples_new/microservices/client-dev/src/components/CreateOrderForm.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { FormEvent, useState } from 'react';
2+
import { Clothes } from '../util/types';
3+
import { useAppContext } from '../context/appContext';
4+
import { nanoid } from 'nanoid';
5+
import ClothesIcon from './ClothesIcon';
6+
7+
const itemOptions = ['hat', 'shirt', 'pants'];
8+
9+
const CreateOrderForm = () => {
10+
const { createOrder, isLoading } = useAppContext();
11+
const [clothes, setClothes] = useState<Clothes>('hat');
12+
const [amount, setAmount] = useState<number>(1);
13+
14+
const handleSubmit = (e: FormEvent) => {
15+
e.preventDefault();
16+
17+
if (isLoading) return;
18+
19+
createOrder(clothes, amount);
20+
};
21+
22+
return (
23+
<form
24+
className="flex flex-col justify-center items-center bg-white/70 text-dark py-4 px-8 rounded-md mx-4 w-[250px]"
25+
onSubmit={e => handleSubmit(e)}
26+
>
27+
<h1 className="text-2xl font-bold">Order an Item</h1>
28+
<div className="bg-dark rounded-md p-2 mt-4 shadow-blkSm">
29+
<ClothesIcon clothes={clothes} />
30+
</div>
31+
<div className="w-full flex justify-between items-center">
32+
<select
33+
className="text-dark mt-4 p-1 w-[45%] text-center rounded-md"
34+
value={clothes}
35+
onChange={e => {
36+
setClothes(e.target.value as Clothes);
37+
}}
38+
>
39+
{itemOptions.map(item => {
40+
return (
41+
<option key={nanoid()} value={item} className="capitalize">
42+
{item}
43+
</option>
44+
);
45+
})}
46+
</select>
47+
<select
48+
className="text-dark mt-4 p-1 w-[45%] text-center rounded-md"
49+
value={amount}
50+
onChange={e => {
51+
setAmount(+e.target.value);
52+
}}
53+
>
54+
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(amount => {
55+
return (
56+
<option key={nanoid()} value={amount} className="capitalize">
57+
{amount}
58+
</option>
59+
);
60+
})}
61+
</select>
62+
</div>
63+
<button className="bg-blue-400 py-2 px-4 rounded-md hover:shadow-blkSm hover:scale-110 transition-all mt-4 w-full">
64+
Create Order
65+
</button>
66+
</form>
67+
);
68+
};
69+
70+
export default CreateOrderForm;

‎examples_new/microservices/client-dev/src/components/Header.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useAppContext } from '../context/appContext';
77
const Header = () => {
88
const [showMenu, setShowMenu] = useState(false);
99
const { pathname } = useLocation();
10-
const { items, logoutUser } = useAppContext();
10+
const { logoutUser } = useAppContext();
1111

1212
return (
1313
<div className="fixed top-0 left-0 w-full flex justify-between items-center px-6 py-4">
@@ -23,23 +23,6 @@ const Header = () => {
2323
<h1 className="text-3xl sm:text-4xl font-bold">Microservices Example</h1>
2424
<div>
2525
<div className="flex justify-end items-center w-[270px]">
26-
<Link
27-
to="/items"
28-
className="text-xl hover:underline hover:font-bold relative border-2 rounded-md py-1 px-3"
29-
>
30-
Items
31-
{items.length > 0 && (
32-
<div className="w-5 h-5 flex flex-col justify-center items-center text-sm bg-green-500 rounded-full absolute top-[-10px] right-[-10px]">
33-
<p className="font-bold m-0">{items.length}</p>
34-
</div>
35-
)}
36-
</Link>
37-
<Link
38-
to="/orders"
39-
className="text-xl hover:underline hover:font-bold mx-6 relative border-2 rounded-md py-1 px-3"
40-
>
41-
Orders
42-
</Link>
4326
<FiMenu
4427
className={`text-2xl rounded-sm ${
4528
showMenu ? 'bg-light text-dark border-2 border-light' : ''

‎examples_new/microservices/client-dev/src/components/Loading.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,22 @@ const Loading = () => {
55

66
useEffect(() => {
77
setTimeout(() => {
8-
if (dots.length >= 4) {
8+
if (dots.length > 2) {
99
setDots('');
1010
} else {
1111
setDots(prev => prev + '.');
1212
}
13-
}, 500);
13+
}, 250);
1414
}, [dots]);
1515

1616
return (
17-
<div className="w-full h-screen flex flex-col justify-center items-center text-light bg-dark">
18-
Loading{dots}
17+
<div className="absolute bg-transparent w-full h-screen flex flex-col justify-center items-center">
18+
<div
19+
className="w-64 h-64 flex justify-center items-center bg-dark z-[1000]
20+
shadow-insetDbl rounded-[50%] animate-loadspin"
21+
>
22+
<h1 className="text-4xl font-semibold animate-antiloadspin text-light">Loading{dots}</h1>
23+
</div>
1924
</div>
2025
);
2126
};

‎examples_new/microservices/client-dev/src/components/OrderList.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useAppContext } from '../context/appContext';
2+
import { nanoid } from 'nanoid';
3+
import ClothesIcon from './ClothesIcon';
4+
import { Clothes } from '../util/types';
5+
6+
const OrderList = () => {
7+
const { orders } = useAppContext();
8+
9+
return (
10+
<div className="w-full flex flex-col justify-center items-center mt-4">
11+
<h1 className="text-3xl font-bold">Orders</h1>
12+
<div className="flex flex-wrap justify-center w-[85%]">
13+
{orders.map(order => (
14+
<div
15+
key={nanoid()}
16+
className="bg-white/70 rounded-md m-2 p-4 min-w-[150px] flex flex-col justify-center items-center text-center"
17+
>
18+
<div className="bg-dark rounded-md p-2 mt-4 shadow-blkSm">
19+
<ClothesIcon clothes={order.item as Clothes} />
20+
</div>
21+
<p className="capitalize font-bold text-dark mt-4">{order.item}</p>
22+
<div className="my-2 border-[1px] w-full border-dark"></div>
23+
<div>
24+
<p className="my-2">
25+
Amount:{' '}
26+
<span className="text-light bg-dark p-2 rounded-md text-center">
27+
{order.amount}
28+
</span>
29+
</p>
30+
</div>
31+
</div>
32+
))}
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
export default OrderList;

‎examples_new/microservices/client-dev/src/components/PageLinks.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Link } from 'react-router-dom';
2+
import { useAppContext } from '../context/appContext';
3+
4+
const PageLinks = () => {
5+
const { items, orders } = useAppContext();
6+
7+
const createLink = (route: string, text: string, count: number) => {
8+
return (
9+
<Link
10+
to={route}
11+
className="w-[250px] text-2xl font-bold text-center hover:font-bold relative border-2 rounded-md py-2 px-3 mx-4 hover:scale-105 transition-all"
12+
>
13+
{text}
14+
<div className="shadow-insetDbl"></div>
15+
{count > 0 && (
16+
<div className="w-5 h-5 flex flex-col justify-center items-center text-sm bg-green-500 rounded-full absolute top-[-10px] right-[-10px] z-50">
17+
<p className="font-bold m-0">{count}</p>
18+
</div>
19+
)}
20+
</Link>
21+
);
22+
};
23+
24+
return (
25+
<div className="flex justify-end items-center">
26+
{createLink('/items', 'Items', items.length)}
27+
{createLink('/orders', 'Orders', orders.length)}
28+
</div>
29+
);
30+
};
31+
32+
export default PageLinks;

0 commit comments

Comments
 (0)