✨ Add Support for prepend time in Messages

src/components/Message.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import dayjs from 'dayjs'
 import React from 'react'
 import Message from './Message'
 
@@ -14,13 +15,33 @@ describe('Message', function () {
       attachments: [],
       geo_information: '{"type":"FeatureCollection","features":[]}',
     }
-    const { asFragment } = render(<Message message={message} />)
+    const { asFragment } = render(
+      <Message message={message} prependTime={false} />
+    )
 
     expect(asFragment()).toMatchSnapshot()
 
     expect(screen.getByText('a few seconds ago')).toBeInTheDocument()
   })
 
+  test('renders with prepended time', function () {
+    const time = new Date()
+    const message = {
+      id: '1',
+      text: 'message',
+      ticker: 1,
+      creation_date: time,
+      tweet_id: '',
+      tweet_user: '',
+      attachments: [],
+      geo_information: '{"type":"FeatureCollection","features":[]}',
+    }
+
+    render(<Message message={message} prependTime />)
+
+    expect(screen.getByText(dayjs(time).format('HH:mm') + ' message'))
+  })
+
   test('renders with map correctly', function () {
     const message = {
       id: '1',
@@ -33,7 +54,9 @@ describe('Message', function () {
       geo_information:
         '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[13.466282,52.5024]},"properties":null}]}',
     }
-    const { asFragment } = render(<Message message={message} />)
+    const { asFragment } = render(
+      <Message message={message} prependTime={false} />
+    )
 
     expect(asFragment()).toMatchSnapshot()
   })

src/components/Message.tsx

@@ -18,6 +18,7 @@ const AttachmentsWrapper = styled(Card.Content)`
 
 interface Props {
   message: MessageType
+  prependTime: boolean
 }
 
 const Message: FC<Props> = props => {
@@ -29,12 +30,20 @@ const Message: FC<Props> = props => {
   )
   const creationDate = dayjs(props.message.creation_date).format('LLLL')
 
+  function prependTime() {
+    if (props.prependTime) {
+      return dayjs(props.message.creation_date).format('HH:mm') + ' '
+    }
+
+    return ''
+  }
+
   return (
     <Card fluid>
       <CardContent>
         <div
           dangerouslySetInnerHTML={{
-            __html: replaceMagic(props.message.text),
+            __html: prependTime() + replaceMagic(props.message.text),
           }}
         />
       </CardContent>

src/components/MessageList.test.tsx

@@ -15,7 +15,7 @@ describe('MessageList', function () {
       .fn()
       .mockImplementation(intersectionObserverMock)
 
-    render(<MessageList refreshInterval={10} />)
+    render(<MessageList prependTime={false} refreshInterval={10} />)
 
     expect(screen.getByText('Loading messages')).toBeInTheDocument()
     expect(

src/components/MessageList.tsx

@@ -6,6 +6,7 @@ import { getTimeline } from '../lib/api'
 
 interface Props {
   refreshInterval: number
+  prependTime: boolean
 }
 
 const MessageList: FC<Props> = props => {
@@ -129,7 +130,11 @@ const MessageList: FC<Props> = props => {
   return (
     <div>
       {messages.map(message => (
-        <Message key={message.id} message={message} />
+        <Message
+          key={message.id}
+          message={message}
+          prependTime={props.prependTime}
+        />
       ))}
       {!lastMessageReceived && (
         <div ref={loadMoreSpinnerRef}>

src/lib/types.ts

@@ -5,6 +5,7 @@ export type Ticker = {
   domain: string
   id: string
   title: string
+  prepend_time: boolean
   information: TickerInformation
 }
 

src/views/ActiveView.tsx

@@ -40,7 +40,10 @@ const ActiveView: FC<Props> = props => {
         <About isModal ticker={props.ticker} />
         {headline && <HeaderWrapper content={headline} size={'large'} />}
         <ReloadInfo />
-        <MessageList refreshInterval={props.refreshInterval} />
+        <MessageList
+          prependTime={props.ticker.prepend_time}
+          refreshInterval={props.refreshInterval}
+        />
       </Wrapper>
     )
   }
@@ -54,7 +57,10 @@ const ActiveView: FC<Props> = props => {
         <Grid.Row columns={2}>
           <Grid.Column computer={10} tablet={10}>
             <div ref={handleContextRef}>
-              <MessageList refreshInterval={props.refreshInterval} />
+              <MessageList
+                prependTime={props.ticker.prepend_time}
+                refreshInterval={props.refreshInterval}
+              />
             </div>
           </Grid.Column>
           <Grid.Column computer={6} tablet={6}>