add drop zone, change bundler chunks

package.json

@@ -22,18 +22,21 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/resolvers": "^3.6.0",
     "@mantine/core": "^7.10.2",
     "@mantine/dates": "^7.10.2",
+    "@mantine/dropzone": "^7.10.2",
     "@mantine/hooks": "^7.10.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "dexie": "^4.0.7",
     "dexie-react-hooks": "^1.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone-esm": "^15.0.1",
     "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.23.1",
     "recharts": "^2.10.3",

src/index.css

@@ -1,5 +1,6 @@
 @import '@mantine/core/styles.css';
 @import '@mantine/dates/styles.css';
+@import '@mantine/dropzone/styles.css';
 
 @tailwind base;
 @tailwind components;

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

@@ -1,6 +1,82 @@
 import { cn } from '@/ui/utils/cn.ts';
-import { memo } from 'react';
+import { faFileCode } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Group, Text } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { memo, useCallback, useEffect } from 'react';
+import type { FileWithPath } from 'react-dropzone-esm';
+import { recoverySchema } from '../models/recovery.model.ts';
 
 export const RecoveryImportPage = memo(() => {
-  return <div className={cn(`flex flex-col gap-4`)}>Work is in progress</div>;
+  const processExportFile = ({ currentTarget }: ProgressEvent<FileReader>) => {
+    if (!currentTarget) {
+      throw new Error(`currentTarget is missing`);
+    }
+
+    const { result } = currentTarget as FileReader;
+    if (typeof result !== 'string') {
+      throw new Error(`type of result should be string`);
+    }
+
+    // TODO validate dbVersion
+    const { dbVersion, subscriptions } = recoverySchema.parse(
+      JSON.parse(result),
+    );
+    console.log(dbVersion, subscriptions);
+  };
+
+  useEffect(() => {
+    reader.addEventListener('load', processExportFile);
+
+    return () => {
+      reader.removeEventListener('load', processExportFile);
+    };
+  });
+
+  const readExportFile = useCallback(
+    ([file]: Array<FileWithPath>) => file && reader.readAsText(file),
+    [],
+  );
+
+  return (
+    <div className={cn(`flex flex-col gap-4`)}>
+      <Dropzone
+        onDrop={readExportFile}
+        multiple={false}
+        accept={['application/json']}>
+        <Group
+          justify="center"
+          gap="xl"
+          mih={220}
+          style={{ pointerEvents: 'none' }}>
+          <Dropzone.Idle>
+            <FontAwesomeIcon
+              style={{
+                color: 'var(--mantine-color-dimmed)',
+              }}
+              size="4x"
+              icon={faFileCode}
+            />
+          </Dropzone.Idle>
+
+          <div>
+            <Text
+              size="xl"
+              inline>
+              Drag file here or click to select it
+            </Text>
+            <Text
+              size="sm"
+              c="dimmed"
+              inline
+              mt={7}>
+              Attach one file of JSON format
+            </Text>
+          </div>
+        </Group>
+      </Dropzone>
+    </div>
+  );
 });
+
+const reader = new FileReader();

src/recovery/pages/recovery.page.tsx

@@ -3,6 +3,7 @@ import {
   DefaultLayout,
   DefaultLayoutHeader,
 } from '@/ui/layouts/default.layout.tsx';
+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';
@@ -29,24 +30,26 @@ export const RecoveryPage = memo(() => {
         padding="xs"
         radius="md"
         withBorder>
-        <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-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 />
+          <Outlet />
+        </div>
       </Card>
     </DefaultLayout>
   );

src/subscriptions/models/subscription.model.ts

@@ -10,8 +10,9 @@ export const subscriptionSchema = z.object({
   icon: z.enum(subscriptionIcons),
   // TODO add different currency support
   price: z.number(),
-  startedAt: z.date(),
-  endedAt: z.date().nullable().optional(),
+  // despite dexie support for dates without coercion it is still needed because of recovery via JSON
+  startedAt: z.coerce.date(),
+  endedAt: z.coerce.date().nullable().optional(),
   cycle: z.object({
     each: z.number(),
     period: z.enum(subscriptionCyclePeriods),

vite.config.mjs

@@ -17,15 +17,4 @@ export default defineConfig({
     setupFiles: ['./test-setup.ts'],
     mockReset: true,
   },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          recharts: ['recharts'],
-          '@mantine/core': ['@mantine/core'],
-          '@mantine/dates': ['@mantine/dates'],
-        },
-      },
-    },
-  },
 });