108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
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 <AlertComponent type="error" message={error.message} />;
|
|
if (loading) return <LoadingSpinner />;
|
|
|
|
return (
|
|
<Form
|
|
form={form}
|
|
onFinish={handleSave}
|
|
onValuesChange={handleFormChange}
|
|
initialValues={initialValues}
|
|
autoComplete="off"
|
|
layout="vertical"
|
|
>
|
|
<Card
|
|
title={t("notifications.labels.notificationscenarios")}
|
|
extra={
|
|
<>
|
|
<Button type="default" onClick={handleReset} disabled={!isDirty} style={{ marginRight: 8 }}>
|
|
{t("general.actions.clear")}
|
|
</Button>
|
|
<Button type="primary" htmlType="submit" disabled={!isDirty} loading={saving}>
|
|
{t("notifications.labels.save")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<Row gutter={[16, 16]}>
|
|
{notificationScenarios.map((scenario) => (
|
|
<Col xs={24} sm={12} md={8} key={scenario}>
|
|
<Form.Item name={scenario} label={t(`notifications.scenarios.${scenario}`)} valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
</Card>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
// Redux connection
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser
|
|
});
|
|
|
|
export default connect(mapStateToProps)(NotificationSettingsForm);
|