IRSA-6571: Separate defaultProps logic into functions

Author: jaladh-singhal

src/firefly/js/templates/hydra/HydraViewer.jsx

@@ -160,54 +160,59 @@ const HydraAppBranding = ({title, desc}) => (
     </Stacker>
 );
 
+const defaultCommonProps = ({title, desc}) => ({
+    bgMonitorHint: { sx: { right: 50 } },
+    topSection: { title, desc }
+});
+
+
+const defaultPropsWithoutBgImage = ({icon}) => ({
+    contentSection: { sx: { maxWidth: '80rem', mx: 'auto' } },
+    topSection: { component: HydraAppBranding }, // use custom topSection instead of DefaultAppBranding
+    bottomSection: { icon }
+});
+
+const defaultPropsWithBgImage = ({bgImage}) => ({
+    // visually combine topSection & bottomSection into contentSection that can contrast with the bgContainer
+    bgContainer: {
+        sx: {
+            display: 'flex', flexGrow: 1,
+            backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center'
+        }
+    },
+    contentSection: {
+        sx: (theme) => {
+            // background image will remain same in both the theme modes, and we need text to contrast with the image,
+            // so we create a translucent dark overlay and put text over it as if it's dark theme
+            const darkPalette = theme.colorSchemes.dark.palette;
+            return {
+                maxWidth: '56rem', m: 'auto',
+                backgroundColor: hexColorWithAlpha(darkPalette.background.surface.split(', ')?.[1]?.slice(0, -1) ?? '#000', 0.6),
+                backdropFilter: 'blur(1px)',
+                '.MuiTypography-body-md, .MuiTypography-body-lg': { color: darkPalette.text.secondary },
+                '.MuiTypography-h2': { color: darkPalette.text.primary },
+                '.MuiTypography-colorPrimary': { color: `rgb(${darkPalette.primary.mainChannel})` },
+                '.MuiDivider-root': { backgroundColor: darkPalette.neutral.solidBg }
+            };
+        },
+        divider: <Divider sx={{ width: '4rem', alignSelf: 'center' }} />
+    },
+    bottomSection: {
+        icon: false, // to prevent default being applied (on undefined)
+        slotProps: {
+            root: { sx: { py: 4, pb: 0, backgroundColor: 'transparent' } }
+        }
+    }
+});
+
+
 export function HydraLanding({icon, title, desc, bgImage, slotProps={}, ...props} ) {
     const mSlotProps = cloneDeep(slotProps);
-    defaultsDeep(mSlotProps, {
-        bgMonitorHint: { sx: { right: 50 } },
-        topSection: { title, desc }
-    });
+    defaultsDeep(mSlotProps, defaultCommonProps({title, desc}));
 
-    if (bgImage) {
-        // visually combine topSection & bottomSection into contentSection that can contrast with the bgContainer
-        defaultsDeep(mSlotProps, {
-            bgContainer: {
-                sx: {
-                    display: 'flex', flexGrow: 1,
-                    backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center'
-                }
-            },
-            contentSection: {
-                sx: (theme) => {
-                    // background image will remain same in both the theme modes, and we need text to contrast with the image,
-                    // so we create a translucent dark overlay and put text over it as if it's dark theme
-                    const darkPalette = theme.colorSchemes.dark.palette;
-                    return {
-                        maxWidth: '56rem', m: 'auto',
-                        backgroundColor: hexColorWithAlpha(darkPalette.background.surface.split(', ')?.[1]?.slice(0, -1) ?? '#000', 0.6),
-                        backdropFilter: 'blur(1px)',
-                        '.MuiTypography-body-md, .MuiTypography-body-lg': { color: darkPalette.text.secondary },
-                        '.MuiTypography-h2': { color: darkPalette.text.primary },
-                        '.MuiTypography-colorPrimary': { color: `rgb(${darkPalette.primary.mainChannel})` },
-                        '.MuiDivider-root': { backgroundColor: darkPalette.neutral.solidBg }
-                    };
-                },
-                divider: <Divider sx={{ width: '4rem', alignSelf: 'center' }} />
-            },
-            bottomSection: {
-                icon: false, // to prevent default being applied (on undefined)
-                slotProps: {
-                    root: { sx: { py: 4, pb: 0, backgroundColor: 'transparent' } }
-                }
-            }
-        });
-    }
-    else {
-        defaultsDeep(mSlotProps, {
-            contentSection: { sx: { maxWidth: '80rem', mx: 'auto' } },
-            topSection: { component: HydraAppBranding }, // use custom topSection instead of DefaultAppBranding
-            bottomSection: { icon }
-        });
-    }
+    bgImage
+        ? defaultsDeep(mSlotProps, defaultPropsWithBgImage({bgImage}))
+        : defaultsDeep(mSlotProps, defaultPropsWithoutBgImage({icon}));
 
     return <LandingPage slotProps={mSlotProps} {...props}/>;
 }