hey I'm pretty new to coding. I'm working on a project and feel like I can refactor this code to make it less bulky but don't really know where to start. Maybe mapping could be helpful. Any Suggestions?
const CriticalAlertStatus = isCriticalAlertingEnabled
? allIcons.LMAlertSeverityCriticalOutline20Px
: Disabled;
const isCriticalStaticAlertSuppressed = R.path(
["children", "CRITICAL", "isStaticAlertSuppressed"],
props
);
const CriticalStaticAlertStatus = isCriticalStaticAlertSuppressed
? allIcons.LMAlertsCritical20Px
: Disabled;
const isErrorAlertingEnabled = R.path(["children", "ERROR", "isAlertingEnabled"], props);
const ErrorAlertStatus = isErrorAlertingEnabled
? allIcons.LMAlertSeverityErrorOutline20Px
: Disabled;
const isErrorStaticAlertSuppressed = R.path(
["children", "ERROR", "isStaticAlertSuppressed"],
props
);
const ErrorStaticAlertStatus = isErrorStaticAlertSuppressed
? allIcons.LMAlertsError20Px
: Disabled;
const isWarningAlertingEnabled = R.path(["children", "WARNING", "isAlertingEnabled"], props);
const WarningAlertStatus = isWarningAlertingEnabled
? allIcons.LMAlertSeverityWarningOutline20Px
: Disabled;
const isWarningStaticAlertSuppressed = R.path(
["children", "WARNING", "isStaticAlertSuppressed"],
props
);
const WarningStaticAlertStatus = isWarningStaticAlertSuppressed
? allIcons.LMAlertsWarning20Px
: Disabled;
You can use R.ifElse to create a factory function that would generate a new alert stats function according to the parameters you pass:
const Disabled = 'Disabled' // Demo Disabled
const getAlertState = R.curry((path, icon, props) =>
R.ifElse(R.path(path), R.always(icon), R.always(Disabled))
(props))
// Example of usage
// Demo icons
const allIcons = { LMAlertSeverityCriticalOutline20Px: 'LMAlertSeverityCriticalOutline20Px', LMAlertsCritical20Px: 'LMAlertsCritical20Px' };
// Create funnctions
const CriticalAlertStatus = getAlertState(["children", "CRITICAL", "isCriticalAlertingEnabled"], allIcons.LMAlertSeverityCriticalOutline20Px)
const CriticalStaticAlertStatus = getAlertState(["children", "CRITICAL", "isStaticAlertSuppressed"], allIcons.LMAlertsCritical20Px)
// Demo props
const props = { children: { CRITICAL: { isCriticalAlertingEnabled: false,
isStaticAlertSuppressed: true } } }
console.log(CriticalAlertStatus(props)); // Disabled
console.log(CriticalStaticAlertStatus(props)); // LMAlertsCritical20Px<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js" integrity="sha512-3sdB9mAxNh2MIo6YkY05uY1qjkywAlDfCf5u1cSotv6k9CZUSyHVf4BJSpTYgla+YHLaHG8LUpqV7MHctlYzlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>