fix: cannot change jan data folder (#1805)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

web/containers/Layout/index.tsx

@@ -27,8 +27,9 @@ const BaseLayout = (props: PropsWithChildren) => {
   useEffect(() => {
     if (localStorage.getItem(SUCCESS_SET_NEW_DESTINATION) === 'true') {
       setMainViewState(MainViewState.Settings)
+      localStorage.removeItem(SUCCESS_SET_NEW_DESTINATION)
     }
-  }, [])
+  }, [setMainViewState])
 
   return (
     <div className="flex h-screen w-screen flex-1 overflow-hidden">

web/screens/Settings/Advanced/DataFolder/ModalChangeDirectory.tsx

@@ -11,20 +11,23 @@ import {
   Button,
 } from '@janhq/uikit'
 
-import { useVaultDirectory } from '@/hooks/useVaultDirectory'
+import { atom, useAtom } from 'jotai'
+
+export const showDirectoryConfirmModalAtom = atom(false)
+
+type Props = {
+  destinationPath: string
+  onUserConfirmed: () => void
+}
+
+const ModalChangeDirectory: React.FC<Props> = ({
+  destinationPath,
+  onUserConfirmed,
+}) => {
+  const [show, setShow] = useAtom(showDirectoryConfirmModalAtom)
 
-const ModalChangeDirectory = () => {
-  const {
-    isDirectoryConfirm,
-    setIsDirectoryConfirm,
-    applyNewDestination,
-    newDestinationPath,
-  } = useVaultDirectory()
   return (
-    <Modal
-      open={isDirectoryConfirm}
-      onOpenChange={() => setIsDirectoryConfirm(false)}
-    >
+    <Modal open={show} onOpenChange={setShow}>
       <ModalPortal />
       <ModalContent>
         <ModalHeader>
@@ -32,18 +35,16 @@ const ModalChangeDirectory = () => {
         </ModalHeader>
         <p className="text-muted-foreground">
           Are you sure you want to relocate Jan data folder to{' '}
-          <span className="font-medium text-foreground">
-            {newDestinationPath}
-          </span>
+          <span className="font-medium text-foreground">{destinationPath}</span>
           ? A restart will be required afterward.
         </p>
         <ModalFooter>
           <div className="flex gap-x-2">
-            <ModalClose asChild onClick={() => setIsDirectoryConfirm(false)}>
+            <ModalClose asChild onClick={() => setShow(false)}>
               <Button themes="ghost">Cancel</Button>
             </ModalClose>
             <ModalClose asChild>
-              <Button onClick={applyNewDestination} autoFocus>
+              <Button onClick={onUserConfirmed} autoFocus>
                 Yes, Proceed
               </Button>
             </ModalClose>

web/screens/Settings/Advanced/DataFolder/ModalErrorSetDestGlobal.tsx

@@ -10,16 +10,15 @@ import {
   ModalClose,
   Button,
 } from '@janhq/uikit'
+import { atom, useAtom } from 'jotai'
 
-import { useVaultDirectory } from '@/hooks/useVaultDirectory'
+export const showChangeFolderErrorAtom = atom(false)
 
 const ModalErrorSetDestGlobal = () => {
-  const { isErrorSetNewDest, setIsErrorSetNewDest } = useVaultDirectory()
+  const [show, setShow] = useAtom(showChangeFolderErrorAtom)
+
   return (
-    <Modal
-      open={isErrorSetNewDest}
-      onOpenChange={() => setIsErrorSetNewDest(false)}
-    >
+    <Modal open={show} onOpenChange={setShow}>
       <ModalPortal />
       <ModalContent>
         <ModalHeader>
@@ -31,7 +30,7 @@ const ModalErrorSetDestGlobal = () => {
         </p>
         <ModalFooter>
           <div className="flex gap-x-2">
-            <ModalClose asChild onClick={() => setIsErrorSetNewDest(false)}>
+            <ModalClose asChild onClick={() => setShow(false)}>
               <Button themes="danger">Got it</Button>
             </ModalClose>
           </div>

web/screens/Settings/Advanced/DataFolder/ModalSameDirectory.tsx

@@ -11,16 +11,15 @@ import {
   Button,
 } from '@janhq/uikit'
 
-import { useVaultDirectory } from '@/hooks/useVaultDirectory'
+import { atom, useAtom } from 'jotai'
+
+export const showSamePathModalAtom = atom(false)
 
 const ModalSameDirectory = () => {
-  const { isSameDirectory, setIsSameDirectory, setNewDestination } =
-    useVaultDirectory()
+  const [show, setShow] = useAtom(showSamePathModalAtom)
+
   return (
-    <Modal
-      open={isSameDirectory}
-      onOpenChange={() => setIsSameDirectory(false)}
-    >
+    <Modal open={show} onOpenChange={setShow}>
       <ModalPortal />
       <ModalContent>
         <ModalHeader>
@@ -31,11 +30,11 @@ const ModalSameDirectory = () => {
         </p>
         <ModalFooter>
           <div className="flex gap-x-2">
-            <ModalClose asChild onClick={() => setIsSameDirectory(false)}>
+            <ModalClose asChild onClick={() => setShow(false)}>
               <Button themes="ghost">Cancel</Button>
             </ModalClose>
             <ModalClose asChild>
-              <Button themes="danger" onClick={setNewDestination} autoFocus>
+              <Button themes="danger" onClick={() => setShow(false)} autoFocus>
                 Choose a different folder
               </Button>
             </ModalClose>

web/screens/Settings/Advanced/DataFolder/index.tsx

@@ -1,17 +1,73 @@
+import { Fragment, useCallback, useEffect, useState } from 'react'
+
+import { fs, AppConfiguration } from '@janhq/core'
 import { Button, Input } from '@janhq/uikit'
+import { useSetAtom } from 'jotai'
 import { PencilIcon, FolderOpenIcon } from 'lucide-react'
 
-import { useVaultDirectory } from '@/hooks/useVaultDirectory'
+import { SUCCESS_SET_NEW_DESTINATION } from '@/hooks/useVaultDirectory'
 
-import ModalChangeDirectory from './ModalChangeDirectory'
-import ModalErrorSetDestGlobal from './ModalErrorSetDestGlobal'
-import ModalSameDirectory from './ModalSameDirectory'
+import ModalChangeDirectory, {
+  showDirectoryConfirmModalAtom,
+} from './ModalChangeDirectory'
+import ModalErrorSetDestGlobal, {
+  showChangeFolderErrorAtom,
+} from './ModalErrorSetDestGlobal'
+import ModalSameDirectory, { showSamePathModalAtom } from './ModalSameDirectory'
 
 const DataFolder = () => {
-  const { currentPath, setNewDestination } = useVaultDirectory()
+  const [janDataFolderPath, setJanDataFolderPath] = useState('')
+  const setShowDirectoryConfirm = useSetAtom(showDirectoryConfirmModalAtom)
+  const setShowSameDirectory = useSetAtom(showSamePathModalAtom)
+  const setShowChangeFolderError = useSetAtom(showChangeFolderErrorAtom)
+  const [destinationPath, setDestinationPath] = useState(undefined)
+
+  useEffect(() => {
+    window.core?.api
+      ?.getAppConfigurations()
+      ?.then((appConfig: AppConfiguration) => {
+        setJanDataFolderPath(appConfig.data_folder)
+      })
+  }, [])
+
+  const onChangeFolderClick = useCallback(async () => {
+    const destFolder = await window.core?.api?.selectDirectory()
+    if (!destFolder) return
+
+    if (destFolder === janDataFolderPath) {
+      setShowSameDirectory(true)
+      return
+    }
+
+    setDestinationPath(destFolder)
+    setShowDirectoryConfirm(true)
+  }, [janDataFolderPath, setShowSameDirectory, setShowDirectoryConfirm])
+
+  const onUserConfirmed = useCallback(async () => {
+    const destination = destinationPath
+    if (!destination) return
+    try {
+      const appConfiguration: AppConfiguration =
+        await window.core?.api?.getAppConfigurations()
+      const currentJanDataFolder = appConfiguration.data_folder
+      appConfiguration.data_folder = destination
+      await fs.syncFile(currentJanDataFolder, destination)
+      await window.core?.api?.updateAppConfiguration(appConfiguration)
+
+      console.debug(
+        `File sync finished from ${currentJanDataFolder} to ${destination}`
+      )
+
+      localStorage.setItem(SUCCESS_SET_NEW_DESTINATION, 'true')
+      await window.core?.api?.relaunch()
+    } catch (e) {
+      console.error(`Error: ${e}`)
+      setShowChangeFolderError(true)
+    }
+  }, [destinationPath, setShowChangeFolderError])
 
   return (
-    <>
+    <Fragment>
       <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
         <div className="flex-shrink-0 space-y-1.5">
           <div className="flex gap-x-2">
@@ -26,7 +82,11 @@ const DataFolder = () => {
         </div>
         <div className="flex items-center gap-x-3">
           <div className="relative">
-            <Input value={currentPath} className="w-[240px] pr-8" disabled />
+            <Input
+              value={janDataFolderPath}
+              className="w-[240px] pr-8"
+              disabled
+            />
             <FolderOpenIcon
               size={16}
               className="absolute right-2 top-1/2 -translate-y-1/2"
@@ -36,16 +96,19 @@ const DataFolder = () => {
             size="sm"
             themes="outline"
             className="h-9 w-9 p-0"
-            onClick={setNewDestination}
+            onClick={onChangeFolderClick}
           >
             <PencilIcon size={16} />
           </Button>
         </div>
       </div>
       <ModalSameDirectory />
-      <ModalChangeDirectory />
+      <ModalChangeDirectory
+        destinationPath={destinationPath ?? ''}
+        onUserConfirmed={onUserConfirmed}
+      />
       <ModalErrorSetDestGlobal />
-    </>
+    </Fragment>
   )
 }