Looking to get some opinions/suggestions on how to manage or improve an application that supports multiple markets and flows. As an example we can use a form. There is one base form that can potentially be different per flow & market.
Current architecture is along these lines:
const ExampleTopLevel = ({ customSlots = {}, ...props }) => {
const newSlots = {
...exampleSlot1(),
...exampleSlot2(),
...exampleSlot3(),
...exampleSlot4(),
};
const combinedSlots = { ...customSlots, ...newSlots };
switch (condition) {
case "BRAND":
return <ExampleBrandSecondLevel customSlots={combinedSlots} {...props} />;
default:
return combinedSlots;
}
};
const ExampleBrandSecondLevel = ({ customSlots, ...props }) => {
const newSlots = {};
const combinedSlots = { ...customSlots, ...newSlots };
switch (condition) {
case "FLOW_1":
return <ComponentFlow1 customSlots={combinedSlots} {...props} />;
default:
return combinedSlots;
}
};
const ComponentFlow1 = ({ customSlots = {}, ...props }) => {
const newSlots = {};
const combinedSlots = { ...customSlots, ...newSlots };
switch (config.market) {
case "MARKET_1":
return <ExampleMarket1 customSlots={combinedSlots} {...props} />;
default:
return combinedSlots;
}
};
const ExampleMarket1 = ({ customSlots = {} }) => {
const newSlots = {
...exampleSlot1({ readOnly: true }), // Overwrite top level
...newSlot1({
inputRef: null,
}),
};
const combinedSlots = { ...customSlots, ...newSlots };
return combinedSlots;
};
// Final Result for Flow_1 & Market_1:
const slots = {
...exampleSlot1({ readOnly: true }),
...exampleSlot2(),
...exampleSlot3(),
...exampleSlot4(),
...newSlot1({
inputRef: null,
}),
};
This works, however it is causing a lot of duplicate code as this is the same scaffolding for all components across the application.
I have thought about a schema approach but that becomes difficult to read when there are 15+ slots with different customisations such as labels, onClicks etc. etc.
Top comments (0)