Roam import WIP

packages/web-app/src/App.css

@@ -98,6 +98,10 @@ input[type='search']::-webkit-search-results-decoration {
     &--dangerous {
       @apply bg-red-600 mt-5;
     }
+
+    &--secondary {
+      @apply bg-blue-600;
+    }
   }
 
   &__sign-up-btn {

packages/web-app/src/App.tsx

@@ -1,5 +1,5 @@
-import './App.css';
 import './tailwind.css';
+import './App.css';
 import './variables.css';
 import './firebaseApp';
 

packages/web-app/src/pages/VaultsPage/CreateVaultModal.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import { generateId } from '@harika/web-core';
+import React, { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { Modal, modalClass } from '../../components/Modal/Modal';
-import { cn } from '../../utils';
+import { useUserVaults } from '../../hooks/useUserApp';
+import { paths } from '../../paths';
+import { cn, useNavigateRef } from '../../utils';
+import { ImportModal } from './ImportModal';
 
 const formModalClass = cn('vault-form-modal');
 const formClass = cn('form');
@@ -14,54 +18,125 @@ type IFormData = {
 export const CreateVaultModal = ({
   isOpened,
   onClose,
-  onSubmit,
 }: {
   isOpened: boolean;
   onClose: () => void;
-  onSubmit: (data: IFormData) => void;
 }) => {
+  const inputFileRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigateRef();
+  const userVaults = useUserVaults();
+
+  const [currentFile, setCurrentFile] = useState<File | undefined>();
+  const [vaultName, setVaultName] = useState<string | undefined>();
+
   const {
     register,
     handleSubmit,
-
     formState: { errors },
+    trigger,
+    setError,
+    getValues,
   } = useForm<IFormData>();
 
   const { ref: refName, ...restName } = register('name', { required: true });
 
+  const onSubmit = useCallback(
+    async (data: { name: string }) => {
+      const dbId = generateId();
+
+      const vault = await userVaults?.createVault({ name: data.name, dbId });
+      if (!vault) {
+        console.error('Failed to create vault');
+
+        return;
+      }
+
+      onClose();
+
+      navigate.current(paths.vaultDailyPath({ vaultId: vault.id }));
+    },
+    [userVaults, onClose, navigate],
+  );
+
+  const handleFileChange = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.item(0);
+
+      if (!file) {
+        setError('name', { message: 'Failed to load file' });
+
+        return;
+      }
+
+      setCurrentFile(file);
+      setVaultName(getValues('name'));
+    },
+    [getValues, setError],
+  );
+
+  const handleJsonImportClick = useCallback(async () => {
+    if (!(await trigger())) return;
+
+    inputFileRef.current?.click();
+  }, [trigger]);
+
   return (
     <Modal isOpened={isOpened} onClose={onClose}>
-      <h1 className={`${formModalClass('header')} ${modalClass('header')} `}>
-        New Vault
-      </h1>
-
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className={`${modalClass('row')} ${modalClass(
-          'footer',
-        )} ${formClass()}`}
-      >
-        <label htmlFor="name" className={formClass('label')}>
-          Name
-        </label>
-        <input
-          {...restName}
-          type="text"
-          placeholder="Vault Name"
-          name="name"
-          ref={(el) => {
-            el?.focus();
-            refName(el);
-          }}
-          className={formClass('input')}
-        />
-
-        {errors.name && errors.name.type === 'required' && (
-          <span className={formClass('error')}>Name is required</span>
-        )}
-
-        <input type="submit" className={formClass('submit-btn')} />
-      </form>
+      {currentFile && vaultName ? (
+        <ImportModal file={currentFile} vaultName={vaultName} />
+      ) : (
+        <>
+          <h1
+            className={`${formModalClass('header')} ${modalClass('header')} `}
+          >
+            New Vault
+          </h1>
+
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className={`${modalClass('row')} ${modalClass(
+              'footer',
+            )} ${formClass()}`}
+          >
+            <label htmlFor="name" className={formClass('label')}>
+              Name
+            </label>
+            <input
+              {...restName}
+              type="text"
+              placeholder="Vault Name"
+              name="name"
+              ref={(el) => {
+                el?.focus();
+                refName(el);
+              }}
+              className={formClass('input')}
+            />
+
+            {errors.name && errors.name.type === 'required' && (
+              <span className={formClass('error')}>Name is required</span>
+            )}
+
+            <input type="submit" className={formClass('submit-btn')} />
+
+            <button
+              className={formClass('submit-btn', { secondary: true })}
+              type="button"
+              onClick={handleJsonImportClick}
+            >
+              Import json
+            </button>
+          </form>
+        </>
+      )}
+
+      <input
+        type="file"
+        ref={inputFileRef}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+        accept=".json"
+      />
     </Modal>
   );
 };

packages/web-app/src/pages/VaultsPage/ImportModal.tsx

@@ -0,0 +1,82 @@
+import {
+  generateId,
+  roamToHarikaJson,
+  VaultApplication,
+} from '@harika/web-core';
+import { isArray } from 'lodash-es';
+import React, { useEffect } from 'react';
+
+import { modalClass } from '../../components/Modal/Modal';
+import { useGetSyncToken } from '../../hooks/useGetSyncToken';
+import { useUserVaults } from '../../hooks/useUserApp';
+import { paths } from '../../paths';
+import { cn } from '../../utils';
+
+const formModalClass = cn('vault-form-modal');
+
+export const ImportModal = ({
+  file,
+  vaultName,
+}: {
+  file: File;
+  vaultName: string;
+}) => {
+  const userVaults = useUserVaults();
+  const getSyncToken = useGetSyncToken();
+
+  useEffect(() => {
+    const callback = async () => {
+      let data: any | undefined = undefined;
+
+      try {
+        data = JSON.parse(await file.text());
+      } catch {
+        console.error('Failed to parse JSON!');
+
+        return;
+      }
+
+      const dump = (() => {
+        if (isArray(data)) {
+          return roamToHarikaJson(data);
+          // we assume it is roam format
+        } else {
+          // Otherwise harika format
+          return data;
+        }
+      })();
+
+      const vaultId = generateId();
+      const vault = await userVaults?.createVault({
+        name: vaultName,
+        dbId: vaultId,
+      });
+      if (!vault) {
+        console.error('Failed to create vault');
+
+        return;
+      }
+
+      const vaultApp = new VaultApplication(
+        vaultId,
+        import.meta.env.VITE_PUBLIC_WS_URL as string,
+        getSyncToken,
+      );
+
+      await vaultApp.start();
+      await vaultApp.getImportExportService().importData(dump);
+
+      // window.location.pathname = paths.vaultDailyPath({ vaultId: vault.id });
+    };
+
+    callback();
+  }, [file, getSyncToken, userVaults, vaultName]);
+
+  return (
+    <>
+      <h1 className={`${formModalClass('header')} ${modalClass('header')} `}>
+        Importing
+      </h1>
+    </>
+  );
+};

packages/web-app/src/pages/VaultsPage/VaultsPage.tsx

@@ -63,7 +63,6 @@ const VaultBlock = ({
 export const VaultsPage = () => {
   useLoadUserApp();
 
-  const navigate = useNavigateRef();
   const userVaults = useUserVaults();
 
   const [isCreateModalOpened, setIsCreateModalOpened] = useState(false);
@@ -73,24 +72,6 @@ export const VaultsPage = () => {
   );
   const allVaults = useObservableState(allVaultTuples, []);
 
-  const handleSubmit = useCallback(
-    async (data: { name: string }) => {
-      const dbId = generateId();
-
-      const vault = await userVaults?.createVault({ name: data.name, dbId });
-      if (!vault) {
-        console.error('Failed to create vault');
-
-        return;
-      }
-
-      setIsCreateModalOpened(false);
-
-      navigate.current(paths.vaultDailyPath({ vaultId: vault.id }));
-    },
-    [userVaults, navigate],
-  );
-
   const handleClose = useCallback(() => {
     setIsCreateModalOpened(false);
   }, []);
@@ -142,7 +123,6 @@ export const VaultsPage = () => {
           <CreateVaultModal
             isOpened={isCreateModalOpened}
             onClose={handleClose}
-            onSubmit={handleSubmit}
           />
         </div>
       </div>

packages/web-app/tailwind.config.js

@@ -3,6 +3,8 @@
 // To add all colors support
 const colors = require('tailwindcss/colors');
 
+console.log(colors);
+
 module.exports = {
   important: true,
   mode: 'jit',

packages/web-core/index.ts

@@ -25,3 +25,4 @@ export * from './src/apps/VaultApplication/BlocksExtension/models/BaseBlock';
 export * from './src/apps/VaultApplication/BlocksExtension/models/BlocksSelection';
 export * from './src/lib/blockParser/blockUtils';
 export * from './src/apps/VaultApplication/BlocksExtension/selectors/getGroupedBacklinks';
+export * from './src/lib/roamToHarikaJson';

packages/web-core/src/apps/VaultApplication/BlocksExtension/repositories/TextBlocksRepository.ts

@@ -22,24 +22,22 @@ export class TextBlocksRepository extends BaseBlockRepository<
   TextBlockDoc,
   TextBlockRow
 > {
-  bulkCreate(
+  async bulkCreate(
     attrsArray: TextBlockDoc[],
     ctx: ISyncCtx,
     e: IQueryExecuter = this.db,
   ) {
-    return e.transaction(async (t) => {
-      const res = await super.bulkCreate(attrsArray, ctx, t);
-
-      await t.insertRecords(
-        textBlocksFTSTable,
-        res.map((row) => ({
-          id: row.id,
-          textContent: row.content.toLowerCase(),
-        })),
-      );
+    const res = await super.bulkCreate(attrsArray, ctx);
 
-      return res;
-    });
+    await e.insertRecords(
+      textBlocksFTSTable,
+      res.map((row) => ({
+        id: row.id,
+        textContent: row.content.toLowerCase(),
+      })),
+    );
+
+    return res;
   }
 
   bulkUpdate(