Notification Component for Notification Panel #311

anthonycruzmacedo · 2022-02-28T22:59:33Z

Summary

Notification component for notification panel that displays a source's profile picture, a notification message, a timestamp,
a conditional view dot, and redirects when clicked
Closes: #299

Changes

create Notification.jsx, NotificationStyles.js
add viewNotification method to api.js
add useParams to ProjectDetails.jsx, update useEffect() for getProject method to fix page reload bug when a notification is clicked while already on a project page

Screenshots

…omponent and props to PageWrapper.jsx

…very functional yet

…m/notification-panel

…ant to component

…tification message

ajain1921

Great work overall! I left a few comments about how you can make the code a little cleaner. In terms of next steps, I'll get Andrew's stuff merged in so you can connect with the backend. Also, it might make sense to move Notification into notification_panel but up to you.

zubhub_frontend/zubhub/src/components/notification/Notification.jsx

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

zubhub_frontend/zubhub/src/store/actions/userActions.js

…file, simplify logic in scripts, remove viewComment from userActions.js, call API.viewNotification directly in component

NdibeRaymond · 2022-03-20T02:17:04Z

Great job overall, thanks to everyone involved! Though still draft, something caught my attention. It seems we are not building with internalization in mind. The renderTimeAgo function easily comes to mind as a violator. If we can we should use dFormatter for everything concerning date formatting and nFormatter for anything concerning number formatting. It is easy to hook up the values returned from these functions into i18next for translation. To get an idea, try searching for dFormatter and observe how it's being used across the codebase.

…tification message

anthonycruzmacedo · 2022-03-29T01:58:54Z

Hi Raymond thanks for the feedback. I've updated the component to use dFormatter for the time stamp, as well as i18next translations for the message and timestamp.

…fix small format issue in comment template

…g in project details useEffect

ajain1921

Great work Anthony! Thanks for fixing some of the templates and getting the diagonal pics to work. Overall the component looks really clean and I just left a few comments about minor fixes. Feel free to squash merge when you're done.

zubhub_frontend/zubhub/src/assets/js/styles/components/notification/NotificationStyles.js

zubhub_frontend/zubhub/src/components/notification/Notification.jsx

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

ajain1921 · 2022-04-06T20:26:40Z

zubhub_frontend/zubhub/src/components/notification/Notification.jsx

+  const getMessage = () => {
+    let message = '';
+    // 55 character message limit + 17 for strong tags being counted as well
+    if (notification.message.length < 72) {
+      message += notification.message;
+    } else {
+      message += notification.message.slice(0, 72) + '...';
+    }
+    return message;
+  };
+


This might be a nice option for text overflow.

I looked at this a bit but it doesn't seem -webkit-box is compatible with JS styles

…consistent character limits, remove mock data from PageWrapper

* Outline for Notification components and stylings * Testing notification * Complete majority of stylings for notification component, add dummy component and props to PageWrapper.jsx * Complete stylings for notification component, fix hovers! * Make small style changes to notification component * Begin connecting to backend using realistic parameters, not clean or very functional yet * Begin adapting notification panel to hold notification components * Finish stylings for notification component and message rendering * Finish up API methods to updated viewed notification, add token constant to component * Add logic for rendering notification timestamp, redirect link, and notification message * Clean up and reduce code, remove redunant or unused sections * Move renderTimeAgo and getNotification to new NotificationScripts.js file, simplify logic in scripts, remove viewComment from userActions.js, call API.viewNotification directly in component * Add proper date formatting using dFormatter, string truncation for notification message * Add double image design to nofications, add project titles to views, fix small format issue in comment template * Finish up issue, update notification templates for consitency, fix bug in project details useEffect * Update clapped web_many message to not include strong tags * Update web_many message templates to include project name * Fix url * Minor fixes, add mobile width dependency, update getMessage() to get consistent character limits, remove mock data from PageWrapper Co-authored-by: Aditya Jain <[email protected]>

* Create notifications folder in zubhub_backend/zubhub, begin implementing test functions * Move send_whatsapp function to adapters.py, create task in tasks.py, create send-notification path for testing, test get method in views * Create notifications folder in zubhub_backend/zubhub, begin implementing test functions * Move send_whatsapp function to adapters.py, create task in tasks.py, create send-notification path for testing, test get method in views * Use whatsapp phone in adapter * Fix whatsapp message sending * Fix bug in send_whatsapp function in adapters.py * Fix settings name * Notification Model and Endpoints (#286) * initial commit * fix namings * Add update and delete requests * Add boilerplate stuff * finish all endpoints * Add source and preferred contact * modifications to notification endpoints * fix notification list view * hyphens * address merge conflict * Update start Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Grace Zhang <[email protected]> Co-authored-by: Aditya Jain <[email protected]> Co-authored-by: Zora Zhang <[email protected]> * Add notification button components (#302) * Add notification button components * Fix popper positioning * Add popper arrow and inner content * Give dropdown box shadow * Add mobile view * Fix box shadow on arrow for dropdown panel * Fix coloring of unread notifications text * Add push notification util function and use CreatorSerializer (#316) * Add push notification util function and use CreatorSerializer for notification serializer * Add notification type field to notification model * Add type to notification serializer and add migration * Remove references to message property of notification * Add viewed to notification serializer * Use creator minimal serializer * Add new link property to notification model * Notification Helper Function (#306) * initial setup * add setting * fix the way to get setting * commit * finished and tested function * add original code back in * modify function to send mass text/email * Add channel verification Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Aditya Jain <[email protected]> * Fix migrations * Add several functions and maps for notifications logic (#324) * Add several functions and maps for notifications logic, not working * Finish notification sending function * Remove redundant check for valid notification channel for notification type * Send notifications when notification events occur * Recommend unused function * Add throttle classes back * Fix file extensions * Fix notification template prefix * Add message field to notification model to support notifications that mention project names * Properly create migrations and use char field * Use name instead of label for django integer choice class * Change notification link attribute to be a char field * Fix email templates for notifications * Notifications panel loading notifications complete (#341) * Notifications panel loading notifications complete * Use artifical loading for pages after 1 * Change padding * Add comment for recent notification threshold * Remove console log * Format * Remove unncessary space * Reset scroll on notification tab change * Add notification grouping code (#351) * Add notification grouping code * Use set to determine valid grouped notification types * Actually make the grouping work * Persist context for pushing notifications * Remove prints * Fix django db warning' * Return notification in all branch paths * No need to return notification * Notification Component for Notification Panel (#311) * Outline for Notification components and stylings * Testing notification * Complete majority of stylings for notification component, add dummy component and props to PageWrapper.jsx * Complete stylings for notification component, fix hovers! * Make small style changes to notification component * Begin connecting to backend using realistic parameters, not clean or very functional yet * Begin adapting notification panel to hold notification components * Finish stylings for notification component and message rendering * Finish up API methods to updated viewed notification, add token constant to component * Add logic for rendering notification timestamp, redirect link, and notification message * Clean up and reduce code, remove redunant or unused sections * Move renderTimeAgo and getNotification to new NotificationScripts.js file, simplify logic in scripts, remove viewComment from userActions.js, call API.viewNotification directly in component * Add proper date formatting using dFormatter, string truncation for notification message * Add double image design to nofications, add project titles to views, fix small format issue in comment template * Finish up issue, update notification templates for consitency, fix bug in project details useEffect * Update clapped web_many message to not include strong tags * Update web_many message templates to include project name * Fix url * Minor fixes, add mobile width dependency, update getMessage() to get consistent character limits, remove mock data from PageWrapper Co-authored-by: Aditya Jain <[email protected]> * Notification feature fix (#429) * Fix most notification feature bugs * Fix app bar on top of other elements * Fix panel zindex * Fix panel loading * Fix comment notif Co-authored-by: Aditya Jain <[email protected]> * Add quotes to template * linearize migrations * Fix import * Add project to template * Styling fixes * Delete .gitignore Co-authored-by: saxytony <[email protected]> Co-authored-by: AndrewLester <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Grace Zhang <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: saxytony <[email protected]>

anthonycruzmacedo added 4 commits February 28, 2022 16:56

Outline for Notification components and stylings

817bab4

Testing notification

eaa0a03

Merge branch 'notification_feature' into al-acm/notification-panel

4f50ae6

Complete majority of stylings for notification component, add dummy c…

f34fea8

…omponent and props to PageWrapper.jsx

ajain1921 changed the base branch from master to notification_feature March 3, 2022 01:06

anthonycruzmacedo added 9 commits March 2, 2022 20:35

Complete stylings for notification component, fix hovers!

4dc0288

Make small style changes to notification component

d0bd871

Begin connecting to backend using realistic parameters, not clean or …

5dc1b06

…very functional yet

Merge remote-tracking branch 'origin/notification_feature' into al-ac…

82faf42

…m/notification-panel

Begin adapting notification panel to hold notification components

ca6dfbd

Finish stylings for notification component and message rendering

40d1369

Finish up API methods to updated viewed notification, add token const…

088acb6

…ant to component

Add logic for rendering notification timestamp, redirect link, and no…

6752251

…tification message

Clean up and reduce code, remove redunant or unused sections

99732b9

ajain1921 reviewed Mar 14, 2022

View reviewed changes

Move renderTimeAgo and getNotification to new NotificationScripts.js …

b8d31b5

…file, simplify logic in scripts, remove viewComment from userActions.js, call API.viewNotification directly in component

anthonycruzmacedo added 3 commits March 23, 2022 23:18

Include i18next translation for timestamps

85457dd

Add proper date formatting using dFormatter, string truncation for no…

bffb585

…tification message

Add i18next translation to notification

cae29cb

anthonycruzmacedo marked this pull request as ready for review March 29, 2022 02:04

anthonycruzmacedo requested review from NdibeRaymond and tuxology as code owners March 29, 2022 02:04

Fix conflicts

04f2bad

tuxology added the h4i Hack4Impact issue label Apr 1, 2022

anthonycruzmacedo added 4 commits April 4, 2022 21:45

Add double image design to nofications, add project titles to views, …

68e8575

…fix small format issue in comment template

Finish up issue, update notification templates for consitency, fix bu…

34edeee

…g in project details useEffect

Update clapped web_many message to not include strong tags

044c01c

Update web_many message templates to include project name

f5006ec

anthonycruzmacedo changed the title ~~Outline for Notification components and stylings~~ Notification Component for Notification Panel Apr 6, 2022

anthonycruzmacedo requested a review from ajain1921 April 6, 2022 03:31

Fix url

d3e4897

ajain1921 approved these changes Apr 6, 2022

View reviewed changes

anthonycruzmacedo added 2 commits April 6, 2022 17:21

Minor fixes, add mobile width dependency, update getMessage() to get …

da79092

…consistent character limits, remove mock data from PageWrapper

Merge changes

0736655

anthonycruzmacedo merged commit 7de5da2 into notification_feature Apr 6, 2022

anthonycruzmacedo deleted the al-acm/notification-panel branch April 7, 2022 03:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notification Component for Notification Panel #311

Notification Component for Notification Panel #311

anthonycruzmacedo commented Feb 28, 2022 •

edited

Loading

ajain1921 left a comment

NdibeRaymond commented Mar 20, 2022

anthonycruzmacedo commented Mar 29, 2022

ajain1921 left a comment

ajain1921 Apr 6, 2022

anthonycruzmacedo Apr 6, 2022

Notification Component for Notification Panel #311

Notification Component for Notification Panel #311

Conversation

anthonycruzmacedo commented Feb 28, 2022 • edited Loading

Summary

Changes

Screenshots

ajain1921 left a comment

Choose a reason for hiding this comment

NdibeRaymond commented Mar 20, 2022

anthonycruzmacedo commented Mar 29, 2022

ajain1921 left a comment

Choose a reason for hiding this comment

ajain1921 Apr 6, 2022

Choose a reason for hiding this comment

anthonycruzmacedo Apr 6, 2022

Choose a reason for hiding this comment

anthonycruzmacedo commented Feb 28, 2022 •

edited

Loading