moving towards import

src/recovery/pages/recovery-import.page.tsx

@@ -1,13 +1,22 @@
+import { SubscriptionsUpsertTable } from '@/subscriptions/components/subscriptions-upsert-table.tsx';
+import {
+  insertSubscriptionSchema,
+  type UpsertSubscriptionModel,
+} from '@/subscriptions/models/subscription.model.ts';
 import { cn } from '@/ui/utils/cn.ts';
 import { faFileCode } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Group, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { memo, useCallback, useEffect } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import type { FileWithPath } from 'react-dropzone-esm';
 import { recoverySchema } from '../models/recovery.model.ts';
 
 export const RecoveryImportPage = memo(() => {
+  const [subscriptions, setSubscriptions] = useState<
+    Array<UpsertSubscriptionModel>
+  >([]);
+
   const processExportFile = ({ currentTarget }: ProgressEvent<FileReader>) => {
     if (!currentTarget) {
       throw new Error(`currentTarget is missing`);
@@ -19,10 +28,13 @@ export const RecoveryImportPage = memo(() => {
     }
 
     // TODO validate dbVersion
-    const { dbVersion, subscriptions } = recoverySchema.parse(
-      JSON.parse(result),
+    const { subscriptions } = recoverySchema.parse(JSON.parse(result));
+
+    setSubscriptions(
+      subscriptions.map((subscription) =>
+        insertSubscriptionSchema.parse({ ...subscription, tags: [] }),
+      ),
     );
-    console.log(dbVersion, subscriptions);
   };
 
   useEffect(() => {
@@ -44,11 +56,10 @@ export const RecoveryImportPage = memo(() => {
         onDrop={readExportFile}
         multiple={false}
         accept={['application/json']}>
-        <Group
-          justify="center"
-          gap="xl"
-          mih={220}
-          style={{ pointerEvents: 'none' }}>
+        <div
+          className={cn(
+            `pointer-events-none flex min-h-40 items-center justify-center gap-4`,
+          )}>
           <Dropzone.Idle>
             <FontAwesomeIcon
               style={{
@@ -59,22 +70,20 @@ export const RecoveryImportPage = memo(() => {
             />
           </Dropzone.Idle>
 
-          <div>
-            <Text
-              size="xl"
-              inline>
-              Drag file here or click to select it
-            </Text>
+          <div className={cn(`flex flex-col gap-1`)}>
+            <Text size="xl">Drag file here or click to select it</Text>
             <Text
               size="sm"
-              c="dimmed"
-              inline
-              mt={7}>
+              c="dimmed">
               Attach one file of JSON format
             </Text>
           </div>
-        </Group>
+        </div>
       </Dropzone>
+
+      {subscriptions.length ? (
+        <SubscriptionsUpsertTable subscriptions={subscriptions} />
+      ) : null}
     </div>
   );
 });

src/recovery/pages/recovery.page.tsx

@@ -6,7 +6,7 @@ import {
 import { cn } from '@/ui/utils/cn.ts';
 import { faDownload, faUpload } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card, Tabs } from '@mantine/core';
+import { Card, Tabs, Text } from '@mantine/core';
 import { memo, useCallback, useMemo } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { recoveryRoute } from '../types/recovery-route.ts';
@@ -25,32 +25,42 @@ export const RecoveryPage = memo(() => {
 
   return (
     <DefaultLayout header={<DefaultLayoutHeader />}>
-      <Card
-        shadow="xs"
-        padding="xs"
-        radius="md"
-        withBorder>
-        <div className={cn(`flex flex-col gap-2`)}>
-          <Tabs
-            value={activeTab}
-            onChange={navigateToTab}>
-            <Tabs.List>
-              <Tabs.Tab
-                value={recoveryRoute.import}
-                leftSection={<FontAwesomeIcon icon={faUpload} />}>
-                Import
-              </Tabs.Tab>
-              <Tabs.Tab
-                value={recoveryRoute.export}
-                leftSection={<FontAwesomeIcon icon={faDownload} />}>
-                Export
-              </Tabs.Tab>
-            </Tabs.List>
-          </Tabs>
+      <div className={cn(`flex flex-col gap-4`)}>
+        <Card
+          shadow="xs"
+          padding="xs"
+          radius="md"
+          withBorder>
+          <div className={cn(`flex flex-col gap-2`)}>
+            <Tabs
+              value={activeTab}
+              onChange={navigateToTab}>
+              <Tabs.List>
+                <Tabs.Tab
+                  value={recoveryRoute.import}
+                  leftSection={<FontAwesomeIcon icon={faUpload} />}>
+                  Import
+                </Tabs.Tab>
+                <Tabs.Tab
+                  value={recoveryRoute.export}
+                  leftSection={<FontAwesomeIcon icon={faDownload} />}>
+                  Export
+                </Tabs.Tab>
+              </Tabs.List>
+            </Tabs>
 
-          <Outlet />
-        </div>
-      </Card>
+            <Outlet />
+          </div>
+        </Card>
+
+        <Text
+          className={cn(`max-w-80 self-center text-balance text-center`)}
+          size="sm"
+          c="dimmed">
+          Currently only subscriptions are supported during import/export. All
+          the tags and their subscription linkage are ignored.
+        </Text>
+      </div>
     </DefaultLayout>
   );
 });

src/subscriptions/components/subscriptions-select-table.tsx

@@ -73,7 +73,9 @@ export const SubscriptionsSelectTable = memo(
                   {dayjs(subscription.startedAt).format('MMMM D, YYYY')}
                 </Table.Td>
                 <Table.Td>
-                  {dayjs(subscription.endedAt).format('MMMM D, YYYY')}
+                  {subscription.endedAt
+                    ? dayjs(subscription.endedAt).format('MMMM D, YYYY')
+                    : null}
                 </Table.Td>
                 <Table.Td>{subscription.cycle.each}</Table.Td>
                 <Table.Td>

src/subscriptions/components/subscriptions-upsert-table.tsx

@@ -0,0 +1,12 @@
+import { forwardRef, memo } from 'react';
+import type { UpsertSubscriptionModel } from '../models/subscription.model.ts';
+
+export const SubscriptionsUpsertTable = memo(
+  forwardRef<HTMLFormElement, SubscriptionsUpsertTableProps>(() => {
+    return <>upsert table</>;
+  }),
+);
+
+export interface SubscriptionsUpsertTableProps {
+  subscriptions: Array<UpsertSubscriptionModel>;
+}