How do I handle this duplicate code that map an object and change the values inside-CodePudding

I have a function that runs over an array of objects to find the object that needed to be modify and modify it.

For example, I have this function:

doSomething(state,payload){
return state.map((item)=>item.name === payload.name ?
 {...item, 
     foo:[...item.foo.map((innerItem)=>
      ({
          ...inerItem,bar:payload.value
      })
   )]
} : item)
}

doSomethingElse(state,payload){
return state.map((item)=>item.name === payload.name ? {...item, bar:payload.value} : item)
}

I think I have here a redundant code but I don't know how to extract the duplicate code to a function and use it there.

I've created code example: https://codesandbox.io/embed/js-playground-forked-tuz2p?fontsize=14&hidenavigation=1&theme=dark

EDIT:

I expect to use one function that called for example changeColor(array, "bike", "frontWheel","red") and changeColor(array, "bike", "backWheel","red") and will use the same code instead of two seperate functions.

const changePrimaryColor = (state, payload) => {
  return state.map((item) =>
    item.name === payload.itemName
      ? {
          ...item,
          colors: [
            ...item.colors.map((color) => ({
              ...color,
              primary: payload.value
            }))
          ]
        }
      : item
  );
};

const changeSecondaryColor = (state, payload) => {
  return state.map((item) =>
    item.name === payload.itemName
      ? {
          ...item,
          colors: [
            ...item.colors.map((color) => ({
              ...color,
              secondary: payload.value
            }))
          ]
        }
      : item
  );
};

const changeFrontWheelColor = (state, payload) => {
  return state.map((item) =>
    item.name === payload.itemName
      ? {
          ...item,
          wheelColors: [
            ...item.wheelColors.map((wheelColor) => ({
              ...wheelColor,
              backWheels: payload.value
            }))
          ]
        }
      : item
  );
};

a simpler code example: https://codesandbox.io/embed/js-playground-forked-tuz2p?fontsize=14&hidenavigation=1&theme=dark

CodePudding user response：

const state = [
  {
    name: "item1",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  },
  {
    name: "item2",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  },
  {
    name: "item3",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  }
];
   
/**
 * key = "foo" || "baz"
 * dimention = "x" || "y"
 */
const updateFn = (state, payload,key, dimention) => {
  return state.map((item) =>
    item.name === payload.itemName
      ? {
        ...item, 
          [key]: [
            ...item[key].map((item) => ({
              ...item,
              ...(key === "baz" && dimention === "x" && { x: payload.value }  ),
              ...(key === "baz" && dimention === "y" && { y: payload.value }),
              ...(key === "foo" && dimention === "x" && { fooX: payload.value }  ),
              ...(key === "foo" && dimention === "y" && { fooY: payload.value })
            })),
          ],
       
      }
      : item
  );
};

console.log(updateFn(state, { itemName: "item2", value: 15 },"foo", "y"));

CodePudding user response：

const state = [
  {
    name: "item1",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  },
  {
    name: "item2",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  },
  {
    name: "item3",
    foo: [
      { fooX: "fooX1", fooY: "fooY1" },
      { fooX: "fooX2", fooY: "fooY2" }
    ],
    baz: [
      { x: "x1", y: "y1" },
      { x: "x2", y: "y2" }
    ]
  }
];

const changes = (state, payload) => {
  return state.map((item) =>
  item.name === payload.itemName
    ? {
        ...item,
        foo: [
          ...item.foo.map((fooItem) => ({
            ...fooItem,
            fooY: payload.value
          }))
        ]
      }
    : item
);
}

const changeFooY = (state, payload) => {
  return changes(state,payload);
};

console.log(changeFooY(state, { itemName: "item2", value: 15 }));