remove old profile picture in mongo db when adding a new one, add passing old metadata on updateMetadata

client/src/components/Settings/EditProfile.jsx

@@ -88,8 +88,13 @@ const EditProfile = () => {
     event.preventDefault();
     setIsSaving(true);
 
+    const newMetadata = {
+      ...metadata,
+      username: username,
+    }
+
     // saving is only waiting for metadata for now because in Emilia there is only google login, not email/password
-    updateUserMetadata(userId, { username: username }, onSave);
+    updateUserMetadata(userId, newMetadata, onSave);
     if (!usingOAuth) {
       const newUserData = {
         name, email, nickname: username
@@ -111,9 +116,12 @@ const EditProfile = () => {
   }
 
   const updateProfileImageInMetadata = (imageSrc) => {
-    updateUserMetadata(userId, {
+    const newMetadata = {
+      ...metadata,
       picture: imageSrc,
-    }, (newUserData) => {
+    }
+
+    updateUserMetadata(userId, newMetadata, (newUserData) => {
       setProfileImage(newUserData.user_metadata.picture || newUserData.picture);
       setShowReset(!!newUserData.user_metadata.picture);
     });

client/src/components/Settings/Settings.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import Profile from "./Profile";
 import { Box, InputBase, MenuItem, Select, Table, TableBody, TableCell, TableRow, Typography } from '@material-ui/core';
 import { useAuth0 } from "@auth0/auth0-react";
-import { getSettingsOfUser, getUserById, updateUserMetadata, updateUserSettingsForCategory } from "./settings.util";
+import { getSettingsOfUser, getUserById, updateUserSettingsForCategory } from "./settings.util";
 import { makeStyles } from "@material-ui/styles";
 import { allLanguages } from "../../i18n";
 import { muiTableBorder, withLoginRequired } from "../util";
@@ -98,13 +98,6 @@ const Settings = () => {
     }
   }
 
-  function updateLanguageInUserMetadata(lng) {
-    if (user) {
-      const newMetadata = { language: lng };
-      updateUserMetadata(user.sub, newMetadata, getUser);
-    }
-  }
-
   function updateLanguageInSettings(lng) {
     if (user) {
       updateUserSettingsForCategory(user.sub, 'language', lng, (newSettings) => {
@@ -117,7 +110,6 @@ const Settings = () => {
 
   const changeLanguage = (lng) => {
     i18n.changeLanguage(lng).then(() => {console.log('changed language to ', lng)});
-    updateLanguageInUserMetadata(lng);
     updateLanguageInSettings(lng);
   }
 

client/src/components/Settings/settings.util.jsx

@@ -51,7 +51,8 @@ export const deleteUser = (userId, callback) => {
 /**
  * updates user metadata in Auth0 database
  * @param {string} userId id of the user whose metadata is to be changed
- * @param {Object} newMetadata metadata to be changed (will not affect attributes that is not passed)
+ * @param {Object} newMetadata metadata to be changed (when updating the picture, it DOES delete attributes that are not passed, which it should not do.
+ *                             there is an inconsistency in how other data is affected, so for safety, always pass the entire metadata object)
  * @param {function} callback function to be executed after updating (receives new updated metadata)
  */
 export const updateUserMetadata = (userId, newMetadata, callback) => {

server/controllers/images.controllers.js

@@ -46,6 +46,7 @@ export const uploadSingleImage = async (req, res) => {
     folder: folderName,
     tags: tags || [],
   };
+
   if (category === 'userProfile') {
     uploadOptions.folder = category;
     uploadOptions.public_id = categoryId;
@@ -63,9 +64,13 @@ export const uploadSingleImage = async (req, res) => {
       name,
     });
     try {
-      newImage.save().then(() => {
-        // console.log('added image to ' + folderName, public_id, name);
-        res.status(201).json({ 'message': 'successfully added new Image', 'Image': newImage })
+      // try to delete an already existing profile picture since it just gets replaced on cloudinary and then save the new one
+      Image.findOneAndDelete({categoryName: 'userProfile', cloudinaryPublicId: public_id}).then((deletedImaged) => {
+        console.log('replaced', deletedImaged, 'with', newImage);
+        newImage.save().then(() => {
+          // console.log('added image to ' + folderName, public_id, name);
+          res.status(201).json({ 'message': 'successfully added new Image', 'Image': newImage })
+        });
       });
     } catch (error) {
       res.status(409).json({ message: error.message, errorDetails: 'upload successful, but database storage failed' });