feat: Wire up tabs to read from formik state

theopensystemslab · Aug 29, 2024 · fa1364f · fa1364f
1 parent f998161
commit fa1364f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -118,7 +118,6 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const editItem = (index: number) => {
-    setActiveItemInitialState(formik.values.schemaData[index]);
     setActiveIndex(index);
   };
 
@@ -128,6 +127,8 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     formik.setFieldValue(`schemaData[${activeIndex}]`, activeItemInitialState);
 
   const addFeature = () => {
+    resetErrors();
+
     const currentFeatures = formik.values.schemaData;
     const updatedFeatures = [...currentFeatures, initialValues];
     formik.setFieldValue("schemaData", updatedFeatures);

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -39,14 +39,7 @@ function a11yProps(index: number) {
 const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
   features,
 }) => {
-  const { schema, activeIndex, formik } = useMapAndLabelContext();
-  const [activeTab, setActiveTab] = useState<string>(
-    features[features.length - 1].properties?.label || "",
-  );
-
-  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
-    setActiveTab(newValue);
-  };
+  const { schema, activeIndex, formik, editItem } = useMapAndLabelContext();
 
   return (
     <Box
@@ -57,19 +50,22 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
         maxHeight: "fit-content",
       }}
     >
-      <TabContext value={activeTab}>
+      <TabContext value={activeIndex.toString()}>
         <Tabs
           orientation="vertical"
           variant="scrollable"
-          value={activeTab}
-          onChange={handleChange}
+          value={activeIndex.toString()}
+          onChange={(_e, newValue) => {
+            editItem(parseInt(newValue, 10));
+          }}
+          // TODO!
           aria-label="Vertical tabs example"
           sx={{ borderRight: 1, borderColor: "divider" }}
         >
           {features.map((feature, i) => (
             <Tab
               key={`tab-${i}`}
-              value={feature.properties?.label}
+              value={i.toString()}
               label={`${schema.type} ${feature.properties?.label}`}
               {...a11yProps(i)}
             />
@@ -78,7 +74,7 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
         {features.map((feature, i) => (
           <TabPanel
             key={`tabpanel-${i}`}
-            value={feature.properties?.label}
+            value={i.toString()}
             sx={{ width: "100%" }}
           >
             <Typography component="h2" variant="h3">