Updates to general commands

This commit is contained in:
jeffvli 2023-05-19 00:21:01 -07:00 committed by Jeff
parent c296927bbb
commit cf9ed31dfd
3 changed files with 73 additions and 8 deletions

View file

@ -1,4 +1,4 @@
import { useCallback } from 'react'; import { useCallback, Dispatch } from 'react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command'; import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
@ -6,25 +6,29 @@ import { AppRoute } from '/@/renderer/router/routes';
interface GoToCommandsProps { interface GoToCommandsProps {
handleClose: () => void; handleClose: () => void;
setPages: (pages: CommandPalettePages[]) => void; setPages: (pages: CommandPalettePages[]) => void;
setQuery: Dispatch<string>;
} }
export const GoToCommands = ({ setPages, handleClose }: GoToCommandsProps) => { export const GoToCommands = ({ setQuery, setPages, handleClose }: GoToCommandsProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const goTo = useCallback( const goTo = useCallback(
(route: string) => { (route: string) => {
navigate(route); navigate(route);
setPages([CommandPalettePages.HOME]);
handleClose(); handleClose();
setPages([CommandPalettePages.HOME]);
setQuery('');
}, },
[handleClose, navigate, setPages], [handleClose, navigate, setPages, setQuery],
); );
return ( return (
<> <>
<Command.Item onSelect={() => goTo(AppRoute.HOME)}>Home</Command.Item> <Command.Group>
<Command.Item onSelect={() => goTo(AppRoute.SEARCH)}>Search</Command.Item> <Command.Item onSelect={() => goTo(AppRoute.HOME)}>Home</Command.Item>
<Command.Item onSelect={() => goTo(AppRoute.SETTINGS)}>Settings</Command.Item> <Command.Item onSelect={() => goTo(AppRoute.SEARCH)}>Search</Command.Item>
<Command.Item onSelect={() => goTo(AppRoute.SETTINGS)}>Settings</Command.Item>
</Command.Group>
<Command.Group heading="Library"> <Command.Group heading="Library">
<Command.Item onSelect={() => goTo(AppRoute.LIBRARY_ALBUMS)}>Albums</Command.Item> <Command.Item onSelect={() => goTo(AppRoute.LIBRARY_ALBUMS)}>Albums</Command.Item>
<Command.Item onSelect={() => goTo(AppRoute.LIBRARY_SONGS)}>Tracks</Command.Item> <Command.Item onSelect={() => goTo(AppRoute.LIBRARY_SONGS)}>Tracks</Command.Item>

View file

@ -37,8 +37,8 @@ export const HomeCommands = ({
const handleSearch = useCallback(() => { const handleSearch = useCallback(() => {
navigate(AppRoute.SEARCH); navigate(AppRoute.SEARCH);
setQuery('');
handleClose(); handleClose();
setQuery('');
}, [handleClose, navigate, setQuery]); }, [handleClose, navigate, setQuery]);
return ( return (
@ -48,6 +48,9 @@ export const HomeCommands = ({
<Command.Item onSelect={() => setPages([...pages, CommandPalettePages.GO_TO])}> <Command.Item onSelect={() => setPages([...pages, CommandPalettePages.GO_TO])}>
Go to page... Go to page...
</Command.Item> </Command.Item>
<Command.Item onSelect={() => setPages([...pages, CommandPalettePages.MANAGE_SERVERS])}>
Server commands...
</Command.Item>
{query !== '' && ( {query !== '' && (
<Command.Item <Command.Item
value="Search" value="Search"

View file

@ -0,0 +1,58 @@
import { useCallback, Dispatch } from 'react';
import { openModal } from '@mantine/modals';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
import { ServerList } from '/@/renderer/features/servers';
import { useAuthStoreActions, useServerList } from '/@/renderer/store';
import { ServerListItem } from '/@/renderer/types';
import { useNavigate } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
interface ServerCommandsProps {
handleClose: () => void;
setPages: (pages: CommandPalettePages[]) => void;
setQuery: Dispatch<string>;
}
export const ServerCommands = ({ setQuery, setPages, handleClose }: ServerCommandsProps) => {
const serverList = useServerList();
const navigate = useNavigate();
const { setCurrentServer } = useAuthStoreActions();
const handleManageServersModal = useCallback(() => {
openModal({
children: <ServerList />,
title: 'Manage Servers',
});
handleClose();
setQuery('');
setPages([CommandPalettePages.HOME]);
}, [handleClose, setPages, setQuery]);
const handleSelectServer = useCallback(
(server: ServerListItem) => {
navigate(AppRoute.HOME);
setCurrentServer(server);
handleClose();
setQuery('');
setPages([CommandPalettePages.HOME]);
},
[handleClose, navigate, setCurrentServer, setPages, setQuery],
);
return (
<>
<Command.Group heading="Select a server">
{Object.keys(serverList).map((key) => (
<Command.Item
key={key}
onSelect={() => handleSelectServer(serverList[key])}
>{`Switch to ${serverList[key].name}...`}</Command.Item>
))}
</Command.Group>
<Command.Group heading="Manage">
<Command.Item onSelect={handleManageServersModal}>Manage servers...</Command.Item>
</Command.Group>
<Command.Separator />
</>
);
};