Refactor code && clear

src/Components/Button/index.tsx

@@ -6,17 +6,12 @@ export enum ButtonVariant {
   SECONDARY = 'btn-secondary',
   OUTLINE = 'btn-outline',
   OUTLINE_PRIMARY = 'btn-outline-primary',
-  DANGER = 'btn-danger',
-  SUCCESS = 'btn-success',
   FLAT = 'btn-flat',
 }
 export enum ButtonSize {
-  SMALL = 'w-16',
   DEFAULT = '',
-  NORMAL = 'w-24',
   MEDIUM = 'w-32',
   LARGE = 'w-40',
-  EXTRA_LARGE = 'w-48',
 }
 export type ButtonProps = {
   variant?: ButtonVariant;

src/Components/Loader/Loader.scss

@@ -11,32 +11,23 @@ $my-emojis: (
   '🕘',
   '🕙',
   '🕚'
-) !default; // Customise your emoji list here
+) !default;
 
-// Mixin to generate the proper animation based off the emoji list provided
 @mixin emojiLoader(
   $emoji-list,
   $loader-name: emojiLoader,
   $step-duration: 0.05s,
   $prefix: ''
 ) {
-  /*
-  @param $emoji-list: This is a list of the emojis you want in the animation
-  @param $loader-name: Define a different name for the loader animation
-  @param $step-duration: Define how long each emoji is displayed
-  @param $prefix: This allows you to add a prefix such as "Loading… " to have that text show next to the changing emoji - you might want to adjust the .loader class's width, height and font-size.
-  */
 
-  $emoji-count: length($emoji-list); // Get the number of emojis
+  $emoji-count: length($emoji-list);
   $steps: $emoji-count - 1;
-  content: $prefix nth($emoji-list, 1); // Default is the first emoji in the list (fallback for Safari)
+  content: $prefix nth($emoji-list, 1);
   animation: #{$loader-name} #{$step-duration * $emoji-count} steps(#{$steps})
     infinite forwards 0s;
 
   @keyframes #{$loader-name} {
-    // Sass is smart and compiles this outside of our declaration - yay!
     @for $e from 1 through $emoji-count {
-      // Loop through all emojis
       $this-percentage: 100 / $emoji-count * ($e - 1);
       #{$this-percentage}% {
         content: $prefix nth($emoji-list, $e);
@@ -46,7 +37,6 @@ $my-emojis: (
 }
 
 .loader {
-  // Add this class to the element that needs the loader
   position: absolute;
   left: 50%;
   top: 50%;

src/Functions/ConvertTime.tsx

@@ -0,0 +1,22 @@
+import { Timestamp } from 'firebase/firestore';
+
+
+const formatFirebaseDateWithHours = (date: Timestamp) => {
+  return date.toDate().toLocaleString('pl-PL', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const formatFirebaseDateWithoutHours = (date: Timestamp) => {
+  return date.toDate().toLocaleString('pl-PL', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  });
+};
+
+export {formatFirebaseDateWithHours, formatFirebaseDateWithoutHours};

src/Layouts/Logo/index.tsx

@@ -1,10 +1,8 @@
 import { Link } from 'react-router-dom';
-import './index.scss';
 
 function Logo() {
   return (
-    <Link to={'/'} className="flex items-center text-zinc-600 font-serif text-2xl">
-      {/* <div className="heart mr-4"></div> */}
+    <Link to={'/'} className="flex items-center font-serif text-2xl text-zinc-600">
       Employee Pulse
     </Link>
   );

src/Pages/SurveyAnswerPage/index.tsx

@@ -7,6 +7,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useDocumentTitle } from '../../Hooks/useDocumentTitle';
 import { useEffect, useState } from 'react';
 import { db } from '../../firebase';
+import {formatFirebaseDateWithHours} from '../../Functions/ConvertTime';
 import {
   collection,
   doc,
@@ -64,29 +65,19 @@ function SurveyAnswerPage() {
     setVotes(answersData.docs.length);
 
     setStartTime(
-      formatFirebaseDate(surveyData.data()?.createdDate as Timestamp)
+      formatFirebaseDateWithHours(surveyData.data()?.createdDate as Timestamp)
     );
     setTitle(surveyData.data()?.title);
     const data = answersData.docs.map((doc) => ({
       ...doc.data(),
       id: doc.id,
-      answerDate: formatFirebaseDate(doc.data().answerDate as Timestamp),
+      answerDate: formatFirebaseDateWithHours(doc.data().answerDate as Timestamp),
     })) as AnswerData[];
 
     setAnswersData(data);
     setIsLoading(false);
   };
 
-  const formatFirebaseDate = (date: Timestamp) => {
-    return date.toDate().toLocaleString('pl-PL', {
-      year: 'numeric',
-      month: 'numeric',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
   const getDataToChart = (): BarChartData[] => {
     if (!answersData.length) {
       return [];
@@ -126,25 +117,22 @@ function SurveyAnswerPage() {
     <>
       <Loader isLoading={isLoading} />
       {!isLoading && (
-        <div className="container block px-4 mx-auto text-center">
+        <div className="container px-4 mx-auto text-center">
+          <HeaderComponent>Answers for &quot;{title}&quot;</HeaderComponent>
           <div className="flex flex-row justify-center mb-10">
-            <HeaderComponent>Answers for &quot;{title}&quot;</HeaderComponent>
             <IconButton
-              variant={IconButtonVariant.PRIMARY}
-              className="hidden sm:block ml-4 h-full"
+              variant={IconButtonVariant.PRIMARY}  
               title="Copy link to clipboard"
               onClick={handleCopyLink(surveyId!)}
               icon={<LinkIcon className="w-5 h-5" />}
             />
-            <CsvDownload
-              className="hidden sm:block h-full"
+            <CsvDownload              
               data={answersData}
               filename={`${title}.csv`}
             >
               <IconButton
                 variant={IconButtonVariant.PRIMARY}
                 title="Download"
-                className="h-full"
                 icon={<DownloadIcon className="w-5 h-5" />}
               />
             </CsvDownload>

src/Pages/SurveyListPage/SurveyRow/SurveyRow.tsx

@@ -1,12 +1,9 @@
-import { DownloadIcon, LinkIcon } from '@heroicons/react/outline';
+import { LinkIcon } from '@heroicons/react/outline';
 import Button, { ButtonVariant } from '../../../Components/Button';
 import IconButton, { IconButtonVariant } from '../../../Components/IconButton';
 import toast from 'react-hot-toast';
 import useCopyToClipboard from '../../../Hooks/useCopyToClipboard';
 import { useNavigate } from 'react-router-dom';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import CsvDownload from 'react-json-to-csv';
 
 type Props = {
   question: string;
@@ -32,7 +29,7 @@ export default function SurveyRow({ question, time, id }: Props) {
 
   return (
     <div className="flex max-w-full flex-col w-[600px] my-2 md:flex-row">
-      <div className="flex justify-between w-full rounded-b-none items-center bg-white px-4 py-3 rounded-md shadow-sm md:rounded-b-md">
+      <div className="flex items-center justify-between w-full px-4 py-3 bg-white rounded-md rounded-b-none shadow-sm md:rounded-b-md">
         <div>{question}</div>
         <div>{time}</div>
       </div>
@@ -44,34 +41,17 @@ export default function SurveyRow({ question, time, id }: Props) {
         >
           More
         </Button>
-        <CsvDownload
-          className="rounded-t-none text-center justify-center md:w-auto md:rounded-t-md pr-2"
-          data={[
-            {
-              id: id,
-              question: question,
-              createdDate: time,
-            },
-          ]}
-          filename={`${question}_${time}.csv`}
-        >
-          <IconButton
-            variant={IconButtonVariant.PRIMARY}
-            className={'h-12'}
-            title="Download as CSV"
-            icon={<DownloadIcon className="w-5 h-5" />}
-          />
-        </CsvDownload>
+
         <IconButton
           variant={IconButtonVariant.PRIMARY}
           className={
-            'rounded-t-none  text-center justify-center md:w-auto md:rounded-t-md'
+            'pl-4 pr-3 rounded-t-none w-full text-center justify-center md:w-auto md:rounded-t-md'
           }
           title="Copy link to clipboard"
           icon={<LinkIcon className="w-5 h-5" />}
           onClick={handleCopyLink}
-        />
+        ></IconButton>
       </div>
     </div>
   );
-}
+}

src/Pages/SurveyListPage/index.tsx

@@ -1,11 +1,12 @@
 import { useCollection } from 'react-firebase-hooks/firestore';
 import { db, auth } from '../../firebase';
-import { collection, query, where } from 'firebase/firestore';
+import { collection, query, Timestamp, where } from 'firebase/firestore';
 import { useDocumentTitle } from '../../Hooks/useDocumentTitle';
 import HeaderComponent from '../../Components/HeaderComponent/HeaderComponent';
 import SurveyRow from './SurveyRow/SurveyRow';
 import Loader from '../../Components/Loader/Loader';
 import { useAuthState } from 'react-firebase-hooks/auth';
+import {formatFirebaseDateWithoutHours} from '../../Functions/ConvertTime';
 
 function SurveyListPage() {
   useDocumentTitle('Surveys');
@@ -16,7 +17,7 @@ function SurveyListPage() {
   const [surveysCollection, loading, error] = useCollection(q);
 
   return (
-    <div className="container m-auto md:px-8 text-center">
+    <div className="container m-auto text-center md:px-8">
       <HeaderComponent>Surveys</HeaderComponent>
 
       <div className="flex flex-col items-center justify-center py-2">
@@ -39,7 +40,7 @@ function SurveyListPage() {
                 key={doc.id}
                 id={doc.id}
                 question={survey.title}
-                time={survey.createdDate.toDate().toDateString()}
+                time={formatFirebaseDateWithoutHours(survey.createdDate as Timestamp)}
               ></SurveyRow>
             );
           })}

src/index.scss

@@ -38,12 +38,6 @@
   .btn-outline-primary {
     @apply text-indigo-900 bg-transparent border border-indigo-900 shadow-indigo-400/50 hover:bg-indigo-50;
   }
-  .btn-danger {
-    @apply text-white bg-red-600 shadow-red-500/50 hover:bg-red-500;
-  }
-  .btn-success {
-    @apply text-white bg-emerald-600 shadow-emerald-600/50 hover:bg-emerald-500;
-  }
   .btn-flat {
     @apply text-indigo-900 bg-transparent hover:bg-indigo-100 border-none;
   }