Updates to general commands
This commit is contained in:
parent
c296927bbb
commit
cf9ed31dfd
3 changed files with 73 additions and 8 deletions
|
@ -1,4 +1,4 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useCallback, Dispatch } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
|
@ -6,25 +6,29 @@ import { AppRoute } from '/@/renderer/router/routes';
|
|||
interface GoToCommandsProps {
|
||||
handleClose: () => 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 goTo = useCallback(
|
||||
(route: string) => {
|
||||
navigate(route);
|
||||
setPages([CommandPalettePages.HOME]);
|
||||
handleClose();
|
||||
setPages([CommandPalettePages.HOME]);
|
||||
setQuery('');
|
||||
},
|
||||
[handleClose, navigate, setPages],
|
||||
[handleClose, navigate, setPages, setQuery],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Command.Item onSelect={() => goTo(AppRoute.HOME)}>Home</Command.Item>
|
||||
<Command.Item onSelect={() => goTo(AppRoute.SEARCH)}>Search</Command.Item>
|
||||
<Command.Item onSelect={() => goTo(AppRoute.SETTINGS)}>Settings</Command.Item>
|
||||
<Command.Group>
|
||||
<Command.Item onSelect={() => goTo(AppRoute.HOME)}>Home</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.Item onSelect={() => goTo(AppRoute.LIBRARY_ALBUMS)}>Albums</Command.Item>
|
||||
<Command.Item onSelect={() => goTo(AppRoute.LIBRARY_SONGS)}>Tracks</Command.Item>
|
||||
|
|
|
@ -37,8 +37,8 @@ export const HomeCommands = ({
|
|||
|
||||
const handleSearch = useCallback(() => {
|
||||
navigate(AppRoute.SEARCH);
|
||||
setQuery('');
|
||||
handleClose();
|
||||
setQuery('');
|
||||
}, [handleClose, navigate, setQuery]);
|
||||
|
||||
return (
|
||||
|
@ -48,6 +48,9 @@ export const HomeCommands = ({
|
|||
<Command.Item onSelect={() => setPages([...pages, CommandPalettePages.GO_TO])}>
|
||||
Go to page...
|
||||
</Command.Item>
|
||||
<Command.Item onSelect={() => setPages([...pages, CommandPalettePages.MANAGE_SERVERS])}>
|
||||
Server commands...
|
||||
</Command.Item>
|
||||
{query !== '' && (
|
||||
<Command.Item
|
||||
value="Search"
|
||||
|
|
58
src/renderer/features/search/components/server-commands.tsx
Normal file
58
src/renderer/features/search/components/server-commands.tsx
Normal 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 />
|
||||
</>
|
||||
);
|
||||
};
|
Reference in a new issue