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 { 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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
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