sigmasternchen/threadule
1
0
Fork 0
mirror of https://github.com/sigmasternchen/threadule synced 2025-03-15 08:09:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added cancel button and delete button to thread form dialog

Browse source
This commit is contained in:
overflowerror 2021-08-21 14:05:51 +02:00
parent b85573eb1a
commit 9493979e4f
2 changed files with 75 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/AccountCard/index.tsx
View file

@ -6,16 +6,25 @@ import ThreadList from "../ThreadList";
import AddIcon from '@material-ui/icons/Add';
import ThreadFormDialog from "../ThreadFormDialog";
import Thread, {ThreadStatus} from "../../api/entities/Thread";
import {TweetStatus} from "../../api/entities/Tweet";
export type AccountCardProps = {
account: Account
}
const emptyThread = () => ({
const emptyThread = (): Thread => ({
id: "",
scheduled_for: new Date(),
status: ThreadStatus.SCHEDULED,
tweets: [],
tweets: [
{
id: "",
text: "",
status: TweetStatus.SCHEDULED,
tweet_id: null,
error: null,
}
],
error: null,
})
@ -61,6 +70,10 @@ const AccountCard: FunctionComponent<AccountCardProps> = ({account}) => {
setEditThread(null)
}}
onCancel={() => {
// TODO show confirmation
setEditThread(null)
}}
/>
</>
)

78
frontend/src/components/ThreadFormDialog/index.tsx
View file

@ -9,22 +9,35 @@ import {
IconButton,
TextField
} from "@material-ui/core";
import DeleteIcon from '@material-ui/icons/Delete';
import Account from "../../api/entities/Account";
import Thread from "../../api/entities/Thread";
import AddIcon from "@material-ui/icons/Add";
import {TweetStatus} from "../../api/entities/Tweet";
import CustomDate from "../../utils/CustomDate";
import {Alert} from "@material-ui/lab";
export type ThreadFormProps = {
open: boolean
account: Account
initial: Thread
onSubmit: (thread: Thread) => void
onCancel: () => void
}
const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSubmit}) => {
const Index: FunctionComponent<ThreadFormProps> = (
{
open,
account,
initial,
onSubmit,
onCancel
}
) => {
const [thread, setThread] = useState<Thread>(initial)
const [error, setError] = useState<string|null>(null)
return (
<Dialog open={open}>
<DialogTitle title={"Thread"}/>
@ -51,23 +64,40 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
</Grid>
{
thread.tweets.map((tweet, index) => (
<Grid item xs={12}>
<TextField
id="outlined-multiline-static"
label={"Tweet " + (index + 1)}
multiline
rows={3}
value={tweet.text}
onChange={event => {
thread.tweets[index].text = event.target.value
setThread({
...thread
})
}}
variant="outlined"
fullWidth
/>
</Grid>
<>
<Grid item xs={11}>
<TextField
id="outlined-multiline-static"
label={"Tweet " + (index + 1)}
multiline
rows={3}
value={tweet.text}
onChange={event => {
thread.tweets[index].text = event.target.value
setThread({
...thread
})
}}
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<IconButton
aria-label="delete"
color={"secondary"}
disabled={thread.tweets.length <= 1}
onClick={() => {
thread.tweets.splice(index, 1)
setThread({
...thread
})
}}
>
<DeleteIcon fontSize="medium" />
</IconButton>
</Grid>
</>
))
}
<Grid item xs={12}>
@ -87,9 +117,21 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
</IconButton>
</Grid>
</Grid>
{ error && <Alert severity="error">{error}</Alert> }
</DialogContent>
<DialogActions>
<Button onClick={() => {
// TODO show confirmation dialog
onCancel()
}} color="secondary">
Cancel
</Button>
<Button onClick={() => {
if (!thread.tweets.every(t => t.text.trim().length != 0)) {
setError("Empty tweets are not allowed!")
return
}
setError(null)
onSubmit(thread)
}} color="primary">
Save changes