root/E-Commerce-Module
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed hooks

Browse source
This commit is contained in:
2ManyProjects 2025-05-03 02:23:05 -05:00
parent efdd021712
commit 31e5084ea5
2 changed files with 29 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages/Admin/OrdersPage.jsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import {
Box,
Typography,
@ -60,6 +60,7 @@ const AdminOrdersPage = () => {
const queryClient = useQueryClient();
// Fetch orders
const {
data: orders,
@ -88,6 +89,11 @@ const AdminOrdersPage = () => {
},
enabled: false // Only run when manually triggered
});
useEffect(() => {
if(selectedOrder){
fetchOrderDetails();
}
}, [selectedOrder])
// Update order status mutation
const updateOrderStatus = useMutation({
@ -149,7 +155,6 @@ const AdminOrdersPage = () => {
const handleViewOrder = async (order) => {
setSelectedOrder(order);
setViewDialogOpen(true);
await fetchOrderDetails();
};
// Close view dialog

102
frontend/src/theme/ThemeProvider.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createTheme } from '@mui/material/styles';
@ -8,14 +8,8 @@ import apiClient from '@services/api';
import { useDarkMode } from '@hooks/reduxHooks';
import useBrandingSettings from '@hooks/brandingHooks';
/**
* Custom ThemeProvider that uses branding settings for white labeling
*/
const ThemeProvider = ({ children }) => {
const [darkMode, _, setDarkMode] = useDarkMode();
const [theme, setTheme] = useState(null);
// Fetch branding settings
const [darkMode, toggleDarkMode, setDarkMode] = useDarkMode();
const { data: brandingSettings } = useBrandingSettings();
// Default colors
@ -38,43 +32,38 @@ const ThemeProvider = ({ children }) => {
}
};
// Set initial dark mode from branding settings
useEffect(() => {
// Only pull from default if user specified style hasn't been set
if(brandingSettings){
let isDarkMode = darkMode;
if(localStorage.getItem("darkMode") == null){
isDarkMode = brandingSettings?.default_mode === 'dark' ? true : darkMode;
setDarkMode(isDarkMode);
if (brandingSettings && localStorage.getItem("darkMode") === null) {
const shouldUseDarkMode = brandingSettings.default_mode === 'dark';
if (shouldUseDarkMode !== darkMode) {
setDarkMode(shouldUseDarkMode);
}
handleDarkMode(isDarkMode)
}
}, [brandingSettings, darkMode]);
function handleDarkMode(darkMode){
let isDarkMode = darkMode;
// Get colors based on mode
const mode = isDarkMode ? 'dark' : 'light';
}, [brandingSettings]); // Remove darkMode and setDarkMode from dependencies
// Create theme based on current settings
const theme = useMemo(() => {
const mode = darkMode ? 'dark' : 'light';
const colors = {
primary: isDarkMode
primary: darkMode
? (brandingSettings?.dark_primary_color || defaultColors.dark.primary)
: (brandingSettings?.light_primary_color || defaultColors.light.primary),
secondary: isDarkMode
secondary: darkMode
? (brandingSettings?.dark_secondary_color || defaultColors.dark.secondary)
: (brandingSettings?.light_secondary_color || defaultColors.light.secondary),
background: isDarkMode
background: darkMode
? (brandingSettings?.dark_background_color || defaultColors.dark.background)
: (brandingSettings?.light_background_color || defaultColors.light.background),
paper: isDarkMode
paper: darkMode
? (brandingSettings?.dark_surface_color || defaultColors.dark.paper)
: (brandingSettings?.light_surface_color || defaultColors.light.paper),
text: isDarkMode
text: darkMode
? (brandingSettings?.dark_text_color || defaultColors.dark.text)
: (brandingSettings?.light_text_color || defaultColors.light.text)
};
// Create theme
const newTheme = createTheme({
return createTheme({
palette: {
mode,
primary: {
@ -92,7 +81,7 @@ const ThemeProvider = ({ children }) => {
},
text: {
primary: colors.text,
secondary: isDarkMode
secondary: darkMode
? 'rgba(255, 255, 255, 0.7)'
: 'rgba(0, 0, 0, 0.6)',
},
@ -106,30 +95,6 @@ const ThemeProvider = ({ children }) => {
'Arial',
'sans-serif',
].join(','),
h1: {
fontSize: '2.5rem',
fontWeight: 500,
},
h2: {
fontSize: '2rem',
fontWeight: 500,
},
h3: {
fontSize: '1.75rem',
fontWeight: 500,
},
h4: {
fontSize: '1.5rem',
fontWeight: 500,
},
h5: {
fontSize: '1.25rem',
fontWeight: 500,
},
h6: {
fontSize: '1rem',
fontWeight: 500,
},
},
components: {
MuiButton: {
@ -144,7 +109,7 @@ const ThemeProvider = ({ children }) => {
styleOverrides: {
root: {
borderRadius: 8,
boxShadow: isDarkMode
boxShadow: darkMode
? '0 4px 20px rgba(0, 0, 0, 0.5)'
: '0 4px 20px rgba(0, 0, 0, 0.1)',
},
@ -153,7 +118,7 @@ const ThemeProvider = ({ children }) => {
MuiAppBar: {
styleOverrides: {
root: {
boxShadow: isDarkMode
boxShadow: darkMode
? '0 4px 20px rgba(0, 0, 0, 0.5)'
: '0 2px 10px rgba(0, 0, 0, 0.05)',
},
@ -161,30 +126,7 @@ const ThemeProvider = ({ children }) => {
},
},
});
setTheme(newTheme);
}
// Use a default theme while loading
if (!theme) {
const defaultTheme = createTheme({
palette: {
mode: darkMode ? 'dark' : 'light',
primary: {
main: darkMode ? defaultColors.dark.primary : defaultColors.light.primary,
},
secondary: {
main: darkMode ? defaultColors.dark.secondary : defaultColors.light.secondary,
},
},
});
return (
<MuiThemeProvider theme={defaultTheme}>
<CssBaseline />
{children}
</MuiThemeProvider>
);
}
}, [darkMode, brandingSettings, defaultColors]);
return (
<MuiThemeProvider theme={theme}>