forked from bepronetwork/web-network
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bepro 2237 notification subscribe to task (#479)
* create notification settings table * add notification icons * add subscriptions column to table and model * create endpoint and hooks to subscribe/unsubscribe * fix model name * fix condition * create subscription button component * add subscription button to task hero * remove default value * fix reading of null * create task subscription hook and refactor subscription button to use it * stop propagation to avoid redirection when button is clicked * dont show subscribe button if task is cancelled or closed * add tooltip to button * adjust button design * omit subscriptions * update notifications text
- Loading branch information
Showing
22 changed files
with
351 additions
and
33 deletions.
There are no files selected for viewing
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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { SVGProps } from "react"; | ||
|
|
||
| export default function BellSlashIcon(props: SVGProps<SVGSVGElement>) { | ||
| return ( | ||
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}> | ||
| <path d="M6.74002 4.32933C6.6522 4.23034 6.54561 4.14976 6.42642 4.09227C6.30723 4.03478 6.17781 4.00151 6.04567 3.9944C5.91353 3.9873 5.7813 4.00648 5.65663 4.05086C5.53196 4.09523 5.41734 4.16391 5.3194 4.25291C5.22147 4.34191 5.14218 4.44946 5.08612 4.56933C5.03006 4.6892 4.99835 4.819 4.99282 4.95122C4.9873 5.08343 5.00807 5.21543 5.05394 5.33956C5.0998 5.46369 5.16985 5.57748 5.26002 5.67433L7.35252 7.97683C6.46384 9.50217 5.99704 11.2365 6.00002 13.0018C6.00002 17.4193 4.96752 20.7993 4.27377 21.9943C4.0966 22.2981 4.00268 22.6433 4.00148 22.995C4.00027 23.3467 4.09182 23.6924 4.26689 23.9974C4.44196 24.3025 4.69437 24.5559 4.99865 24.7323C5.30293 24.9086 5.64833 25.0016 6.00002 25.0018H22.83L25.26 27.6743C25.3478 27.7733 25.4544 27.8539 25.5736 27.9114C25.6928 27.9689 25.8222 28.0022 25.9544 28.0093C26.0865 28.0164 26.2187 27.9972 26.3434 27.9528C26.4681 27.9084 26.5827 27.8398 26.6806 27.7508C26.7786 27.6618 26.8579 27.5542 26.9139 27.4343C26.97 27.3145 27.0017 27.1847 27.0072 27.0525C27.0127 26.9202 26.992 26.7882 26.9461 26.6641C26.9002 26.54 26.8302 26.4262 26.74 26.3293L6.74002 4.32933ZM6.00002 23.0018C6.96252 21.3468 8.00002 17.5118 8.00002 13.0018C7.99826 11.8068 8.26572 10.6268 8.78252 9.54933L21.0113 23.0018H6.00002ZM21 28.0018C21 28.267 20.8947 28.5214 20.7071 28.7089C20.5196 28.8965 20.2652 29.0018 20 29.0018H12C11.7348 29.0018 11.4804 28.8965 11.2929 28.7089C11.1054 28.5214 11 28.267 11 28.0018C11 27.7366 11.1054 27.4823 11.2929 27.2947C11.4804 27.1072 11.7348 27.0018 12 27.0018H20C20.2652 27.0018 20.5196 27.1072 20.7071 27.2947C20.8947 27.4823 21 27.7366 21 28.0018ZM26.75 22.4081C26.6332 22.4534 26.509 22.4767 26.3838 22.4768C26.1829 22.4766 25.9868 22.4159 25.8209 22.3027C25.655 22.1894 25.5271 22.0288 25.4538 21.8418C24.5438 19.5256 24 16.2206 24 13.0018C24.0004 11.6026 23.6338 10.2277 22.9368 9.01445C22.2398 7.80117 21.2367 6.79193 20.0278 6.08745C18.8188 5.38297 17.4462 5.0079 16.047 4.99968C14.6478 4.99146 13.2709 5.35037 12.0538 6.04058C11.8236 6.16529 11.5537 6.19478 11.3021 6.12272C11.0505 6.05067 10.8371 5.88282 10.7078 5.6552C10.5785 5.42759 10.5437 5.15836 10.6107 4.90533C10.6777 4.65229 10.8413 4.43562 11.0663 4.30183C12.5876 3.4389 14.3087 2.99007 16.0577 3.00017C17.8067 3.01026 19.5225 3.47891 21.0338 4.35935C22.5451 5.23979 23.7991 6.50122 24.6705 8.01773C25.5419 9.53424 26.0003 11.2528 26 13.0018C26 17.4206 27.0063 20.3256 27.315 21.1118C27.412 21.3587 27.4069 21.6339 27.3009 21.877C27.195 22.12 26.9968 22.3111 26.75 22.4081Z" fill="white" /> | ||
| </svg> | ||
| ); | ||
| } |
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 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 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
41 changes: 41 additions & 0 deletions
41
components/notifications/subscription-task-button/subscription-task-button.controller.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { MouseEvent } from "react"; | ||
|
|
||
| import { SubscriptionTaskButtonView } | ||
| from "components/notifications/subscription-task-button/subscription-task-button.view"; | ||
|
|
||
| import { useUserStore } from "x-hooks/stores/user/user.store"; | ||
| import { useTaskSubscription } from "x-hooks/use-task-subscription"; | ||
|
|
||
| interface SubscriptionTaskButtonProps { | ||
| taskId: number; | ||
| variant?: "icon" | "text"; | ||
| } | ||
|
|
||
| export function SubscriptionTaskButton({ | ||
| taskId, | ||
| variant = "text", | ||
| }: SubscriptionTaskButtonProps) { | ||
| const { currentUser } = useUserStore(); | ||
| const { isSubscribed, subscribe, unsubscribe, isSubscribing, isUnsubscribing } = useTaskSubscription(); | ||
|
|
||
| const isConnected = !!currentUser?.walletAddress; | ||
|
|
||
| function onClick(e: MouseEvent<HTMLButtonElement>) { | ||
| e?.stopPropagation(); | ||
|
|
||
| if (isSubscribed(taskId)) | ||
| unsubscribe(taskId); | ||
| else | ||
| subscribe(taskId); | ||
| } | ||
|
|
||
| return( | ||
| <SubscriptionTaskButtonView | ||
| isSubscribed={isSubscribed(taskId)} | ||
| isDisabled={isSubscribing || isUnsubscribing} | ||
| isConnected={isConnected} | ||
| variant={variant} | ||
| onClick={onClick} | ||
| /> | ||
| ); | ||
| } |
60 changes: 60 additions & 0 deletions
60
components/notifications/subscription-task-button/subscription-task-button.view.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { MouseEvent } from "react"; | ||
|
|
||
| import { useTranslation } from "next-i18next"; | ||
|
|
||
| import BellIcon from "assets/icons/bell-icon"; | ||
| import BellSlashIcon from "assets/icons/bell-slash-icon"; | ||
|
|
||
| import Button from "components/button"; | ||
| import { Tooltip } from "components/common/tooltip/tooltip.view"; | ||
| import If from "components/If"; | ||
| import { ResponsiveEle } from "components/responsive-wrapper"; | ||
|
|
||
| interface SubscriptionTaskButtonViewProps { | ||
| isSubscribed: boolean; | ||
| isDisabled: boolean; | ||
| isConnected: boolean; | ||
| variant?: "icon" | "text"; | ||
| onClick: (e: MouseEvent<HTMLButtonElement>) => void; | ||
| } | ||
|
|
||
| export function SubscriptionTaskButtonView({ | ||
| isSubscribed, | ||
| isDisabled, | ||
| isConnected, | ||
| variant = "text", | ||
| onClick, | ||
| }: SubscriptionTaskButtonViewProps) { | ||
| const { t } = useTranslation("bounty"); | ||
|
|
||
| const isTextVariant = variant === "text"; | ||
| const icon = isSubscribed ? <BellSlashIcon height={18} width={18} /> : <BellIcon height={18} width={18} />; | ||
| const text = isSubscribed ? t("actions.unsubscribe") : t("actions.subscribe"); | ||
|
|
||
| if (!isConnected) | ||
| return <></>; | ||
|
|
||
| return( | ||
| <Tooltip tip={text}> | ||
| <div> | ||
| <Button | ||
| onClick={onClick} | ||
| disabled={isDisabled} | ||
| color="gray-900" | ||
| className="border-radius-4 py-1 px-2 border-gray-800 not-svg d-flex align-items-center font-weight-normal" | ||
| transparent | ||
| > | ||
| <span className="d-block m-1"> | ||
| {icon} | ||
| </span> | ||
|
|
||
| <If condition={isTextVariant}> | ||
| <ResponsiveEle | ||
| tabletView={<span>{text}</span>} | ||
| /> | ||
| </If> | ||
| </Button> | ||
| </div> | ||
| </Tooltip> | ||
| ); | ||
| } |
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
15 changes: 15 additions & 0 deletions
15
db/migrations/20240717111849-add-subscriptions-to-notification-settings-table.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| 'use strict'; | ||
|
|
||
| /** @type {import('sequelize-cli').Migration} */ | ||
| module.exports = { | ||
| async up (queryInterface, Sequelize) { | ||
| await queryInterface.addColumn("notification_settings", "subscriptions", { | ||
| type: Sequelize.ARRAY(Sequelize.INTEGER), | ||
| allowNull: true | ||
| }); | ||
| }, | ||
|
|
||
| async down (queryInterface, Sequelize) { | ||
| await queryInterface.removeColumn("notification_settings", "subscriptions"); | ||
| } | ||
| }; |
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 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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { NextApiRequest, NextApiResponse } from "next"; | ||
|
|
||
| import { UserRoute } from "middleware"; | ||
|
|
||
| import { subscribeToTask } from "server/common/task/subscribe"; | ||
|
|
||
| async function handler(req: NextApiRequest, res: NextApiResponse) { | ||
| switch (req.method) { | ||
| case "PUT": | ||
| res.status(200).json(await subscribeToTask(req)); | ||
| break; | ||
|
|
||
| default: | ||
| res.status(405); | ||
| } | ||
|
|
||
| res.end(); | ||
| } | ||
|
|
||
| export default UserRoute(handler); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { NextApiRequest, NextApiResponse } from "next"; | ||
|
|
||
| import { UserRoute } from "middleware"; | ||
|
|
||
| import { unsubscribeOfTask } from "server/common/task/unsubscribe"; | ||
|
|
||
| async function handler(req: NextApiRequest, res: NextApiResponse) { | ||
| switch (req.method) { | ||
| case "PUT": | ||
| res.status(200).json(await unsubscribeOfTask(req)); | ||
| break; | ||
|
|
||
| default: | ||
| res.status(405); | ||
| } | ||
|
|
||
| res.end(); | ||
| } | ||
|
|
||
| export default UserRoute(handler); |
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 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
Oops, something went wrong.