Merge pull request #247 from brave/c71-clock-period

Fix NTP clock for c71

src/old/clock/index.tsx

@@ -19,11 +19,20 @@ export interface ClockProps {
   customStyle?: ClockTheme
 }
 
+interface TimeComponent {
+  type: string,
+  value: string
+}
+
 export interface ClockState {
-  currentTime: Array<{type: string, value: string}>
+  currentTime: Array<TimeComponent>
   date: Date
 }
 
+function isDayPeriod (timeComponent: TimeComponent): boolean {
+  return timeComponent.type.toLowerCase() === 'dayperiod'
+}
+
 class Clock extends React.PureComponent<ClockProps, ClockState> {
   constructor (props: ClockProps) {
     super(props)
@@ -44,7 +53,7 @@ class Clock extends React.PureComponent<ClockProps, ClockState> {
           // hide blank strings
           return null
         }
-      } else if (component.type === 'dayperiod') {
+      } else if (isDayPeriod(component)) {
         // hide day-period (AM / PM), it's rendered in a separate component
         return null
       }
@@ -54,7 +63,7 @@ class Clock extends React.PureComponent<ClockProps, ClockState> {
 
   get formattedTimePeriod () {
     const time: any = this.state.currentTime
-    const period = time.find((component: {type: string}) => component.type === 'dayperiod')
+    const period = time.find(isDayPeriod)
     return period ? period.value : ''
   }
 

stories/old/views.story.tsx

@@ -26,6 +26,7 @@ import * as React from 'react'
 // TBD import Clock from '../components/clock'
 import Page from '../../src/old/page'
 import { DataBlock, DataItem } from '../../src/old/dataBlock'
+import Clock from '../../src/old/clock'
 
 storiesOf('Old/Views', module)
   .addDecorator(withKnobs)
@@ -73,3 +74,8 @@ storiesOf('Old/Views', module)
       </DataBlock>
     )
   })
+  .add('Clock', () => {
+    return (
+      <Clock />
+    )
+  })