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",
|
"file-dialog": "^0.0.7",
|
||||||
"material-ui-pickers": "^2.2.4",
|
"material-ui-pickers": "^2.2.4",
|
||||||
"mdi-material-ui": "^5.13.0",
|
"mdi-material-ui": "^5.13.0",
|
||||||
"megalodon": "^0.6.4",
|
"megalodon": "^1.0.3",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
"notistack": "^0.5.1",
|
"notistack": "^0.5.1",
|
||||||
"prettier": "^1.18.2",
|
"prettier": "^1.18.2",
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { styles } from "./PageLayout.styles";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
CircularProgress,
|
||||||
IconButton,
|
IconButton,
|
||||||
List,
|
List,
|
||||||
ListItem,
|
ListItem,
|
||||||
|
@ -11,37 +12,236 @@ import {
|
||||||
ListItemText,
|
ListItemText,
|
||||||
ListSubheader,
|
ListSubheader,
|
||||||
Paper,
|
Paper,
|
||||||
Switch,
|
Typography,
|
||||||
withStyles
|
Tooltip,
|
||||||
|
withStyles,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogContentText,
|
||||||
|
DialogActions,
|
||||||
|
TextField
|
||||||
} from "@material-ui/core";
|
} 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() {
|
render() {
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className={classes.pageLayoutConstraints}>
|
<div className={classes.pageLayoutConstraints}>
|
||||||
<ListSubheader>Blocked servers</ListSubheader>
|
<ListSubheader>Blocked servers</ListSubheader>
|
||||||
<Button className={classes.clearAllButton} variant="text">
|
<Button
|
||||||
{" "}
|
className={classes.clearAllButton}
|
||||||
|
variant="text"
|
||||||
|
onClick={() => this.toggleAddBlockState()}
|
||||||
|
>
|
||||||
Add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
<Paper className={classes.pageListConstraints}>
|
{this.state.viewIsLoading ? (
|
||||||
<List>
|
<div style={{ textAlign: "center" }}>
|
||||||
<ListItem>
|
<CircularProgress
|
||||||
<ListItemAvatar>
|
className={classes.progress}
|
||||||
<DevicesIcon color="action" />
|
color="primary"
|
||||||
</ListItemAvatar>
|
/>
|
||||||
<ListItemText
|
</div>
|
||||||
primary="Match system appearance"
|
) : (
|
||||||
secondary="Obey light/dark theme from your system"
|
<span />
|
||||||
/>
|
)}
|
||||||
</ListItem>
|
{this.state.blockedServers &&
|
||||||
</List>
|
this.state.blockedServers.length > 0 ? (
|
||||||
</Paper>
|
<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>
|
</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 BellAlertIcon from "mdi-material-ui/BellAlert";
|
||||||
import RefreshIcon from "@material-ui/icons/Refresh";
|
import RefreshIcon from "@material-ui/icons/Refresh";
|
||||||
import UndoIcon from "@material-ui/icons/Undo";
|
import UndoIcon from "@material-ui/icons/Undo";
|
||||||
import CancelIcon from "@material-ui/icons/Cancel";
|
import DomainDisablbedIcon from "@material-ui/icons/DomainDisabled";
|
||||||
|
|
||||||
interface ISettingsState {
|
interface ISettingsState {
|
||||||
darkModeEnabled: boolean;
|
darkModeEnabled: boolean;
|
||||||
|
@ -502,7 +502,7 @@ class SettingsPage extends Component<any, ISettingsState> {
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<CancelIcon color="action" />
|
<DomainDisablbedIcon color="action" />
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary="Manage blocked servers"
|
primary="Manage blocked servers"
|
||||||
|
|
Loading…
Reference in New Issue