From 81026efc2edfa2d44671f5b6ad17bd686dc693b2 Mon Sep 17 00:00:00 2001 From: Danh Date: Sun, 24 Sep 2023 17:22:10 +0700 Subject: [PATCH] chore: move folder noti --- .../NotificationPreference/Header.tsx | 37 ----------- .../NotificationPreference/ActionButtons.tsx | 0 .../NotificationPreference/InputEmail.tsx | 0 .../NotificationPreference/index.tsx | 63 +++++++++---------- src/pages/NotificationCenter/Overview.tsx | 28 --------- .../NotificationCenter/Profile/index.tsx | 4 +- src/pages/NotificationCenter/index.tsx | 2 +- 7 files changed, 33 insertions(+), 101 deletions(-) delete mode 100644 src/components/SubscribeButton/NotificationPreference/Header.tsx rename src/{components/SubscribeButton => pages/NotificationCenter}/NotificationPreference/ActionButtons.tsx (100%) rename src/{components/SubscribeButton => pages/NotificationCenter}/NotificationPreference/InputEmail.tsx (100%) rename src/{components/SubscribeButton => pages/NotificationCenter}/NotificationPreference/index.tsx (93%) delete mode 100644 src/pages/NotificationCenter/Overview.tsx diff --git a/src/components/SubscribeButton/NotificationPreference/Header.tsx b/src/components/SubscribeButton/NotificationPreference/Header.tsx deleted file mode 100644 index 36dbd37764..0000000000 --- a/src/components/SubscribeButton/NotificationPreference/Header.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Trans, t } from '@lingui/macro' -import { X } from 'react-feather' -import { useNavigate } from 'react-router-dom' -import styled from 'styled-components' - -import MailIcon from 'components/Icons/MailIcon' -import TransactionSettingsIcon from 'components/Icons/TransactionSettingsIcon' -import Row, { RowBetween } from 'components/Row' -import { MouseoverTooltip } from 'components/Tooltip' -import { APP_PATHS } from 'constants/index' -import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const' - -const CloseIcon = styled(X)` - cursor: pointer; - color: ${({ theme }) => theme.subText}; -` -export default function Header({ toggleModal }: { toggleModal: () => void }) { - const navigate = useNavigate() - return ( - - - Email Notifications - - - { - navigate(`${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.PREFERENCE}`) - toggleModal() - }} - /> - - - - ) -} diff --git a/src/components/SubscribeButton/NotificationPreference/ActionButtons.tsx b/src/pages/NotificationCenter/NotificationPreference/ActionButtons.tsx similarity index 100% rename from src/components/SubscribeButton/NotificationPreference/ActionButtons.tsx rename to src/pages/NotificationCenter/NotificationPreference/ActionButtons.tsx diff --git a/src/components/SubscribeButton/NotificationPreference/InputEmail.tsx b/src/pages/NotificationCenter/NotificationPreference/InputEmail.tsx similarity index 100% rename from src/components/SubscribeButton/NotificationPreference/InputEmail.tsx rename to src/pages/NotificationCenter/NotificationPreference/InputEmail.tsx diff --git a/src/components/SubscribeButton/NotificationPreference/index.tsx b/src/pages/NotificationCenter/NotificationPreference/index.tsx similarity index 93% rename from src/components/SubscribeButton/NotificationPreference/index.tsx rename to src/pages/NotificationCenter/NotificationPreference/index.tsx index 2086585c85..8c6b68098b 100644 --- a/src/components/SubscribeButton/NotificationPreference/index.tsx +++ b/src/pages/NotificationCenter/NotificationPreference/index.tsx @@ -1,5 +1,5 @@ import { Trans, t } from '@lingui/macro' -import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { Text } from 'rebass' import styled from 'styled-components' @@ -9,14 +9,13 @@ import Column from 'components/Column' import MailIcon from 'components/Icons/MailIcon' import Loader from 'components/Loader' import Row from 'components/Row' -import ActionButtons from 'components/SubscribeButton/NotificationPreference/ActionButtons' -import Header from 'components/SubscribeButton/NotificationPreference/Header' -import InputEmail from 'components/SubscribeButton/NotificationPreference/InputEmail' import { MouseoverTooltip } from 'components/Tooltip' import { PRICE_ALERT_TOPIC_ID } from 'constants/env' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useNotification, { Topic, TopicType } from 'hooks/useNotification' import useTheme from 'hooks/useTheme' +import ActionButtons from 'pages/NotificationCenter/NotificationPreference/ActionButtons' +import InputEmail from 'pages/NotificationCenter/NotificationPreference/InputEmail' import VerifyCodeModal from 'pages/Verify/VerifyCodeModal' import { useNotify } from 'state/application/hooks' import { useSessionInfo } from 'state/authen/hooks' @@ -99,9 +98,7 @@ const EmailColum = styled(Column)` `} ` -const noop = () => { - // -} +const noop = () => {} const sortGroup = (arr: Topic[]) => [...arr].sort((x, y) => y.priority - x.priority) @@ -140,15 +137,7 @@ export const useValidateEmail = (defaultEmail?: string) => { return { inputEmail: inputEmail.trim(), onChangeEmail, errorInput, errorColor, hasErrorInput, reset } } -function NotificationPreference({ - header, - isOpen, - toggleModal = noop, -}: { - header?: ReactNode - isOpen: boolean - toggleModal?: () => void -}) { +function NotificationPreference({ toggleModal = noop }: { toggleModal?: () => void }) { const theme = useTheme() const { isLoading, saveNotification, topicGroups: topicGroupsGlobal, unsubscribeAll } = useNotification() @@ -190,23 +179,16 @@ function NotificationPreference({ ) useEffect(() => { - if (isOpen) { - setEmailPendingVerified('') - reset(userInfo?.email) - } - }, [userInfo, isOpen, reset]) + setEmailPendingVerified('') + reset(userInfo?.email) + }, [userInfo, reset]) useEffect(() => { - setTimeout( - () => { - setSelectedTopic(isOpen ? topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id) : []) - if (isOpen) { - setTopicGroups(sortGroup(topicGroupsGlobal)) - } - }, - isOpen ? 0 : 400, - ) - }, [isOpen, topicGroupsGlobal]) + setTimeout(() => { + setSelectedTopic(topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id)) + setTopicGroups(sortGroup(topicGroupsGlobal)) + }, 0) + }, [topicGroupsGlobal]) const getDiffChangeTopics = useCallback( (topicGroups: Topic[]) => { @@ -381,7 +363,9 @@ function NotificationPreference({ return ( - {header ||
} + + Email Notification +