Merge pull request #521 from systemli/Implement-new-Response-Schema

💥 Implement new Response Schema

.prettierrc.json

@@ -1,6 +1,7 @@
 {
-    "arrowParens": "avoid",
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2
+  "arrowParens": "avoid",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

src/Ticker.test.tsx

@@ -6,21 +6,21 @@ import { TickerProvider } from './components/useTicker'
 
 describe('Ticker', function () {
   const initSettings = {
-    refresh_interval: 1000,
-    inactive_settings: {
+    refreshInterval: 1000,
+    inactiveSettings: {
       author: 'Systemli Ticker Team',
       email: '[email protected]',
       homepage: '',
       twitter: '',
       headline: 'The ticker is currently inactive.',
-      sub_headline: 'Please contact us if you want to use it.',
+      subHeadline: 'Please contact us if you want to use it.',
       description: '...',
     },
   } as Settings
   const ticker = {
     id: '1',
     active: true,
-    creation_date: new Date(),
+    createdAt: new Date(),
     title: 'Ticker Title',
     description: 'Ticker Description',
     domain: 'example.com',

src/Ticker.tsx

@@ -38,8 +38,8 @@ const Ticker: FC = () => {
     return <ActiveView />
   }
 
-  if (ticker === null && settings?.inactive_settings !== undefined) {
-    return <InactiveView settings={settings.inactive_settings} />
+  if (ticker === null && settings?.inactiveSettings !== undefined) {
+    return <InactiveView settings={settings.inactiveSettings} />
   }
 
   return <div>...</div>

src/components/Attachments.test.tsx

@@ -4,7 +4,7 @@ import Attachments from './Attachments'
 describe('Attachment', function () {
   test('renders single image correctly', function () {
     const attachments = [
-      { content_type: 'image/jpeg', url: 'https://example.com/image.jpg' },
+      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
     ]
     const { asFragment } = render(<Attachments attachments={attachments} />)
 
@@ -13,8 +13,8 @@ describe('Attachment', function () {
 
   test('renders multiple images as slider', function () {
     const attachments = [
-      { content_type: 'image/jpeg', url: 'https://example.com/image.jpg' },
-      { content_type: 'image/jpeg', url: 'https://example.com/image.jpg' },
+      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
+      { contentType: 'image/jpeg', url: 'https://example.com/image.jpg' },
     ]
     const { asFragment } = render(<Attachments attachments={attachments} />)
 

src/components/Message.test.tsx

@@ -7,11 +7,9 @@ describe('Message', function () {
       id: '1',
       text: 'message',
       ticker: 1,
-      creation_date: new Date(),
-      tweet_id: '',
-      tweet_user: '',
+      createdAt: new Date(),
       attachments: [],
-      geo_information: '{"type":"FeatureCollection","features":[]}',
+      geoInformation: '{"type":"FeatureCollection","features":[]}',
     }
     const { asFragment } = render(<Message message={message} />)
 
@@ -25,11 +23,9 @@ describe('Message', function () {
       id: '1',
       text: 'message',
       ticker: 1,
-      creation_date: new Date(),
-      tweet_id: '',
-      tweet_user: '',
+      createdAt: new Date(),
       attachments: [],
-      geo_information:
+      geoInformation:
         '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[13.466282,52.5024]},"properties":null}]}',
     }
     const { asFragment } = render(<Message message={message} />)

src/components/Message.tsx

@@ -24,10 +24,10 @@ const Message: FC<Props> = props => {
   const relativeCreationDate = (
     <div>
       <Icon name="clock" />
-      {dayjs(props.message.creation_date).fromNow()}
+      {dayjs(props.message.createdAt).fromNow()}
     </div>
   )
-  const creationDate = dayjs(props.message.creation_date).format('LLLL')
+  const creationDate = dayjs(props.message.createdAt).format('LLLL')
 
   return (
     <Card fluid>
@@ -43,7 +43,7 @@ const Message: FC<Props> = props => {
           <Attachments attachments={props.message.attachments} />
         </AttachmentsWrapper>
       )}
-      <Map featureCollection={props.message.geo_information} />
+      <Map featureCollection={props.message.geoInformation} />
       <Card.Content extra>
         <Grid>
           <Grid.Row>

src/components/MessageList.tsx

@@ -99,11 +99,11 @@ const MessageList: FC = () => {
   useEffect(() => {
     const interval = setInterval(
       () => fetchMessages(),
-      settings?.refresh_interval || 60000
+      settings?.refreshInterval || 60000
     )
 
     return () => clearInterval(interval)
-  }, [fetchMessages, messages, settings?.refresh_interval])
+  }, [fetchMessages, messages, settings?.refreshInterval])
 
   const renderPlaceholder = () => (
     <Segment placeholder>

src/lib/types.ts

@@ -1,6 +1,6 @@
 export type Ticker = {
   active: boolean
-  creation_date: Date
+  createdAt: Date
   description: string
   domain: string
   id: string
@@ -18,8 +18,8 @@ type TickerInformation = {
 }
 
 export type Settings = {
-  refresh_interval: number
-  inactive_settings: InactiveSettings
+  refreshInterval: number
+  inactiveSettings: InactiveSettings
 }
 
 export type InactiveSettings = {
@@ -28,7 +28,7 @@ export type InactiveSettings = {
   homepage: string
   twitter: string
   headline: string
-  sub_headline: string
+  subHeadline: string
   description: string
 }
 
@@ -45,16 +45,14 @@ export type Message = {
   id: string
   text: string
   ticker: number
-  creation_date: Date
-  tweet_id: string
-  tweet_user: string
+  createdAt: Date
   attachments: Attachment[]
   // Stringified GeoJSON.FeatureCollection
-  geo_information: string
+  geoInformation: string
 }
 
 export type Attachment = {
   // FIXME: Enum?
-  content_type: string
+  contentType: string
   url: string
 }

src/views/InactiveView.tsx

@@ -20,7 +20,7 @@ const InactiveView: FC<Props> = props => {
       <Icon name="hide" />
       <Header.Content>
         {props.settings.headline}
-        <Header.Subheader>{props.settings.sub_headline}</Header.Subheader>
+        <Header.Subheader>{props.settings.subHeadline}</Header.Subheader>
       </Header.Content>
     </Header>
   )
@@ -30,7 +30,7 @@ const InactiveView: FC<Props> = props => {
       <Grid centered>
         <Grid.Column computer={8} mobile={16} tablet={8}>
           {props.settings.headline &&
-            props.settings.sub_headline &&
+            props.settings.subHeadline &&
             renderHeader()}
           <Card fluid>
             <Card.Content>