From 839252af9884e50e8f3b124d9f39271a8308a296 Mon Sep 17 00:00:00 2001 From: PiotrMatyjasik Date: Sat, 30 Apr 2022 18:43:18 +0200 Subject: [PATCH] Refactor code && clear --- src/Components/Button/index.tsx | 5 -- src/Components/Loader/Loader.scss | 16 ++---- src/Functions/ConvertTime.tsx | 22 ++++++++ src/Layouts/Logo/index.scss | 50 ------------------- src/Layouts/Logo/index.tsx | 4 +- src/Pages/SurveyAnswerPage/index.tsx | 26 +++------- .../SurveyListPage/SurveyRow/SurveyRow.tsx | 32 +++--------- src/Pages/SurveyListPage/index.tsx | 7 +-- src/index.scss | 6 --- 9 files changed, 43 insertions(+), 125 deletions(-) create mode 100644 src/Functions/ConvertTime.tsx delete mode 100644 src/Layouts/Logo/index.scss diff --git a/src/Components/Button/index.tsx b/src/Components/Button/index.tsx index b1dbf41d..4bf1d8c6 100644 --- a/src/Components/Button/index.tsx +++ b/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; diff --git a/src/Components/Loader/Loader.scss b/src/Components/Loader/Loader.scss index 75262e15..36b1e6f4 100644 --- a/src/Components/Loader/Loader.scss +++ b/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%; diff --git a/src/Functions/ConvertTime.tsx b/src/Functions/ConvertTime.tsx new file mode 100644 index 00000000..b29f0d7e --- /dev/null +++ b/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}; \ No newline at end of file diff --git a/src/Layouts/Logo/index.scss b/src/Layouts/Logo/index.scss deleted file mode 100644 index ccedb30b..00000000 --- a/src/Layouts/Logo/index.scss +++ /dev/null @@ -1,50 +0,0 @@ -$heartSize: 20px; -$hearColor: #52525b; - -.heart { - background-color: $hearColor; - width: $heartSize; - height: $heartSize; - position: relative; - transform: rotate(45deg); - animation: animateHeart 5s infinite; - - &::before, - &::after { - content: ''; - width: $heartSize; - height: $heartSize; - background-color: $hearColor; - position: absolute; - border-radius: 50%; - } - - &::before { - left: -($heartSize * 0.5); - } - - &::after { - top: -($heartSize * 0.5); - } -} - -@keyframes animateHeart { - 0% { - transform: rotate(45deg) scale(0.8); - } - 2% { - transform: rotate(45deg) scale(0.9); - } - 4% { - transform: rotate(45deg) scale(0.8); - } - 6% { - transform: rotate(45deg) scale(1); - } - 20% { - transform: rotate(45deg) scale(0.8); - } - 100% { - transform: rotate(45deg) scale(0.8); - } -} diff --git a/src/Layouts/Logo/index.tsx b/src/Layouts/Logo/index.tsx index 7d0bff5d..33d76406 100644 --- a/src/Layouts/Logo/index.tsx +++ b/src/Layouts/Logo/index.tsx @@ -1,10 +1,8 @@ import { Link } from 'react-router-dom'; -import './index.scss'; function Logo() { return ( - - {/*
*/} + Employee Pulse ); diff --git a/src/Pages/SurveyAnswerPage/index.tsx b/src/Pages/SurveyAnswerPage/index.tsx index c3eb96b8..1db41e80 100644 --- a/src/Pages/SurveyAnswerPage/index.tsx +++ b/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() { <> {!isLoading && ( -
+
+ Answers for "{title}"
- Answers for "{title}" } /> - } /> diff --git a/src/Pages/SurveyListPage/SurveyRow/SurveyRow.tsx b/src/Pages/SurveyListPage/SurveyRow/SurveyRow.tsx index e954ccd7..5272324b 100644 --- a/src/Pages/SurveyListPage/SurveyRow/SurveyRow.tsx +++ b/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 (
-
+
{question}
{time}
@@ -44,34 +41,17 @@ export default function SurveyRow({ question, time, id }: Props) { > More - - } - /> - + } onClick={handleCopyLink} - /> + >
); -} +} \ No newline at end of file diff --git a/src/Pages/SurveyListPage/index.tsx b/src/Pages/SurveyListPage/index.tsx index 3bd42a7d..7eeaf424 100644 --- a/src/Pages/SurveyListPage/index.tsx +++ b/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 ( -
+
Surveys
@@ -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)} > ); })} diff --git a/src/index.scss b/src/index.scss index c671f404..8a4849ae 100644 --- a/src/index.scss +++ b/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; }