add copy to clipboard / read from querystring functionalities

frontend/src/components/CopyToClipboardButton.tsx

@@ -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;

frontend/src/components/Search.tsx

@@ -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} />
+    </>
   );
 };
 

frontend/src/i18n.json

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