fix: merge errors
This commit is contained in:
Koosha Lahouti
309
src/features/profile/routes/SettingPage.tsx
Normal file
309
src/features/profile/routes/SettingPage.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
useColorScheme,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ThemeToggleButton } from '@/components/ThemToggle';
|
||||
import { PageWrapper } from '../components/PageWrapper';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { Sun1, Moon, Calendar1 } from 'iconsax-react';
|
||||
import { useApi } from '@/hooks/useApi';
|
||||
import { fetchProfile, saveSettings } from '../api/settingsApi';
|
||||
|
||||
type ThemeMode = 'light' | 'dark';
|
||||
type CalendarType = 'christian' | 'solar' | 'lunar';
|
||||
|
||||
interface SettingsState {
|
||||
language: string;
|
||||
calendar: CalendarType;
|
||||
theme: ThemeMode;
|
||||
}
|
||||
|
||||
const languageOptions = [
|
||||
{ code: 'en', label: 'English', apiValue: 1 },
|
||||
{ code: 'fa', label: 'فارسی', apiValue: 2 },
|
||||
];
|
||||
|
||||
const calendarOptions: { key: CalendarType; apiValue: number }[] = [
|
||||
{ key: 'christian', apiValue: 1 },
|
||||
{ key: 'solar', apiValue: 2 },
|
||||
{ key: 'lunar', apiValue: 3 },
|
||||
];
|
||||
|
||||
const themeApiMap: Record<ThemeMode, number> = { light: 1, dark: 2 };
|
||||
|
||||
export function SettingPage() {
|
||||
const { t, i18n } = useTranslation(['setting']);
|
||||
const { mode, setMode } = useColorScheme();
|
||||
|
||||
const [savedSettings, setSavedSettings] = useState<SettingsState>({
|
||||
language: i18n.language,
|
||||
calendar: 'solar',
|
||||
theme: mode === 'light' || mode === 'dark' ? mode : 'light',
|
||||
});
|
||||
const [draftSettings, setDraftSettings] =
|
||||
useState<SettingsState>(savedSettings);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const {
|
||||
data: profileData,
|
||||
loading: isFetching,
|
||||
error: fetchError,
|
||||
} = useApi(fetchProfile, { immediate: true });
|
||||
|
||||
const {
|
||||
data: saveData,
|
||||
loading: isSaving,
|
||||
error: saveError,
|
||||
execute: executeSaveSettings,
|
||||
} = useApi(saveSettings);
|
||||
|
||||
useEffect(() => {
|
||||
if (profileData?.success && profileData.userSettings) {
|
||||
const { theme, calendarType, language } = profileData.userSettings;
|
||||
const themeReverseMap: { [key: number]: ThemeMode | undefined } = {
|
||||
1: 'light',
|
||||
2: 'dark',
|
||||
};
|
||||
const newSettings: SettingsState = {
|
||||
theme: themeReverseMap[theme] || 'light',
|
||||
calendar:
|
||||
calendarOptions.find((c) => c.apiValue === calendarType)?.key ||
|
||||
'solar',
|
||||
language:
|
||||
languageOptions.find((l) => l.apiValue === language)?.code || 'en',
|
||||
};
|
||||
setSavedSettings(newSettings);
|
||||
setDraftSettings(newSettings);
|
||||
setMode(newSettings.theme);
|
||||
i18n.changeLanguage(newSettings.language);
|
||||
}
|
||||
}, [profileData, setMode, i18n]);
|
||||
|
||||
useEffect(() => {
|
||||
if (saveData?.success) {
|
||||
setMode(draftSettings.theme);
|
||||
setSavedSettings(draftSettings);
|
||||
i18n.changeLanguage(draftSettings.language);
|
||||
setIsEditing(false);
|
||||
}
|
||||
}, [saveData, draftSettings, setMode, i18n]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
const resolvedMode = mode === 'light' || mode === 'dark' ? mode : 'light';
|
||||
setDraftSettings({ ...savedSettings, theme: resolvedMode });
|
||||
}
|
||||
}, [isEditing, savedSettings, mode]);
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false);
|
||||
setDraftSettings(savedSettings);
|
||||
setMode(savedSettings.theme);
|
||||
};
|
||||
|
||||
const handleEditToggle = () => {
|
||||
if (isEditing) {
|
||||
const languageObj = languageOptions.find(
|
||||
(o) => o.code === draftSettings.language,
|
||||
);
|
||||
const calendarObj = calendarOptions.find(
|
||||
(c) => c.key === draftSettings.calendar,
|
||||
);
|
||||
|
||||
if (languageObj && calendarObj) {
|
||||
executeSaveSettings({
|
||||
theme: themeApiMap[draftSettings.theme],
|
||||
calendarType: calendarObj.apiValue,
|
||||
language: languageObj.apiValue,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setIsEditing(true);
|
||||
}
|
||||
};
|
||||
const getErrorMessage = (error: unknown): string | null => {
|
||||
if (!error) return null;
|
||||
if (error instanceof Error) return error.message;
|
||||
return String(error);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={handleCancel}
|
||||
size="large"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
}}
|
||||
disabled={isSaving || isFetching}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleEditToggle}
|
||||
size="large"
|
||||
variant={isEditing ? 'contained' : 'outlined'}
|
||||
disabled={isSaving || isFetching}
|
||||
>
|
||||
{isSaving
|
||||
? t('settings.saving')
|
||||
: isEditing
|
||||
? t('settings.saveButton')
|
||||
: t('settings.editButton')}
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{isFetching ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 4,
|
||||
minHeight: '200px',
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : fetchError ? (
|
||||
<Box sx={{ textAlign: 'center', p: 4 }}>
|
||||
<Typography color="error.main">
|
||||
{getErrorMessage(fetchError)}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{getErrorMessage(saveError) && (
|
||||
<Typography color="error.main" variant="body2" mb={2}>
|
||||
{getErrorMessage(saveError)}
|
||||
</Typography>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 4,
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
{isEditing ? (
|
||||
<ThemeToggleButton
|
||||
value={draftSettings.theme}
|
||||
onChange={(newTheme) => {
|
||||
setDraftSettings((prev) => ({
|
||||
...prev,
|
||||
theme: newTheme,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Icon
|
||||
Component={savedSettings.theme === 'light' ? Sun1 : Moon}
|
||||
size="medium"
|
||||
variant="Bold"
|
||||
/>
|
||||
<Typography variant="body1">
|
||||
{t(`settings.${savedSettings.theme}`)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={languageOptions}
|
||||
getOptionLabel={(o) => o.label}
|
||||
value={languageOptions.find(
|
||||
(o) => o.code === draftSettings.language,
|
||||
)}
|
||||
onChange={(_, v) =>
|
||||
v &&
|
||||
setDraftSettings((prev) => ({
|
||||
...prev,
|
||||
language: v.code,
|
||||
}))
|
||||
}
|
||||
renderInput={(p) => <TextField {...p} />}
|
||||
size="small"
|
||||
fullWidth
|
||||
disableClearable
|
||||
/>
|
||||
) : (
|
||||
<Typography variant="body1">
|
||||
{
|
||||
languageOptions.find(
|
||||
(o) => o.code === savedSettings.language,
|
||||
)?.label
|
||||
}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ mt: 2, width: { xs: '100%', sm: 'calc(50% - 16px)' } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendarOptions.map((c) => c.key)}
|
||||
getOptionLabel={(key) => t(`settings.${key}`)}
|
||||
value={draftSettings.calendar}
|
||||
onChange={(_, v) =>
|
||||
v && setDraftSettings((prev) => ({ ...prev, calendar: v }))
|
||||
}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
size="small"
|
||||
fullWidth
|
||||
disableClearable
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Icon Component={Calendar1} size="medium" variant="Bold" />
|
||||
<Typography variant="body1">
|
||||
{t(`settings.${savedSettings.calendar}`)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</CardContainer>
|
||||
</PageWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user