diff --git a/client/src/components/profile-my/notification-settings.component.jsx b/client/src/components/profile-my/notification-settings.component.jsx new file mode 100644 index 000000000..e501549c4 --- /dev/null +++ b/client/src/components/profile-my/notification-settings.component.jsx @@ -0,0 +1,107 @@ +import { useQuery, useMutation } from "@apollo/client"; +import React, { useEffect, useState } from "react"; +import { Button, Card, Form, Switch, Row, Col, Spin } from "antd"; +import { useTranslation } from "react-i18next"; + +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { selectCurrentUser } from "../../redux/user/user.selectors"; +import AlertComponent from "../alert/alert.component"; +import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js"; +import notificationScenarios from "../../utils/jobNotificationScenarios.js"; +import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx"; + +function NotificationSettingsForm({ currentUser }) { + const { t } = useTranslation(); + const [form] = Form.useForm(); + const [initialValues, setInitialValues] = useState({}); + const [isDirty, setIsDirty] = useState(false); + + // Fetch notification settings + const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, { + fetchPolicy: "network-only", + nextFetchPolicy: "network-only", + variables: { email: currentUser.email }, + skip: !currentUser + }); + + const [updateNotificationSettings, { loading: saving }] = useMutation(UPDATE_NOTIFICATION_SETTINGS); + + // Populate form with fetched data + useEffect(() => { + if (data?.associations?.length > 0) { + const settings = data.associations[0].notification_settings || {}; + const formattedValues = notificationScenarios.reduce((acc, scenario) => { + acc[scenario] = settings[scenario] ?? false; + return acc; + }, {}); + + setInitialValues(formattedValues); + form.setFieldsValue(formattedValues); + setIsDirty(false); // Reset dirty state when new data loads + } + }, [data, form]); + + const handleSave = async (values) => { + if (data?.associations?.length > 0) { + const userId = data.associations[0].id; + await updateNotificationSettings({ variables: { id: userId, ns: values } }); + setInitialValues(values); + setIsDirty(false); + } + }; + + const handleFormChange = () => { + setIsDirty(true); + }; + + const handleReset = () => { + form.setFieldsValue(initialValues); + setIsDirty(false); + }; + + if (error) return ; + if (loading) return ; + + return ( +
+ + + + + } + > + + {notificationScenarios.map((scenario) => ( + + + + + + ))} + + +
+ ); +} + +// Redux connection +const mapStateToProps = createStructuredSelector({ + currentUser: selectCurrentUser +}); + +export default connect(mapStateToProps)(NotificationSettingsForm); diff --git a/client/src/components/profile-my/profile-my.component.jsx b/client/src/components/profile-my/profile-my.component.jsx index f53646bee..7e8ce078c 100644 --- a/client/src/components/profile-my/profile-my.component.jsx +++ b/client/src/components/profile-my/profile-my.component.jsx @@ -9,6 +9,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors"; import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils"; import LayoutFormRow from "../layout-form-row/layout-form-row.component"; import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; +import NotificationSettingsForm from "./notification-settings.component.jsx"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser @@ -46,6 +47,8 @@ export default connect( } }; + const handleScenarios = async ({ values }) => {}; + return ( <> @@ -78,6 +81,10 @@ export default connect( + + + +