In-app notification API #147

e32wong · 2025-01-24T04:11:39Z

Changes:

Added support for notification API for two types of actions:
- New opinions
- Opinion agree/disagree
Implemented a new pull-down-to-refresh composable for the home feed and notification page
- Changed the loading animation to use q-inner-loading instead since we no longer use Quasar's pull-down-to-refresh component due to it being buggy
Moved the new conversation page's add poll button to the top menu bar as a temporary iOS fix (we will fix it by applying a layout system that is similar to the notification page later)

…BackendIntegration22

it to the top bar

nicobao · 2025-01-28T09:33:12Z

Changed the loading animation to use q-inner-loading instead since we no longer use Quasar's pull-down-to-refresh component due to it being buggy

Interesting, can you develop about what was buggy in Quasar's pull to refresh component?

nicobao · 2025-01-28T09:55:35Z

The profile list of conversation is broken for some reasons. I don't know if it's related to the PR or not.

the backend does return the data, but the frontend does not display it:

nicobao · 2025-01-28T09:56:34Z

Amazing work Edmund! Looks really good! Will continue the review later today.

e32wong · 2025-01-28T10:17:07Z

Changed the loading animation to use q-inner-loading instead since we no longer use Quasar's pull-down-to-refresh component due to it being buggy

Interesting, can you develop about what was buggy in Quasar's pull to refresh component?

The problem started when we switched to a more standard infinite scrolling system for the home feed and notification page using VueUse's useInfiniteScroll. Infinite scrolling had been problematic because when we are using Quasar's q-layout, the page layout system has no predefined height, so it had to be changed to a fixed height div to ensure that user scrolls are detected properly. There were two options. One is to use Quasar's own infinite scrolling system, the other is to roll with useInfiniteScroll. We used to use Quasar's infinite scrolling component, don't remember why but we dropped it due to some issues. So now in this PR we are rolling with useInfiniteScroll because our own infinite scroll implementation for the front page was too complicated.

So I switched up the two pages to mount the infinite scrolling system to a full screen fixed height div. When Quasar's pull down to refresh component is mounted on a fixed height div, it caused the infinite scrolling to be laggy/jumpy, and the pull down to refresh area is also not configurable and the selection area seems to be too large when it is mounted on a div container.

…rsation page instead of the opinion page

data

e32wong · 2025-01-28T10:48:07Z

The profile list of conversation is broken for some reasons. I don't know if it's related to the PR or not.

the backend does return the data, but the frontend does not display it:

This is now fixed. It was displaying the wrong data.

nicobao · 2025-01-28T10:52:53Z

Changed the loading animation to use q-inner-loading instead since we no longer use Quasar's pull-down-to-refresh component due to it being buggy

Interesting, can you develop about what was buggy in Quasar's pull to refresh component?

The problem started when we switched to a more standard infinite scrolling system for the home feed and notification page using VueUse's useInfiniteScroll. Infinite scrolling had been problematic because when we are using Quasar's q-layout, the page layout system has no predefined height, so it had to be changed to a fixed height div to ensure that user scrolls are detected properly. There were two options. One is to use Quasar's own infinite scrolling system, the other is to roll with useInfiniteScroll. We used to use Quasar's infinite scrolling component, don't remember why but we dropped it due to some issues. So now in this PR we are rolling with useInfiniteScroll because our own infinite scroll implementation for the front page was too complicated.

So I switched up the two pages to mount the infinite scrolling system to a full screen fixed height div. When Quasar's pull down to refresh component is mounted on a fixed height div, it caused the infinite scrolling to be laggy/jumpy, and the pull down to refresh area is also not configurable and the selection area seems to be too large when it is mounted on a div container.

Makes sense. I wonder what was the reason why we didn't use the infinite scrolling from quasar. It would be interesting at some point to fork the Quasar PullToRefresh component source code, and make our own custom pull to refresh component by fixing it. Because otherwise overall the look and feel was great. There are unfortunately no solid pull to refresh js library that is actively maintained.

nicobao · 2025-01-28T18:21:21Z

~~Change <username> have disagree to your opinion to <username> have disagreeD to your opinion~~
~~Change <username> have agree to your opinion to <username> have agreeD to your opinion~~
=> going to do a bunch of changes myself

nicobao · 2025-01-28T19:16:41Z

Two same conversation in the feed! with the same url (OK it happened after I deleted the back multiple times, so it may due to a weird sync error though, not priority)

nicobao · 2025-01-28T19:18:29Z

keep the inside text area white (including the background of the font modifiers)

nicobao · 2025-01-28T19:20:58Z

this should not have a grey background:

But a white one, like here:

e32wong · 2025-01-28T19:38:45Z

keep the inside text area white (including the background of the font modifiers)

Fixed by adding a white background.

e32wong · 2025-01-28T19:39:41Z

this should not have a grey background:

But a white one, like here:

Fixed with a white background.

nicobao

I would like us to create a prettier pull-to-refresh component probably only after the stack of UI/UX change you're already doing, and after we work to release to the store

nicobao · 2025-01-28T18:52:30Z

services/api/src/schema.ts

+    },
+    (t) => {
+        return {
+            userIdx: index("user_idx_notification").on(t.userId),


isn't this index already created because this is a foreign key?

No PostgreSQL doesn't create indexes automatically for foreign keys.

nicobao · 2025-01-28T19:49:48Z

For info the rationale for renaming is:

simplify naming as much as possible, user seemed to be redundant here so I deleted this prefix, as I don't expect we'll have another type of notification (if we have built-in monitoring for admins/mods, we can name it differently)
I suggest to use "fetch" for endpoints/functions that are used to fetch possibly large amount of data (infinite scrolling etc), while we use "get" for more static data.

nicobao · 2025-01-28T19:54:54Z

Also for naming I suggest we use authorId when we want to say that the userId refers to the.. author of said content data (specifically for opinion/vote/conversation/response to polls...etc, meaning any data actually created by the user), while we use userId for anything else (i.e: notification generated for a specific user, static phone/passport data associated with a specific user...etc)

e32wong added 30 commits January 21, 2025 09:21

Add dummy table for notifications

0b85155

Expand the notification table schema

671a72e

Add dummy table for notifications

c9813b4

Expand the notification table schema

ccd7efa

Merge branch 'BackendIntegration22' of github.com:e32wong/agora into …

6eb8489

…BackendIntegration22

Revise notification to an extended table design

f861956

Add db insertions when a comment is created or agreed upon

1e24161

Add a dummy fetch notification function for notification service

ca3f03a

Add notification sorting

be693f8

Link frontend to notification API

a6e8298

Add login gate for dings page

e3bdda4

Only create notification if it is not from the owner

55a1813

Add spam check for voting notification

4b84004

Style the notification page

8cd591b

Add new notifications indicator

d56a169

Add API to mark notifications as read

b317f09

Fix upvote notification's message

2e9acb3

Revise notification messages to a better message

95648ec

Match create post's color with the app background color

96dc486

Add temporary fix for new conversation page's add poll button by moving

7366aa0

it to the top bar

Adjust new post page's paddings

4bd2094

Add background for zkcard component

8ca6583

Use a slug ID system for the notification entries

aac4a9a

Fix notification feed API call's param

b000a16

Add createdAt index for db tables

1fb3d9e

Add proper sorting of notification fetch

37546e8

Make notification API ready for infinite scrolling

413aa44

Fix proper calculation of the new notification count

96e838e

Add infinite scrolling for the notification page

9563e93

Revamp the infinite scrolling of the frontpage

2a6e037

e32wong added 7 commits January 27, 2025 21:52

Add the missing data fetch for frontpage

1b34e03

Fix the pending new post button

85f2ea7

Create pull down to refresh composable

bde8445

Add auto update check for the notification tab

7c1d6cc

Add route redirection from the notification page

918cb34

Remove the unnecessary notification type enum

d2db13b

Improve infinite scrolling smoothness

a751f21

e32wong marked this pull request as ready for review January 28, 2025 06:11

Add hover colors for the compact post list and notification list

d27496c

e32wong added 2 commits January 28, 2025 05:24

Fixed the footer's user profile router path to push to router's conve…

ad00612

…rsation page instead of the opinion page

Fix bug where user profile's conversation page was displaying the wrong

8867d57

data

e32wong added 2 commits January 28, 2025 14:38

Add white background color for comment composer

4cacd25

Improve profile page's style with white background

07a1aa6

fix(notification): refactor naming, fix typos

4fa7925

nicobao reviewed Jan 28, 2025

View reviewed changes

nicobao merged commit b8786ec into zkorum:main Jan 28, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In-app notification API #147

In-app notification API #147

e32wong commented Jan 24, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025

nicobao commented Jan 28, 2025

e32wong commented Jan 28, 2025

e32wong commented Jan 28, 2025

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025

e32wong commented Jan 28, 2025

e32wong commented Jan 28, 2025

nicobao left a comment

nicobao Jan 28, 2025

e32wong Jan 28, 2025

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

In-app notification API #147

In-app notification API #147

Conversation

e32wong commented Jan 24, 2025 • edited Loading

nicobao commented Jan 28, 2025 • edited Loading

nicobao commented Jan 28, 2025

nicobao commented Jan 28, 2025

e32wong commented Jan 28, 2025

e32wong commented Jan 28, 2025

nicobao commented Jan 28, 2025 • edited Loading

nicobao commented Jan 28, 2025 • edited Loading

nicobao commented Jan 28, 2025

nicobao commented Jan 28, 2025 • edited Loading

nicobao commented Jan 28, 2025

e32wong commented Jan 28, 2025

e32wong commented Jan 28, 2025

nicobao left a comment

Choose a reason for hiding this comment

nicobao Jan 28, 2025

Choose a reason for hiding this comment

e32wong Jan 28, 2025

Choose a reason for hiding this comment

nicobao commented Jan 28, 2025 • edited Loading

nicobao commented Jan 28, 2025 • edited Loading

e32wong commented Jan 24, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading

nicobao commented Jan 28, 2025 •

edited

Loading