make contacts update whenever click on social

client/.env

@@ -1,7 +1,7 @@
 REACT_APP_SERVER_URL=https://emealay-server.herokuapp.com
 REACT_APP_NAV_BOTTOM_HEIGHT=45
 REACT_APP_NAV_TOP_HEIGHT=45
-REACT_APP_GRID_LIST_ROW_HEIGHT=120
+REACT_APP_GRID_LIST_ROW_HEIGHT=125
 REACT_APP_LOGIN_REDIRECT=http://localhost:3000/plans
 REACT_APP_LOGOUT_REDIRECT=http://localhost:3000/
 REACT_APP_AUTH0_DOMAIN=emealay.eu.auth0.com

client/src/components/Settings/Profile.jsx

@@ -5,7 +5,7 @@ import { makeStyles } from "@material-ui/styles";
 import { useTranslation } from "react-i18next";
 import CircleImage from "../Images/CircleImage";
 import { muiTableBorder } from "../util";
-import { Box, Dialog, Link, Table, TableBody, TableCell, TableContainer, TableRow, Typography } from "@material-ui/core";
+import { Box, Dialog, Table, TableBody, TableCell, TableContainer, TableRow, Typography } from "@material-ui/core";
 
 const useStyles = makeStyles(theme => ({
   imageWrapper: {

client/src/components/Social/FriendOrUnfriendButton.jsx

@@ -5,8 +5,7 @@ import { IconButton } from "@material-ui/core";
 import { PersonAdd, PersonAddDisabled } from "@material-ui/icons";
 import { makeStyles } from "@material-ui/styles";
 import { array, bool, func, object } from "prop-types";
-import { fetchContactsOfUser } from "./social.util";
-import { updateUserSettingsForCategory } from "../Settings/settings.util";
+import { fetchContactsOfUser, updateUserContacts } from "./social.util";
 
 const useStyles = makeStyles(theme => ({
   iconButtonInCircle: {
@@ -39,10 +38,9 @@ const FriendOrUnfriendButton = (props) => {
 
   const updateContacts = (newContacts) => {
     if (user) {
-      updateUserSettingsForCategory(user.sub, 'contacts', newContacts, (settings) => {
-        const sortedContacts = settings.contacts.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1)
-        if (afterUpdateContacts) afterUpdateContacts(sortedContacts);
-        setContacts(sortedContacts);
+      updateUserContacts(user.sub, newContacts, (updatedContacts) => {
+        if (afterUpdateContacts) afterUpdateContacts(updatedContacts);
+        setContacts(updatedContacts);
       });
     }
   }

client/src/components/Social/Social.jsx

@@ -6,7 +6,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { makeStyles } from '@material-ui/styles';
 import UserSearch from "./UserSearch";
 import { useTranslation } from "react-i18next";
-import { fetchContactsOfUser, getContactName, getContactPicture } from "./social.util";
+import { fetchContactsOfUser, getContactName, getContactPicture, updateContactsFromAuth0 } from "./social.util";
 import { Route, Switch, useHistory, useRouteMatch } from "react-router-dom";
 import ContactsContent from "./ContactsContent";
 import { withLoginRequired } from "../util";
@@ -34,18 +34,20 @@ const Social = () => {
   const [contacts, setContacts] = useState([]);
   const [noContactsFound, setNoContactsFound] = useState(false);
 
-  const fetchContacts = () => {
+  const fetchContacts = (updateContactsData = false) => {
     if (user) {
       const userId = user.sub;
       fetchContactsOfUser(userId, (contactsFound) => {
         setContacts(contactsFound);
-        if (contactsFound.length === 0) setNoContactsFound(true);
+        if (contactsFound.length === 0) {
+          setNoContactsFound(true);
+        } else if (updateContactsData) updateContactsFromAuth0(userId, contactsFound.map(c => c.user_id), setContacts);
       });
     }
   }
 
   useEffect(() => {
-    fetchContacts();
+    fetchContacts(true);
     // eslint-disable-next-line
   }, [])
 

client/src/components/Social/social.util.jsx

@@ -1,6 +1,6 @@
 /** File includes all helper methods for social */
 import axios from "axios";
-import { createNewSettingsForUser } from "../Settings/settings.util";
+import { createNewSettingsForUser, updateUserSettingsForCategory } from "../Settings/settings.util";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -22,5 +22,40 @@ export const fetchContactsOfUser = (userId, updateContacts) => {
        }).catch(err => {console.log(err)});
 }
 
+/**
+ * Updates all user contacts to represent the current data of the Auth0 database in case someone has changed their nickname or picture
+ * @param {String} userId
+ * @param {[String]} contactIDs
+ * @param {function} updateContacts
+ */
+export const updateContactsFromAuth0 = (userId, contactIDs, updateContacts) => {
+  if (userId && contactIDs && contactIDs.length > 0) {
+    axios.get(serverURL + '/users/all')
+         .then(res => {
+           const usersFound = res.data;
+           console.log('usersFound', usersFound);
+           const contactsOfUser = usersFound.filter(u => contactIDs.includes(u.user_id));
+           console.log('usersFiltered', contactsOfUser);
+           updateContacts(contactsOfUser);
+           updateUserContacts(userId, contactsOfUser, updateContacts);
+         }).catch(err => {console.log(err)});
+  }
+}
+
+/**
+ * Update user contacts in settings collection
+ * @param {String} userId userId of user whose contacts are to be updated
+ * @param {*} newContacts contacts to put into the database
+ * @param {function} updateContacts callback that gets new updated contacts as parameter
+ */
+export const updateUserContacts = (userId, newContacts, updateContacts) => {
+  if (userId) {
+    updateUserSettingsForCategory(userId, 'contacts', newContacts, (settings) => {
+      const sortedContacts = settings.contacts.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1)
+      updateContacts(sortedContacts);
+    });
+  }
+}
+
 export const getContactName = (contact) => (contact.user_metadata && contact.user_metadata.nickname) ? contact.user_metadata.nickname : contact.name;
 export const getContactPicture = (contact) => (contact.user_metadata && contact.user_metadata.picture) ? contact.user_metadata.picture : contact.picture;