fix(condo): DOMA-10910 fixed class rendering. Added custom settings f…

…or snowfall (#5661)

* fix(condo): DOMA-10910 fixed class rendering

* feat(condo): DOMA-10910 added custom settings

(cherry picked from commit c383969)

apps/condo/domains/common/components/Snowfall/index.tsx

@@ -1,30 +1,52 @@
-import React, { useState, useMemo, useEffect } from 'react'
+import React, { useState, useMemo } from 'react'
 
+import { useDeepCompareEffect } from '@open-condo/codegen/utils/useDeepCompareEffect'
 import { useFeatureFlags } from '@open-condo/featureflags/FeatureFlagsContext'
 
 import { useLayoutContext } from '@condo/domains/common/components/containers/BaseLayout'
-import { SNOWFLAKES_COUNT } from '@condo/domains/common/constants/featureflags'
+import { SNOWFLAKES_SETTINGS } from '@condo/domains/common/constants/featureflags'
 
 import './Snowfall.css'
 
 
-const generateSnowflakes = (snowflakeCount: number) =>
-    Array.from({ length: snowflakeCount }).map(() => ({
+type MinMaxType = {
+    min: number
+    max: number
+}
+
+type SnowflakesSettings = {
+    snowflakeCount: number
+    snowflakeSizePx: MinMaxType
+    animationDurationSec: MinMaxType
+    animationDelaySec: MinMaxType
+}
+
+function getRandomNumber (min: number, max: number): number {
+    return Math.random() * (max - min) + min
+}
+
+function getInteger (value: any, defaultValue: number): number {
+    if (typeof value !== 'number') return defaultValue
+    if (!Number.isInteger(value)) return defaultValue
+    return value
+}
+
+function generateSnowflakes ({ snowflakeCount, animationDelaySec, animationDurationSec, snowflakeSizePx }: SnowflakesSettings) {
+    return Array.from({ length: snowflakeCount }).map(() => ({
         id: Math.random(),
-        left: Math.random() * 100,
-        size: Math.random() * 10 + 5,
-        animationDuration: Math.random() * 5 + 6,
-        animationDelay: Math.random() * 9,
+        left: getRandomNumber(0, 100),
+        sizePx: getRandomNumber(snowflakeSizePx.min, snowflakeSizePx.max),
+        animationDurationSec: getRandomNumber(animationDurationSec.min, animationDurationSec.max),
+        animationDelaySec: getRandomNumber(animationDelaySec.min, animationDelaySec.max),
     }))
+}
 
-const DefaultSnowfall: React.FC<{ snowflakeCount?: number }> = ({ snowflakeCount = 50 }) => {
+const DefaultSnowfall: React.FC<{ snowflakesSettings: SnowflakesSettings }> = ({ snowflakesSettings }) => {
     const [snowflakes, setSnowflakes] = useState([])
 
-    useEffect(() => {
-        setSnowflakes(generateSnowflakes(snowflakeCount))
-    }, [snowflakeCount])
-
-    if (typeof window === 'undefined') return null
+    useDeepCompareEffect(() => {
+        setSnowflakes(generateSnowflakes(snowflakesSettings))
+    }, [snowflakesSettings])
 
     return (
         <div className='snowfall'>
@@ -34,11 +56,11 @@ const DefaultSnowfall: React.FC<{ snowflakeCount?: number }> = ({ snowflakeCount
                     className='snowflake'
                     style={{
                         left: `${flake.left}vw`,
-                        width: `${flake.size}px`,
-                        height: `${flake.size}px`,
-                        fontSize: `${flake.size}px`,
-                        animationDuration: `${flake.animationDuration}s`,
-                        animationDelay: `${flake.animationDelay}s`,
+                        width: `${flake.sizePx}px`,
+                        height: `${flake.sizePx}px`,
+                        fontSize: `${flake.sizePx}px`,
+                        animationDuration: `${flake.animationDurationSec}s`,
+                        animationDelay: `${flake.animationDelaySec}s`,
                     }}
                 >
                     ❄️
@@ -54,26 +76,40 @@ const SnowfallWrapper: React.FC = () => {
     const { useFlagValue } = useFeatureFlags()
     const { breakpoints } = useLayoutContext()
 
-    const snowflakeCountFromFeatureFlag = useFlagValue(SNOWFLAKES_COUNT) || 0
-    const snowflakesCount = useMemo(() => {
-        if (!snowflakeCountFromFeatureFlag
-            || typeof snowflakeCountFromFeatureFlag !== 'number'
-            || !Number.isInteger(snowflakeCountFromFeatureFlag)
-            || snowflakeCountFromFeatureFlag < 1
-            || snowflakeCountFromFeatureFlag > 500
-        ) return 0
-
-        // NOTE: The smaller the screen, the fewer snowflakes should be shown
-        if (breakpoints.DESKTOP_LARGE) return snowflakeCountFromFeatureFlag
-        if (breakpoints.DESKTOP_SMALL) return Math.ceil(snowflakeCountFromFeatureFlag * 0.8)
-        if (breakpoints.TABLET_LARGE) return Math.ceil(snowflakeCountFromFeatureFlag * 0.6)
-        if (breakpoints.TABLET_SMALL) return Math.ceil(snowflakeCountFromFeatureFlag * 0.4)
-        return Math.ceil(snowflakeCountFromFeatureFlag * 0.2)
-    }, [breakpoints, snowflakeCountFromFeatureFlag])
-
-    if (snowflakesCount < 1) return null
-
-    return <MemoizedSnowfall snowflakeCount={snowflakesCount} />
+    const snowflakeSettingsFromFeatureFlag = useFlagValue<SnowflakesSettings>(SNOWFLAKES_SETTINGS)
+
+    // NOTE: The smaller the screen, the fewer snowflakes should be shown
+    const displaySizeMultiplier = useMemo(() => {
+        if (breakpoints.DESKTOP_LARGE) return 1
+        if (breakpoints.DESKTOP_SMALL) return 0.8
+        if (breakpoints.TABLET_LARGE) return 0.6
+        if (breakpoints.TABLET_SMALL) return 0.4
+        return 0.2
+    }, [breakpoints])
+
+    const snowflakeSettings: SnowflakesSettings = useMemo(() => {
+        return {
+            snowflakeCount: Math.ceil(
+                getInteger(snowflakeSettingsFromFeatureFlag?.snowflakeCount, 0) * displaySizeMultiplier
+            ),
+            snowflakeSizePx: {
+                min: getInteger(snowflakeSettingsFromFeatureFlag?.snowflakeSizePx?.min, 5),
+                max: getInteger(snowflakeSettingsFromFeatureFlag?.snowflakeSizePx?.max, 15),
+            },
+            animationDurationSec: {
+                min: getInteger(snowflakeSettingsFromFeatureFlag?.animationDurationSec?.min, 6),
+                max: getInteger(snowflakeSettingsFromFeatureFlag?.animationDurationSec?.max, 11),
+            },
+            animationDelaySec: {
+                min: getInteger(snowflakeSettingsFromFeatureFlag?.animationDelaySec?.min, 0),
+                max: getInteger(snowflakeSettingsFromFeatureFlag?.animationDelaySec?.max, 9),
+            },
+        }
+    }, [displaySizeMultiplier, snowflakeSettingsFromFeatureFlag])
+
+    if (snowflakeSettings.snowflakeCount < 1) return null
+
+    return <MemoizedSnowfall snowflakesSettings={snowflakeSettings} />
 }
 
 export const Snowfall = SnowfallWrapper

apps/condo/domains/common/constants/featureflags.js

@@ -29,7 +29,7 @@ const SERVICE_PROBLEMS_ALERT = 'service-problems-alert'
 const TICKET_AUTO_ASSIGNMENT_MANAGEMENT = 'ticket-auto-assignment-management'
 const POLL_TICKET_COMMENTS = 'poll-ticket-comments'
 const REASSIGN_EMPLOYEE_TICKETS = 'reassign-employee-tickets'
-const SNOWFLAKES_COUNT = 'snowflakes-count'
+const SNOWFLAKES_SETTINGS = 'snowflakes-settings'
 
 module.exports = {
     SMS_AFTER_TICKET_CREATION,
@@ -62,5 +62,5 @@ module.exports = {
     TICKET_AUTO_ASSIGNMENT_MANAGEMENT,
     POLL_TICKET_COMMENTS,
     REASSIGN_EMPLOYEE_TICKETS,
-    SNOWFLAKES_COUNT,
+    SNOWFLAKES_SETTINGS,
 }