Feature: Add announcement module #156

Hardik-hi · 2022-07-04T15:15:13Z

Description

Added Announcements Module.

Changes

Added filters for announcements
Added infinite scroll for viewing announcements (current implementation is a mock, in actual scenario multiple announcements will load on scrolling as configured by admin)
Added pinned announcements
Added modal to view announcement, with custom badges and tags

How to test

Run the announcements and core modules using lerna run start --parallel --scope='{core,announcements}'

CC: @coolbung

Use cases

Pinned announcements: announcements which appear on top of other announcements. They are sorted by decreasing order of date by default. They are of two types- dismissable and non-dismissable, the former can be closed with a X mark on the right hand side.
Infinite scroll: When user scrolls in the announcements display area, some announcements are loaded in sets of admin configured value, say 20.
Each announcement has a badge of announcement type shown on right hand side in the list. This can be configured from the backend.
On opening each announcement, some optional tags are also there, say for an event, there may be tags showing the date, time and venue of the event. They can be used to quickly skim through the announcement details.

coolbung · 2022-07-05T09:57:03Z

Looking great @Hardik-hi Can you also update the description with a few uses for the benefit of other reviewers.

@sagarihanda @RinkleDang -- request you to take a look at the demo and share feedback on the UI. One thing I'd certainly like is for the pinned notifications (the one in the yellow background is a pinned one) sitting all the way on the top on all pages

RinkleDang · 2022-07-06T07:29:42Z

Hello @Hardik-hi

This good great and hindi translation is also impressive! I just had 2 inputs :

We may make the yellow notification clear about what does it represent, as for now it seemed more of a tip to me until I read the user cases, so possibly some sort of an icon or a tag which makes sure that it is a pinned notification should work. Additionally, we can explore different colours (for instance, light orange being used for other notifications frame as a background here) to make sure it stands out but is aligned with the flow below. You could also explore if this should be placed down right above the whole notifications scroll as right now this seems a little in the air.
Additionally, not sure if I understand the first user-case in terms of dismissable and non-dismissable. If you could help me understand it's implications, that would be great. However, as Ashwin said, pinned notifications should appear on all pages.

Thank you!

Hardik-hi · 2022-07-06T17:58:53Z

Hi @RinkleDang. Thanks for the inputs.

I will add a pinned icon to the left side to the notification. The colors are configurable from the admin portal so they can be set accordingly. Regarding the placement, the example @coolbung provided me was a banner like in (this). As per my understanding they are more of an announcement banner, should catch the user's attention as soon as they open the page (@coolbung correct me if I'm wrong) hence I have placed it separately from the other announcements; placing it above other announcements would be a bit less differentiating I believe.
Some announcements/banners cannot be dismissed by the user while others can be, like in this. This too, can be configured by the admin. So the whole idea is for the admin to decide whether they want the banner to stay atop mandatorily or to not disturb the user as they use the page.

@coolbung Please provide any points which I might have missed.

Thanks

Hardik-hi · 2022-07-06T19:25:46Z

@RinkleDang It looks like this with the pin icon:

coolbung · 2022-07-07T04:58:43Z

This looks good. Can you move the pinned announcements to the very top of the screen @Hardik-hi i.e. on top of the back icon. What would that need ?

cc @arajput

Hardik-hi · 2022-07-11T08:39:03Z

Hey @coolbung I've pushed the changes
It looks like this

Shruti3004 · 2022-07-12T07:57:10Z

Hey @Hardik-hi build is faliing can you please run yarn-format in root.

arajput · 2022-07-12T09:43:36Z

@Hardik-hi ,
$ prettier --check .
Checking formatting...
[warn] packages/announcements/public/locales/hi/announcements.json
[warn] packages/announcements/src/pages/Announcements.js
[warn] jsxBracketSameLine is deprecated.
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

please run yarn format to fix code format issues

arajput · 2022-07-12T09:47:32Z

packages/announcements/craco.config.js

+
+module.exports = {
+  devServer: {
+    port: 3008,


can you please check if this port does not conflicts with port in other packages?

Checked, changed port to 4002

keep the pot number in 3000 series only

packages/announcements/public/manifest.json

arajput · 2022-07-12T09:53:48Z

packages/announcements/craco.config.js

+
+module.exports = {
+  devServer: {
+    port: 3008,


is port used by some other modules?

packages/announcements/src/pages/Announcements.js

packages/common-lib/src/components/layout/AppBar.js

arajput

pls go trough the comments and update

Hardik-hi · 2022-07-12T18:08:56Z

@Shruti3004 @arajput I have updated the code and pushed, please review

arajput · 2022-07-13T05:13:41Z

packages/common-lib/src/components/layout/AppBar.js

@@ -25,6 +25,7 @@ export default function AppBar({
  onPressBackButton,
  rightIcon,
  isShowNotificationButton,
+  showPinnedAnnouncements,


is this variable used?

arajput

pls correct the port number too 3000 series.
fix code format issues using yarn format

Hardik-hi · 2022-07-13T06:15:12Z

@arajput Changed port to 3010 now, please review

Hardik-hi force-pushed the features/announcements-module branch from 494d064 to 315f52e Compare July 11, 2022 08:36

arajput reviewed Jul 12, 2022

View reviewed changes

packages/announcements/public/manifest.json Outdated Show resolved Hide resolved

arajput reviewed Jul 12, 2022

View reviewed changes

packages/announcements/src/pages/Announcements.js Outdated Show resolved Hide resolved

arajput reviewed Jul 12, 2022

View reviewed changes

packages/common-lib/src/components/layout/AppBar.js Outdated Show resolved Hide resolved

arajput requested changes Jul 12, 2022

View reviewed changes

Hardik-hi force-pushed the features/announcements-module branch from 315f52e to 3bb753c Compare July 12, 2022 18:05

arajput reviewed Jul 13, 2022

View reviewed changes

arajput requested changes Jul 13, 2022

View reviewed changes

Hardik-hi force-pushed the features/announcements-module branch from fdcd8e4 to 7885da0 Compare July 13, 2022 06:14

Hardik-hi force-pushed the features/announcements-module branch from 7885da0 to 54e1316 Compare July 18, 2022 18:57

Hardik-hi requested a review from arajput July 20, 2022 15:36

Hardik-hi force-pushed the features/announcements-module branch from 3b577f0 to 73c8a1f Compare August 5, 2022 12:42

Shruti3004 added C4GT has merge conflicts labels Aug 18, 2022

Hardik-hi added 4 commits August 23, 2022 18:01

Feature:add announcement module

c1ddc61

Modified moduleentry, added icon to pinned anncmnt

248fc3d

Moved pinned announcements to top

797975b

Added favicons, changed port, added search trans.

face502

Hardik-hi added 11 commits August 23, 2022 18:11

Refactored into PinnedAnnouncementComponent

6bf86e5

Changed port to 3010, removed console.logs

3632765

Added pinned announcements whitelist config

8dd7845

Integrated with backend

c008866

Added author

6be1c3a

Integrated filters and search

bc5b1ad

Refined translations

ac3ac40

feat: added pinned announcements

719e64a

added appName for packages

1ffb08f

added firebase notif files for announcements

25db3dc

fix: change variant of author badge

744ea8f

Hardik-hi force-pushed the features/announcements-module branch from a70b94f to 744ea8f Compare August 23, 2022 12:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Add announcement module #156

Feature: Add announcement module #156

Hardik-hi commented Jul 4, 2022 •

edited

Loading

coolbung commented Jul 5, 2022

RinkleDang commented Jul 6, 2022

Hardik-hi commented Jul 6, 2022

Hardik-hi commented Jul 6, 2022

coolbung commented Jul 7, 2022

Hardik-hi commented Jul 11, 2022

Shruti3004 commented Jul 12, 2022

arajput commented Jul 12, 2022 •

edited

Loading

arajput Jul 12, 2022

Hardik-hi Jul 12, 2022

arajput Jul 13, 2022

arajput Jul 12, 2022

arajput left a comment

Hardik-hi commented Jul 12, 2022

arajput Jul 13, 2022

arajput left a comment

Hardik-hi commented Jul 13, 2022

Feature: Add announcement module #156

Are you sure you want to change the base?

Feature: Add announcement module #156

Conversation

Hardik-hi commented Jul 4, 2022 • edited Loading

Description

Changes

How to test

Use cases

coolbung commented Jul 5, 2022

RinkleDang commented Jul 6, 2022

Hardik-hi commented Jul 6, 2022

Hardik-hi commented Jul 6, 2022

coolbung commented Jul 7, 2022

Hardik-hi commented Jul 11, 2022

Shruti3004 commented Jul 12, 2022

arajput commented Jul 12, 2022 • edited Loading

arajput Jul 12, 2022

Choose a reason for hiding this comment

Hardik-hi Jul 12, 2022

Choose a reason for hiding this comment

arajput Jul 13, 2022

Choose a reason for hiding this comment

arajput Jul 12, 2022

Choose a reason for hiding this comment

arajput left a comment

Choose a reason for hiding this comment

Hardik-hi commented Jul 12, 2022

arajput Jul 13, 2022

Choose a reason for hiding this comment

arajput left a comment

Choose a reason for hiding this comment

Hardik-hi commented Jul 13, 2022

Hardik-hi commented Jul 4, 2022 •

edited

Loading

arajput commented Jul 12, 2022 •

edited

Loading