From c97eb3642c6726ffc103dbb45a88e6d08707c656 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Tue, 3 Dec 2024 17:40:34 +0545 Subject: [PATCH] Fix subscriptions bugs --- src/hooks/useFilterState.ts | 17 ++++++++++++-- src/views/HistoricalAlerts/index.tsx | 8 ++++--- src/views/MySubscription/i18n.json | 2 +- src/views/MySubscription/index.tsx | 26 +++++++++------------- src/views/MySubscription/styles.module.css | 14 ++---------- src/views/NewSubscriptionModal/i18n.json | 1 + src/views/NewSubscriptionModal/index.tsx | 19 ++++++++-------- 7 files changed, 45 insertions(+), 42 deletions(-) diff --git a/src/hooks/useFilterState.ts b/src/hooks/useFilterState.ts index 1d0be26d..b11ef193 100644 --- a/src/hooks/useFilterState.ts +++ b/src/hooks/useFilterState.ts @@ -6,11 +6,10 @@ import { } from 'react'; import { hasSomeDefinedValue } from '@ifrc-go/ui/utils'; import { isNotDefined } from '@togglecorp/fujs'; +import { EntriesAsList } from '@togglecorp/toggle-form'; import useDebouncedValue from '#hooks/useDebouncedValue'; -import { EntriesAsList } from '../types'; - type SortDirection = 'asc' | 'dsc'; interface SortParameter { name: string; @@ -135,6 +134,13 @@ function useFilterState(options: { [], ); + const resetFilter = useCallback( + () => { + dispatch({ type: 'reset-filter' }); + }, + [], + ); + const setFilterField = useCallback( (...args: EntriesAsList) => { const [val, key] = args; @@ -182,15 +188,22 @@ function useFilterState(options: { () => hasSomeDefinedValue(debouncedState.filter), [debouncedState.filter], ); + const rawFiltered = useMemo( + () => hasSomeDefinedValue(state.filter), + [state.filter], + ); return { rawFilter: state.filter, + rawFiltered, filter: debouncedState.filter, filtered, setFilter, setFilterField, + resetFilter, + page: state.page, offset: pageSize * (debouncedState.page - 1), limit: pageSize, diff --git a/src/views/HistoricalAlerts/index.tsx b/src/views/HistoricalAlerts/index.tsx index 44902521..3c250d3a 100644 --- a/src/views/HistoricalAlerts/index.tsx +++ b/src/views/HistoricalAlerts/index.tsx @@ -189,7 +189,7 @@ export function Component() { setFilterField, filtered, offset, - setFilter, + resetFilter, } = useFilterState({ pageSize: PAGE_SIZE, filter: {}, @@ -249,9 +249,11 @@ export function Component() { }, [rawFilter, setPage]); const handleResetFilters = useCallback(() => { + resetFilter(); setFinalFilter(undefined); - setFilter({}); - }, [setFilter]); + }, [ + resetFilter, + ]); const { loading: alertInfoLoading, diff --git a/src/views/MySubscription/i18n.json b/src/views/MySubscription/i18n.json index 52fb5282..2c6640e7 100644 --- a/src/views/MySubscription/i18n.json +++ b/src/views/MySubscription/i18n.json @@ -6,7 +6,7 @@ "createNewSubscription": "Create", "sendViaEmailLabel": "Send via email", "activeSubscriptionsTab": "Active Subscriptions", - "archivedSubscriptionTab": "Archive Subscriptions", + "archivedSubscriptionTab": "Archived Subscriptions", "subscriptionUnarchived": "Subscription unarchived.", "subscriptionArchived": "Subscription archived.", "subscriptionFailedToUpdate": "Failed to update subscription.", diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx index 5b456efb..453dee45 100644 --- a/src/views/MySubscription/index.tsx +++ b/src/views/MySubscription/index.tsx @@ -12,8 +12,8 @@ import { AddLineIcon } from '@ifrc-go/icons'; import { Button, Container, - List, Pager, + RawList, Tab, TabList, TabPanel, @@ -311,8 +311,9 @@ export function Component() { name: selectedSubscriptionDetails?.name ?? '', }, }, + }).then(() => { + refetch(); }); - refetch(); }, [ data?.items, triggerSubscriptionUpdate, @@ -396,10 +397,10 @@ export function Component() { className={styles.mySubscription} heading={strings.mySubscription} description={strings.subscriptionDescription} - mainSectionClassName={styles.content} > )} + pending={alertSubscriptionLoading} + errored={isDefined(alertSubscriptionError)} + overlayPending > {showSubscriptionModal && ( - - diff --git a/src/views/MySubscription/styles.module.css b/src/views/MySubscription/styles.module.css index 663c717b..78857ec0 100644 --- a/src/views/MySubscription/styles.module.css +++ b/src/views/MySubscription/styles.module.css @@ -1,15 +1,5 @@ .mySubscription { - .content { - display: flex; - flex-direction: column; - gap: var(--go-ui-spacing-2xl); - - .subscriptions { - .subscription { - display: flex; - flex-direction: column; - gap: var(--go-ui-spacing-lg); - } - } + .tabPanel { + display: contents; } } \ No newline at end of file diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json index 69bbd6e9..3236f300 100644 --- a/src/views/NewSubscriptionModal/i18n.json +++ b/src/views/NewSubscriptionModal/i18n.json @@ -21,6 +21,7 @@ "newSubscriptionTitle": "Title", "newSubscriptionCreatedSucessfully": "Subscription created successfully.", "newSubscriptionFailed": "Failed to create subscription", + "newSubscriptionLimitExceed": "You have reached the maximum limit of 10 subscriptions", "subscriptionUpdatedSuccessfully": "Subscription updated successfully.", "failedToUpdateSubscription": "Failed to update subscription." } diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx index 76e02fe5..f02342c1 100644 --- a/src/views/NewSubscriptionModal/index.tsx +++ b/src/views/NewSubscriptionModal/index.tsx @@ -214,10 +214,8 @@ const categoryLabelSelector = (category: Category) => category.label; type PartialFormFields = PartialForm; type FormSchema = ObjectSchema; -type FormSchemaFields = ReturnType - const formSchema: FormSchema = { - fields: (): FormSchemaFields => ({ + fields: (value) => ({ name: { required: true, requiredValidation: requiredStringCondition, @@ -245,8 +243,8 @@ const formSchema: FormSchema = { requiredValidation: requiredCondition, }, emailFrequency: { - required: true, - requiredValidation: requiredCondition, + required: !!value?.notifyByEmail, + requiredValidation: value?.notifyByEmail ? requiredCondition : undefined, }, }), }; @@ -421,6 +419,12 @@ function NewSubscriptionModal(props: Props) { subscriptionId: subscription.id, data: val as UserAlertSubscriptionInput, }, + }).then(() => { + if (onSuccess) { + ( + onSuccess() + ); + } }); } else { createAlertSubscription({ @@ -434,9 +438,6 @@ function NewSubscriptionModal(props: Props) { } }, ); - if (onSuccess) { - onSuccess(); - } handler(); }, [ setError, @@ -560,7 +561,7 @@ function NewSubscriptionModal(props: Props) { labelSelector={frequencyLabelSelector} value={value?.emailFrequency} onChange={setFieldValue} - disabled={isNotDefined(value.notifyByEmail)} + disabled={!value.notifyByEmail} error={fieldError?.emailFrequency} />