add copy to clipboard / read from querystring functionalities

This commit is contained in:
lamacchinadesiderante 2023-01-11 00:35:50 +01:00
parent 9f719568a0
commit b9dc623170
3 changed files with 175 additions and 62 deletions

View File

@ -0,0 +1,58 @@
import { Box, Button, Card, Flex, Icon, Spacer } from '@chakra-ui/react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IoShareSocialOutline } from 'react-icons/io5';
import MediaQuery from 'react-responsive';
import { MEDIA_QUERY_DESKTOP_STARTS, MEDIA_QUERY_MOBILE_ENDS } from '../constants/mediaquery';
export interface IProps {
show: boolean
onClick(): void
}
const CopyToClipboardButton: React.FC<IProps> = (props) => {
const { show, onClick } = props
const [showSuccess, setShowSuccess] = useState<boolean>(false)
const { t } = useTranslation();
const handleClick = () => {
onClick()
setShowSuccess(true)
setTimeout(() => {
setShowSuccess(false)
}, 3000)
}
return (
<>
<MediaQuery minWidth={MEDIA_QUERY_DESKTOP_STARTS}>
{show &&
<Card backgroundColor={'transparent'} mt={{ base: 0, md: 4 }} mb={{ base: 0, md: 4 }} mx={{ base: 4, md: 4 }}>
<Box p='4'>
<Flex alignItems={'center'}>
<Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
{showSuccess ? t('search.copy_success'): t('search.copy_search_link')} &nbsp; <Icon as={IoShareSocialOutline} />
</Button>
</Flex>
</Box>
</Card>}
</MediaQuery>
<MediaQuery maxWidth={MEDIA_QUERY_MOBILE_ENDS}>
{show &&
<Box p='4'>
<Flex alignItems={'center'}>
<Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
{showSuccess ? t('search.copy_success') : t('search.copy_search_link')} &nbsp; <Icon as={IoShareSocialOutline} />
</Button>
</Flex>
</Box>}
</MediaQuery>
</>
);
};
export default CopyToClipboardButton;

View File

@ -1,5 +1,6 @@
import { GridItem, Icon, SimpleGrid } from '@chakra-ui/react';
import React, { useState } from 'react';
import { Button, GridItem, Icon, SimpleGrid, Flex, Box, Card } from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import MediaQuery from 'react-responsive'
import {
TbBook2,
TbBuilding,
@ -11,10 +12,13 @@ import {
import search, { Book } from '../scripts/searcher';
import { IoLanguage } from 'react-icons/io5';
import { IoShareSocialOutline } from 'react-icons/io5';
import SearchInput from './SearchInput';
import { useDebounceEffect } from 'ahooks';
import { useTranslation } from 'react-i18next';
import SearchLanguage from './SearchLanguage';
import { MEDIA_QUERY_DESKTOP_STARTS, MEDIA_QUERY_MOBILE_ENDS } from '../constants/mediaquery';
import CopyToClipboardButton from './CopyToClipboardButton';
function constructQuery(parts: Record<string, string>): string {
return Object.keys(parts)
@ -44,6 +48,27 @@ const Search: React.FC<SearchProps> = ({ setBooks }) => {
const [complexQuery, setComplexQuery] = useState<string>('');
const [showLanguageDropdown, setShowLanguageDropdown] = useState<boolean>(true)
useEffect(() => {
const params = new Proxy(new URLSearchParams(window.location.search), {
//@ts-ignore
get: (searchParams, prop) => searchParams.get(prop),
});
//@ts-ignore
params.title && setTitle(String(params.title))
//@ts-ignore
params.author && setAuthor(String(params.author))
//@ts-ignore
if (params.language) {
//@ts-ignore
setLanguage(String(params.language))
setShowLanguageDropdown(false)
}
}, [])
const handleLanguageChange = (language: string) => {
if (language == 'input') {
setShowLanguageDropdown(false)
@ -57,6 +82,27 @@ const Search: React.FC<SearchProps> = ({ setBooks }) => {
setLanguage('')
}
const hasAnySearchBeenMade = () => {
return (
title !== ''
|| author !== ''
|| language !== ''
|| publisher !== ''
|| extension !== ''
|| isbn !== ''
)
}
const copyToClipboard = () => {
const searchQuery = `${window.location.host}?title=${title}&author=${author}&language=${language}&publisher=${publisher}&isbn=${isbn}&extension=${extension}`;
navigator.clipboard.writeText(searchQuery).then(() => {
//console.log('Async: Copying to clipboard was successful!');
}, (err) => {
//console.error('Async: Could not copy text: ', err);
});
}
useDebounceEffect(
() => {
const query = complexQuery
@ -72,6 +118,7 @@ const Search: React.FC<SearchProps> = ({ setBooks }) => {
);
return (
<>
<SimpleGrid
columns={{ sm: 1, md: 2, lg: 3 }}
spacing={{ base: 2, md: 4 }}
@ -132,6 +179,10 @@ const Search: React.FC<SearchProps> = ({ setBooks }) => {
/>
</GridItem>
</SimpleGrid>
<CopyToClipboardButton
show={hasAnySearchBeenMade()}
onClick={copyToClipboard} />
</>
);
};

View File

@ -39,7 +39,9 @@
"collapse": "Collapse"
},
"search": {
"complex": "Complex search"
"complex": "Complex search",
"copy_search_link": "Copy to clipboard",
"copy_success": "Copied!"
},
"settings": {
"title": "Settings",
@ -205,7 +207,9 @@
"collapse": "Richiudi"
},
"search": {
"complex": "Ricerca dettagliata"
"complex": "Ricerca dettagliata",
"copy_search_link": "Copia link ricerca",
"copy_success": "Copiato negli appunti!"
},
"settings": {
"title": "Impostazioni",