알림 실시간 빨간 동그라미 표시 #255
Closed
알림 실시간 빨간 동그라미 표시 #255
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit renames the `HeaderAlarmBlock` component to `HeaderAlarmModal` to better reflect its functionality as a modal rather than a static block. Accompanying this rename, interface names and import statements in related components are updated to ensure consistency and correct linkage across the project. This change improves the clarity and accuracy of the component naming.
This commit introduces a type alias `OpenModal` to manage the modal state in the `HeaderUserBlock` component. The type alias is used to clarify and restrict the values for opening different modals, making the state management more explicit and the code more readable. This refactor enhances maintainability and clarity of the modal handling logic.
This commit adds a new `HeaderAlarmIcon` component that includes a dynamic badge to indicate unread notifications. This component uses a polling mechanism via `useEffect` to periodically update the alarm status. It has been integrated into the `HeaderUserBlock`, replacing the direct use of the `Icons` component for displaying the alarm icon. This change enhances the notification functionality by visually indicating new alerts without user action.
…RY_KEY This commit refines the alarm updating mechanism in the HeaderAlarmIcon component by decoupling the mutation function from the useAlarmQuery hook, using it with a specific query key. The change involves exporting ALARM_QUERY_KEY from the use-alarm hook and updating the useEffect in HeaderAlarmIcon to use this key for more precise control over data updates. This approach reduces unnecessary dependencies in the useEffect and ensures more targeted data fetching.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
jaewoongs
reviewed
Jul 14, 2024
Comment on lines
13
to
16
| useEffect(() => { | ||
| const interval = setInterval(() => mutate(ALARM_QUERY_KEY(0)), 10000); | ||
| return () => clearInterval(interval); | ||
| }, []); |
There was a problem hiding this comment.
P1 : 현재 백엔드와 연계된 문제라고 생각하긴 하는데 지금 알람을 불러와서 안읽은게 있으면 빨간불이 뜨지만 한번 불러온 알람은 읽음 처리가 돼서 10초 뒤에 다시 api를 호출하면 빨간불이 사라집니다. 혹시 좋은 아이디어 있을까요??
There was a problem hiding this comment.
훅으로 따로 빼서 복잡하게 처리해야겠네요... 😢
…val options This commit updates the useAlarmQuery hook to include the revalidateOnFocus and dedupingInterval options in the useSWRInfinite function. By setting revalidateOnFocus to false and dedupingInterval to 1000 * 60 * 10, we prevent unnecessary revalidation of data when the page regains focus and reduce duplicate requests within a 10-minute interval. This optimization improves the performance and efficiency of data fetching in the useAlarmQuery hook.
This commit refactors the HeaderAlarmIcon component to use the newly created useAlarmBadge hook. The useAlarmBadge hook encapsulates the logic for determining whether to display the badge indicating unread notifications. By using this hook, the code becomes more modular and reusable. This change improves the maintainability and readability of the code.
Refactor the HeaderUserBlock component to use the newly created useAlarmBadge hook. This hook encapsulates the logic for determining whether to display the badge indicating unread notifications. By using this hook, the code becomes more modular and reusable, improving maintainability and readability.
서버에서의 추가 구현 없이는
경우를 해결 못할 것 같아요 🥲 |
Refactor the useAlarmBadge hook to handle unread notifications more accurately. This change ensures that the badge indicating unread notifications is displayed only when the first value in the data array is not marked as read. By improving the logic in the hook, we enhance the reliability and effectiveness of the badge display.
|
백엔드에서 알림을 불러오는 api와 읽었다고 보내는 api를 나눠서 하면 편하지 않을까요..? |
|
넹 서버에서 추가 구현이 가능하면 좋을 것 같아요 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
변경 개요
구현 내용
useAlarmQuery()사용isReaded가false면 빨간 점 표시관련 이슈