From 6d3adef2b429c7af39d005d455586c689431d820 Mon Sep 17 00:00:00 2001 From: Ryczko <konradryczko1@gmail.com> Date: Sun, 2 Apr 2023 12:35:47 +0200 Subject: [PATCH 1/2] Fix date formatting --- .../surveys/components/DataCard/DataCard.tsx | 2 +- .../components/SurveyRow/SurveyRow.tsx | 2 +- src/pages/surveys/index.tsx | 4 +-- src/shared/utilities/convertTime.ts | 25 ++++++++++++++++--- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/features/surveys/components/DataCard/DataCard.tsx b/src/features/surveys/components/DataCard/DataCard.tsx index e910b9bf..accb389c 100644 --- a/src/features/surveys/components/DataCard/DataCard.tsx +++ b/src/features/surveys/components/DataCard/DataCard.tsx @@ -5,7 +5,7 @@ interface DataCardProps { export default function DataCard({ title, value }: DataCardProps) { return ( - <div className="m-1 w-full rounded-lg border border-zinc-200 bg-white py-2 px-6 shadow-md sm:w-1/2 md:w-[200px]"> + <div className="m-1 w-full rounded-lg border border-zinc-200 bg-white py-2 px-4 shadow-md sm:w-1/2 md:w-[220px]"> <h3 className="mb-1 font-semibold">{title}</h3> {value} </div> diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx index a04eec06..6e20ed18 100644 --- a/src/features/surveys/components/SurveyRow/SurveyRow.tsx +++ b/src/features/surveys/components/SurveyRow/SurveyRow.tsx @@ -43,7 +43,7 @@ export default function SurveyRow({ <div title={question} className="w-36 truncate text-left"> {question} </div> - <div className="flex items-center space-x-2"> + <div className="hidden items-center space-x-2 text-sm xsm:flex"> <div>{createDate}</div> </div> </div> diff --git a/src/pages/surveys/index.tsx b/src/pages/surveys/index.tsx index fdf76ac2..c5d88833 100644 --- a/src/pages/surveys/index.tsx +++ b/src/pages/surveys/index.tsx @@ -2,7 +2,7 @@ import { Timestamp } from 'firebase/firestore'; import Image from 'next/image'; import Head from 'next/head'; -import { formatFirebaseDateWithoutHours } from 'shared/utilities/convertTime'; +import { formatDateDistance } from 'shared/utilities/convertTime'; import withAnimation from 'shared/HOC/withAnimation'; import withProtectedRoute from 'shared/HOC/withProtectedRoute'; import Header from 'shared/components/Header/Header'; @@ -44,7 +44,7 @@ function SurveyListPage() { key={doc.id} id={doc.id} question={survey.title} - createDate={formatFirebaseDateWithoutHours( + createDate={formatDateDistance( survey.createDate as Timestamp )} ></SurveyRow> diff --git a/src/shared/utilities/convertTime.ts b/src/shared/utilities/convertTime.ts index 12f559ff..b6ea5d7e 100644 --- a/src/shared/utilities/convertTime.ts +++ b/src/shared/utilities/convertTime.ts @@ -1,8 +1,9 @@ +import { formatDistance } from 'date-fns'; import { Timestamp } from 'firebase/firestore'; const formatFirebaseDateWithHours = (date: Timestamp | undefined) => { return ( - date?.toDate().toLocaleString('pl-PL', { + date?.toDate().toLocaleString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric', @@ -14,7 +15,7 @@ const formatFirebaseDateWithHours = (date: Timestamp | undefined) => { const formatFirebaseDateWithoutHours = (date: Timestamp | undefined) => { return ( - date?.toDate().toLocaleString('pl-PL', { + date?.toDate().toLocaleString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric', @@ -22,4 +23,22 @@ const formatFirebaseDateWithoutHours = (date: Timestamp | undefined) => { ); }; -export { formatFirebaseDateWithHours, formatFirebaseDateWithoutHours }; +const formatDateDistance = (date: Timestamp | undefined) => { + const dateObject = date?.toDate(); + + if (!dateObject) return ''; + + const distance = formatDistance(dateObject, new Date(), { + addSuffix: true, + includeSeconds: true, + }); + + const formattedDistance = distance.replace(/^less than /, ''); + return formattedDistance; +}; + +export { + formatFirebaseDateWithHours, + formatFirebaseDateWithoutHours, + formatDateDistance, +}; From 46122e2d67c4bcb381a44dc7e45ded0264b3d299 Mon Sep 17 00:00:00 2001 From: Ryczko <konradryczko1@gmail.com> Date: Sun, 2 Apr 2023 12:46:41 +0200 Subject: [PATCH 2/2] Format date on answers page --- .../surveys/components/AnswerTableRow/AnswerTableRow.tsx | 6 +++--- src/features/surveys/managers/surveyResultsManager.ts | 9 +++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx b/src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx index 985d8046..1d51ca73 100644 --- a/src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx +++ b/src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx @@ -8,12 +8,12 @@ interface AnswerTableRowProps { function AnswerTableRow({ time, selectedIcon, text }: AnswerTableRowProps) { return ( - <div className="my-2 mx-auto grid max-w-[800px] grid-cols-6 rounded-md bg-white p-3 shadow-sm"> - <div className="col-span-2 hidden xsm:block">{time}</div> + <div className="my-2 mx-auto grid max-w-[800px] grid-cols-8 rounded-md bg-white p-3 shadow-sm"> + <div className="col-span-3 hidden text-sm xsm:block">{time}</div> <div className="col-span-2 mt-[1px] ml-[4px] mr-2 flex justify-center xsm:col-span-1 xsm:justify-start"> <Emoji unified={selectedIcon} size={22} /> </div> - <div className="col-span-4 break-words text-left xsm:col-span-3"> + <div className="col-span-6 break-words text-left xsm:col-span-4"> {text || '-'} </div> </div> diff --git a/src/features/surveys/managers/surveyResultsManager.ts b/src/features/surveys/managers/surveyResultsManager.ts index 3d973597..807dec02 100644 --- a/src/features/surveys/managers/surveyResultsManager.ts +++ b/src/features/surveys/managers/surveyResultsManager.ts @@ -12,7 +12,10 @@ import { useRouter } from 'next/router'; import toast from 'react-hot-toast'; import { BarChartData } from 'features/surveys/components/BarChart/BarChart'; import { AnswerData } from 'features/surveys/interfaces/AnswerData'; -import { formatFirebaseDateWithHours } from 'shared/utilities/convertTime'; +import { + formatDateDistance, + formatFirebaseDateWithHours, +} from 'shared/utilities/convertTime'; import useCopyToClipboard from 'shared/hooks/useCopyToClipboard'; import { db } from 'firebaseConfiguration'; @@ -64,9 +67,7 @@ export const useSurveyResultsManager = () => { const data = answersData.docs.map((doc) => ({ ...doc.data(), id: doc.id, - answerDate: formatFirebaseDateWithHours( - doc.data().answerDate as Timestamp - ), + answerDate: formatDateDistance(doc.data().answerDate as Timestamp), })) as AnswerData[]; if (displayMessages) {