Add server blocking functionality (#71)
Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
parent
32f9940ea2
commit
474df9fb81
File diff suppressed because it is too large
Load Diff
|
@ -25,7 +25,7 @@
|
|||
"file-dialog": "^0.0.7",
|
||||
"material-ui-pickers": "^2.2.4",
|
||||
"mdi-material-ui": "^5.13.0",
|
||||
"megalodon": "^0.6.4",
|
||||
"megalodon": "^1.0.3",
|
||||
"moment": "^2.24.0",
|
||||
"notistack": "^0.5.1",
|
||||
"prettier": "^1.18.2",
|
||||
|
|
|
@ -3,6 +3,7 @@ import { styles } from "./PageLayout.styles";
|
|||
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
IconButton,
|
||||
List,
|
||||
ListItem,
|
||||
|
@ -11,37 +12,236 @@ import {
|
|||
ListItemText,
|
||||
ListSubheader,
|
||||
Paper,
|
||||
Switch,
|
||||
withStyles
|
||||
Typography,
|
||||
Tooltip,
|
||||
withStyles,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
TextField
|
||||
} from "@material-ui/core";
|
||||
import DevicesIcon from "@material-ui/core/SvgIcon/SvgIcon";
|
||||
import { withSnackbar } from "notistack";
|
||||
|
||||
import DomainIcon from "@material-ui/icons/Domain";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
|
||||
import Mastodon from "megalodon";
|
||||
|
||||
interface IBlockedState {
|
||||
viewIsLoading: boolean;
|
||||
viewDidLoad: boolean;
|
||||
viewDidError: boolean;
|
||||
addBlockOpen: boolean;
|
||||
blockedServers?: [string];
|
||||
blockTextField: string;
|
||||
}
|
||||
|
||||
class Blocked extends Component<any, IBlockedState> {
|
||||
client: any;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.client = new Mastodon(
|
||||
localStorage.getItem("access_token") as string,
|
||||
localStorage.getItem("baseurl") + "/api/v1"
|
||||
);
|
||||
|
||||
this.state = {
|
||||
addBlockOpen: false,
|
||||
viewIsLoading: true,
|
||||
viewDidLoad: false,
|
||||
viewDidError: false,
|
||||
blockTextField: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.client
|
||||
.get("/domain_blocks")
|
||||
.then((resp: any) => {
|
||||
this.setState({
|
||||
blockedServers: resp.data,
|
||||
viewDidLoad: true,
|
||||
viewIsLoading: false
|
||||
});
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
console.error(err);
|
||||
this.setState({
|
||||
viewIsLoading: false,
|
||||
viewDidError: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
addBlock(domain: string) {
|
||||
this.client.post("/domain_blocks", { domain }).then((resp: any) => {
|
||||
this.props.enqueueSnackbar(`Blocked ${domain} successfully.`);
|
||||
|
||||
let blockedServers = this.state.blockedServers;
|
||||
if (blockedServers && blockedServers.length > 0) {
|
||||
blockedServers.push(domain);
|
||||
} else {
|
||||
blockedServers = [domain];
|
||||
}
|
||||
|
||||
this.setState({
|
||||
blockTextField: "",
|
||||
addBlockOpen: false,
|
||||
blockedServers
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
removeBlock(domain: string) {
|
||||
this.client
|
||||
.del("/domain_blocks", { domain })
|
||||
.then((resp: any) => {
|
||||
this.props.enqueueSnackbar(`Removed ${domain} from blacklist.`);
|
||||
let blockedServers = this.state.blockedServers;
|
||||
if (blockedServers && blockedServers.length > 0) {
|
||||
blockedServers.splice(blockedServers.indexOf(domain), 1);
|
||||
}
|
||||
this.setState({
|
||||
blockedServers
|
||||
});
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
this.props.enqueueSnackbar(
|
||||
`Couldn't remove ${domain}: ${err.name}`,
|
||||
{ variant: "error" }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
updateTextField(value: string) {
|
||||
this.setState({
|
||||
blockTextField: value
|
||||
});
|
||||
}
|
||||
|
||||
showAddBlockDialog() {
|
||||
return (
|
||||
<Dialog
|
||||
open={this.state.addBlockOpen}
|
||||
onClose={() => this.toggleAddBlockState()}
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Add a domain</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
Type the domain that you want to block. You won't see
|
||||
any posts from this server or receive notifications from
|
||||
them.
|
||||
</DialogContentText>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={this.state.blockTextField}
|
||||
placeholder="mastodon.social"
|
||||
onChange={e => this.updateTextField(e.target.value)}
|
||||
></TextField>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => this.toggleAddBlockState()}
|
||||
color="primary"
|
||||
autoFocus
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={e => this.addBlock(this.state.blockTextField)}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
toggleAddBlockState() {
|
||||
this.setState({ addBlockOpen: !this.state.addBlockOpen });
|
||||
}
|
||||
|
||||
class Blocked extends Component<any, any> {
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.pageLayoutConstraints}>
|
||||
<ListSubheader>Blocked servers</ListSubheader>
|
||||
<Button className={classes.clearAllButton} variant="text">
|
||||
{" "}
|
||||
<Button
|
||||
className={classes.clearAllButton}
|
||||
variant="text"
|
||||
onClick={() => this.toggleAddBlockState()}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<DevicesIcon color="action" />
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Match system appearance"
|
||||
secondary="Obey light/dark theme from your system"
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
{this.state.viewIsLoading ? (
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<CircularProgress
|
||||
className={classes.progress}
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
{this.state.blockedServers &&
|
||||
this.state.blockedServers.length > 0 ? (
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
{this.state.blockedServers &&
|
||||
this.state.blockedServers.length > 0
|
||||
? this.state.blockedServers.map(
|
||||
(domain: string) => (
|
||||
<ListItem key={domain}>
|
||||
<ListItemAvatar>
|
||||
<DomainIcon color="action" />
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={domain} />
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="Remove block">
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
this.removeBlock(
|
||||
domain
|
||||
)
|
||||
}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
)
|
||||
)
|
||||
: null}
|
||||
</List>
|
||||
</Paper>
|
||||
) : this.state.viewDidError ? (
|
||||
<Paper className={classes.errorCard}>
|
||||
<Typography variant="h4">Bummer.</Typography>
|
||||
<Typography variant="h6">
|
||||
Something went wrong when loading blocked servers.
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Typography variant="h6" component="p">
|
||||
No blocked servers found.
|
||||
</Typography>
|
||||
)}
|
||||
<br />
|
||||
<Typography variant={"caption"}>
|
||||
You won't see any public posts and notifications from the
|
||||
following servers, and any followers from these servers are
|
||||
automatically removed.
|
||||
</Typography>
|
||||
{this.showAddBlockDialog()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Blocked);
|
||||
export default withStyles(styles)(withSnackbar(Blocked));
|
||||
|
|
|
@ -59,7 +59,7 @@ import NotificationsIcon from "@material-ui/icons/Notifications";
|
|||
import BellAlertIcon from "mdi-material-ui/BellAlert";
|
||||
import RefreshIcon from "@material-ui/icons/Refresh";
|
||||
import UndoIcon from "@material-ui/icons/Undo";
|
||||
import CancelIcon from "@material-ui/icons/Cancel";
|
||||
import DomainDisablbedIcon from "@material-ui/icons/DomainDisabled";
|
||||
|
||||
interface ISettingsState {
|
||||
darkModeEnabled: boolean;
|
||||
|
@ -502,7 +502,7 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<CancelIcon color="action" />
|
||||
<DomainDisablbedIcon color="action" />
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Manage blocked servers"
|
||||
|
|
Loading…
Reference in New Issue