Skip to content

Commit 663d188

Browse files
seantokuzoseantokuzo
committed
finalizing ms example app
1 parent 0ec3a12 commit 663d188

14 files changed

Lines changed: 125 additions & 66 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ chronos.propagate();
1616

1717
const app = express();
1818

19-
const trackingMiddleware = chronos.track();
20-
app.use(trackingMiddleware);
19+
// const trackingMiddleware = chronos.track();
20+
// app.use(trackingMiddleware);
2121

2222
app.use(
2323
cors({

‎examples_new/microservices/client-dev/src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import Protected from './pages/Protected';
55
import SharedLayout from './pages/SharedLayout';
66
import NotFound from './pages/NotFound';
77
import About from './pages/About';
8+
import Items from './pages/Items';
9+
import Orders from './pages/Orders';
810

911
function App() {
1012
return (
@@ -20,6 +22,8 @@ function App() {
2022
>
2123
<Route index element={<Home />} />
2224
<Route path="/about" element={<About />} />
25+
<Route path="/items" element={<Items />} />
26+
<Route path="/orders" element={<Orders />} />
2327
</Route>
2428
<Route path="*" element={<NotFound />} />
2529
</Routes>

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

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

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

13-
console.log(items);
14-
1513
const handleSubmit = (e: FormEvent) => {
1614
e.preventDefault();
1715

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

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

1212
return (
13-
<div className="fixed top-0 left-0 w-full flex justify-between items-center px-4 py-2">
14-
<Link
15-
to="/"
16-
className={`rounded-full p-2 text-2xl border-2
13+
<div className="fixed top-0 left-0 w-full flex justify-between items-center px-6 py-4">
14+
<div className="w-[270px] flex items-center justify-start">
15+
<Link
16+
to="/"
17+
className={`rounded-full p-2 text-2xl border-2
1718
${pathname === '/' ? 'border-light' : 'bg-light text-dark shadow-insetLight border-dark'}`}
18-
>
19-
<AiFillHome />
20-
</Link>
21-
<div>
22-
<div
23-
className={`text-2xl rounded-sm ${
24-
showMenu ? 'bg-light text-dark border-2 border-light' : ''
25-
}`}
26-
onClick={() => setShowMenu(!showMenu)}
2719
>
28-
<FiMenu />
20+
<AiFillHome />
21+
</Link>
22+
</div>
23+
<h1 className="text-3xl sm:text-4xl font-bold">Microservices Example</h1>
24+
<div>
25+
<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>
43+
<FiMenu
44+
className={`text-2xl rounded-sm ${
45+
showMenu ? 'bg-light text-dark border-2 border-light' : ''
46+
}`}
47+
onClick={() => setShowMenu(!showMenu)}
48+
/>
2949
</div>
3050
{showMenu && (
3151
<div

‎examples_new/microservices/client-dev/src/context/appContext.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ interface AppContextInterface extends StateInterface {
3434
loginUser: (username: string, password: string) => void;
3535
logoutUser: () => void;
3636
createItem: (fruit: Fruit) => void;
37+
getAllItems: () => void;
3738
adjustInventory: (itemId: string, newUnits: number) => void;
3839
}
3940

@@ -44,6 +45,7 @@ const AppContext = createContext<AppContextInterface>({
4445
loginUser: () => null,
4546
logoutUser: () => null,
4647
createItem: () => null,
48+
getAllItems: () => null,
4749
adjustInventory: () => null,
4850
});
4951

@@ -84,8 +86,7 @@ const AppContextProvider = ({ children }: Props) => {
8486
const logoutUser = async () => {
8587
startLoading();
8688
try {
87-
const response = await authFetch.post('/auth/logout');
88-
console.log(response);
89+
await authFetch.post('/auth/logout');
8990
dispatch({ type: ActionType.LOGOUT_USER });
9091
} catch (err) {
9192
console.log(err);
@@ -109,23 +110,31 @@ const AppContextProvider = ({ children }: Props) => {
109110

110111
const createItem = async (fruit: Fruit) => {
111112
if (fruit !== 'bananas' && fruit !== 'strawberries' && fruit !== 'grapes') return;
112-
113113
try {
114114
startLoading();
115-
const response = await itemFetch.post('/items/createItem', {
115+
await itemFetch.post('/items/createItem', {
116116
itemName: fruit,
117117
});
118-
console.log(response.data);
119-
120-
setTimeout(async () => {
121-
const allItemsResponse = await inventoryFetch('/inventory/getAllItems');
122-
dispatch({ type: ActionType.RETRIEVED_ITEMS, payload: { items: allItemsResponse.data } });
123-
}, 1500);
118+
stopLoading();
124119
} catch (err) {
125120
if (err instanceof AxiosError) {
126121
window.alert(err.message);
127122
}
128123
console.log(err);
124+
stopLoading();
125+
}
126+
};
127+
128+
const getAllItems = async () => {
129+
try {
130+
startLoading();
131+
const allItemsResponse = await inventoryFetch('/inventory/getAllItems');
132+
console.log('All Item Response', allItemsResponse.data);
133+
dispatch({ type: ActionType.RETRIEVED_ITEMS, payload: { items: allItemsResponse.data } });
134+
stopLoading();
135+
} catch (err) {
136+
console.log(err);
137+
stopLoading();
129138
}
130139
stopLoading();
131140
};
@@ -158,6 +167,7 @@ const AppContextProvider = ({ children }: Props) => {
158167
loginUser,
159168
logoutUser,
160169
createItem,
170+
getAllItems,
161171
adjustInventory,
162172
}}
163173
>

‎examples_new/microservices/client-dev/src/pages/Home.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { useEffect } from 'react';
12
import CreateItemForm from '../components/CreateItemForm';
2-
import ItemList from '../components/ItemList';
33
import { useAppContext } from '../context/appContext';
44

55
const Home = () => {
6-
const { items } = useAppContext();
6+
const { getAllItems } = useAppContext();
7+
8+
useEffect(() => {
9+
// getAllItems();
10+
// eslint-disable-next-line
11+
}, []);
12+
713
return (
814
<div className="flex flex-col justify-center items-center">
915
<CreateItemForm />
10-
{items.length > 0 && <ItemList />}
1116
</div>
1217
);
1318
};

‎examples_new/microservices/client-dev/src/pages/Items.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useEffect } from 'react';
2+
import ItemList from '../components/ItemList';
3+
import { useAppContext } from '../context/appContext';
4+
import { Link } from 'react-router-dom';
5+
import { IoCaretBackCircle } from 'react-icons/io5';
6+
7+
const Items = () => {
8+
const { items, getAllItems, isLoading } = useAppContext();
9+
console.log(isLoading);
10+
11+
useEffect(() => {
12+
// getAllItems();
13+
// eslint-disable-next-line
14+
}, []);
15+
16+
if (!items.length) {
17+
return (
18+
<div className="flex flex-col justify-center items-center">
19+
<h1 className="text-4xl font-bold mb-4">No items created</h1>
20+
<h1>Go Back to Create Items</h1>
21+
<Link to="/" className="underline mt-2 hover:scale-110">
22+
<IoCaretBackCircle className="text-light text-6xl" />
23+
</Link>
24+
</div>
25+
);
26+
}
27+
28+
return (
29+
<div>
30+
<ItemList />
31+
</div>
32+
);
33+
};
34+
35+
export default Items;

‎examples_new/microservices/client-dev/src/pages/Orders.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const Orders = () => {
2+
return <div>Orders</div>;
3+
};
4+
5+
export default Orders;

‎examples_new/microservices/event-bus/src/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ chronos.propagate();
1010

1111
const app = express();
1212

13-
const trackingMiddleware = chronos.track();
14-
app.use(trackingMiddleware);
13+
// const trackingMiddleware = chronos.track();
14+
// app.use(trackingMiddleware);
1515

1616
app.use(express.json());
1717

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ import inventoryRouter from './routes/inventory-router';
99
import cookieParser from 'cookie-parser';
1010
import eventRouter from './routes/event-router';
1111

12+
const app = express();
13+
1214
import chronosConfig from './chronos-config';
1315
const Chronos = require('@chronosmicro/tracker');
1416
const chronos = new Chronos(chronosConfig);
15-
1617
chronos.propagate();
17-
18-
const app = express();
19-
2018
const trackingMiddleware = chronos.track();
2119
app.use(trackingMiddleware);
2220

21+
22+
2323
app.use(
2424
cors({
2525
credentials: true,

0 commit comments

Comments
 (0)