Merge branch 'main' into hddev

hdcola · Nov 3, 2024 · 6c92103 · 6c92103
2 parents 516419b + e817272
commit 6c92103
Show file tree

Hide file tree

Showing 11 changed files with 935 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "@hookform/resolvers": "^3.9.1",
         "@mui/icons-material": "^6.1.5",
         "@mui/material": "^6.1.5",
+        "@mui/x-data-grid": "^7.22.1",
         "@react-oauth/google": "^0.12.1",
         "@stripe/react-stripe-js": "^2.8.1",
         "@stripe/stripe-js": "^4.9.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,10 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+    QueryCache,
+    QueryClient,
+    QueryClientProvider,
+} from '@tanstack/react-query';
+import { useState, createContext, useLayoutEffect, useContext } from 'react';
 
 import { loadStripe } from '@stripe/stripe-js';
 import './App.css';
@@ -19,69 +24,124 @@ import { StoreDashboard } from './pages/StoreDashboard';
 import { Elements } from '@stripe/react-stripe-js';
 import { TestPage } from './pages/TestPage';
 import { AccountSetting } from './pages/AccountSetting';
+import Cart from './pages/Cart';
+
+import useLoginStore from './store/useLoginStore';
 
 const stripePublicKey = import.meta.env.VITE_STRIPE_PUBLIC_KEY;
 const stripePromise = loadStripe(stripePublicKey);
 
+// Globally pass anything to other files
+const AppContext = createContext({} as any);
+// Import this in files
+export const useAppContext = () => useContext(AppContext);
+
 function App() {
     const theme = useTheme();
     const lessThanXL = useMediaQuery(theme.breakpoints.down('xl'));
-    const queryClient = new QueryClient();
     const appearance: { theme: 'stripe' | 'night' | 'flat' | undefined } = {
         theme: 'stripe',
     };
     const loader = 'auto';
 
+    const [isInit, setIsInit] = useState<boolean>(false);
+    const [server, setServer] = useState<IServer>({});
+    const [cartCount, setCartCount] = useState<number>(0);
+
+    const { authToken, logout, isLoggedIn } = useLoginStore();
+
+    // Use useQuery when making your api request.
+    const queryClient = new QueryClient({
+        queryCache: new QueryCache({
+            onError: (error: { status?: number } | Error | unknown) => {
+                if (typeof error === 'object' && error && 'status' in error) {
+                    if (error.status === 403) {
+                        console.log('<< Unauthorized >>');
+                        logout();
+                    }
+                }
+            },
+        }),
+    });
+
+    // Setup server
+    useLayoutEffect(() => {
+        if (isLoggedIn) {
+            setServer({
+                apiUrl: import.meta.env.VITE_API_URL,
+                authToken: authToken,
+            });
+            setIsInit(true);
+        } else {
+            setCartCount(0);
+            setServer({ apiUrl: server.apiUrl });
+            setIsInit(false);
+        }
+    }, [isLoggedIn]);
+
     return (
         <>
             <CssBaseline />
             <Container sx={{ height: '100%' }} disableGutters={lessThanXL}>
-                <QueryClientProvider client={queryClient}>
-                    <Router>
-                        <Navbar />
-                        <Elements
-                            options={{ appearance, loader }}
-                            stripe={stripePromise}
-                        >
-                            <Routes>
-                                <Route path="/" element={<Home />} />
-                                <Route
-                                    path="/items/:id"
-                                    element={<SingleItem />}
-                                />
-                                <Route
-                                    path="/register"
-                                    element={<Register />}
-                                />
-                                <Route path="/login" element={<Login />} />
-                                <Route
-                                    path="/checkout"
-                                    element={<CheckoutPage />}
-                                />
-                                <Route
-                                    path="/complete"
-                                    element={<CompletePage />}
-                                />
-                                <Route
-                                    path="/stores/create"
-                                    element={<CreateStore />}
-                                />
-                                <Route
-                                    path="/stores/dashboard"
-                                    element={<StoreDashboard />}
-                                />
-                                <Route
-                                    path="/settings"
-                                    element={<AccountSetting />}
-                                />
-                                <Route path="/test" element={<TestPage />} />
-                            </Routes>
-                        </Elements>
-                    </Router>
-                </QueryClientProvider>
+                <AppContext.Provider
+                    value={{ isInit, server, cartCount, setCartCount }}
+                >
+                    <QueryClientProvider client={queryClient}>
+                        <Router>
+                            <Navbar />
+                            <Elements
+                                options={{ appearance, loader }}
+                                stripe={stripePromise}
+                            >
+                                <Routes>
+                                    <Route path="/" element={<Home />} />
+                                    <Route
+                                        path="/items/:id"
+                                        element={<SingleItem />}
+                                    />
+                                    <Route
+                                        path="/register"
+                                        element={<Register />}
+                                    />
+                                    <Route path="/login" element={<Login />} />
+                                    <Route
+                                        path="/checkout"
+                                        element={<CheckoutPage />}
+                                    />
+                                    <Route
+                                        path="/complete"
+                                        element={<CompletePage />}
+                                    />
+                                    <Route
+                                        path="/stores/create"
+                                        element={<CreateStore />}
+                                    />
+                                    <Route
+                                        path="/stores/dashboard"
+                                        element={<StoreDashboard />}
+                                    />
+                                    <Route
+                                        path="/settings"
+                                        element={<AccountSetting />}
+                                    />
+                                    <Route path="/cart" element={<Cart />} />
+                                    <Route
+                                        path="/test"
+                                        element={<TestPage />}
+                                    />
+                                </Routes>
+                            </Elements>
+                        </Router>
+                    </QueryClientProvider>
+                </AppContext.Provider>
             </Container>
         </>
     );
 }
 
+interface IServer {
+    apiUrl?: string;
+    authToken?: string;
+}
+
 export default App;