Migrate Application store to the global/static one

client/client.ts

@@ -327,6 +327,8 @@ export class Client {
   }
 }
 
+export const client = new Client()
+
 // Internal
 
 async function makeRequest<T>(

client/components/Application/Browser.tsx

@@ -3,11 +3,12 @@ import { ErrorBoundary } from 'react-error-boundary'
 import EmptyCard from '../Parts/Cards/Empty'
 import SpinnerCard from '../Parts/Cards/Spinner'
 import FileTree from '../Parts/Trees/File'
-import { useStore } from './store'
+import * as store from '@client/store'
 
 export default function Browser() {
-  const files = useStore((state) => state.files)
-  const loading = useStore((state) => state.loading)
+  const files = store.useStore((state) => state.files)
+  const loading = store.useStore((state) => state.loading)
+
   return loading ? (
     <LoadingBrowser />
   ) : files.length ? (
@@ -18,10 +19,10 @@ export default function Browser() {
 }
 
 function DefaultBrowser() {
-  const path = useStore((state) => state.path)
-  const files = useStore((state) => state.files)
-  const fileEvent = useStore((state) => state.fileEvent)
-  const selectFile = useStore((state) => state.selectFile)
+  const path = store.useStore((state) => state.path)
+  const files = store.useStore((state) => state.files)
+  const fileEvent = store.useStore((state) => state.fileEvent)
+
   return (
     <ErrorBoundary
       fallback={
@@ -34,7 +35,12 @@ function DefaultBrowser() {
         </Box>
       }
     >
-      <FileTree files={files} event={fileEvent} selected={path} onSelect={selectFile} />
+      <FileTree
+        files={files}
+        event={fileEvent}
+        selected={path}
+        onSelect={store.selectFile}
+      />
     </ErrorBoundary>
   )
 }

client/components/Application/Buttons/Add.tsx

@@ -7,10 +7,11 @@ import IconButton from '../../Parts/Buttons/Icon'
 import CreateNewFolderIcon from '@mui/icons-material/CreateNewFolder'
 import DriveFolderUploadRounded from '@mui/icons-material/DriveFolderUploadRounded'
 import UploadFileRounded from '@mui/icons-material/UploadFileRounded'
-import { useStore } from '../store'
+import * as store from '@client/store'
 
 export default function AddButton() {
-  const fileEvent = useStore((state) => state.fileEvent)
+  const fileEvent = store.useStore((state) => state.fileEvent)
+
   return (
     <DropdownButton
       label="Add"
@@ -27,8 +28,8 @@ export default function AddButton() {
 }
 
 function AddLocalFileButton() {
-  const addFiles = useStore((state) => state.addFiles)
   const inputFileRef = React.useRef<HTMLInputElement>(null)
+
   return (
     <React.Fragment>
       <Button
@@ -44,7 +45,7 @@ function AddLocalFileButton() {
           multiple
           ref={inputFileRef}
           onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-            if (ev.target.files) addFiles(ev.target.files)
+            if (ev.target.files) store.addFiles(ev.target.files)
           }}
         />
       </Button>
@@ -53,21 +54,20 @@ function AddLocalFileButton() {
 }
 
 function AddRemoteFileButton() {
-  const updateState = useStore((state) => state.updateState)
   return (
     <IconButton
       variant="text"
       label="Remote File"
       Icon={AddLinkIcon}
-      onClick={() => updateState({ dialog: 'addRemoteFile' })}
+      onClick={() => store.openDialog('addRemoteFile')}
     />
   )
 }
 
 function AddLocalFolderButton() {
   const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
   if (!isWebkitDirectorySupported) return null
-  const addFiles = useStore((state) => state.addFiles)
+
   return (
     <React.Fragment>
       <Button
@@ -80,7 +80,7 @@ function AddLocalFolderButton() {
           type="file"
           hidden
           onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-            if (ev.target.files) addFiles(ev.target.files)
+            if (ev.target.files) store.addFiles(ev.target.files)
           }}
           // @ts-expect-error
           webkitdirectory=""
@@ -91,13 +91,12 @@ function AddLocalFolderButton() {
 }
 
 function AddEmptyFolderButton() {
-  const updateState = useStore((state) => state.updateState)
   return (
     <IconButton
       variant="text"
       label="Create Folder"
       Icon={CreateNewFolderIcon}
-      onClick={() => updateState({ dialog: 'addEmptyFolder' })}
+      onClick={() => store.openDialog('addEmptyFolder')}
     />
   )
 }

client/components/Application/Buttons/Delete.tsx

@@ -2,18 +2,19 @@ import Box from '@mui/material/Box'
 import DeleteIcon from '@mui/icons-material/Delete'
 import IconButton from '../../Parts/Buttons/Icon'
 import LightTooltip from '../../Parts/Tooltips/Light'
-import { selectors, useStore } from '../store'
+import * as store from '@client/store'
 import { useKeyPress } from 'ahooks'
 
 export default function DeleteButton() {
-  const path = useStore((state) => state.path)
-  const isFolder = useStore(selectors.isFolder)
-  const updateState = useStore((state) => state.updateState)
+  const path = store.useStore((state) => state.path)
+  const isFolder = store.useStore(store.getIsFolder)
+
   const type = isFolder ? 'Folder' : 'File'
   useKeyPress(['ctrl.i'], (event) => {
     event.preventDefault()
-    if (path) updateState({ dialog: `delete${type}` })
+    if (path) store.openDialog(`delete${type}`)
   })
+
   return (
     <LightTooltip title="Delete file [Ctrl+I]">
       <Box>
@@ -23,7 +24,7 @@ export default function DeleteButton() {
           disabled={!path}
           variant="text"
           color="warning"
-          onClick={() => updateState({ dialog: `delete${type}` })}
+          onClick={() => store.openDialog(`delete${type}`)}
         />
       </Box>
     </LightTooltip>

client/components/Application/Buttons/Manage.tsx

@@ -4,11 +4,12 @@ import RuleIcon from '@mui/icons-material/Rule'
 import ManageIcon from '@mui/icons-material/FileCopy'
 import IconButton from '../../Parts/Buttons/Icon'
 import DropdownButton from '../../Parts/Buttons/Dropdown'
-import { useStore, selectors } from '../store'
+import * as store from '@client/store'
 
 export default function ManageButton() {
-  const path = useStore((state) => state.path)
-  const notIndexedFiles = useStore(selectors.notIndexedFiles)
+  const path = store.useStore((state) => state.path)
+  const notIndexedFiles = store.useStore(store.getNotIndexedFiles)
+
   return (
     <DropdownButton
       disabled={!path && !notIndexedFiles.length}
@@ -24,47 +25,46 @@ export default function ManageButton() {
 }
 
 function CopyButton() {
-  const path = useStore((state) => state.path)
-  const updateState = useStore((state) => state.updateState)
-  const isFolder = useStore(selectors.isFolder)
+  const path = store.useStore((state) => state.path)
+  const isFolder = store.useStore(store.getIsFolder)
   const type = isFolder ? 'Folder' : 'File'
+
   return (
     <IconButton
       disabled={!path}
       variant="text"
       Icon={CopyIcon}
       label={`Copy ${type}`}
-      onClick={() => updateState({ dialog: `copy${type}` })}
+      onClick={() => store.openDialog(`copy${type}`)}
     />
   )
 }
 
 function MoveButton() {
-  const path = useStore((state) => state.path)
-  const updateState = useStore((state) => state.updateState)
-  const isFolder = useStore(selectors.isFolder)
+  const path = store.useStore((state) => state.path)
+  const isFolder = store.useStore(store.getIsFolder)
   const type = isFolder ? 'Folder' : 'File'
+
   return (
     <IconButton
       disabled={!path}
       variant="text"
       Icon={MoveIcon}
       label={`Move ${type}`}
-      onClick={() => updateState({ dialog: `move${type}` })}
+      onClick={() => store.openDialog(`move${type}`)}
     />
   )
 }
 
 function IndexFilesButton() {
-  const updateState = useStore((state) => state.updateState)
-  const notIndexedFiles = useStore(selectors.notIndexedFiles)
+  const notIndexedFiles = store.useStore(store.getNotIndexedFiles)
   return (
     <IconButton
       disabled={!notIndexedFiles.length}
       variant="text"
       label="Index Files"
       Icon={RuleIcon}
-      onClick={() => updateState({ dialog: 'indexFiles' })}
+      onClick={() => store.openDialog('indexFiles')}
     />
   )
 }

client/components/Application/Content.tsx

@@ -10,12 +10,14 @@ import Text from '../Controllers/Text'
 import View from '../Controllers/View'
 import EmptyCard from '../Parts/Cards/Empty'
 import SpinnerCard from '../Parts/Cards/Spinner'
-import { useStore } from './store'
+import * as store from '@client/store'
+import { client } from '@client/client'
 
 export default function Content() {
-  const record = useStore((state) => state.record)
-  const indexing = useStore((state) => state.indexing)
-  const path = useStore((state) => state.path)
+  const record = store.useStore((state) => state.record)
+  const indexing = store.useStore((state) => state.indexing)
+  const path = store.useStore((state) => state.path)
+
   return indexing ? (
     <LoadingContent />
   ) : record && path ? (
@@ -26,13 +28,15 @@ export default function Content() {
 }
 
 function FileContent() {
-  const client = useStore((state) => state.client)
-  const record = useStore((state) => state.record)
-  const onFileCreate = useStore((state) => state.onFileCreate)
-  const onFilePatch = useStore((state) => state.onFilePatch)
+  const record = store.useStore((state) => state.record)
   if (!record) return null
+
   const Controller = CONTROLLERS[record.type] || File
-  const handleUpdate = React.useMemo(() => () => onFilePatch(record.path), [record.path])
+  const handleUpdate = React.useMemo(
+    () => () => store.onFilePatch(record.path),
+    [record.path]
+  )
+
   return (
     <ErrorBoundary
       fallback={
@@ -49,7 +53,7 @@ function FileContent() {
         path={record.path}
         client={client}
         onSave={handleUpdate}
-        onSaveAs={(path) => onFileCreate([path])}
+        onSaveAs={(path) => store.onFileCreate([path])}
       />
     </ErrorBoundary>
   )

client/components/Application/Dialog.tsx

@@ -10,10 +10,10 @@ import DeleteFolderDialog from './Dialogs/DeleteFolder'
 import IndexFilesDialog from './Dialogs/IndexFiles'
 import MoveFileDialog from './Dialogs/MoveFile'
 import MoveFolderDialog from './Dialogs/MoveFolder'
-import { useStore } from './store'
+import * as store from '@client/store'
 
 export default function Dialog() {
-  const dialog = useStore((state) => state.dialog)
+  const dialog = store.useStore((state) => state.dialog)
   if (!dialog) return null
   // @ts-ignore
   const Dialog = DIALOGS[dialog]

client/components/Application/Dialogs/AddEmptyFolder.tsx

@@ -1,21 +1,20 @@
 import InputDialog from '../../Parts/Dialogs/Input'
-import { useStore, selectors } from '../store'
+import * as store from '@client/store'
 
 export default function AddEmptyFolderDialog() {
-  const folderPath = useStore(selectors.folderPath)
-  const createFolder = useStore((state) => state.createFolder)
-  const updateState = useStore((state) => state.updateState)
+  const folderPath = store.useStore(store.getFolderPath)
+
   return (
     <InputDialog
       open={true}
       value={folderPath}
       title="Create Folder"
       label="Create"
       placholder="Name of the new folder"
-      onCancel={() => updateState({ dialog: undefined })}
+      onCancel={store.closeDialog}
       onConfirm={async (path) => {
-        await createFolder(path)
-        updateState({ dialog: undefined })
+        await store.createFolder(path)
+        store.closeDialog()
       }}
     />
   )

client/components/Application/Dialogs/AddRemoteFile.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react'
 import UploadIcon from '@mui/icons-material/Upload'
 import InputDialog from '../../Parts/Dialogs/Input'
-import { useStore } from '../store'
+import * as store from '@client/store'
 import * as helpers from '../../../helpers'
 
 export default function AddRemoteFileDialog() {
-  const fetchFile = useStore((state) => state.fetchFile)
-  const updateState = useStore((state) => state.updateState)
   const [textFieldError, setTextFieldError] = React.useState(false)
   const [errorHelperText, setErrorHelperText] = React.useState('')
 
@@ -20,12 +18,12 @@ export default function AddRemoteFileDialog() {
       errorHelperText={errorHelperText}
       description="You are fetching a file. Enter source:"
       placholder="Enter or paste a URL"
-      onCancel={() => updateState({ dialog: undefined })}
+      onCancel={store.closeDialog}
       onConfirm={async (url) => {
         if (url !== '' && helpers.isUrlValid(url)) {
           setTextFieldError(false)
-          await fetchFile(url)
-          updateState({ dialog: undefined })
+          await store.fetchFile(url)
+          store.closeDialog()
         } else {
           setTextFieldError(true)
           if (url === '') {

client/components/Application/Dialogs/AdjustFile.tsx

@@ -4,18 +4,18 @@ import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings'
 import ConfirmDialog from '../../Parts/Dialogs/Confirm'
 import SelectField from '../../Parts/Fields/Select'
 import InputField from '../../Parts/Fields/Input'
-import { useStore } from '../store'
+import * as store from '@client/store'
 import * as settings from '../../../settings'
 
 export default function AdjustFileDialog() {
-  const record = useStore((state) => state.record)
-  const adjustFile = useStore((state) => state.adjustFile)
-  const updateState = useStore((state) => state.updateState)
+  const record = store.useStore((state) => state.record)
   const [name, setName] = React.useState(record?.name || '')
   const [type, setType] = React.useState(record?.type || '')
   if (!record) return null
+
   const newName = record.name !== name ? name : undefined
   const newType = record.type !== type ? type : undefined
+
   return (
     <ConfirmDialog
       disabled={!newName && !newType}
@@ -24,10 +24,10 @@ export default function AdjustFileDialog() {
       label="Adjust"
       Icon={DisplaySettingsIcon}
       description="You can change file name and type. Currently they are:"
-      onCancel={() => updateState({ dialog: undefined })}
+      onCancel={store.closeDialog}
       onConfirm={async () => {
-        updateState({ dialog: undefined })
-        await adjustFile(newName, newType)
+        await store.adjustFile(newName, newType)
+        store.closeDialog()
       }}
     >
       <Box sx={{ marginTop: -1 }}>