feat: import subscriptions

Author: kunish

src/app/(protected)/network/GroupSection.tsx

@@ -44,8 +44,7 @@ const GroupContent: FC<{
   group: Group
   subscriptions: Subscription[]
   nodes: Node[]
-  refetch: () => Promise<unknown>
-}> = ({ group, subscriptions, nodes, refetch }) => {
+}> = ({ group, subscriptions, nodes }) => {
   const { t } = useTranslation()
 
   // subscriptions
@@ -104,8 +103,6 @@ const GroupContent: FC<{
           if (nodesToRemove.length > 0) {
             await groupDelNodesMutation.mutateAsync({ id: group.id, nodeIDs: nodesToRemove })
           }
-
-          await refetch()
         }}
         renderValue={(items) => (
           <div className="flex flex-wrap gap-2">
@@ -119,7 +116,6 @@ const GroupContent: FC<{
                   classNames={{ base: 'max-w-full', content: 'truncate' }}
                   onClose={async () => {
                     await groupDelNodesMutation.mutateAsync({ id: group.id, nodeIDs: [nodeID] })
-                    await refetch()
                   }}
                 >
                   {nodeName} {item.data?.subscription && `(${item.data.subscription})`}
@@ -162,8 +158,6 @@ const GroupContent: FC<{
           if (subscriptionsToRemove.length > 0) {
             await groupDelSubscriptionsMutation.mutateAsync({ id: group.id, subscriptionIDs: subscriptionsToRemove })
           }
-
-          await refetch()
         }}
         items={subscriptions}
         renderValue={(items) => (
@@ -176,7 +170,6 @@ const GroupContent: FC<{
                 }}
                 onClose={async () => {
                   await groupDelSubscriptionsMutation.mutateAsync({ id: group.id, subscriptionIDs: [item.data!.id] })
-                  await refetch()
                 }}
               >
                 {item.data!.tag}
@@ -226,8 +219,7 @@ const GroupAccordion: FC<{
   group: Group
   subscriptions: Subscription[]
   nodes: Node[]
-  refetch: () => Promise<unknown>
-}> = ({ group, refetch, subscriptions, nodes }) => {
+}> = ({ group, subscriptions, nodes }) => {
   const { t } = useTranslation()
 
   const {
@@ -296,7 +288,6 @@ const GroupAccordion: FC<{
                     await removeGroupsMutation.mutateAsync({
                       groupIDs: [group.id]
                     })
-                    await refetch()
 
                     onRemoveGroupClose()
                   }}
@@ -306,7 +297,7 @@ const GroupAccordion: FC<{
           </div>
         }
       >
-        <GroupContent group={group} subscriptions={subscriptions} nodes={nodes} refetch={refetch} />
+        <GroupContent group={group} subscriptions={subscriptions} nodes={nodes} />
       </AccordionItem>
     </Accordion>
   )
@@ -354,7 +345,6 @@ export const GroupSection: FC<{ nodes: Node[]; subscriptions: Subscription[] }>
                   policy: values.policy,
                   policyParams: []
                 })
-                await groupsQuery.refetch()
 
                 onAddClose()
               })}
@@ -414,13 +404,7 @@ export const GroupSection: FC<{ nodes: Node[]; subscriptions: Subscription[] }>
 
       {groupsQuery.data &&
         groupsQuery.data.groups.map((group) => (
-          <GroupAccordion
-            key={group.id}
-            group={group}
-            refetch={groupsQuery.refetch}
-            nodes={nodes}
-            subscriptions={subscriptions}
-          />
+          <GroupAccordion key={group.id} group={group} nodes={nodes} subscriptions={subscriptions} />
         ))}
     </div>
   )

src/app/(protected)/network/NodeSection.tsx

@@ -50,7 +50,7 @@ const CheckNodeQRCodeButton: FC<{ name: string; link: string }> = ({ name, link
   )
 }
 
-const RemoveNodeButton: FC<{ id: string; name: string; refetch: () => Promise<unknown> }> = ({ id, name, refetch }) => {
+const RemoveNodeButton: FC<{ id: string; name: string }> = ({ id, name }) => {
   const { t } = useTranslation()
 
   const {
@@ -78,7 +78,6 @@ const RemoveNodeButton: FC<{ id: string; name: string; refetch: () => Promise<un
             isSubmitting={removeNodesMutation.isPending}
             onConfirm={async () => {
               await removeNodesMutation.mutateAsync({ nodeIDs: [id] })
-              await refetch()
 
               onRemoveClose()
             }}
@@ -91,9 +90,8 @@ const RemoveNodeButton: FC<{ id: string; name: string; refetch: () => Promise<un
 
 const NodeTable: FC<{
   nodes: Node[]
-  refetch: () => Promise<unknown>
   isLoading?: boolean
-}> = ({ nodes, refetch, isLoading }) => {
+}> = ({ nodes, isLoading }) => {
   const { t } = useTranslation()
 
   const nodesTableColumns = useMemo(
@@ -106,27 +104,24 @@ const NodeTable: FC<{
     [t]
   )
 
-  const renderCell = useCallback(
-    (item: Node, columnKey: Key) => {
-      switch (columnKey) {
-        case 'name':
-          return item.tag || item.name
-
-        case 'action':
-          return (
-            <div className="flex items-center gap-2">
-              <CheckNodeQRCodeButton name={item.tag || item.name} link={item.link} />
-
-              <RemoveNodeButton id={item.id} name={item.tag || item.name} refetch={refetch} />
-            </div>
-          )
-
-        default:
-          return getKeyValue(item, columnKey)
-      }
-    },
-    [refetch]
-  )
+  const renderCell = useCallback((item: Node, columnKey: Key) => {
+    switch (columnKey) {
+      case 'name':
+        return item.tag || item.name
+
+      case 'action':
+        return (
+          <div className="flex items-center gap-2">
+            <CheckNodeQRCodeButton name={item.tag || item.name} link={item.link} />
+
+            <RemoveNodeButton id={item.id} name={item.tag || item.name} />
+          </div>
+        )
+
+      default:
+        return getKeyValue(item, columnKey)
+    }
+  }, [])
 
   return (
     <Table isCompact aria-label="nodes">
@@ -143,11 +138,7 @@ const NodeTable: FC<{
   )
 }
 
-export const NodeSection: FC<{ nodes: Node[]; refetch: () => Promise<unknown>; isLoading?: boolean }> = ({
-  nodes,
-  refetch,
-  isLoading
-}) => {
+export const NodeSection: FC<{ nodes: Node[]; isLoading?: boolean }> = ({ nodes, isLoading }) => {
   const { t } = useTranslation()
 
   return (
@@ -159,7 +150,7 @@ export const NodeSection: FC<{ nodes: Node[]; refetch: () => Promise<unknown>; i
         </Button>
       </div>
 
-      <NodeTable nodes={nodes} refetch={refetch} isLoading={isLoading} />
+      <NodeTable nodes={nodes} isLoading={isLoading} />
     </div>
   )
 }

src/app/(protected)/network/SubscriptionSection.tsx

@@ -1,7 +1,9 @@
+import { zodResolver } from '@hookform/resolvers/zod'
 import {
   Accordion,
   AccordionItem,
   getKeyValue,
+  Input,
   ModalBody,
   ModalContent,
   ModalHeader,
@@ -15,11 +17,18 @@ import {
 } from '@nextui-org/react'
 import { IconPlus, IconRefresh, IconTrash } from '@tabler/icons-react'
 import dayjs from 'dayjs'
-import { FC, Fragment, useMemo } from 'react'
+import { FC, Fragment, useEffect, useMemo } from 'react'
+import { Controller, FormProvider, useFieldArray, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { useRemoveSubscriptionsMutation, useUpdateSubscriptionsMutation } from '~/apis/mutation'
+import { z } from 'zod'
+import {
+  useImportSubscriptionsMutation,
+  useRemoveSubscriptionsMutation,
+  useUpdateSubscriptionsMutation
+} from '~/apis/mutation'
 import { Button } from '~/components/Button'
-import { Modal, ModalConfirmFormFooter } from '~/components/Modal'
+import { Modal, ModalConfirmFormFooter, ModalSubmitFormFooter } from '~/components/Modal'
+import { subscriptionFormDefault, subscriptionFormSchema } from '~/schemas/subscription'
 import { Node, Subscription } from './typings'
 
 const SubscriptionNodeTable: FC<{
@@ -52,30 +61,124 @@ const SubscriptionNodeTable: FC<{
   )
 }
 
-export const SubscriptionSection: FC<{ subscriptions: Subscription[]; refetch: () => Promise<unknown> }> = ({
-  subscriptions,
-  refetch
-}) => {
+const ImportSubscriptionInputList: FC<{ name: string }> = ({ name }) => {
+  const { t } = useTranslation()
+  const { fields, append, remove } = useFieldArray({ name })
+
+  return (
+    <div className="flex flex-col gap-2">
+      {fields.map((item, index) => (
+        <div key={item.id} className="flex items-start gap-2">
+          <Controller
+            name={`${name}.${index}.tag`}
+            render={({ field, fieldState }) => (
+              <Input
+                className="w-1/3"
+                label={t('form.fields.tag')}
+                placeholder={t('form.fields.tag')}
+                errorMessage={fieldState.error?.message}
+                isRequired
+                {...field}
+              />
+            )}
+          />
+
+          <Controller
+            name={`${name}.${index}.link`}
+            render={({ field, fieldState }) => (
+              <Input
+                label={t('form.fields.link')}
+                placeholder={t('form.fields.link')}
+                errorMessage={fieldState.error?.message}
+                isRequired
+                {...field}
+              />
+            )}
+          />
+
+          <Button color="danger" isIconOnly onPress={() => remove(index)}>
+            <IconTrash />
+          </Button>
+        </div>
+      ))}
+
+      <div className="self-end">
+        <Button color="primary" onPress={() => append({ tag: '', link: '' })} isIconOnly>
+          <IconPlus />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export const SubscriptionSection: FC<{ subscriptions: Subscription[] }> = ({ subscriptions }) => {
   const { t } = useTranslation()
 
+  const {
+    isOpen: isImportSubscriptionOpen,
+    onOpen: onImportSubscriptionOpen,
+    onClose: onImportSubscriptionClose,
+    onOpenChange: onImportSubscriptionOpenChange
+  } = useDisclosure()
+
+  const importSubscriptionForm = useForm<z.infer<typeof subscriptionFormSchema>>({
+    shouldFocusError: true,
+    resolver: zodResolver(subscriptionFormSchema),
+    defaultValues: subscriptionFormDefault
+  })
+
   const {
     isOpen: isRemoveSubscriptionOpen,
     onOpen: onRemoveSubscriptionOpen,
     onClose: onRemoveSubscriptionClose,
     onOpenChange: onRemoveSubscriptionOpenChange
   } = useDisclosure()
 
+  const importSubscriptionsMutation = useImportSubscriptionsMutation()
   const removeSubscriptionsMutation = useRemoveSubscriptionsMutation()
   const updateSubscriptionsMutation = useUpdateSubscriptionsMutation()
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!isImportSubscriptionOpen) importSubscriptionForm.reset()
+    }, 150)
+
+    return () => timer && clearTimeout(timer)
+  }, [importSubscriptionForm, isImportSubscriptionOpen])
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
         <h3 className="text-xl font-bold">{t('primitives.subscription')}</h3>
 
-        <Button color="primary" isIconOnly>
+        <Button color="primary" isIconOnly onPress={onImportSubscriptionOpen}>
           <IconPlus />
         </Button>
+
+        <Modal isOpen={isImportSubscriptionOpen} onOpenChange={onImportSubscriptionOpenChange}>
+          <FormProvider {...importSubscriptionForm}>
+            <form
+              onSubmit={importSubscriptionForm.handleSubmit(async (values) => {
+                await importSubscriptionsMutation.mutateAsync(values.subscriptions)
+
+                onImportSubscriptionClose()
+              })}
+            >
+              <ModalContent>
+                <ModalHeader>{t('primitives.subscription')}</ModalHeader>
+
+                <ModalBody>
+                  <ImportSubscriptionInputList name="subscriptions" />
+                </ModalBody>
+
+                <ModalSubmitFormFooter
+                  reset={importSubscriptionForm.reset}
+                  isSubmitting={importSubscriptionsMutation.isPending}
+                />
+              </ModalContent>
+            </form>
+          </FormProvider>
+        </Modal>
       </div>
 
       <Accordion selectionMode="multiple" variant="shadow" isCompact>
@@ -91,11 +194,7 @@ export const SubscriptionSection: FC<{ subscriptions: Subscription[]; refetch: (
                   as="div"
                   isIconOnly
                   isLoading={updateSubscriptionsMutation.isPending}
-                  onPress={() =>
-                    updateSubscriptionsMutation.mutate({
-                      subscriptionIDs: [subscription.id]
-                    })
-                  }
+                  onPress={() => updateSubscriptionsMutation.mutate({ subscriptionIDs: [subscription.id] })}
                 >
                   <IconRefresh />
                 </Button>
@@ -117,7 +216,6 @@ export const SubscriptionSection: FC<{ subscriptions: Subscription[]; refetch: (
                         isSubmitting={removeSubscriptionsMutation.isPending}
                         onConfirm={async () => {
                           await removeSubscriptionsMutation.mutateAsync({ subscriptionIDs: [subscription.id] })
-                          await refetch()
 
                           onRemoveSubscriptionClose()
                         }}

src/app/(protected)/network/page.tsx

@@ -21,16 +21,9 @@ export default function NetworkPage() {
           subscriptions={subscriptionsQuery.data?.subscriptions || []}
         />
 
-        <NodeSection
-          nodes={nodesQuery.data?.nodes.edges || []}
-          refetch={nodesQuery.refetch}
-          isLoading={nodesQuery.isLoading}
-        />
+        <NodeSection nodes={nodesQuery.data?.nodes.edges || []} isLoading={nodesQuery.isLoading} />
 
-        <SubscriptionSection
-          subscriptions={subscriptionsQuery.data?.subscriptions || []}
-          refetch={subscriptionsQuery.refetch}
-        />
+        <SubscriptionSection subscriptions={subscriptionsQuery.data?.subscriptions || []} />
       </div>
     </ResourcePage>
   )