marc/rss-reader
1
0
Fork 0
Code Issues 5 Pull requests 10 Projects Releases Packages Wiki Activity

Small quality of life improvements (#13)

Browse source 
* wip: swanky page title

* wip: empty feed message

* wip: add margin
This commit is contained in:
Marc Cataford 2021-07-27 08:38:31 -04:00 committed by GitHub
parent c46205f220
commit 185f405fe2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/FeedsPanel.tsx
View file

@ -1,5 +1,6 @@
import React, { ReactNode } from 'react' import React, { ReactNode } from 'react'
import Box from '@material-ui/core/Box' import Box from '@material-ui/core/Box'
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card' import Card from '@material-ui/core/Card'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
@ -40,19 +41,36 @@ function ItemCard(props: CardProps): ReactNode {
) )
} }
function NoItemsNotice(): ReactNode {
return (
<Box
alignSelf="center"
display="flex"
flexDirection="column"
alignItems="center"
mt="50px"
>
<Typography variant="h6">Nothing to see here!</Typography>
<Typography>
Add some feeds in the <strong>Settings</strong> panel to get
started!
</Typography>
</Box>
)
}
export default function FeedsPanel(props: Props): ReactNode { export default function FeedsPanel(props: Props): ReactNode {
const { feeds } = props const { feeds } = props
const flattenedItems = sortFeedItemsByDate(feeds) const flattenedItems = sortFeedItemsByDate(feeds)
const cardList = flattenedItems.map((item) => (
<ItemCard {...item} key={`feed_item_${item.title.replace(' ', '_')}`} />
))
return ( return (
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">
{flattenedItems.map((item) => ( {cardList.length > 0 ? cardList : <NoItemsNotice />}
<ItemCard
{...item}
key={`feed_item_${item.title.replace(' ', '_')}`}
/>
))}
</Box> </Box>
) )
} }

1
src/index.html
View file

@ -1,5 +1,6 @@
<html> <html>
<head> <head>
<title>🏴‍☠️ Yet Another RSS Reader 🏴‍☠️</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>