Fix date formatting (#132)

Ryczko · Apr 4, 2023 · 4c33da6 · 4c33da6
1 parent b752257
commit 4c33da6
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 14 deletions.
diff --git 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/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
@@ -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/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) {

diff --git 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
@@ -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,12 +15,30 @@ 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',
     }) ?? ''
   );
 };
 
-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,
+};