formatting dates

web/package.json

@@ -18,6 +18,7 @@
     "@redwoodjs/router": "2.1.0",
     "@redwoodjs/web": "2.1.0",
     "daisyui": "^2.19.1",
+    "date-fns": "^2.29.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

web/src/components/DetailsCell/DetailsCell.js

@@ -1,5 +1,7 @@
+import { formatDateToNow } from 'src/utils/formatDate'
 import AddToCart from '../AddToCart/AddToCart'
 import RemoveFromCart from '../RemoveFromCart/RemoveFromCart'
+
 export const QUERY = gql`
   query productQuery($id: String!) {
     product(id: $id) {
@@ -15,6 +17,7 @@ export const QUERY = gql`
       reviews {
         id
         text
+        createdAt
         user {
           id
           name
@@ -102,9 +105,14 @@ export const Success = ({ product }) => {
           {reviews.map((review) => {
             return (
               <>
-                <p key={review.id} className="text-black">
-                  {review.user.name} sayed {review.text}{' '}
+              <div className="bg-gray-100 p-3 mb-3">
+                <p key={review.id} className="text-black text-xl">
+                  {review.user.name} said {review.text}{' '}
+                </p>
+                <p style={{ zoom: 0.9 }}>
+                   {formatDateToNow(review.createdAt)}
                 </p>
+              </div>
               </>
             )
           })}

web/src/utils/formatDate.js

@@ -0,0 +1,27 @@
+import {
+  format,
+  isThisYear,
+  formatDistanceStrict,
+  formatDistanceToNow,
+} from "date-fns";
+
+export function formatPostDate(date) {
+  const formatShort = format(new Date(date), "MMMM d").toUpperCase();
+  // MARCH 23
+  const formatLong = format(new Date(date), "MMMM d, yyy").toUpperCase();
+  // FEBRUARY 2, 2019
+  return isThisYear(new Date(date)) ? formatShort : formatLong;
+}
+
+export function formatDateToNow(date) {
+  return formatDistanceToNow(new Date(date), { addSuffix: true });
+}
+
+export function formatDateToNowShort(date) {
+  // 5 days ago -> 5 days -> ['5', 'days'] -> ['5', 'd'] -> 5d
+  // 7 weeks ago -> 7w
+  return formatDistanceStrict(new Date(date), new Date(Date.now()))
+      .split(" ")
+      .map((s, i) => (i === 1 ? s[0] : s))
+      .join("");
+}

yarn.lock

@@ -10300,6 +10300,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^2.29.1":
+  version: 2.29.1
+  resolution: "date-fns@npm:2.29.1"
+  checksum: 9d6eabcfd5b2c8d8179baaa37a3f7248092d3c3ab1f37994270ea3f3aaf88419991e67c4bfcea4816492ddb2b7a31e106ff70e6089ae881f153d5fd2ef80874c
+  languageName: node
+  linkType: hard
+
 "debounce@npm:^1.2.0":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
@@ -24088,6 +24095,7 @@ __metadata:
     "@redwoodjs/web": 2.1.0
     autoprefixer: ^10.4.7
     daisyui: ^2.19.1
+    date-fns: ^2.29.1
     postcss: ^8.4.14
     postcss-loader: ^7.0.1
     prop-types: 15.8.1