From 3cf75ecea6824aefa4e10005c86b3a012ec0b64f Mon Sep 17 00:00:00 2001 From: Jamie Pine <32987599+jamiepine@users.noreply.github.com> Date: Mon, 14 Mar 2022 05:05:21 -0700 Subject: [PATCH] removed old state code, replaced with react-query --- apps/desktop/src/App.tsx | 39 ++-- apps/desktop/src/Debug.tsx | 9 - apps/desktop/src/components/file/Sidebar.tsx | 1 - apps/desktop/src/hooks/useCoreEvents.tsx | 23 ++- apps/desktop/src/screens/Explorer.tsx | 27 +-- apps/desktop/src/screens/Overview.tsx | 2 - apps/desktop/src/screens/Spaces.tsx | 6 +- .../src/screens/settings/GeneralSettings.tsx | 32 ++- .../src/screens/settings/LocationSettings.tsx | 10 +- apps/desktop/src/store/explorer.ts | 184 ------------------ apps/desktop/src/store/global.ts | 28 --- apps/desktop/src/store/index.ts | 11 -- apps/desktop/src/store/locations.ts | 34 ---- apps/desktop/src/store/resource.ts | 31 --- apps/desktop/src/types/filesystem.ts | 40 ---- apps/desktop/src/types/index.ts | 4 - apps/desktop/src/types/job.ts | 22 --- apps/desktop/src/types/library.ts | 37 ---- apps/desktop/src/types/media.ts | 30 --- packages/core/bindings/ClientState.ts | 3 + packages/core/bindings/CoreEvent.ts | 2 +- packages/core/bindings/CoreResponse.ts | 3 +- packages/core/bindings/LibraryState.ts | 2 + packages/core/index.ts | 2 + packages/core/src/lib.rs | 15 +- packages/core/src/state/client.rs | 7 +- 26 files changed, 82 insertions(+), 522 deletions(-) delete mode 100644 apps/desktop/src/Debug.tsx delete mode 100644 apps/desktop/src/store/explorer.ts delete mode 100644 apps/desktop/src/store/global.ts delete mode 100644 apps/desktop/src/store/index.ts delete mode 100644 apps/desktop/src/store/locations.ts delete mode 100644 apps/desktop/src/store/resource.ts delete mode 100644 apps/desktop/src/types/filesystem.ts delete mode 100644 apps/desktop/src/types/index.ts delete mode 100644 apps/desktop/src/types/job.ts delete mode 100644 apps/desktop/src/types/library.ts delete mode 100644 apps/desktop/src/types/media.ts create mode 100644 packages/core/bindings/ClientState.ts create mode 100644 packages/core/bindings/LibraryState.ts 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 + })) ?? [] + } />