From 9740ead49bcafe8de56d76010bc7d3fd76365226 Mon Sep 17 00:00:00 2001
From: PiotrMatyjasik <matyjasik.piotr@wp.pl>
Date: Wed, 22 Mar 2023 10:00:10 +0100
Subject: [PATCH 1/3] Fix todo tags && fix handling error while copying

---
 src/features/settings/settingsManager.ts      |  1 -
 .../components/SurveyRow/SurveyRow.tsx        | 22 +++++++++----------
 .../surveys/managers/createSurveyManager.ts   |  3 +--
 .../surveys/managers/surveyResultsManager.ts  |  1 -
 src/pages/surveys/index.tsx                   | 16 ++++++--------
 src/shared/hooks/useCopyToClipboard.ts        |  6 +++--
 6 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/features/settings/settingsManager.ts b/src/features/settings/settingsManager.ts
index 6dad4298..8427e562 100644
--- a/src/features/settings/settingsManager.ts
+++ b/src/features/settings/settingsManager.ts
@@ -67,7 +67,6 @@ export const useSettingsManager = (): SettingsManager => {
       router.replace('/');
     } catch (error) {
       toast.error('Error deleting account');
-      console.error(error);
     }
   };
 
diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
index eb6c86ef..a8bdcdf1 100644
--- a/src/features/surveys/components/SurveyRow/SurveyRow.tsx
+++ b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -44,7 +44,6 @@ export default function SurveyRow({
       window.location.hostname === 'localhost' ? 'http://' : 'https://';
     const link = `${domain}${window.location.host}/survey/${id}`;
     copy(link);
-    toast.success('Link copied to clipboard');
   };
 
   const handleOnMoreButton = () => {
@@ -58,14 +57,13 @@ export default function SurveyRow({
       toast.success('Survey deleted');
     } catch (error) {
       toast.error('Error deleting survey');
-      console.error(error);
     }
   };
 
   return (
-    <div className="mb-4 flex w-[600px] max-w-full flex-col md:flex-row">
-      <div className="flex w-full items-center justify-between rounded-md rounded-b-none bg-white py-3 px-4 shadow-sm md:rounded-b-md">
-        <div title={question} className="w-36 truncate text-left">
+    <div className="flex flex-col mb-4 w-[600px] max-w-full md:flex-row">
+      <div className="flex justify-between items-center py-3 px-4 w-full bg-white rounded-md rounded-b-none shadow-sm md:rounded-b-md">
+        <div title={question} className="w-36 text-left truncate">
           {question}
         </div>
         <div className="flex items-center space-x-2">
@@ -77,7 +75,7 @@ export default function SurveyRow({
       <div className="flex w-full md:ml-2 md:w-auto">
         <Button
           variant={ButtonVariant.OUTLINE}
-          className="mt-2 mr-2 w-full px-4 sm:mt-0 md:w-auto"
+          className="px-4 mt-2 mr-2 w-full sm:mt-0 md:w-auto"
           onClick={handleOnMoreButton}
         >
           More
@@ -86,18 +84,18 @@ export default function SurveyRow({
         <IconButton
           variant={IconButtonVariant.PRIMARY}
           className={
-            'mt-2 w-full justify-center px-3 text-center sm:mt-0 md:w-auto'
+            'justify-center px-3 mt-2 w-full text-center sm:mt-0 md:w-auto'
           }
           title="Copy link to clipboard"
-          icon={<LinkIcon className="h-5 w-5" />}
+          icon={<LinkIcon className="w-5 h-5" />}
           onClick={handleCopyLink}
         />
         <IconButton
           variant={IconButtonVariant.DANGER}
           title="Delete survey"
-          className="mt-2 ml-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
+          className="justify-center px-3 mt-2 ml-2 w-full sm:mt-0 md:w-auto"
           onClick={openDeleteModal}
-          icon={<TrashIcon className="h-5 w-5" />}
+          icon={<TrashIcon className="w-5 h-5" />}
         />
       </div>
       <StyledDialog
@@ -113,7 +111,7 @@ export default function SurveyRow({
               </p>
             </div>
 
-            <div className="mt-6 flex justify-between">
+            <div className="flex justify-between mt-6">
               <Button
                 variant={ButtonVariant.SECONDARY}
                 onClick={closeDeleteModal}
@@ -124,7 +122,7 @@ export default function SurveyRow({
               <IconButton
                 variant={IconButtonVariant.DANGER}
                 onClick={handleOnDelete(id)}
-                icon={<TrashIcon className="h-5 w-5" />}
+                icon={<TrashIcon className="w-5 h-5" />}
                 className="uppercase"
               >
                 Delete
diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/managers/createSurveyManager.ts
index 42dafc0b..03f029f0 100644
--- a/src/features/surveys/managers/createSurveyManager.ts
+++ b/src/features/surveys/managers/createSurveyManager.ts
@@ -60,8 +60,7 @@ export const useCreateSurveyManager = () => {
       const link = `${domain}${window.location.host}/survey/${newSurvey.id}`;
       copy(link);
       router.push(`/survey/answer/${newSurvey.id}`);
-
-      toast.success('Survey created and link copied to clipboard');
+      toast.success('Survey created succesfully');
     } catch (error) {
       toast.error('Survey creation failed');
     }
diff --git a/src/features/surveys/managers/surveyResultsManager.ts b/src/features/surveys/managers/surveyResultsManager.ts
index 620ebf41..ede8ec83 100644
--- a/src/features/surveys/managers/surveyResultsManager.ts
+++ b/src/features/surveys/managers/surveyResultsManager.ts
@@ -121,7 +121,6 @@ export const useSurveyResultsManager = () => {
       window.location.hostname === 'localhost' ? 'http://' : 'https://';
     const link = `${domain}${window.location.host}/survey/${id}`;
     copy(link);
-    toast.success('Link copied to clipboard');
   };
 
   return {
diff --git a/src/pages/surveys/index.tsx b/src/pages/surveys/index.tsx
index 2173f2b3..8c7e32fc 100644
--- a/src/pages/surveys/index.tsx
+++ b/src/pages/surveys/index.tsx
@@ -22,16 +22,14 @@ function SurveyListPage() {
       <div className="container m-auto text-center md:px-8">
         <Header>Surveys</Header>
 
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col justify-center items-center">
           <div>
-            {
-              // TODO: add user friendly error message
-              error && <strong>Error: {JSON.stringify(error)}</strong>
-            }
-            {
-              // TODO: add fancy loading
-              loading && <Loader isLoading={true} />
-            }
+            {error && (
+              <strong>
+                There is a problem - your surveys cannot be viewed.
+              </strong>
+            )}
+            {loading && <Loader isLoading={true} />}
           </div>
           {surveysCollection &&
             (surveysCollection.docs?.length > 0 ? (
diff --git a/src/shared/hooks/useCopyToClipboard.ts b/src/shared/hooks/useCopyToClipboard.ts
index 7088574a..bd8eb07e 100644
--- a/src/shared/hooks/useCopyToClipboard.ts
+++ b/src/shared/hooks/useCopyToClipboard.ts
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import toast from 'react-hot-toast';
 
 type CopiedValue = string | null;
 type CopyFn = (text: string) => Promise<boolean>;
@@ -8,16 +9,17 @@ function useCopyToClipboard(): [CopiedValue, CopyFn] {
 
   const copy: CopyFn = async (text) => {
     if (!navigator?.clipboard) {
-      console.warn('Clipboard not supported');
+      toast.error('Clipboard not supported');
       return false;
     }
 
     try {
       await navigator.clipboard.writeText(text);
       setCopiedText(text);
+      toast.success('Copied to clipboard');
       return true;
     } catch (error) {
-      console.warn('Copy failed', error);
+      toast.error('Copy failed');
       setCopiedText(null);
       return false;
     }

From 8c51882f5c3eeb687a8b0ba4db83a2002ffb7f2c Mon Sep 17 00:00:00 2001
From: PiotrMatyjasik <matyjasik.piotr@wp.pl>
Date: Wed, 22 Mar 2023 10:08:01 +0100
Subject: [PATCH 2/3] Fix lint

---
 .../components/SurveyRow/SurveyRow.tsx        | 20 +++++++++----------
 src/pages/surveys/index.tsx                   |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
index a8bdcdf1..d6d32bf8 100644
--- a/src/features/surveys/components/SurveyRow/SurveyRow.tsx
+++ b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -61,9 +61,9 @@ export default function SurveyRow({
   };
 
   return (
-    <div className="flex flex-col mb-4 w-[600px] max-w-full md:flex-row">
-      <div className="flex justify-between items-center py-3 px-4 w-full bg-white rounded-md rounded-b-none shadow-sm md:rounded-b-md">
-        <div title={question} className="w-36 text-left truncate">
+    <div className="mb-4 flex w-[600px] max-w-full flex-col md:flex-row">
+      <div className="flex w-full items-center justify-between rounded-md rounded-b-none bg-white py-3 px-4 shadow-sm md:rounded-b-md">
+        <div title={question} className="w-36 truncate text-left">
           {question}
         </div>
         <div className="flex items-center space-x-2">
@@ -75,7 +75,7 @@ export default function SurveyRow({
       <div className="flex w-full md:ml-2 md:w-auto">
         <Button
           variant={ButtonVariant.OUTLINE}
-          className="px-4 mt-2 mr-2 w-full sm:mt-0 md:w-auto"
+          className="mt-2 mr-2 w-full px-4 sm:mt-0 md:w-auto"
           onClick={handleOnMoreButton}
         >
           More
@@ -84,18 +84,18 @@ export default function SurveyRow({
         <IconButton
           variant={IconButtonVariant.PRIMARY}
           className={
-            'justify-center px-3 mt-2 w-full text-center sm:mt-0 md:w-auto'
+            'mt-2 w-full justify-center px-3 text-center sm:mt-0 md:w-auto'
           }
           title="Copy link to clipboard"
-          icon={<LinkIcon className="w-5 h-5" />}
+          icon={<LinkIcon className="h-5 w-5" />}
           onClick={handleCopyLink}
         />
         <IconButton
           variant={IconButtonVariant.DANGER}
           title="Delete survey"
-          className="justify-center px-3 mt-2 ml-2 w-full sm:mt-0 md:w-auto"
+          className="mt-2 ml-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
           onClick={openDeleteModal}
-          icon={<TrashIcon className="w-5 h-5" />}
+          icon={<TrashIcon className="h-5 w-5" />}
         />
       </div>
       <StyledDialog
@@ -111,7 +111,7 @@ export default function SurveyRow({
               </p>
             </div>
 
-            <div className="flex justify-between mt-6">
+            <div className="mt-6 flex justify-between">
               <Button
                 variant={ButtonVariant.SECONDARY}
                 onClick={closeDeleteModal}
@@ -122,7 +122,7 @@ export default function SurveyRow({
               <IconButton
                 variant={IconButtonVariant.DANGER}
                 onClick={handleOnDelete(id)}
-                icon={<TrashIcon className="w-5 h-5" />}
+                icon={<TrashIcon className="h-5 w-5" />}
                 className="uppercase"
               >
                 Delete
diff --git a/src/pages/surveys/index.tsx b/src/pages/surveys/index.tsx
index 8c7e32fc..4a851e68 100644
--- a/src/pages/surveys/index.tsx
+++ b/src/pages/surveys/index.tsx
@@ -22,7 +22,7 @@ function SurveyListPage() {
       <div className="container m-auto text-center md:px-8">
         <Header>Surveys</Header>
 
-        <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col items-center justify-center">
           <div>
             {error && (
               <strong>

From ab47a6af6c3529d9c503ba38965032a9b780394e Mon Sep 17 00:00:00 2001
From: Ryczko <konradryczko1@gmail.com>
Date: Wed, 22 Mar 2023 17:22:47 +0100
Subject: [PATCH 3/3] Change way of displaying notifications while copying

---
 .../surveys/components/SurveyRow/SurveyRow.tsx    |  2 +-
 .../surveys/managers/createSurveyManager.ts       | 11 ++++++++---
 .../surveys/managers/surveyResultsManager.ts      |  2 +-
 src/shared/hooks/useCopyToClipboard.ts            | 15 +++++++--------
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
index d6d32bf8..341b6227 100644
--- a/src/features/surveys/components/SurveyRow/SurveyRow.tsx
+++ b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -27,7 +27,7 @@ export default function SurveyRow({
   endDate,
   id,
 }: SurveyRowProps) {
-  const [, copy] = useCopyToClipboard();
+  const { copy } = useCopyToClipboard();
   const navigate = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/managers/createSurveyManager.ts
index 03f029f0..87bfecfe 100644
--- a/src/features/surveys/managers/createSurveyManager.ts
+++ b/src/features/surveys/managers/createSurveyManager.ts
@@ -14,7 +14,7 @@ export const useCreateSurveyManager = () => {
   const [buttonDisable, setButtonDisable] = useState(false);
 
   const router = useRouter();
-  const [, copy] = useCopyToClipboard();
+  const { copy } = useCopyToClipboard();
 
   // Move to useState initial value when bug in emoji library will be solved:
   // https://github.com/ealush/emoji-picker-react/issues/329
@@ -58,9 +58,14 @@ export const useCreateSurveyManager = () => {
       const domain =
         window.location.hostname === 'localhost' ? 'http://' : 'https://';
       const link = `${domain}${window.location.host}/survey/${newSurvey.id}`;
-      copy(link);
+      const copiedCorrectly = await copy(link, true);
       router.push(`/survey/answer/${newSurvey.id}`);
-      toast.success('Survey created succesfully');
+
+      toast.success(
+        `Survey created succesfully ${
+          copiedCorrectly ? 'and link copied to clipboard' : ''
+        }`
+      );
     } catch (error) {
       toast.error('Survey creation failed');
     }
diff --git a/src/features/surveys/managers/surveyResultsManager.ts b/src/features/surveys/managers/surveyResultsManager.ts
index ede8ec83..62525964 100644
--- a/src/features/surveys/managers/surveyResultsManager.ts
+++ b/src/features/surveys/managers/surveyResultsManager.ts
@@ -26,7 +26,7 @@ export const useSurveyResultsManager = () => {
   const [startDate, setStartDate] = useState('-');
   const [endDate, setEndDate] = useState('-');
   const [answersData, setAnswersData] = useState<AnswerData[]>([]);
-  const [, copy] = useCopyToClipboard();
+  const { copy } = useCopyToClipboard();
 
   const getSurveyData = useCallback(
     async (displayMessages = false) => {
diff --git a/src/shared/hooks/useCopyToClipboard.ts b/src/shared/hooks/useCopyToClipboard.ts
index bd8eb07e..088f8a74 100644
--- a/src/shared/hooks/useCopyToClipboard.ts
+++ b/src/shared/hooks/useCopyToClipboard.ts
@@ -1,13 +1,10 @@
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 
-type CopiedValue = string | null;
-type CopyFn = (text: string) => Promise<boolean>;
+function useCopyToClipboard() {
+  const [copiedText, setCopiedText] = useState<string | null>(null);
 
-function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
-
-  const copy: CopyFn = async (text) => {
+  const copy = async (text: string, silient = false) => {
     if (!navigator?.clipboard) {
       toast.error('Clipboard not supported');
       return false;
@@ -16,7 +13,9 @@ function useCopyToClipboard(): [CopiedValue, CopyFn] {
     try {
       await navigator.clipboard.writeText(text);
       setCopiedText(text);
-      toast.success('Copied to clipboard');
+      if (!silient) {
+        toast.success('Copied to clipboard');
+      }
       return true;
     } catch (error) {
       toast.error('Copy failed');
@@ -25,7 +24,7 @@ function useCopyToClipboard(): [CopiedValue, CopyFn] {
     }
   };
 
-  return [copiedText, copy];
+  return { copiedText, copy };
 }
 
 export default useCopyToClipboard;