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

feat: settings panel (#2)

Browse source 
* build: add material-ui/icons

* feat: settings panel

* refactor: additional padding on listitems
This commit is contained in:
Marc Cataford 2021-07-14 23:43:53 -04:00 committed by GitHub
parent f757582e8a
commit 22ab6a3be6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -35,6 +35,7 @@
},
"dependencies": {
"@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
"axios": "^0.21.1",
"crypto-js": "^4.0.0",
"htmlparser2": "^6.1.0",

1
src/ItemCard.tsx
View file

@ -11,6 +11,7 @@ interface CardProps {
const useStyles = makeStyles({
root: {
margin: '5px',
padding: '10px',
display: 'flex',
flexDirection: 'column',
},

65
src/SettingsPanel.tsx
View file

@ -1,6 +1,12 @@
import React, { ReactNode } from 'react'
import React, { ReactNode, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import Card from '@material-ui/core/Card'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'
import { persistSettings } from './utils/persistence'
@ -9,22 +15,69 @@ interface Props {
setFeedUrls: (s: string[]) => void
}
const useStyles = makeStyles({
urlCard: {
margin: '5px',
padding: '5px',
display: 'flex',
alignItems: 'center',
gap: '5px',
},
})
function isValidUrl(url: string): boolean {
const urlPattern = /(https?:\/\/)?(www\.)?[\w.-_]+\.[a-zA-Z]{2,3}/
return urlPattern.test(url)
}
export default function SettingsPanel(props: Props): ReactNode {
const { feedUrls, setFeedUrls } = props
const [feedUrlsForm, setFeedUrlsForm] = useState(feedUrls)
const classes = useStyles()
const urlCards = feedUrlsForm.map((url) => (
<Card key={`url_${url}`} variant="outlined" className={classes.urlCard}>
{isValidUrl(url) ? (
<CheckCircleOutlineIcon color="primary" />
) : (
<ErrorOutlineIcon color="error" />
)}{' '}
{url}
</Card>
))
return (
<>
<Box display="flex" flexDirection="column">
<Typography paragraph>
{
'Enter URLs to fetch feeds from. Invalid URLs are discarded on save.'
}
</Typography>
<TextField
multiline
rows={5}
variant="outlined"
label="Feed URLs"
defaultValue={feedUrls.join('\n')}
onChange={(v) => setFeedUrls(v.target.value.split('\n'))}
fullWidth
value={feedUrlsForm.join('\n')}
onChange={(v) => setFeedUrlsForm(v.target.value.split('\n'))}
/>
<Button onClick={() => persistSettings({ feedUrls: feedUrls })}>
<Box display="flex" flexDirection="column">
{urlCards}
</Box>
<Button
variant="contained"
color="primary"
onClick={() => {
const validUrls = feedUrlsForm.filter(isValidUrl)
setFeedUrls(validUrls)
setFeedUrlsForm(validUrls)
persistSettings({ feedUrls: validUrls })
}}
>
Save
</Button>
</>
</Box>
)
}

3
src/index.html
View file

@ -1,5 +1,8 @@
<html>
<head></head>
<style>
body { background-color: #f5f5f5 }
</style>
<body>
<div id="app"></div>
<script type="module" src="./index.ts"></script>

18
yarn.lock
View file

@ -759,6 +759,23 @@ __metadata:
languageName: node
linkType: hard
"@material-ui/icons@npm:^4.11.2":
version: 4.11.2
resolution: "@material-ui/icons@npm:4.11.2"
dependencies:
"@babel/runtime": ^7.4.4
peerDependencies:
"@material-ui/core": ^4.0.0
"@types/react": ^16.8.6 || ^17.0.0
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 0cd1d54b25a4237bd0cefd383d287911f721d4c4ac4fd7980370566b9927f3a9725e7a715042f7c65c87fa554173fbef5328de1d08e60eb996038f375ddf583a
languageName: node
linkType: hard
"@material-ui/styles@npm:^4.11.4":
version: 4.11.4
resolution: "@material-ui/styles@npm:4.11.4"
@ -9284,6 +9301,7 @@ resolve@^2.0.0-next.3:
resolution: "rss-reader@workspace:."
dependencies:
"@material-ui/core": ^4.12.1
"@material-ui/icons": ^4.11.2
"@parcel/reporter-bundle-analyzer": ^2.0.0-nightly.1694
"@parcel/validator-typescript": ^2.0.0-alpha.3
"@tophat/eslint-config": ^0.10.3