Merge pull request #181 from IFRCGo/fix/subscription-modal

Fix/subscription modal
IFRCGo · Dec 4, 2024 · 7cfdddd · 7cfdddd
2 parents f9b12d5 + c97eb36
commit 7cfdddd
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 42 deletions.
diff --git 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<FILTER extends object>(options: {
         [],
     );
 
+    const resetFilter = useCallback(
+        () => {
+            dispatch({ type: 'reset-filter' });
+        },
+        [],
+    );
+
     const setFilterField = useCallback(
         (...args: EntriesAsList<FILTER>) => {
             const [val, key] = args;
@@ -182,15 +188,22 @@ function useFilterState<FILTER extends object>(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
@@ -189,7 +189,7 @@ export function Component() {
         setFilterField,
         filtered,
         offset,
-        setFilter,
+        resetFilter,
     } = useFilterState<NewFilter>({
         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
@@ -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
@@ -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}
         >
             <Container
                 contentViewType="vertical"
+                spacing="comfortable"
                 actions={(
                     <Button
                         className={styles.sources}
@@ -423,6 +424,9 @@ export function Component() {
                         onActivePageChange={setPage}
                     />
                 )}
+                pending={alertSubscriptionLoading}
+                errored={isDefined(alertSubscriptionError)}
+                overlayPending
             >
                 {showSubscriptionModal && (
                     <NewSubscriptionModal
@@ -446,32 +450,24 @@ export function Component() {
                     </TabList>
                     <TabPanel
                         name="active"
-                        className={styles.subscriptions}
+                        className={styles.tabPanel}
                     >
-                        <List
-                            className={styles.subscription}
+                        <RawList
                             data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={activeRendererParams}
                             keySelector={subscriptionKeySelector}
-                            filtered={false}
-                            pending={alertSubscriptionLoading}
-                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                     <TabPanel
                         name="archive"
-                        className={styles.subscriptions}
+                        className={styles.tabPanel}
                     >
-                        <List
-                            className={styles.subscription}
+                        <RawList
                             data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={archiveRendererParams}
                             keySelector={subscriptionKeySelector}
-                            filtered={false}
-                            pending={alertSubscriptionLoading}
-                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                 </Tabs>

diff --git 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;
     }
 }
diff --git 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
@@ -214,10 +214,8 @@ const categoryLabelSelector = (category: Category) => category.label;
 type PartialFormFields = PartialForm<UserAlertSubscriptionInput>;
 
 type FormSchema = ObjectSchema<PartialFormFields>;
-type FormSchemaFields = ReturnType<FormSchema['fields']>
-
 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}
             />
         </Modal>