-
+
Crafting Shop
@@ -43,9 +46,7 @@ export function Navbar() {
{user ? (
-
- {user.username}
-
+ {user.username}
) : (
<>
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/context/AppContext.tsx b/frontend/src/context/AppContext.tsx
index 36575bf..6fc794f 100644
--- a/frontend/src/context/AppContext.tsx
+++ b/frontend/src/context/AppContext.tsx
@@ -36,17 +36,17 @@ export function AppProvider({ children }: AppProviderProps) {
useEffect(() => {
const storedToken = localStorage.getItem('token');
const storedUser = localStorage.getItem('user');
-
+
if (storedToken && storedUser) {
setToken(storedToken);
setUser(JSON.parse(storedUser));
}
-
+
const storedCart = localStorage.getItem('cart');
if (storedCart) {
setCart(JSON.parse(storedCart));
}
-
+
setLoading(false);
}, []);
@@ -87,9 +87,7 @@ export function AppProvider({ children }: AppProviderProps) {
const existingItem = prevCart.find((item) => item.id === product.id);
if (existingItem) {
return prevCart.map((item) =>
- item.id === product.id
- ? { ...item, quantity: item.quantity + 1 }
- : item
+ item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
);
}
return [...prevCart, { ...product, quantity: 1 }];
@@ -106,9 +104,7 @@ export function AppProvider({ children }: AppProviderProps) {
return;
}
setCart((prevCart: CartItem[]) =>
- prevCart.map((item) =>
- item.id === productId ? { ...item, quantity } : item
- )
+ prevCart.map((item) => (item.id === productId ? { ...item, quantity } : item))
);
};
diff --git a/frontend/src/context/loaders/LoaderExample.tsx b/frontend/src/context/loaders/LoaderExample.tsx
index 1a580ed..913e806 100644
--- a/frontend/src/context/loaders/LoaderExample.tsx
+++ b/frontend/src/context/loaders/LoaderExample.tsx
@@ -7,12 +7,12 @@ export const LoaderExample = () => {
// Pattern A: Manual Control
const handleManualLoad = async () => {
- showLoader("Processing manual task...");
-
+ showLoader('Processing manual task...');
+
try {
// Simulate an async operation
- await new Promise(resolve => setTimeout(resolve, 2000));
-
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+
addNotification({
type: 'success',
title: 'Manual Task Complete',
@@ -20,6 +20,7 @@ export const LoaderExample = () => {
duration: 3000,
});
} catch (err) {
+ console.error(err);
addNotification({
type: 'error',
title: 'Manual Task Failed',
@@ -34,15 +35,12 @@ export const LoaderExample = () => {
// Pattern B: withLoader Helper (Cleanest)
const handleWithLoader = async () => {
try {
- await withLoader(
- async () => {
- // Simulate an async operation
- await new Promise(resolve => setTimeout(resolve, 1500));
- return 'Success!';
- },
- "Processing with withLoader..."
- );
-
+ await withLoader(async () => {
+ // Simulate an async operation
+ await new Promise((resolve) => setTimeout(resolve, 1500));
+ return 'Success!';
+ }, 'Processing with withLoader...');
+
addNotification({
type: 'success',
title: 'withLoader Task Complete',
@@ -50,6 +48,7 @@ export const LoaderExample = () => {
duration: 3000,
});
} catch (err) {
+ console.error(err);
addNotification({
type: 'error',
title: 'withLoader Task Failed',
@@ -61,12 +60,12 @@ export const LoaderExample = () => {
// Pattern C: Long-running task
const handleLongLoad = async () => {
- showLoader("Processing long-running task...");
-
+ showLoader('Processing long-running task...');
+
try {
// Simulate a longer async operation
- await new Promise(resolve => setTimeout(resolve, 4000));
-
+ await new Promise((resolve) => setTimeout(resolve, 4000));
+
addNotification({
type: 'success',
title: 'Long Task Complete',
@@ -74,6 +73,7 @@ export const LoaderExample = () => {
duration: 3000,
});
} catch (err) {
+ console.error(err);
addNotification({
type: 'error',
title: 'Long Task Failed',
@@ -87,14 +87,14 @@ export const LoaderExample = () => {
// Pattern D: Error simulation
const handleError = async () => {
- showLoader("Processing task that will fail...");
-
+ showLoader('Processing task that will fail...');
+
try {
// Simulate an error
- await new Promise((_, reject) =>
+ await new Promise((_, reject) =>
setTimeout(() => reject(new Error('Simulated error')), 1500)
);
-
+
addNotification({
type: 'success',
title: 'Task Complete',
@@ -102,6 +102,7 @@ export const LoaderExample = () => {
duration: 3000,
});
} catch (err) {
+ console.error(err);
addNotification({
type: 'error',
title: 'Task Failed',
@@ -116,10 +117,10 @@ export const LoaderExample = () => {
// Pattern E: Without message
const handleNoMessage = async () => {
showLoader();
-
+
try {
- await new Promise(resolve => setTimeout(resolve, 2000));
-
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+
addNotification({
type: 'success',
title: 'No Message Task Complete',
@@ -127,6 +128,7 @@ export const LoaderExample = () => {
duration: 3000,
});
} catch (err) {
+ console.error(err);
addNotification({
type: 'error',
title: 'Task Failed',
@@ -142,9 +144,10 @@ export const LoaderExample = () => {
Loader System Examples
- Click the buttons below to see different loader patterns in action. The loader uses React Context for state management.
+ Click the buttons below to see different loader patterns in action. The loader uses React
+ Context for state management.
-
+
);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/context/loaders/LoaderRoot.tsx b/frontend/src/context/loaders/LoaderRoot.tsx
index 5ae6fee..b59b3c4 100644
--- a/frontend/src/context/loaders/LoaderRoot.tsx
+++ b/frontend/src/context/loaders/LoaderRoot.tsx
@@ -7,27 +7,23 @@ export const LoaderRoot = () => {
if (!isLoading) return null;
return createPortal(
-
{/* Custom CSS Spinner (No external libs) */}
{/* Optional inner circle for style */}
-
- {message && (
-
- {message}
-
- )}
+
+ {message &&
{message}
}
,
document.body
);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/context/loaders/index.ts b/frontend/src/context/loaders/index.ts
index 9967013..7b52118 100644
--- a/frontend/src/context/loaders/index.ts
+++ b/frontend/src/context/loaders/index.ts
@@ -1,2 +1,2 @@
export { LoaderProvider, useLoader } from './useLoader';
-export { LoaderRoot } from './LoaderRoot';
\ No newline at end of file
+export { LoaderRoot } from './LoaderRoot';
diff --git a/frontend/src/context/loaders/useLoader.tsx b/frontend/src/context/loaders/useLoader.tsx
index fa291ca..17bd9f1 100644
--- a/frontend/src/context/loaders/useLoader.tsx
+++ b/frontend/src/context/loaders/useLoader.tsx
@@ -30,17 +30,17 @@ export const LoaderProvider: FC
= ({ children }) => {
}, []);
// Helper to avoid try/finally blocks everywhere
- const withLoader = useCallback(async (
- fn: () => Promise,
- message?: string
- ): Promise => {
- showLoader(message);
- try {
- return await fn();
- } finally {
- hideLoader();
- }
- }, [showLoader, hideLoader]);
+ const withLoader = useCallback(
+ async (fn: () => Promise, message?: string): Promise => {
+ showLoader(message);
+ try {
+ return await fn();
+ } finally {
+ hideLoader();
+ }
+ },
+ [showLoader, hideLoader]
+ );
return (
@@ -53,4 +53,4 @@ export const useLoader = () => {
const context = useContext(LoaderContext);
if (!context) throw new Error('useLoader must be used within a LoaderProvider');
return context;
-};
\ No newline at end of file
+};
diff --git a/frontend/src/context/modals/ModalComponents.tsx b/frontend/src/context/modals/ModalComponents.tsx
index 21c222a..5eb2abe 100644
--- a/frontend/src/context/modals/ModalComponents.tsx
+++ b/frontend/src/context/modals/ModalComponents.tsx
@@ -3,15 +3,19 @@ import { ReactNode } from 'react';
// Container for the Header section
export const ModalHeader = ({ children, title }: { children?: ReactNode; title?: string }) => (
- {title ?
{title}
: children}
+ {title ? (
+
+ {title}
+
+ ) : (
+ children
+ )}
);
// Container for the Main Body
export const ModalContent = ({ children }: { children: ReactNode }) => (
-
- {children}
-
+ {children}
);
// Container for Actions (Buttons)
@@ -26,4 +30,4 @@ export const Modal = {
Header: ModalHeader,
Content: ModalContent,
Actions: ModalActions,
-};
\ No newline at end of file
+};
diff --git a/frontend/src/context/modals/ModalExample.tsx b/frontend/src/context/modals/ModalExample.tsx
index 3bbc34f..596bae2 100644
--- a/frontend/src/context/modals/ModalExample.tsx
+++ b/frontend/src/context/modals/ModalExample.tsx
@@ -11,14 +11,16 @@ const DeleteConfirmModal = ({ onClose }: { onClose: () => void }) => {
-
-