Fix/console errors (#93)

Co-authored-by: Ryczko <konradryczko1@gmail.com>

package.json

@@ -25,7 +25,6 @@
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^5.0.3",
     "react-hot-toast": "^2.2.0",
-    "react-json-to-csv": "^1.0.4",
     "recharts": "^2.4.3",
     "sass": "^1.52.1",
     "typescript": "^4.6.4",
@@ -60,10 +59,10 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-tailwindcss": "^3.5.0",
     "eslint-plugin-testing-library": "^5.5.0",
+    "husky": "^8.0.0",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "postcss": "^8.4.14",
-    "tailwindcss": "^3.0.24",
-    "husky": "^8.0.0"
+    "tailwindcss": "^3.0.24"
   }
 }

src/layout/Logo/Logo.tsx

@@ -8,8 +8,8 @@ interface LogoProps {
 function Logo({ classNames = '' }: LogoProps) {
   return (
     <Link href={'/'} passHref>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a
+        href={'/'}
         className={clsx(
           'block ml-14 font-serif text-2xl text-zinc-600 translate-y-[-2px] md:ml-11',
           classNames

src/layout/PageLayout.tsx

@@ -4,13 +4,16 @@ import Background from './Background/Background';
 import GlobalLoader from './GlobalLoader/GlobalLoader';
 import Navigation from 'src/layout/Navigation/Navigation';
 import { useApplicationContext } from 'src/features/application/context';
+import { useRouter } from 'next/router';
+import { Fragment } from 'react';
 
 interface PageLayoutProps {
   children: React.ReactNode;
 }
 
 function PageLayout({ children }: PageLayoutProps) {
   const { loading } = useApplicationContext();
+  const router = useRouter();
 
   return (
     <>
@@ -19,7 +22,7 @@ function PageLayout({ children }: PageLayoutProps) {
       <div className="overflow-hidden px-6 pt-32 m-auto min-h-screen sm:px-4">
         <Background />
         <AnimatePresence exitBeforeEnter initial={false}>
-          {children}
+          <Fragment key={router.asPath}>{children}</Fragment>
         </AnimatePresence>
       </div>
     </>

src/pages/survey/answer/[surveyId]/index.tsx

@@ -1,6 +1,4 @@
-import { DownloadIcon, LinkIcon, RefreshIcon } from '@heroicons/react/outline';
-
-import CsvDownload from 'react-json-to-csv';
+import { LinkIcon, RefreshIcon } from '@heroicons/react/outline';
 
 import withAnimation from '../../../../shared/HOC/withAnimation';
 import withProtectedRoute from '../../../../shared/HOC/withProtectedRoute';
@@ -48,20 +46,6 @@ function SurveyResultsPage() {
             >
               Copy link
             </IconButton>
-            <CsvDownload
-              className="block"
-              data={answersData}
-              filename={`${title}.csv`}
-            >
-              <IconButton
-                title="Download as CSV file"
-                className="justify-center w-full sm:w-[170px]"
-                variant={IconButtonVariant.OUTLINE}
-                icon={<DownloadIcon className="w-5 h-5" />}
-              >
-                Download
-              </IconButton>
-            </CsvDownload>
 
             <IconButton
               title="Refresh data"

src/shared/components/ButtonLink/ButtonLink.tsx

@@ -1,31 +1,32 @@
-import React, { forwardRef } from 'react';
 import clsx from 'clsx';
+import { forwardRef, LegacyRef } from 'react';
 import { ButtonProps, ButtonSize, ButtonVariant } from '../Button/Button';
 
 export const ButtonLinkVariant = ButtonVariant;
 export const ButtonLinkSize = ButtonSize;
 
-const ButtonLink = forwardRef(function ButtonLink({
-  children,
-  className,
-  variant = ButtonLinkVariant.SECONDARY,
-  sizeType = ButtonLinkSize.DEFAULT,
-  ...props
-}: ButtonProps & React.HTMLProps<HTMLAnchorElement>) {
-  return (
-    <a
-      {...props}
-      className={clsx(
-        'btn',
-        variant,
-        sizeType,
-        'hover:no-underline',
-        className
-      )}
-    >
-      {children}
-    </a>
-  );
-});
+interface ButtonLinkProps extends ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+}
 
-export default ButtonLink;
+const ButtonLink = (
+  {
+    children,
+    className,
+    variant = ButtonLinkVariant.SECONDARY,
+    sizeType = ButtonLinkSize.DEFAULT,
+    ...props
+  }: ButtonLinkProps,
+  ref: LegacyRef<HTMLAnchorElement>
+) => (
+  <a
+    {...props}
+    ref={ref}
+    className={clsx('btn', variant, sizeType, 'hover:no-underline', className)}
+  >
+    {children}
+  </a>
+);
+
+export default forwardRef(ButtonLink);