Disable or enable Direct Messages

functions/handlers/users.js

@@ -549,6 +549,22 @@ exports.getDirectMessages = (req, res) => {
     });
 }
 
+// Toggles direct messages on or off depending on the requese
+/* Request Parameters
+ * enable: bool
+ */
+exports.toggleDirectMessages = (req, res) => {
+  const enable = req.body.enable;
+  const user = req.userData.handle;
+  db.doc(`/users/${user}`).update({dmEnabled: enable})
+    .then(() => {
+      return res.status(201).json({message: "Success"});
+    })
+    .catch((err) => {
+      return res.status(500).json({error: err});
+    })
+}
+
 // Returns a promise that resolves if user has DMs enabled
 // and rejects if there is an error or DMs are disabled
 isDirectMessageEnabled = (username) => {

functions/index.js

@@ -15,6 +15,7 @@ const {
   sendDirectMessage,
   createDirectMessage,
   checkDirectMessagesEnabled,
+  toggleDirectMessages,
   getUserDetails,
   getProfileInfo,
   login,
@@ -50,6 +51,9 @@ app.post("/dms/new", fbAuth, createDirectMessage);
 // Checks if the user provided has DMs enabled or not
 app.post("/dms/enabled", checkDirectMessagesEnabled);
 
+// Used to toggle DMs on or off for the current user
+app.post("/dms/toggle", fbAuth, toggleDirectMessages);
+
 app.get("/getUser", fbAuth, getUserDetails);
 
 // Returns all profile data of the currently logged in user

twistter-frontend/src/pages/directMessages.js

@@ -366,7 +366,7 @@ export class directMessages extends Component {
     }
 
 	render() {
-        const { classes } = this.props;
+		const { classes, user: { credentials: { dmEnabled } } } = this.props;
         const loadingDirectMessages = this.props.UI.loading2;
         const creatingDirectMessage = this.props.UI.loading3;
         const sendingDirectMessage = this.props.UI.loading4;
@@ -563,7 +563,8 @@ export class directMessages extends Component {
 		);
 
 		return (
-            loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> : 
+			loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> : 
+				(dmEnabled !== undefined && dmEnabled !== null && !dmEnabled ? <Typography>Oops! It looks like you have DMs disabled. You can enable them on the Edit Profile page.</Typography> :
 			<Grid container className={classes.pageContainer}>
 				<Grid item className={classes.sidePadding} sm />
 				<Grid item className={classes.dmList}>
@@ -624,6 +625,7 @@ export class directMessages extends Component {
 				</Grid>
 				<Grid item className={classes.sidePadding} sm />
 			</Grid>
+			)
 		);
 	}
 }

twistter-frontend/src/pages/editProfile.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import PropTypes from "prop-types";
 // TODO: Add a read-only '@' in the left side of the handle input
 // TODO: Add a cancel button, that takes the user back to their profile page
+// FIX: Empty bio does not update the database
 
 // Material-UI stuff
 import Button from "@material-ui/core/Button";
@@ -12,6 +13,11 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+// Redux
+import { connect } from 'react-redux';
 
 const styles = {
   form: {
@@ -46,7 +52,8 @@ export class edit extends Component {
           lastName: res.data.lastName,
           email: res.data.email,
           handle: res.data.handle,
-          bio: res.data.bio
+          bio: res.data.bio,
+          dmEnabled: res.data.dmEnabled === false ? false : true
         });
       })
       .catch((err) => {
@@ -69,6 +76,8 @@ export class edit extends Component {
       email: "",
       handle: "",
       bio: "",
+      dmEnabled: false,
+      togglingDirectMessages: false,
       loading: false,
       errors: {}
     };
@@ -129,6 +138,28 @@ export class edit extends Component {
     });
   };
 
+  handleDMSwitch = () => {
+    let enable;
+    
+    if (this.state.dmEnabled) {
+      enable = {enable: false};
+    } else {
+      enable = {enable: true};
+    }
+
+    this.setState({
+      dmEnabled: enable.enable,
+      togglingDirectMessages: true
+    });
+
+    axios.post("/dms/toggle", enable)
+      .then(() => {
+        this.setState({
+          togglingDirectMessages: false
+        });
+      })
+  }
+
   render() {
     const { classes } = this.props;
     const { errors, loading } = this.state;
@@ -215,6 +246,18 @@ export class edit extends Component {
               onChange={this.handleChange}
               fullWidth
             />
+            <FormControlLabel
+              control={
+                <Switch
+                  color="primary"
+                  disabled={this.state.togglingDirectMessages} 
+                  checked={this.state.dmEnabled} 
+                  onChange={this.handleDMSwitch} 
+                />
+              }
+              label="Enable Direct Messages"
+            />
+            <br></br>
             <Button
               type="submit"
               variant="contained"
@@ -258,7 +301,16 @@ export class edit extends Component {
 }
 
 edit.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+	user: PropTypes.object.isRequired,
+	UI: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+const mapStateToProps = (state) => ({
+	user: state.user,
+	UI: state.UI
+});
+
+const mapActionsToProps = {};
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(edit));