gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor date validation to use shared state and cleanup

Browse Source
This commit is contained in:
rstubryan
2026-02-25 15:56:12 +07:00
parent 0af7b172a0
commit a75d84556a
8 changed files with 371 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+76 -13
View File
@@ -80,6 +80,10 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
// ===== FILTER STATE =====
const [filterParams, setFilterParams] = useState<FilterParams>({});
// ===== DATE ERROR STATE =====
const [dateErrorShown, setDateErrorShown] = useState(false);
const [hasDateError, setHasDateError] = useState(false);
const filterModal = useModal();
// ===== OPTIONS =====
@@ -448,6 +452,23 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
};
}, [tabId, clearTabActions]);
useEffectHook(() => {
return () => {
if (dateErrorShown) {
toast.dismiss();
}
};
}, [dateErrorShown]);
useEffectHook(() => {
return () => {
if (dateErrorShown) {
toast.dismiss();
setDateErrorShown(false);
}
};
}, [filterModal.open, dateErrorShown]);
const getTableColumns = (): ColumnDef<DailyMarketingRow>[] => {
const tableColumns: ColumnDef<DailyMarketingRow>[] = [
{
@@ -791,34 +812,76 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
placeholder='Pilih Tanggal Awal'
value={formik.values.start_date || ''}
onChange={(e) => {
formik.setFieldValue('start_date', e.target.value || null);
const value = e.target.value;
formik.setFieldValue('start_date', value || null);
if (value && formik.values.end_date) {
const startDate = new Date(value);
const endDateObj = new Date(formik.values.end_date);
if (endDateObj < startDate) {
setHasDateError(true);
if (!dateErrorShown) {
toast.error('Tanggal akhir tidak boleh masa lampau', {
duration: Infinity,
});
setDateErrorShown(true);
}
} else {
setHasDateError(false);
if (dateErrorShown) {
toast.dismiss();
setDateErrorShown(false);
}
}
} else {
setHasDateError(false);
}
}}
className={{ wrapper: 'w-full' }}
errorMessage={formik.errors.start_date}
isError={
!!formik.errors.start_date && formik.touched.start_date
}
/>
{formik.errors.start_date && formik.touched.start_date && (
<div className='text-error text-xs mt-1'>
{formik.errors.start_date}
</div>
)}
<DateInput
name='end_date'
label='Tanggal Akhir'
placeholder='Pilih Tanggal Akhir'
value={formik.values.end_date || ''}
onChange={(e) => {
formik.setFieldValue('end_date', e.target.value || null);
const value = e.target.value;
formik.setFieldValue('end_date', value || null);
if (value && formik.values.start_date) {
const startDateObj = new Date(formik.values.start_date);
const endDate = new Date(value);
if (endDate < startDateObj) {
setHasDateError(true);
if (!dateErrorShown) {
toast.error('Tanggal akhir tidak boleh masa lampau', {
duration: Infinity,
});
setDateErrorShown(true);
}
return;
}
}
setHasDateError(false);
if (dateErrorShown) {
toast.dismiss();
setDateErrorShown(false);
}
}}
className={{ wrapper: 'w-full' }}
isError={!!formik.errors.end_date && formik.touched.end_date}
errorMessage={formik.errors.end_date}
isError={
(formik.errors.end_date && formik.touched.end_date) ||
hasDateError
}
/>
{formik.errors.end_date && formik.touched.end_date && (
<div className='text-error text-xs mt-1'>
{formik.errors.end_date}
</div>
)}
</div>
</div>