New segment constraint fix (#26)

* Added a condition with the isNew flag in the handleChange event for the Name input field

* Removed selectedMatchType state variable, and converted the initialValue to be what the state used to be, and use formik's setFieldValue to update the matchType value. The error was being caused by the initialValue for matchType being a state variable and it would reset the form if it changed when creating a segment

Co-authored-by: Darin McLain <[email protected]>
Co-authored-by: Mark Phelps <[email protected]>

src/components/segments/SegmentForm.tsx

@@ -1,5 +1,4 @@
 import { Form, Formik } from 'formik';
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as Yup from 'yup';
 import Button from '~/components/forms/Button';
@@ -34,12 +33,7 @@ export default function SegmentForm(props: SegmentFormProps) {
   const navigate = useNavigate();
   const { setError, clearError } = useError();
 
-  const [selectedMatchType, setSelectedMatchType] = useState(
-    segment?.matchType || ('ALL_MATCH_TYPE' as SegmentMatchType)
-  );
-
   const handleSubmit = (values: ISegmentBase) => {
-    values.matchType = selectedMatchType;
     if (isNew) {
       return createSegment(values);
     }
@@ -50,7 +44,7 @@ export default function SegmentForm(props: SegmentFormProps) {
     key: segment?.key || '',
     name: segment?.name || '',
     description: segment?.description || '',
-    matchType: selectedMatchType
+    matchType: segment?.matchType || ('ALL_MATCH_TYPE' as SegmentMatchType)
   };
 
   return (
@@ -105,7 +99,6 @@ export default function SegmentForm(props: SegmentFormProps) {
                     ) {
                       formik.setFieldValue('key', stringAsKey(e.target.value));
                     }
-                    formik.handleChange(e);
                   }}
                 />
               </div>
@@ -149,13 +142,13 @@ export default function SegmentForm(props: SegmentFormProps) {
                             name="matchType"
                             type="radio"
                             className="h-4 w-4 border-gray-300 text-violet-400 focus:ring-violet-400"
-                            onChange={(e) => {
-                              formik.handleChange(e);
-                              setSelectedMatchType(
+                            onChange={() => {
+                              formik.setFieldValue(
+                                'matchType',
                                 matchType.id as SegmentMatchType
                               );
                             }}
-                            checked={matchType.id === selectedMatchType}
+                            checked={matchType.id === formik.values.matchType}
                             value={matchType.id}
                           />
                         </div>