Check dynamically if values are mandatory and then check if the mandatory values are null-CodePudding

I have this object state which I have intialized it as initialSegement

const [segments, setSegements] = useState<ISegment[]>([initialSegment]);

intialSegement: {
id: 0,
startDate: '',
endDate: '',
startTime:'',
endTime
}

export interface ISegment {
  id: number;
  startDate?: string;
  endDate?: string;
  startTime: string;
  endTime?: string;
}

I have created this component when I set the state of every field startDate, endDate etc and all is working fine there.

I want to create this function called validateSegement which will be boolean. If this function returns true, then the button to add a segment will be enabled.

I have created this function, but unfortunately is not dynamic.

const valiDateSegment= (): boolean => {
    let isValid = true;
    for (const segement of segments) {
      const { startDate, startTime , endDate, endTime} = segment,
      if (!startDate || !startTime || !endDate || !endTime) {
        isValid = false;
        break;
      }
    }
    return isValid === true;
  };

The issue is that these fields are configured dynamically by the user if they're mandatory or not. So I want to find a way of doing this by first checking if fields are mandatory and second checking if the mandatory fields are empty or not.

I can find out if the fields are mandatory from a response from the backend, which for this case I will suppose the response is like this:

    configurations: {
    startDate: {
    mandatory: true,
    text: 'test'
    }, 
    endDate: {
    mandatory: false,
    text: 'test'
    }, 
    startTime: {
    mandatory: true,
    text: 'test'
    }, 
    endtime: {
    mandatory: true,
    text: 'test'
    }
  }

CodePudding user response：

type Segment = {
  id: string;
  startDate?: string;
  endDate?: string;
  startTime?: string;
  endTime?: string;
}

type MaybeOptionalField = keyof Omit<Segment, "id">

const configurations: Record<MaybeOptionalField, {mandatory: boolean, text: string}> = {
  startDate: {
    mandatory: true,
    text: "test"
  },
  endDate: {
    mandatory: false,
    text: "test"
  },
  startTime: {
    mandatory: false,
    text: "test"
  },
  endTime: {
    mandatory: false,
    text: "test"
  }
};

const segments: Segment[] = [{
    id: 'foo',
    startDate: "now",
}, {
    id: 'bar',
}]

// figure out which fields are currently required
const mandatoryFields = Object.entries(configurations)
    .filter(([_, configuration]) => configuration.mandatory)
    // Object.entries treats 'key' to always be type any string, but we'd like to maintain the keys as being of type MaybeOptionalField
    // which keeps `segment[mandatoryField]` as being valid, one could instead push the type assertion into the for loop below
    .map(([key]) => key as MaybeOptionalField)

const validateSegment = (segment: Segment) => {
  for (const mandatoryField of mandatoryFields) {
    if (!segment[mandatoryField]) {
      return false
    }
  }
  return true
};

const validSegments = segments.filter(segment => validateSegment(segment))
const invalidSegments = segments.filter(segment => !validateSegment(segment))

console.log(validSegments, validSegments.length)
console.log(invalidSegments, invalidSegments.length)