src/FeedsPanel.tsx

@@ -1,23 +1,50 @@
 import React, { ReactNode } from 'react'
 import Box from '@material-ui/core/Box'
+import Card from '@material-ui/core/Card'
+import { makeStyles } from '@material-ui/core/styles'
 
-import ItemCard from './ItemCard'
 import type { Item } from './types'
 
 interface Props {
     items: Item[]
 }
+interface CardProps {
+    title: string
+    url: string
+    published: Date
+}
 
+const useStyles = makeStyles({
+    root: {
+        margin: '5px',
+        padding: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+})
+
+function ItemCard(props: CardProps): ReactNode {
+    const { title, url, published } = props
+    const classes = useStyles()
+
+    const formattedDate = published.toLocaleString('en-GB', { timeZone: 'UTC' })
+    return (
+        <Card className={classes.root}>
+            <a href={url}>{title}</a>
+            <span>{formattedDate}</span>
+        </Card>
+    )
+}
 export default function FeedsPanel(props: Props): ReactNode {
     const { items } = props
     return (
         <Box display="flex" flexDirection="column">
-            {items.map((item) => (
+            {items.map(
                 <ItemCard
-                    key={`feed_item_${item.title.replace(' ', '_')}`}
                     {...item}
-                />
-            ))}
+                    key={`feed_item_${item.title.replace(' ', '_')}`}
+                />,
+            )}
         </Box>
     )
 }

src/ItemCard.tsx

@@ -1,33 +0,0 @@
-import React, { ReactNode } from 'react'
-import Card from '@material-ui/core/Card'
-import { makeStyles } from '@material-ui/core/styles'
-
-interface CardProps {
-    title: string
-    url: string
-    published: Date
-}
-
-const useStyles = makeStyles({
-    root: {
-        margin: '5px',
-        padding: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-})
-
-function formatDate(date: Date): string {
-    return date.toLocaleString('en-GB', { timeZone: 'UTC' })
-}
-
-export default function ItemCard(props: CardProps): ReactNode {
-    const { title, url, published } = props
-    const classes = useStyles()
-    return (
-        <Card className={classes.root}>
-            <a href={url}>{title}</a>
-            <span>{formatDate(published)}</span>
-        </Card>
-    )
-}

src/utils/useAppState.ts

@@ -1,5 +1,6 @@
 import { useReducer, useRef } from 'react'
 
+import type { State } from '../types'
 import { panelIdentifiers } from '../constants'
 
 export const SET_PANEL_IDENTIFIER = 'setPanelIdentifier'
@@ -46,7 +47,17 @@ function setRssItems(rssItems) {
         payload: { rssItems },
     }
 }
-export default function useAppState() {
+
+type Action =
+    | ReturnType<setRssItems>
+    | ReturnType<setFeedUrls>
+    | ReturnType<setACtivePanel>
+
+interface ActionSet {
+    [key: string]: Action
+}
+
+export default function useAppState(): [State, ActionSet] {
     const [state, dispatch] = useReducer(reducer, defaultState)
 
     const actions = {