Display user picture in notifications

hotosm · Aug 8, 2022 · 69d8274 · 69d8274
1 parent e58c186
commit 69d8274
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 13 deletions.
diff --git a/backend/models/dtos/message_dto.py b/backend/models/dtos/message_dto.py
@@ -22,6 +22,7 @@ class MessageDTO(Model):
     )
     from_user_id = IntType(required=True, serialize_when_none=False)
     from_username = StringType(serialized_name="fromUsername", default="")
+    display_picture_url = StringType(serialized_name="displayPictureUrl", default="")
     project_id = IntType(serialized_name="projectId")
     project_title = StringType(serialized_name="projectTitle")
     task_id = IntType(serialized_name="taskId")

diff --git a/backend/models/postgis/message.py b/backend/models/postgis/message.py
@@ -90,6 +90,7 @@ def as_dto(self) -> MessageDTO:
 
         if self.from_user_id:
             dto.from_username = self.from_user.username
+            dto.display_picture_url = self.from_user.picture_url
 
         return dto
 

diff --git a/backend/services/messaging/message_service.py b/backend/services/messaging/message_service.py
@@ -84,6 +84,8 @@ def send_message_after_validation(
             "marked invalid" if status == TaskStatus.INVALIDATED else "validated"
         )
         task_link = MessageService.get_task_link(project_id, task_id)
+        project_link = MessageService.get_project_link(project_id, project_name)
+
         replace_list = [
             ["[USERNAME]", user.username],
             ["[TASK_LINK]", task_link],
@@ -104,7 +106,7 @@ def send_message_after_validation(
         validation_message.to_user_id = mapped_by
         validation_message.subject = (
             f"{task_link} mapped by you in Project "
-            + f"{project_name} #{project_id} has been {status_text}"
+            + f"{project_link} has been {status_text}"
         )
         validation_message.message = text_template
         messages.append(
@@ -230,6 +232,7 @@ def send_message_after_comment(
         project_name = ProjectInfo.get_dto_for_locale(project_id, default_locale).name
         if len(usernames) != 0:
             task_link = MessageService.get_task_link(project_id, task_id)
+            project_link = MessageService.get_project_link(project_id, project_name)
 
             messages = []
             for username in usernames:
@@ -246,7 +249,7 @@ def send_message_after_comment(
                 message.to_user_id = user.id
                 message.subject = (
                     f"You were mentioned in a comment in {task_link} "
-                    + f"of Project {project_name} #{project_id}"
+                    + f"of Project {project_link}"
                 )
                 message.message = comment
                 messages.append(
@@ -273,6 +276,8 @@ def send_message_after_comment(
             user_link = MessageService.get_user_link(user_from.username)
 
             task_link = MessageService.get_task_link(project_id, task_id)
+            project_link = MessageService.get_project_link(project_id, project_name)
+
             messages = []
             for user_id in contributed_users:
                 try:
@@ -290,7 +295,7 @@ def send_message_after_comment(
                 message.from_user_id = comment_from
                 message.task_id = task_id
                 message.to_user_id = user.id
-                message.subject = f"{user_link} left a comment in {task_link} of Project {project_name} #{project_id}"
+                message.subject = f"{user_link} left a comment in {task_link} of Project {project_link}"
                 message.message = comment
                 messages.append(
                     dict(message=message, user=user, project_name=project_name)
@@ -312,10 +317,13 @@ def send_project_transfer_message(
         with app.app_context():
             project = Project.get(project_id)
             project_name = project.get_project_title(project.default_locale)
+            project_link = MessageService.get_project_link(project_id, project_name)
 
             message = Message()
-            message.message_type = MessageType.PROJECT_ACTIVITY_NOTIFICATION.value
-            message.subject = f"Project {project_name} #{project_id} was transferred to {transferred_to}"
+            message.message_type = MessageType.SYSTEM.value
+            message.subject = (
+                f"Project {project_link} was transferred to {transferred_to}"
+            )
             message.message = (
                 f"Project {project_name} #{project_id} associated with your"
                 + f"organisation {project.organisation.name} was transferred to {transferred_to} by {transferred_by}."

diff --git a/backend/services/users/user_service.py b/backend/services/users/user_service.py
@@ -113,7 +113,7 @@ def update_user(user_id: int, osm_username: str, picture_url: str) -> User:
         if user.username != osm_username:
             user.update_username(osm_username)
 
-        if picture_url is not None and user.picture_url != picture_url:
+        if user.picture_url != picture_url:
             user.update_picture_url(picture_url)
 
         return user

diff --git a/frontend/src/components/notifications/notificationBodyCard.js b/frontend/src/components/notifications/notificationBodyCard.js
@@ -76,7 +76,16 @@ export const NotificationBodyModal = (props) => {
 
 export function NotificationBodyCard({
   loading,
-  card: { messageId, name, messageType, fromUsername, subject, message, sentDate },
+  card: {
+    messageId,
+    name,
+    messageType,
+    fromUsername,
+    displayPictureUrl,
+    subject,
+    message,
+    sentDate,
+  },
 }: Object) {
   const token = useSelector((state) => state.auth.get('token'));
   const location = useLocation();
@@ -107,7 +116,12 @@ export function NotificationBodyCard({
       <article className={`db  base-font mb3 mh2 blue-dark mw8`}>
         <div className={`dib`}>
           <div className="fl pl2">
-            <MessageAvatar fromUsername={fromUsername} messageType={messageType} size={'medium'} />
+            <MessageAvatar
+              fromUsername={fromUsername}
+              displayPictureUrl={displayPictureUrl}
+              messageType={messageType}
+              size={'medium'}
+            />
           </div>
 
           {showASendingUser && <div className={`pl5 f6 blue-dark fw5`}>{showASendingUser}</div>}

diff --git a/frontend/src/components/notifications/notificationCard.js b/frontend/src/components/notifications/notificationCard.js
@@ -22,7 +22,7 @@ export const stripHtmlToText = (notificationHtml) =>
 
 export const typesThatUseSystemAvatar = ['SYSTEM', 'REQUEST_TEAM_NOTIFICATION'];
 
-export const MessageAvatar = ({ messageType, fromUsername, size }: Object) => {
+export const MessageAvatar = ({ messageType, fromUsername, displayPictureUrl, size }: Object) => {
   const checkIsSystem = typesThatUseSystemAvatar.indexOf(messageType) !== -1;
 
   if (!fromUsername && !checkIsSystem) {
@@ -34,10 +34,10 @@ export const MessageAvatar = ({ messageType, fromUsername, size }: Object) => {
       {fromUsername /*picture={null} does a fetch user profile to get pic url */ ? (
         <UserAvatar
           username={fromUsername}
-          picture={null}
+          picture={displayPictureUrl}
           colorClasses="white bg-blue-grey"
           size={size}
-          disableLink={true}
+          disableLink={false}
         />
       ) : (
         checkIsSystem && (
@@ -58,6 +58,7 @@ export function NotificationCard({
   messageId,
   messageType,
   fromUsername,
+  displayPictureUrl,
   subject,
   read,
   sentDate,
@@ -100,7 +101,12 @@ export function NotificationCard({
           <CheckBox activeItems={selected} toggleFn={setSelected} itemId={messageId} />
         </div>
         <div className={`fl dib w2 h3 mr3`}>
-          <MessageAvatar messageType={messageType} fromUsername={fromUsername} size={'medium'} />
+          <MessageAvatar
+            messageType={messageType}
+            fromUsername={fromUsername}
+            displayPictureUrl={displayPictureUrl}
+            size={'medium'}
+          />
         </div>
 
         <strong
@@ -166,6 +172,7 @@ export function NotificationCardMini({
   messageId,
   messageType,
   fromUsername,
+  displayPictureUrl,
   subject,
   sentDate,
 }: Object) {
@@ -177,11 +184,17 @@ export function NotificationCardMini({
       >
         <div className="flex" style={{ gap: '1rem' }}>
           <div className="h2 v-top">
-            <MessageAvatar messageType={messageType} fromUsername={fromUsername} size={'medium'} />
+            <MessageAvatar
+              messageType={messageType}
+              fromUsername={fromUsername}
+              displayPictureUrl={displayPictureUrl}
+              size={'medium'}
+            />
           </div>
           <div>
             <div
               className="f7 messageSubjectLinks"
+              style={{ lineHeight: 1.21 }}
               dangerouslySetInnerHTML={rawHtmlNotification(subject)}
             ></div>
             <div className="blue-grey f7 mt2">