Implement export (#21)

* Add `mobile-web-app-capable` metatag.

* Add export data page.

* Add form

* Add option to change name of exported file

* Add a gap.

* Implement export with/without notes.

Author: lukasbicus

app/(homescreens)/settings/page.tsx

@@ -7,6 +7,9 @@ export default function Page() {
   return (
     <PageTemplate header={<PrimaryHeader title="Settings" />}>
       <div className="flex flex-col gap-2 px-2 py-3 w-full">
+        <Link href={Routes.ExportData}>
+          <button className="btn btn-primary w-full">Export data</button>
+        </Link>
         <Link href={Routes.About}>
           <button className="btn btn-primary w-full">About</button>
         </Link>

app/export-data/export-data-page.tsx

@@ -0,0 +1,87 @@
+'use client';
+import useAppState from '@/app/lib/app-state/app-state';
+import { TextField } from '@/app/ui/text-field';
+import { omit } from 'lodash';
+import { useForm } from 'react-hook-form';
+
+enum ExportFormNames {
+  WithNotes = 'withNotes',
+  FileName = 'fileName',
+}
+
+type ExportForm = {
+  [ExportFormNames.WithNotes]: boolean;
+  [ExportFormNames.FileName]: string;
+};
+
+const DEFAULT_FILE_NAME = 'my-loyalty-cards';
+
+export function ExportDataPage() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ExportForm>({
+    defaultValues: {
+      [ExportFormNames.WithNotes]: false,
+      [ExportFormNames.FileName]: DEFAULT_FILE_NAME,
+    },
+  });
+  const [state] = useAppState();
+  const processExport = ({ fileName, withNotes }: ExportForm) => {
+    console.log(state);
+
+    const cardsToExport = state.cards.map(c =>
+      omit(c, withNotes ? ['id', 'favorite'] : ['id', 'favorite', 'note'])
+    );
+
+    const jsonString = JSON.stringify(cardsToExport, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `${fileName ? fileName : DEFAULT_FILE_NAME}.json`;
+    a.click();
+
+    URL.revokeObjectURL(a.href);
+  };
+  return (
+    <form
+      className="px-4 py-6 w-full h-full"
+      onSubmit={handleSubmit(processExport)}
+    >
+      <div className="px-4 py-6 bg-base-300">
+        <TextField
+          label="File name"
+          name={ExportFormNames.FileName}
+          register={register}
+          placeholder="Name of file with exported data"
+          errors={errors}
+          className="pb-4"
+        />
+
+        <label className="form-control">
+          <div className="label">
+            <span className="label-text">Export with notes</span>
+          </div>
+          <input
+            type="checkbox"
+            className="toggle"
+            {...register(ExportFormNames.WithNotes)}
+          />
+          <span className="text-sm pt-2 px-1 text-base-content/50">
+            Please be aware that your notes may contain sensitive information
+            such as passwords or PINs. If you choose to include notes in your
+            export, ensure that the exported data is stored securely and handled
+            with caution. If you prefer to keep this information private, we
+            recommend exporting without notes.
+          </span>
+        </label>
+      </div>
+      <footer className="btm-nav btm-nav-md text-base-content px-4">
+        <button className="btn btn-primary w-full" type="submit">
+          Export data
+        </button>
+      </footer>
+    </form>
+  );
+}

app/export-data/page.tsx

@@ -0,0 +1,14 @@
+import { ExportDataPage } from '@/app/export-data/export-data-page';
+import { Routes } from '@/app/lib/shared';
+import { PageTemplate } from '@/app/ui/page-template';
+import { SecondaryHeader } from '@/app/ui/secondary-header';
+
+export default function Page() {
+  return (
+    <PageTemplate
+      header={<SecondaryHeader title="Export data" href={Routes.Settings} />}
+    >
+      <ExportDataPage />
+    </PageTemplate>
+  );
+}

app/layout.tsx

@@ -50,6 +50,7 @@ export default function RootLayout({
           sizes="180x180"
           href="/apple-touch-icon.png"
         />
+        <meta name="mobile-web-app-capable" content="yes" />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-zinc-50 h-full max-h-screen`}

app/lib/shared.ts

@@ -29,6 +29,7 @@ export enum Routes {
   Card = '/card',
   About = '/about',
   AboutAuthor = '/about-author',
+  ExportData = '/export-data',
 }
 
 export const ICON_COLOR = 'oklch(0.4912 0.3096 275.75)';