Skip to content

fix: changed checkboxes to toggles on notifications settings page #6175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 1 commit into from
Dec 9, 2024
Merged

fix: changed checkboxes to toggles on notifications settings page #6175

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 58 additions & 37 deletions web/core/components/profile/notification/email-notification-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { FC, useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { IUserEmailNotificationSettings } from "@plane/types";
// ui
import { Button, Checkbox, TOAST_TYPE, setToast } from "@plane/ui";
import { ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
// services
import { UserService } from "@/services/user.service";
// types
Expand All @@ -20,35 +20,32 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
const { data } = props;
// form data
const {
handleSubmit,
control,
reset,
formState: { isSubmitting, dirtyFields },
} = useForm<IUserEmailNotificationSettings>({
defaultValues: {
...data,
},
});

const onSubmit = async (formData: IUserEmailNotificationSettings) => {
// Get the dirty fields from the form data and create a payload
let payload = {};
Object.keys(dirtyFields).forEach((key) => {
payload = {
...payload,
[key]: formData[key as keyof IUserEmailNotificationSettings],
};
});
await userService
.updateCurrentUserEmailNotificationSettings(payload)
.then(() =>
setToast({
title: "Success!",
type: TOAST_TYPE.SUCCESS,
message: "Email Notification Settings updated successfully",
})
)
.catch((err) => console.error(err));
const handleSettingChange = async (key: keyof IUserEmailNotificationSettings, value: boolean) => {
try {
await userService.updateCurrentUserEmailNotificationSettings({
[key]: value,
});
setToast({
title: "Success!",
type: TOAST_TYPE.SUCCESS,
message: "Email notification setting updated successfully",
});
} catch (err) {
console.error(err);
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: "Failed to update email notification setting",
});
}
};

useEffect(() => {
Expand All @@ -64,15 +61,22 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
<div className="grow">
<div className="pb-1 text-base font-medium text-custom-text-100">Property changes</div>
<div className="text-sm font-normal text-custom-text-300">
Notify me when issue’s properties like assignees, priority, estimates or anything else changes.
Notify me when issue's properties like assignees, priority, estimates or anything else changes.
</div>
</div>
<div className="shrink-0">
<Controller
control={control}
name="property_change"
render={({ field: { value, onChange } }) => (
<Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
<ToggleSwitch
value={value}
onChange={(newValue) => {
onChange(newValue);
handleSettingChange("property_change", newValue);
}}
size="sm"
/>
Comment on lines +72 to +79
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider extracting toggle switch implementation to reduce duplication

The toggle switch implementation is repeated across multiple settings. Consider creating a reusable component to reduce code duplication.

Here's a suggested approach:

interface NotificationToggleProps {
  name: keyof IUserEmailNotificationSettings;
  control: Control<IUserEmailNotificationSettings>;
  onSettingChange: (key: keyof IUserEmailNotificationSettings, value: boolean) => Promise<void>;
}

const NotificationToggle: FC<NotificationToggleProps> = ({ name, control, onSettingChange }) => (
  <Controller
    control={control}
    name={name}
    render={({ field: { value, onChange } }) => (
      <ToggleSwitch
        value={value}
        onChange={(newValue) => {
          onChange(newValue);
          onSettingChange(name, newValue);
        }}
        size="sm"
      />
    )}
  />
);

Then use it like this:

-<Controller
-  control={control}
-  name="property_change"
-  render={({ field: { value, onChange } }) => (
-    <ToggleSwitch
-      value={value}
-      onChange={(newValue) => {
-        onChange(newValue);
-        handleSettingChange("property_change", newValue);
-      }}
-      size="sm"
-    />
-  )}
-/>
+<NotificationToggle
+  name="property_change"
+  control={control}
+  onSettingChange={handleSettingChange}
+/>

Also applies to: 96-102, 118-125, 142-149, 166-173

)}
/>
</div>
Expand All @@ -89,12 +93,13 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control}
name="state_change"
render={({ field: { value, onChange } }) => (
<Checkbox
checked={value}
onChange={() => {
onChange(!value);
<ToggleSwitch
value={value}
onChange={(newValue) => {
onChange(newValue);
handleSettingChange("state_change", newValue);
}}
containerClassName="mx-2"
size="sm"
/>
)}
/>
Expand All @@ -110,7 +115,14 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control}
name="issue_completed"
render={({ field: { value, onChange } }) => (
<Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
<ToggleSwitch
value={value}
onChange={(newValue) => {
onChange(newValue);
handleSettingChange("issue_completed", newValue);
}}
size="sm"
/>
)}
/>
</div>
Expand All @@ -127,7 +139,14 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control}
name="comment"
render={({ field: { value, onChange } }) => (
<Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
<ToggleSwitch
value={value}
onChange={(newValue) => {
onChange(newValue);
handleSettingChange("comment", newValue);
}}
size="sm"
/>
)}
/>
</div>
Expand All @@ -144,17 +163,19 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control}
name="mention"
render={({ field: { value, onChange } }) => (
<Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
<ToggleSwitch
value={value}
onChange={(newValue) => {
onChange(newValue);
handleSettingChange("mention", newValue);
}}
size="sm"
/>
)}
/>
</div>
</div>
</div>
<div className="flex items-center py-12">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</>
);
};