From 3be2b8b796a3638fd4d0a7115cb72d6b7c40213b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 10:52:08 +0100 Subject: [PATCH 1/8] add update fn to store and forms --- .../Settings/GeneralSettings/BoundaryForm.tsx | 12 +++++++++--- .../Settings/GeneralSettings/ContactForm.tsx | 14 +++++++++++--- .../src/pages/FlowEditor/lib/store/team.ts | 10 ++++++++++ 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx index dbd93e3f0b..a33aa3d16c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -1,4 +1,5 @@ import { useFormik } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; import Input from "ui/shared/Input"; @@ -9,9 +10,14 @@ import { FormProps } from "."; export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { const formik = useFormik({ ...formikConfig, - onSubmit(values, { resetForm }) { - onSuccess(); - resetForm({ values }); + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateTeamSettings({ + boundaryUrl: values.boundaryUrl, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } }, }); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index 5b8c8c4047..6639e0aeee 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -1,4 +1,5 @@ import { useFormik } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; import Input from "ui/shared/Input"; @@ -20,9 +21,16 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { const formik = useFormik({ ...formikConfig, validationSchema: formSchema, - onSubmit(values, { resetForm }) { - onSuccess(); - resetForm({ values }); + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateTeamSettings({ + helpEmail: values.helpEmail, + helpOpeningHours: values.helpOpeningHours, + helpPhone: values.helpPhone, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } }, }); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts index 884b4e5cb9..7494fdf292 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts @@ -25,6 +25,7 @@ export interface TeamStore { clearTeamStore: () => void; fetchCurrentTeam: () => Promise; updateTeamTheme: (theme: Partial) => Promise; + updateTeamSettings: (teamSettings: Partial) => Promise; } export const teamStore: StateCreator< @@ -128,4 +129,13 @@ export const teamStore: StateCreator< const isSuccess = await $client.team.updateTheme(teamId, theme); return isSuccess; }, + + updateTeamSettings: async (teamSettings: Partial) => { + const { teamId, $client } = get(); + const isSuccess = await $client.team.updateTeamSettings( + teamId, + teamSettings, + ); + return isSuccess; + }, }); From 8d103fdf6e590facb8a2a88d54e820bac7468891 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 10:57:34 +0100 Subject: [PATCH 2/8] add fetch values to forms --- .../Settings/GeneralSettings/ContactForm.tsx | 4 +++ .../Settings/GeneralSettings/index.tsx | 27 ++++++------------- editor.planx.uk/src/routes/teamSettings.tsx | 10 +++---- 3 files changed, 17 insertions(+), 24 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index 6639e0aeee..5d6a340460 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -55,12 +55,14 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { onChange={(event) => { onChangeFn("homepage", event); }} + value={formik.values.homepage} id="homepageUrl" /> { onChangeFn("helpEmail", event); }} @@ -70,6 +72,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpPhone", event); }} @@ -80,6 +83,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpOpeningHours", event); }} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx index a2fec53d73..b2ee94db39 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx @@ -2,44 +2,33 @@ import Alert from "@mui/material/Alert"; import Box from "@mui/material/Box"; import Snackbar from "@mui/material/Snackbar"; import Typography from "@mui/material/Typography"; +import { TeamSettings } from "@opensystemslab/planx-core/types"; import { FormikConfig } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { useEffect, useState } from "react"; import SettingsSection from "ui/editor/SettingsSection"; import BoundaryForm from "./BoundaryForm"; import ContactForm from "./ContactForm"; -export interface GeneralSettings { - boundaryUrl: string; - helpEmail: string; - helpPhone: string; - helpOpeningHours: string; - homepage: string; -} - export interface FormProps { - formikConfig: FormikConfig; + formikConfig: FormikConfig; onSuccess: () => void; } const GeneralSettings: React.FC = () => { const [formikConfig, setFormikConfig] = useState< - FormikConfig | undefined + FormikConfig | undefined >(undefined); - const initialValues = { - boundaryUrl: "", - helpEmail: "", - helpPhone: "", - helpOpeningHours: "", - homepage: "", - }; - useEffect(() => { const fetchTeam = async () => { try { + const fetchedTeam = await useStore.getState().fetchCurrentTeam(); + if (!fetchedTeam) throw Error("Unable to find team"); + setFormikConfig({ - initialValues: initialValues, + initialValues: fetchedTeam.teamSettings, onSubmit: () => {}, validateOnBlur: false, validateOnChange: false, diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index 27fcb11715..587160a6ea 100644 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ b/editor.planx.uk/src/routes/teamSettings.tsx @@ -47,11 +47,11 @@ const teamSettingsRoutes = compose( route: "design", Component: DesignSettings, }, - // { - // name: "General", - // route: "general", - // Component: GeneralSettings, - // }, + { + name: "General", + route: "general", + Component: GeneralSettings, + }, ]} /> ), From 1db71cd7388b6f08c73215861e1ad7cf015cf454 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 14:19:56 +0100 Subject: [PATCH 3/8] add homepage to formik and reorder setting order --- .../Settings/GeneralSettings/ContactForm.tsx | 1 + editor.planx.uk/src/routes/teamSettings.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index 5d6a340460..ee121dfbce 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -26,6 +26,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { helpEmail: values.helpEmail, helpOpeningHours: values.helpOpeningHours, helpPhone: values.helpPhone, + homepage: values.homepage, }); if (isSuccess) { onSuccess(); diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index 587160a6ea..75f14a89b7 100644 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ b/editor.planx.uk/src/routes/teamSettings.tsx @@ -37,6 +37,11 @@ const teamSettingsRoutes = compose( ), From 4a5a0eb58ece5b5a57532581007dac83e48bcc9a Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 14:27:51 +0100 Subject: [PATCH 4/8] basic validation for boundary url field --- .../components/Settings/GeneralSettings/BoundaryForm.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx index a33aa3d16c..98320fd22e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -2,14 +2,22 @@ import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; +import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; +import * as Yup from "yup"; import { SettingsForm } from "../shared/SettingsForm"; import { FormProps } from "."; export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { + const formSchema = Yup.object().shape({ + boundaryUrl: Yup.string() + .url("URL's must look like the example given above") + .required("Enter a boundary URL"), + }); const formik = useFormik({ ...formikConfig, + validationSchema: formSchema, onSubmit: async (values, { resetForm }) => { const isSuccess = await useStore.getState().updateTeamSettings({ boundaryUrl: values.boundaryUrl, From feba3e2d41bfdac015e42c89fe70284773cf47a2 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 14:54:12 +0100 Subject: [PATCH 5/8] add input based error wrapping to settingsForm and team settings forms --- .../Settings/GeneralSettings/BoundaryForm.tsx | 26 ++++++++------ .../Settings/GeneralSettings/ContactForm.tsx | 35 +++++++++++------- .../Settings/shared/SettingsForm.tsx | 36 ++++++++++++++++--- 3 files changed, 70 insertions(+), 27 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx index 98320fd22e..1670d9e021 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -33,6 +33,7 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {

@@ -53,16 +54,21 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { } input={ - - ) => { - formik.setFieldValue("boundaryUrl", ev.target.value); - }} - id="boundaryUrl" - /> - + + + ) => { + formik.setFieldValue("boundaryUrl", ev.target.value); + }} + id="boundaryUrl" + /> + + } /> ); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index ee121dfbce..2563d24d6c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -2,6 +2,7 @@ import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; +import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; import * as Yup from "yup"; @@ -14,8 +15,10 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { .email("Please enter valid email") .required("Help Email is required"), helpPhone: Yup.string().required("Help Phone is required"), - helpOpeningHours: Yup.string(), - homepage: Yup.string().url("Please enter a valid URL for the homepage"), + helpOpeningHours: Yup.string().required(), + homepage: Yup.string() + .url("Please enter a valid URL for the homepage") + .required("Enter a homepage"), }); const formik = useFormik({ @@ -38,10 +41,13 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { const onChangeFn = (type: string, event: ChangeEvent) => formik.setFieldValue(type, event.target.value); + console.log(formik.errors); + return ( Details to help direct different messages, feedback, and enquiries @@ -50,16 +56,21 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { } input={ <> - - { - onChangeFn("homepage", event); - }} - value={formik.values.homepage} - id="homepageUrl" - /> - + + + { + onChangeFn("homepage", event); + }} + value={formik.values.homepage} + id="homepage" + /> + + = { input: React.ReactElement; formik: FormikProps; preview?: React.ReactElement; + isErrors?: boolean; }; export const SettingsForm = ({ @@ -23,7 +24,10 @@ export const SettingsForm = ({ description, input, preview, + isErrors, }: SettingsFormProps) => { + // By default, errors is set to true + isErrors === undefined ? (isErrors = true) : false; return (

@@ -40,10 +44,32 @@ export const SettingsForm = ({ {preview} )} - + {isErrors ? ( + + + + + + + ) : ( - + )} ); From bdac32dda9e82356fda4b112157e727ec1044267 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 14:56:18 +0100 Subject: [PATCH 6/8] remove console log from Contact Form --- .../components/Settings/GeneralSettings/ContactForm.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index 2563d24d6c..13bcb79b5a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -41,8 +41,6 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { const onChangeFn = (type: string, event: ChangeEvent) => formik.setFieldValue(type, event.target.value); - console.log(formik.errors); - return ( Date: Wed, 3 Jul 2024 16:39:56 +0100 Subject: [PATCH 7/8] Revert "basic validation for boundary url field" This reverts commit 4a5a0eb58ece5b5a57532581007dac83e48bcc9a. --- .../components/Settings/GeneralSettings/BoundaryForm.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx index 1670d9e021..c24f1ca9c8 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -2,22 +2,14 @@ import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; -import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; -import * as Yup from "yup"; import { SettingsForm } from "../shared/SettingsForm"; import { FormProps } from "."; export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { - const formSchema = Yup.object().shape({ - boundaryUrl: Yup.string() - .url("URL's must look like the example given above") - .required("Enter a boundary URL"), - }); const formik = useFormik({ ...formikConfig, - validationSchema: formSchema, onSubmit: async (values, { resetForm }) => { const isSuccess = await useStore.getState().updateTeamSettings({ boundaryUrl: values.boundaryUrl, From a4f90f48bb83ffa53cbe6e73b3bc744367143d17 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 16:44:28 +0100 Subject: [PATCH 8/8] revert additions for error handling in settings form --- .../Settings/GeneralSettings/BoundaryForm.tsx | 26 +++++-------- .../Settings/GeneralSettings/ContactForm.tsx | 27 +++++--------- .../Settings/shared/SettingsForm.tsx | 37 +++---------------- 3 files changed, 26 insertions(+), 64 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx index c24f1ca9c8..a33aa3d16c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -25,7 +25,6 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {

@@ -46,21 +45,16 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { } input={ - - - ) => { - formik.setFieldValue("boundaryUrl", ev.target.value); - }} - id="boundaryUrl" - /> - - + + ) => { + formik.setFieldValue("boundaryUrl", ev.target.value); + }} + id="boundaryUrl" + /> + } /> ); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index 13bcb79b5a..906ab6531d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -2,7 +2,6 @@ import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; -import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; import * as Yup from "yup"; @@ -45,7 +44,6 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { Details to help direct different messages, feedback, and enquiries @@ -54,21 +52,16 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { } input={ <> - - - { - onChangeFn("homepage", event); - }} - value={formik.values.homepage} - id="homepage" - /> - - + + { + onChangeFn("homepage", event); + }} + value={formik.values.homepage} + id="homepage" + /> + = { input: React.ReactElement; formik: FormikProps; preview?: React.ReactElement; - isErrors?: boolean; }; export const SettingsForm = ({ @@ -24,10 +23,7 @@ export const SettingsForm = ({ description, input, preview, - isErrors, }: SettingsFormProps) => { - // By default, errors is set to true - isErrors === undefined ? (isErrors = true) : false; return (

@@ -44,32 +40,11 @@ export const SettingsForm = ({ {preview} )} - {isErrors ? ( - - - - - - - ) : ( + + - )} + );