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) {