Skip to content

Commit 9ce55e5

Browse files
x0sinax0sina
committed
chore(ui): map on notifications keys instead of direct rendering
1 parent 34eaf1f commit 9ce55e5

File tree

1 file changed

+31
-131
lines changed

1 file changed

+31
-131
lines changed

‎dashboard/src/pages/_dashboard.settings.notifications.tsx‎

Lines changed: 31 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,20 @@ const notificationSettingsSchema = z.object({
4747

4848
type NotificationSettingsForm = z.infer<typeof notificationSettingsSchema>
4949

50+
const notificationTypes = [
51+
{ key: 'admin', translationKey: 'admin' },
52+
{ key: 'core', translationKey: 'core' },
53+
{ key: 'group', translationKey: 'group' },
54+
{ key: 'host', translationKey: 'host' },
55+
{ key: 'login', translationKey: 'login' },
56+
{ key: 'node', translationKey: 'node' },
57+
{ key: 'user_template', translationKey: 'userTemplate' },
58+
{ key: 'user', translationKey: 'user' },
59+
{ key: 'days_left', translationKey: 'daysLeft' },
60+
{ key: 'percentage_reached', translationKey: 'percentageReached' },
61+
] as const
62+
63+
5064
export default function NotificationSettings() {
5165
const { t } = useTranslation()
5266

@@ -129,8 +143,8 @@ export default function NotificationSettings() {
129143
...((data.notification_settings?.notify_telegram || data.notification_settings?.notify_discord) &&
130144
data.notification_settings?.proxy_url &&
131145
data.notification_settings.proxy_url.trim() !== '' && {
132-
proxy_url: data.notification_settings.proxy_url.trim(),
133-
}),
146+
proxy_url: data.notification_settings.proxy_url.trim(),
147+
}),
134148
},
135149
}
136150

@@ -192,135 +206,21 @@ export default function NotificationSettings() {
192206

193207
{/* Mobile: 1 column, Tablet: 2 columns, Desktop: 3-5 columns */}
194208
<div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4 2xl:grid-cols-5">
195-
<FormField
196-
control={form.control}
197-
name="notification_enable.admin"
198-
render={({ field }) => (
199-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
200-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm">{t('settings.notifications.types.admin')}</FormLabel>
201-
<FormControl>
202-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
203-
</FormControl>
204-
</FormItem>
205-
)}
206-
/>
207-
208-
<FormField
209-
control={form.control}
210-
name="notification_enable.core"
211-
render={({ field }) => (
212-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
213-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.core')}</FormLabel>
214-
<FormControl>
215-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
216-
</FormControl>
217-
</FormItem>
218-
)}
219-
/>
220-
221-
<FormField
222-
control={form.control}
223-
name="notification_enable.group"
224-
render={({ field }) => (
225-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
226-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.group')}</FormLabel>
227-
<FormControl>
228-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
229-
</FormControl>
230-
</FormItem>
231-
)}
232-
/>
233-
234-
<FormField
235-
control={form.control}
236-
name="notification_enable.host"
237-
render={({ field }) => (
238-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
239-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.host')}</FormLabel>
240-
<FormControl>
241-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
242-
</FormControl>
243-
</FormItem>
244-
)}
245-
/>
246-
247-
<FormField
248-
control={form.control}
249-
name="notification_enable.login"
250-
render={({ field }) => (
251-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
252-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.login')}</FormLabel>
253-
<FormControl>
254-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
255-
</FormControl>
256-
</FormItem>
257-
)}
258-
/>
259-
260-
<FormField
261-
control={form.control}
262-
name="notification_enable.node"
263-
render={({ field }) => (
264-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
265-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.node')}</FormLabel>
266-
<FormControl>
267-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
268-
</FormControl>
269-
</FormItem>
270-
)}
271-
/>
272-
273-
<FormField
274-
control={form.control}
275-
name="notification_enable.user_template"
276-
render={({ field }) => (
277-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
278-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.userTemplate')}</FormLabel>
279-
<FormControl>
280-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
281-
</FormControl>
282-
</FormItem>
283-
)}
284-
/>
285-
286-
<FormField
287-
control={form.control}
288-
name="notification_enable.user"
289-
render={({ field }) => (
290-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
291-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.user')}</FormLabel>
292-
<FormControl>
293-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
294-
</FormControl>
295-
</FormItem>
296-
)}
297-
/>
298-
299-
<FormField
300-
control={form.control}
301-
name="notification_enable.days_left"
302-
render={({ field }) => (
303-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
304-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.daysLeft')}</FormLabel>
305-
<FormControl>
306-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
307-
</FormControl>
308-
</FormItem>
309-
)}
310-
/>
311-
312-
<FormField
313-
control={form.control}
314-
name="notification_enable.percentage_reached"
315-
render={({ field }) => (
316-
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
317-
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t('settings.notifications.types.percentageReached')}</FormLabel>
318-
<FormControl>
319-
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
320-
</FormControl>
321-
</FormItem>
322-
)}
323-
/>
209+
{notificationTypes.map(type => (
210+
<FormField
211+
key={type.key}
212+
control={form.control}
213+
name={`notification_enable.${type.key}` as any}
214+
render={({ field }) => (
215+
<FormItem className="flex items-center justify-between space-y-0 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50 sm:p-4">
216+
<FormLabel className="cursor-pointer truncate pr-2 text-xs font-medium sm:text-sm xl:text-base">{t(`settings.notifications.types.${type.translationKey}`)}</FormLabel>
217+
<FormControl>
218+
<Switch checked={field.value || false} onCheckedChange={field.onChange} />
219+
</FormControl>
220+
</FormItem>
221+
)}
222+
/>
223+
))}
324224
</div>
325225
</div>
326226

0 commit comments

Comments
 (0)