Added second implementation (custom hooks)

Author: razinj

src/App.tsx

@@ -1,7 +1,8 @@
 // React
 import { ChangeEvent, useState } from 'react'
 // Components
-import TimeBasedWrapper from './components/v1/TimeBasedWrapper'
+import TimeBasedWrapper_V1 from './components/v1/TimeBasedWrapper'
+import TimeBasedWrapper_V2 from './components/v2/TimeBasedWrapper'
 import ComponentToRender from './components/ComponentToRender'
 // Utils
 import { getCurrentDateFromTime } from './utils/date'
@@ -34,9 +35,15 @@ const App = () => {
         </div>
       </div>
       {startDate && endDate && (
-        <TimeBasedWrapper startDate={startDate} endDate={endDate}>
-          <ComponentToRender version='v1' />
-        </TimeBasedWrapper>
+        <>
+          <TimeBasedWrapper_V1 startDate={startDate} endDate={endDate}>
+            <ComponentToRender version='v1 contains normal implementation' />
+          </TimeBasedWrapper_V1>
+          <br />
+          <TimeBasedWrapper_V2 startDate={startDate} endDate={endDate}>
+            <ComponentToRender version='v2  contains implementation as a custom hook' />
+          </TimeBasedWrapper_V2>
+        </>
       )}
     </div>
   )

src/components/v2/TimeBasedWrapper.tsx

@@ -0,0 +1,12 @@
+// Custom Hooks
+import { useTimeBasedRendering } from './hooks/useTimeBasedRendering'
+// Models
+import { TimeBasedRenderingProps as Props } from '../models/props'
+
+const TimeBasedWrapper = ({ startDate, endDate, children }: Props) => {
+  const canRender = useTimeBasedRendering(startDate, endDate)
+
+  return <div>{canRender && children}</div>
+}
+
+export default TimeBasedWrapper

src/components/v2/hooks/useTimeBasedRendering.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+
+export const useTimeBasedRendering = (startDate: Date, endDate: Date) => {
+  const [canRender, setCanRender] = useState(false)
+
+  useEffect(() => {
+    const currentDate = new Date()
+    let startRenderingTimeOut: NodeJS.Timeout | undefined = undefined
+    let stopRenderingTimeOut: NodeJS.Timeout | undefined = undefined
+
+    const shouldRenderNow = currentDate.getTime() >= startDate.getTime() && currentDate.getTime() <= endDate.getTime()
+
+    if (shouldRenderNow) {
+      // Start rendering
+      setCanRender(true)
+
+      // Set timeout to stop rendering at end date
+      const isCurrentDateAheadOfStartDate = currentDate.getTime() > startDate.getTime()
+      const renderingStartDate = isCurrentDateAheadOfStartDate ? currentDate.getTime() : startDate.getTime()
+      const timeToStopRendering = endDate.getTime() - renderingStartDate
+      stopRenderingTimeOut = setTimeout(() => setCanRender(false), timeToStopRendering)
+    } else {
+      // Stop rendering
+      setCanRender(false)
+
+      // Set timeouts to start rendering at start date and end rendering at end date
+      const timeToStartRendering = startDate.getTime() - currentDate.getTime()
+      const timeToStopRendering = endDate.getTime() - currentDate.getTime()
+      startRenderingTimeOut = setTimeout(() => setCanRender(true), timeToStartRendering)
+      stopRenderingTimeOut = setTimeout(() => setCanRender(false), timeToStopRendering)
+    }
+
+    return () => {
+      clearTimeout(startRenderingTimeOut)
+      clearTimeout(stopRenderingTimeOut)
+    }
+  }, [startDate, endDate])
+
+  return canRender
+}