pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add state to search route navigation

Browse source
This commit is contained in:
jeffvli 2023-05-19 22:24:15 -07:00 • committed by Jeff
parent b5fa6f0baa
commit e8f7ae637f
2 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/renderer/features/search/components/home-commands.tsx
View file

@ -1,6 +1,9 @@
import { openModal, closeAllModals } from '@mantine/modals'; import { openModal, closeAllModals } from '@mantine/modals';
import { nanoid } from 'nanoid/non-secure';
import { Dispatch, useCallback } from 'react'; import { Dispatch, useCallback } from 'react';
import { useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import { createSearchParams } from 'react-router-dom';
import { LibraryItem } from '/@/renderer/api/types';
import { CreatePlaylistForm } from '/@/renderer/features/playlists'; import { CreatePlaylistForm } from '/@/renderer/features/playlists';
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';
@ -35,11 +38,23 @@ export const HomeCommands = ({
}); });
}, [handleClose, server?.type]); }, [handleClose, server?.type]);
const handleSearch = useCallback(() => { const handleSearch = () => {
navigate(AppRoute.SEARCH); navigate(
{
pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }),
search: createSearchParams({
query,
}).toString(),
},
{
state: {
navigationId: nanoid(),
},
},
);
handleClose(); handleClose();
setQuery(''); setQuery('');
}, [handleClose, navigate, setQuery]); };
return ( return (
<> <>

14
src/renderer/features/search/components/library-command-item.tsx
View file

@ -10,9 +10,11 @@ import {
} from 'react-icons/ri'; } from 'react-icons/ri';
import styled from 'styled-components'; import styled from 'styled-components';
import { LibraryItem } from '/@/renderer/api/types'; import { LibraryItem } from '/@/renderer/api/types';
import { Button, MotionFlex, Text } from '/@/renderer/components'; import { Button, Text } from '/@/renderer/components';
import { Play, PlayQueueAddOptions } from '/@/renderer/types'; import { Play, PlayQueueAddOptions } from '/@/renderer/types';
const Item = styled(Flex)``;
const ItemGrid = styled.div<{ height: number }>` const ItemGrid = styled.div<{ height: number }>`
display: grid; display: grid;
grid-auto-columns: 1fr; grid-auto-columns: 1fr;
@ -47,6 +49,8 @@ const StyledImage = styled.img`
border-radius: 4px; border-radius: 4px;
`; `;
const ActionsContainer = styled(Flex)``;
interface LibraryCommandItemProps { interface LibraryCommandItemProps {
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
id: string; id: string;
@ -99,7 +103,7 @@ export const LibraryCommandItem = ({
); );
return ( return (
<Flex <Item
gap="xl" gap="xl"
justify="space-between" justify="space-between"
style={{ height: '40px', width: '100%' }} style={{ height: '40px', width: '100%' }}
@ -141,7 +145,7 @@ export const LibraryCommandItem = ({
</Text> </Text>
</MetadataWrapper> </MetadataWrapper>
</ItemGrid> </ItemGrid>
<MotionFlex <ActionsContainer
align="center" align="center"
gap="sm" gap="sm"
justify="flex-end" justify="flex-end"
@ -173,7 +177,7 @@ export const LibraryCommandItem = ({
> >
<RiAddCircleFill /> <RiAddCircleFill />
</Button> </Button>
</MotionFlex> </ActionsContainer>
</Flex> </Item>
); );
}; };