Merge pull request #15 from purduehackers/use-layout-effect

Ensure time values are populated before first render

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purduehackers/time",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "convert between traditional time and lightning time ⚡️",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

src/react/index.tsx

@@ -1,16 +1,32 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useLayoutEffect } from 'react'
 import { format as formatTime } from 'date-fns'
 import { LightningTime, MILLIS_PER_CHARGE } from '../time'
 import { Colors } from '../types'
 
 export function useLightningTimeClock() {
-  const [lightningTimeClock, setLightningTime] = useState<string>('0~0~0')
-  const [normalTimeClock, setNormalTime] = useState<string>('12:00 AM')
+  const [lightningTimeClock, setLightningTime] = useState<string>('')
+  const [normalTimeClock, setNormalTime] = useState<string>('')
   const [timeColors, setTimeColors] = useState<Colors>({
-    boltColor: '#00000000',
-    zapColor: '#00000000',
-    sparkColor: '#00000000'
+    boltColor: '',
+    zapColor: '',
+    sparkColor: ''
   })
+  const isFirstRender = useRef(true)
+
+  useLayoutEffect(() => {
+    if (isFirstRender.current) {
+      const now = new Date()
+      const { lightningString, colors } =
+        new LightningTime().convertToLightning(now)
+      const formattedTime = formatTime(now, 'h:mm a')
+
+      setLightningTime(lightningString)
+      setNormalTime(formattedTime)
+      setTimeColors(colors)
+
+      isFirstRender.current = false
+    }
+  }, [])
 
   useEffect(() => {
     const update = () => {
@@ -24,12 +40,13 @@ export function useLightningTimeClock() {
 
       const lt = new LightningTime()
       const convertedTime = lt.convertToLightning(now).lightningString
+      const formattedTime = formatTime(now, 'h:mm a')
       const colors = lt.getColors(convertedTime)
+
       setLightningTime(convertedTime)
       setTimeColors(colors)
-
-      const formattedTime = formatTime(now, 'h:mm a')
       setNormalTime(formattedTime)
+
       setTimeout(update, remainingMillis)
     }
     update()