feat: Fetch team_settings data for Editor forms and adding Update fn (

#3366)
theopensystemslab · Jul 3, 2024 · 2d5ad70 · 2d5ad70
1 parent 712819f
commit 2d5ad70
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 34 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
@@ -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
@@ -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";
@@ -13,16 +14,26 @@ 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({
     ...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,
+        homepage: values.homepage,
+      });
+      if (isSuccess) {
+        onSuccess();
+        resetForm({ values });
+      }
     },
   });
 
@@ -41,18 +52,20 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
       }
       input={
         <>
-          <InputLabel label="Homepage URL" htmlFor="homepageUrl">
+          <InputLabel label="Homepage URL" htmlFor="homepage">
             <Input
               name="homepage"
               onChange={(event) => {
                 onChangeFn("homepage", event);
               }}
-              id="homepageUrl"
+              value={formik.values.homepage}
+              id="homepage"
             />
           </InputLabel>
           <InputLabel label="Contact email address" htmlFor="helpEmail">
             <Input
               name="helpEmail"
+              value={formik.values.helpEmail}
               onChange={(event) => {
                 onChangeFn("helpEmail", event);
               }}
@@ -62,6 +75,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
           <InputLabel label="Phone number" htmlFor="helpPhone">
             <Input
               name="helpPhone"
+              value={formik.values.helpPhone}
               onChange={(event) => {
                 onChangeFn("helpPhone", event);
               }}
@@ -72,6 +86,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
             <Input
               multiline
               name="helpOpeningHours"
+              value={formik.values.helpOpeningHours}
               onChange={(event) => {
                 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
@@ -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<GeneralSettings>;
+  formikConfig: FormikConfig<TeamSettings>;
   onSuccess: () => void;
 }
 
 const GeneralSettings: React.FC = () => {
   const [formikConfig, setFormikConfig] = useState<
-    FormikConfig<GeneralSettings> | undefined
+    FormikConfig<TeamSettings> | 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/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx
@@ -40,6 +40,7 @@ export const SettingsForm = <TFormikValues,>({
             {preview}
           </Box>
         )}
+
         <ErrorWrapper
           error={Object.values(formik.errors).join(", ")}
           id="settings-error"

diff --git 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<Team>;
   updateTeamTheme: (theme: Partial<TeamTheme>) => Promise<boolean>;
+  updateTeamSettings: (teamSettings: Partial<TeamSettings>) => Promise<boolean>;
 }
 
 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<TeamSettings>) => {
+    const { teamId, $client } = get();
+    const isSuccess = await $client.team.updateTeamSettings(
+      teamId,
+      teamSettings,
+    );
+    return isSuccess;
+  },
 });
diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx
@@ -37,6 +37,11 @@ const teamSettingsRoutes = compose(
           <Settings
             currentTab={req.params.tab}
             tabs={[
+              {
+                name: "General",
+                route: "general",
+                Component: GeneralSettings,
+              },
               {
                 name: "Team",
                 route: "team",
@@ -47,11 +52,6 @@ const teamSettingsRoutes = compose(
                 route: "design",
                 Component: DesignSettings,
               },
-              // {
-              //   name: "General",
-              //   route: "general",
-              //   Component: GeneralSettings,
-              // },
             ]}
           />
         ),