From cff0fd4e05197d71ea3c804c26579aa37102c470 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 2 Dec 2019 15:46:13 -0500
Subject: [PATCH 1/4] DMs are deleted when the delete function runs

---
 functions/handlers/users.js    | 118 +++++++++++++++++++++++++++++++--
 twistter-frontend/package.json |   1 +
 2 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 283b97b..a4aea57 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -209,7 +209,7 @@ exports.deleteUser = (req, res) => {
   let errors = {};
 
   function thenFunction(data) {
-    console.log(`${data} data for ${req.userData.handle} has been deleted.`);
+    console.log(`${data} for ${req.userData.handle} has been deleted.`);
   }
 
   function catchFunction(data, err) {
@@ -217,14 +217,122 @@ exports.deleteUser = (req, res) => {
     errors[data] = err;
   }
 
+  function deleteDirectMessages() {
+    return new Promise((resolve, reject) => {
+      const deleteUsername = req.userData.handle;
+      db.doc(`/users/${deleteUsername}`)
+      .get()
+      .then((deleteUserDocSnap) => {
+        const dms = deleteUserDocSnap.data().dms;
+        const dmRecipients = deleteUserDocSnap.data().dmRecipients;
+      
+        if (!dms) {
+          resolve();
+          return;
+        }
+
+        // Iterate over the list of users who this person has DM'd
+        let otherUsersPromises = [];
+
+        // Resolve if they don't have a dmRecipients list
+        if (dmRecipients === undefined || dmRecipients === null || dmRecipients.length === 0) {
+          resolve();
+          return;
+        }
+        dmRecipients.forEach((dmRecipient) => {
+          otherUsersPromises.push(
+            // Get each users data
+            db.doc(`/users/${dmRecipient}`).get()
+              .then((otherUserDocSnap) => {
+                // Get the index of deleteUsername so that we can remove the dangling
+                // reference to the DM document
+                let otherUserDMRecipients = otherUserDocSnap.data().dmRecipients;
+                let otherUserDMs = otherUserDocSnap.data().dms;
+                let index = -1;
+                otherUserDMRecipients.forEach((dmRecip, i) => {
+                  if (dmRecip === deleteUsername) {
+                    index = i;
+                  }
+                })
+
+                if (index !== -1) {
+                  // Remove deleteUsername from their dmRecipients list
+                  otherUserDMRecipients.splice(index, 1);
+
+                  // Remove the DM channel with deleteUsername
+                  otherUserDMs.splice(index, 1);
+
+                  // Update the users data
+                  return otherUserDocSnap.ref.update({
+                    dmRecipients: otherUserDMRecipients,
+                    dms: otherUserDMs
+                  });
+                }
+                
+              })
+          )
+        })
+
+        // Wait for the removal of DM data stored on other users to be deleted
+        Promise.all(otherUsersPromises)
+          .then(() => {
+            // Iterate through DM references and delete them from the dm collection
+            let dmRefsPromises = [];
+            dms.forEach((dmRef) => {
+              // Create a delete queue
+              let batch = db.batch();
+              dmRefsPromises.push(
+                // Add the messages to the delete queue
+                db.collection(`/dm/${dmRef.id}/messages`).listDocuments()
+                  .then((docs) => {
+                    console.log("second")
+                    console.log(docs);
+                    docs.map((doc) => {
+                      batch.delete(doc);
+                    })
+                    
+                    // Add the doc that the DM is stored in to the delete queue
+                    batch.delete(dmRef);
+
+                    // Commit the writes
+                    return batch.commit();
+                  })
+              )
+            })
+
+            return Promise.all(dmRefsPromises);
+          })
+          .then(() => {
+            resolve();
+          })
+          .catch((err) => {
+            console.log("error " + err);
+            reject(err);
+          })
+      })
+    })
+  }
+
   // Deletes user from authentication
   let auth = admin.auth().deleteUser(userId);
 
   // Deletes database data
-  let data = db
-    .collection("users")
-    .doc(`${req.user.handle}`)
-    .delete();
+  let data = new Promise((resolve, reject) => {
+    deleteDirectMessages()
+      .then(() => {
+        return db
+          .collection("users")
+          .doc(`${req.user.handle}`)
+          .delete()
+      })
+      .then(() => {
+        resolve();
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      })
+  })
 
   // Deletes any custom profile image
   let image;
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index a0cec16..2fc8943 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -15,6 +15,7 @@
     "node-pre-gyp": "^0.13.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-modal": "^3.11.1",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.0",
     "react-scripts": "0.9.5",

From 7c7256acbdd4d012e528077f3e9e6b9572223beb Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 2 Dec 2019 15:47:26 -0500
Subject: [PATCH 2/4] Fixed having multiple return statements in post.js

---
 functions/handlers/post.js | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 2ccdc8e..440031a 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -40,31 +40,30 @@ exports.getallPostsforUser = (req, res) => {
         });
         return res.status(200).json(posts);
     })
-    .then(function() {
-    return res.status(200).json("Successfully retrieved all user's posts from database.");
-    
-    })
+    // .then(function() {
+    //     return res.status(200).json("Successfully retrieved all user's posts from database.");
+    // })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve user's posts from database.", err);
+        return res.status(500).json(`Failed to retrieve user's posts from database.\n${err}`);
     });
 };
 
 exports.getallPosts = (req, res) => {
     var post_query = admin.firestore().collection("posts");
     post_query.get()
-    .then(function(allPosts) {
-        let posts = [];
-        allPosts.forEach(function(doc) {
-            posts.push(doc.data());
+        .then(function(allPosts) {
+            let posts = [];
+            allPosts.forEach(function(doc) {
+                posts.push(doc.data());
+            });
+            return res.status(200).json(posts);
+        })
+        // .then(function() {
+        //     return res.status(200).json("Successfully retrieved every post from database.");
+        // })
+        .catch(function(err) {
+            return res.status(500).json(`Failed to retrieve posts from database.\n ${err}`);
         });
-        return res.status(200).json(posts);
-    })
-    .then(function() {
-    return res.status(200).json("Successfully retrieved every post from database.");
-    })
-    .catch(function(err) {
-    return res.status(500).json("Failed to retrieve posts from database.", err);
-    });
 };
 
 exports.quoteWithPost = (req, res) => {

From 72d099e05ec01772114216e4f6ce3a23b57c2340 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 20:26:31 -0500
Subject: [PATCH 3/4] Fixing errors and warnings

---
 functions/handlers/post.js                    |  7 +++---
 functions/handlers/users.js                   | 24 ++++++++++++++++---
 twistter-frontend/src/Userline.js             | 12 +++++-----
 twistter-frontend/src/Writing_Microblogs.js   |  8 +++----
 twistter-frontend/src/pages/Home.js           |  8 +++----
 twistter-frontend/src/pages/Login.js          |  2 +-
 twistter-frontend/src/pages/verify.js         |  2 +-
 .../src/redux/actions/userActions.js          | 20 ++++++++++------
 .../src/redux/reducers/userReducer.js         |  9 ++++++-
 9 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 440031a..292fa47 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -153,8 +153,8 @@ exports.quoteWithoutPost = (req, res) => {
       }
     })
     .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-
+        // return res.status(500).json({error: 'Something is wrong'});
+        return res.status(500).json({error: err});
     })
 
 }
@@ -195,7 +195,8 @@ exports.likePost = (req, res) => {
         }
     })
     .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
+        // return res.status(500).json({error: 'Something is wrong'});
+        return res.status(500).json({error: err});
     })
 
 }
diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index a4aea57..88fb87c 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -1,4 +1,5 @@
-/* eslint-disable promise/catch-or-return */
+/* eslint-disable promise/always-return */
+
 const { admin, db } = require("../util/admin");
 const config = require("../util/config");
 const { validateUpdateProfileInfo } = require("../util/validator");
@@ -304,12 +305,19 @@ exports.deleteUser = (req, res) => {
           })
           .then(() => {
             resolve();
+            return;
           })
           .catch((err) => {
             console.log("error " + err);
             reject(err);
+            return;
           })
       })
+      .catch((err) => {
+        console.log(err);
+        return res.status(500).json({error: err});
+      })
+
     })
   }
 
@@ -327,10 +335,12 @@ exports.deleteUser = (req, res) => {
       })
       .then(() => {
         resolve();
+        return;
       })
       .catch((err) => {
         console.log(err);
         reject(err);
+        return;
       })
   })
 
@@ -558,7 +568,11 @@ exports.addSubscription = (req, res) => {
         return res.status(500).json({ err });
       });
     return res.status(500).json({ error: "shouldn't execute" });
-  });
+  })
+  .catch((err) => {
+    console.log(err);
+    return res.status(500).json({error: err});
+  })
 };
 
 exports.getSubs = (req, res) => {
@@ -598,5 +612,9 @@ exports.removeSub = (req, res) => {
         return res.status(500).json({ err });
       });
     return res.status(500).json({ error: "shouldn't execute" });
-  });
+  })
+  .catch((err) => {
+    console.log(err);
+    return res.status(500).json({error: err});
+  })
 };
diff --git a/twistter-frontend/src/Userline.js b/twistter-frontend/src/Userline.js
index 8c95620..6c61d6d 100644
--- a/twistter-frontend/src/Userline.js
+++ b/twistter-frontend/src/Userline.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from 'react-router-dom';
-import Route from 'react-router-dom/Route';
+// import { BrowserRouter as Router } from 'react-router-dom';
+// import Route from 'react-router-dom/Route';
 import axios from 'axios';
 import Box from '@material-ui/core/Box'
-import {borders} from '@material-ui/system';
-import { sizing } from '@material-ui/system';
+// import {borders} from '@material-ui/system';
+// import { sizing } from '@material-ui/system';
 // var moment = require('moment');
 
 
@@ -41,7 +41,7 @@ class Userline extends Component {
             <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
                 <p>Userline</p>
             </div>
-            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
+            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign="left" padding="5px" flexWrap="wrap" flexDirection="row" >
                 <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
                 <p>
                 {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
@@ -50,7 +50,7 @@ class Userline extends Component {
                                                           <br></br>Number of comments: {microBlog.commentCount}
                                                           <br></br>Number of likes: {microBlog.likeCount}
                                                           <br></br>Body of post: {microBlog.body}
-                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}               
+                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join(", ")}               
                 </p>)} 
                 </p>
                 </div>
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 9cac7b7..e6f42a8 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import Route from "react-router-dom/Route";
+// import { BrowserRouter as Router } from "react-router-dom";
+// import Route from "react-router-dom/Route";
 import axios from "axios";
 
 class Writing_Microblogs extends Component {
@@ -113,10 +113,10 @@ class Writing_Microblogs extends Component {
               rows={20}
             />
             <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
+              <p>Characters Left: {this.state.characterCount}</p>
             </div>
             <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
+              <button onClick={this.handleSubmit}>Share Post</button>
             </div>
           </form>
         </div>
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fd288c0..da382e9 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -28,7 +28,7 @@ class Home extends Component {
     axios
       .get("/getallPosts")
       .then(res => {
-        console.log(res.data);
+        // console.log(res.data);
         this.setState({
           posts: res.data
         })
@@ -45,7 +45,7 @@ class Home extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card key={post.postId}>
           <CardContent>
             <Typography>
               {
@@ -53,7 +53,7 @@ class Home extends Component {
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
+            <Typography variant="h6"><b>{post.userHandle}</b></Typography>
             <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
                                                           " " + post.createdAt.substring(11,19)}</Typography>
             <br />
@@ -72,7 +72,7 @@ class Home extends Component {
 
     return (
       authenticated ?
-      <Grid container spacing={16}>
+      <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
         </Grid>
diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index 336255a..43279fa 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -110,7 +110,7 @@ export class Login extends Component {
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
           <br></br>
-          <Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
+          <Typography variant="h6" className={classes.pageTitle} fontFamily = "Georgia, serif">
             <b>Log in to Twistter</b>
             <br></br>
           </Typography>
diff --git a/twistter-frontend/src/pages/verify.js b/twistter-frontend/src/pages/verify.js
index e36a317..88a804e 100644
--- a/twistter-frontend/src/pages/verify.js
+++ b/twistter-frontend/src/pages/verify.js
@@ -89,7 +89,7 @@ export class verify extends Component {
 
   render() {
     const { classes } = this.props;
-    const { errors, loading } = this.state;
+    const { loading } = this.state;
 
     return (
       <Grid container className={classes.form}>
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 5993804..eae7a00 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -1,6 +1,18 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+import {
+  SET_USER, 
+  SET_ERRORS, 
+  CLEAR_ERRORS, 
+  LOADING_UI, 
+  // SET_AUTHENTICATED, 
+  SET_UNAUTHENTICATED
+} from '../types';
 import axios from 'axios';
 
+const setAuthorizationHeader = (token) => {
+  const FBIdToken = `Bearer ${token}`;
+  localStorage.setItem('FBIdToken', FBIdToken);
+  axios.defaults.headers.common['Authorization'] = FBIdToken;
+}
 
 export const getUserData = () => (dispatch) => {
     axios.get('/user')
@@ -80,9 +92,3 @@ export const deleteUser = () => (dispatch) => {
   delete axios.defaults.headers.common['Authorization'];
   dispatch({ type: SET_UNAUTHENTICATED });
 }
-
-const setAuthorizationHeader = (token) => {
-    const FBIdToken = `Bearer ${token}`;
-    localStorage.setItem('FBIdToken', FBIdToken);
-    axios.defaults.headers.common['Authorization'] = FBIdToken;
-}
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/reducers/userReducer.js b/twistter-frontend/src/redux/reducers/userReducer.js
index 7a29e90..e26509a 100644
--- a/twistter-frontend/src/redux/reducers/userReducer.js
+++ b/twistter-frontend/src/redux/reducers/userReducer.js
@@ -1,4 +1,11 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+import {
+    SET_USER,
+    // SET_ERRORS, 
+    // CLEAR_ERRORS, 
+    // LOADING_UI, 
+    SET_AUTHENTICATED, 
+    SET_UNAUTHENTICATED
+} from '../types';
 
 const initialState = {
     authenticated: false,

From fd1718a1f4fc988ac4d391d8a6abde91282e7f53 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 20:54:54 -0500
Subject: [PATCH 4/4] Fixing more errors

---
 twistter-frontend/package.json              |  2 +-
 twistter-frontend/src/Writing_Microblogs.js |  2 +-
 twistter-frontend/src/pages/Home.js         |  6 +++---
 twistter-frontend/src/pages/Search.js       |  9 +++++----
 twistter-frontend/src/pages/user.js         | 14 +++++++-------
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index 75afcb0..52e50f3 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -43,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5006/twistter-e4649/us-central1/api"
+  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
 }
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index e983690..70b67d0 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -5,7 +5,7 @@ import axios from "axios";
 
 // Material-UI
 import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
+// import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/styles/withStyles";
 
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 9fffb4c..7b1ba6d 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -86,7 +86,7 @@ class Home extends Component {
     );
 
     return (
-      authenticated ?
+      authenticated ? (
       <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -122,7 +122,7 @@ class Home extends Component {
                 </form>
               </div>
             </div>
-    );
+    ));
   }
 }
 
@@ -343,7 +343,7 @@ const mapStateToProps = (state) => ({
 
 Home.propTypes = {
   user: PropTypes.object.isRequired,
-  clases: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
   UI: PropTypes.object.isRequired
 }
 
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
index c8409f5..c6b9e70 100644
--- a/twistter-frontend/src/pages/Search.js
+++ b/twistter-frontend/src/pages/Search.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 // import props
-import { TextField, Button } from "@material-ui/core";
+// import { TextField, Button } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField"
 import Grid from "@material-ui/core/Grid";
 import axios from "axios";
 import Fuse from "fuse.js";
@@ -38,7 +39,7 @@ export class Search extends Component {
         handles: res.data,
         loading: false
       }, () => {
-        console.log(res.data);
+        // console.log(res.data);
         fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
       })
     })
@@ -65,7 +66,7 @@ export class Search extends Component {
     let result = fuse.search(event.target.value);
     let parsed = [];
     result.forEach((res) => {
-      console.log(res)
+      // console.log(res)
       parsed.push(this.state.handles[res])
     })
     this.setState({
@@ -80,7 +81,7 @@ export class Search extends Component {
   render() {
     let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
       this.state.searchResult.map(res => 
-        <Router>
+        <Router key={res}>
           <div>
             <a href={`/user/${res}`}>
               {res}
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 7a8f929..6a189b6 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -76,7 +76,7 @@ class user extends Component {
       profile: null,
       imageUrl: null,
       topics: null,
-      newTopic: null
+      newTopic: ""
     };
   }
 
@@ -179,7 +179,7 @@ class user extends Component {
         topic => (
           <MyChip
             label={topic}
-            key={topic.id}
+            key={topic}
             onDelete={key => this.handleDelete(topic)}
           />
         ) // console.log({ topic }.topic.id)
@@ -206,7 +206,7 @@ class user extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => (
-        <Card className={classes.card}>
+        <Card className={classes.card} key={post.postId}>
           <CardContent>
             <Typography>
               {this.state.imageUrl ? (
@@ -215,7 +215,7 @@ class user extends Component {
                 <img src={noImage} height="50" width="50" />
               )}
             </Typography>
-            <Typography variant="h7">
+            <Typography variant="h6">
               <b>{post.userHandle}</b>
             </Typography>
             <Typography variant="body2" color={"textSecondary"}>
@@ -285,7 +285,7 @@ class user extends Component {
                 <TextField
                   id="newTopic"
                   label="new topic"
-                  defaultValue=""
+                  // defaultValue=""
                   margin="normal"
                   variant="outlined"
                   value={this.state.newTopic}
@@ -295,7 +295,7 @@ class user extends Component {
                   className={classes.addCircle}
                   color="primary"
                   // iconStyle={classes.addCircle}
-                  clickable
+                  clickable="true"
                   onClick={this.handleAddCircle}
                   cursor="pointer"
                 />
@@ -321,7 +321,7 @@ const mapStateToProps = state => ({
 
 user.propTypes = {
   user: PropTypes.object.isRequired,
-  clases: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));