diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 959ecebc2..182c8018e 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -9,16 +9,11 @@ import { useNavigate } from 'react-router-dom'; import { Sidebar } from './components/file/Sidebar'; -import { TopBar } from './components/layout/TopBar'; import { SettingsScreen } from './screens/Settings'; import { ExplorerScreen } from './screens/Explorer'; -import { invoke } from '@tauri-apps/api'; -import { DebugGlobalStore } from './Debug'; import { useCoreEvents } from './hooks/useCoreEvents'; -import { AppState, useAppState } from './store/global'; import { Button } from './components/primitive'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; -import { useLocationStore } from './store/locations'; import { OverviewScreen } from './screens/Overview'; import { SpacesScreen } from './screens/Spaces'; import { Modal } from './components/layout/Modal'; @@ -138,29 +133,21 @@ function NotFound() { // process.exit(); // }); -export default function App() { +function AppContainer() { useCoreEvents(); - - useEffect(() => { - invoke('get_config').then((state) => useAppState.getState().update(state)); - // invoke('get_mounts').then((locations) => - // //@ts-expect-error - // useLocationStore.getState().setLocations(locations) - // ); - }, []); - return ( - {}} - > - - - - - - + + + + ); +} + +export default function App() { + return ( + {}}> + + + ); } diff --git a/apps/desktop/src/Debug.tsx b/apps/desktop/src/Debug.tsx deleted file mode 100644 index b967f5095..000000000 --- a/apps/desktop/src/Debug.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { useAppState } from './store/global'; -import { useExplorerStore } from './store/explorer'; - -export function DebugGlobalStore() { - useAppState(); - useExplorerStore(); - return <>; -} diff --git a/apps/desktop/src/components/file/Sidebar.tsx b/apps/desktop/src/components/file/Sidebar.tsx index eca2e12a1..825419d54 100644 --- a/apps/desktop/src/components/file/Sidebar.tsx +++ b/apps/desktop/src/components/file/Sidebar.tsx @@ -5,7 +5,6 @@ import clsx from 'clsx'; import { CirclesFour, EjectSimple, MonitorPlay, Planet } from 'phosphor-react'; import React from 'react'; import { NavLink, NavLinkProps } from 'react-router-dom'; -import { useLocations } from '../../store/locations'; import { TrafficLights } from '../os/TrafficLights'; import { Button } from '../primitive'; import { Dropdown } from '../primitive/Dropdown'; diff --git a/apps/desktop/src/hooks/useCoreEvents.tsx b/apps/desktop/src/hooks/useCoreEvents.tsx index e8aed7434..a040a6dde 100644 --- a/apps/desktop/src/hooks/useCoreEvents.tsx +++ b/apps/desktop/src/hooks/useCoreEvents.tsx @@ -1,19 +1,26 @@ import { useEffect } from 'react'; import { emit, listen, Event } from '@tauri-apps/api/event'; -import { useExplorerStore } from '../store/explorer'; -import { ClientEvent } from '@sd/core'; +// import { useExplorerStore } from '../store/explorer'; +import { CoreEvent } from '@sd/core'; +import { useQuery, useQueryClient } from 'react-query'; export function useCoreEvents() { + const client = useQueryClient(); useEffect(() => { - listen('core_event', (e: Event) => { + listen('core_event', (e: Event) => { console.log({ e }); switch (e.payload?.key) { - case 'new_file_type_thumb': - console.log(e.payload?.payload.file_id); - - if (e.payload?.payload.icon_created) - useExplorerStore.getState().nativeIconUpdated(e.payload.payload.file_id); + case 'InvalidateQuery': + let query = [e.payload.data.key]; + // TODO: find a way to make params accessible in TS + // also this method will only work for queries that use the whole params obj as the second key + // @ts-expect-error + if (e.payload.data.params) { + // @ts-expect-error + query.push(e.payload.data.params); + } + client.invalidateQueries([e.payload.data.key]); break; default: diff --git a/apps/desktop/src/screens/Explorer.tsx b/apps/desktop/src/screens/Explorer.tsx index c66a62750..fea8a37d9 100644 --- a/apps/desktop/src/screens/Explorer.tsx +++ b/apps/desktop/src/screens/Explorer.tsx @@ -1,35 +1,16 @@ import React, { useEffect } from 'react'; -import { FileList } from '../components/file/FileList'; +// import { FileList } from '../components/file/FileList'; import { invoke } from '@tauri-apps/api'; -import { IFile } from '../types'; -import { useExplorerStore } from '../store/explorer'; -import { Inspector } from '../components/file/Inspector'; -export interface DirectoryResponse { - directory: IFile; - contents: IFile[]; -} +import { Inspector } from '../components/file/Inspector'; export const ExplorerScreen: React.FC<{}> = () => { // let { slug } = useParams(); - const [currentDir, tempWatchDir] = useExplorerStore((state) => [ - state.currentDir, - state.tempWatchDir - ]); - - useEffect(() => { - invoke('get_files', { path: tempWatchDir }).then((res) => { - console.log({ res }); - useExplorerStore.getState().ingestDir(res.directory, res.contents); - }); - }, []); - - if (currentDir === null) return <>; return (
- - + {/* */} + {/* */}
); }; diff --git a/apps/desktop/src/screens/Overview.tsx b/apps/desktop/src/screens/Overview.tsx index 99d41ae03..edbd31d8d 100644 --- a/apps/desktop/src/screens/Overview.tsx +++ b/apps/desktop/src/screens/Overview.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import ReactJson from 'react-json-view'; import FileItem from '../components/file/FileItem'; -import { useAppState } from '../store/global'; interface StatItemProps { name: string; @@ -23,7 +22,6 @@ const StatItem: React.FC = (props) => { export const OverviewScreen: React.FC<{}> = (props) => { const [selectedFile, setSelectedFile] = useState(null); - const app = useAppState(); function handleSelect(key: string) { // if (selectedFile === key) setSelectedFile(null); diff --git a/apps/desktop/src/screens/Spaces.tsx b/apps/desktop/src/screens/Spaces.tsx index d1707c086..4e785f7c1 100644 --- a/apps/desktop/src/screens/Spaces.tsx +++ b/apps/desktop/src/screens/Spaces.tsx @@ -1,11 +1,11 @@ +import { useBridgeQuery } from '@sd/state'; import React from 'react'; import ReactJson from 'react-json-view'; import FileItem from '../components/file/FileItem'; import { Tag } from '../components/primitive/Tag'; -import { useAppState } from '../store/global'; export const SpacesScreen: React.FC<{}> = (props) => { - const app = useAppState(); + const { data: client } = useBridgeQuery('ClientGetState'); return (
@@ -15,7 +15,7 @@ export const SpacesScreen: React.FC<{}> = (props) => { enableClipboard={false} displayDataTypes={false} theme="ocean" - src={app.config} + src={{ ...client }} style={{ padding: 20, borderRadius: 5, diff --git a/apps/desktop/src/screens/settings/GeneralSettings.tsx b/apps/desktop/src/screens/settings/GeneralSettings.tsx index 7d6a57d25..7460655f4 100644 --- a/apps/desktop/src/screens/settings/GeneralSettings.tsx +++ b/apps/desktop/src/screens/settings/GeneralSettings.tsx @@ -2,25 +2,21 @@ import { InputContainer } from '../../components/primitive/InputContainer'; import { Button, Input } from '../../components/primitive'; import { invoke } from '@tauri-apps/api'; import React, { useEffect, useState } from 'react'; -import { useExplorerStore } from '../../store/explorer'; -import { useAppState } from '../../store/global'; + import Listbox from '../../components/primitive/Listbox'; -import { useLocations } from '../../store/locations'; + import ReactJson from 'react-json-view'; import Slider from '../../components/primitive/Slider'; +import { useBridgeQuery } from '@sd/state'; export default function GeneralSettings() { - const locations = useLocations(); + const { data: volumes } = useBridgeQuery('SysGetVolumes'); + const [tempWatchDir, setTempWatchDir] = useState(''); const [fakeSliderVal, setFakeSliderVal] = useState([30, 0]); // const fileUploader = useRef(null); - const app = useAppState(); - - const [tempWatchDir, setTempWatchDir] = useExplorerStore((state) => [ - state.tempWatchDir, - state.setTempWatchDir - ]); + const { data: client } = useBridgeQuery('ClientGetState'); return (
@@ -47,7 +43,7 @@ export default function GeneralSettings() { variant="primary" onClick={async () => { await invoke('scan_dir', { - path: tempWatchDir + path: client?.data_path }); }} > @@ -62,11 +58,13 @@ export default function GeneralSettings() {
({ - key: location.name, - option: location.name, - description: location.path - }))} + options={ + volumes?.map((volume) => ({ + key: volume.name, + option: volume.name, + description: volume.mount_point + })) ?? [] + } />