From 759b26e2032d677a420575845ea75fc1e7a4d776 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 26 May 2023 17:34:06 +0200
Subject: [PATCH] refactor(front): cleanup PostListItem.vue

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Post/PostListItem.vue | 28 +++++++++----------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index 4ec0f723..8871a285 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -18,7 +18,7 @@
       </h3>
       <p class="flex gap-2">
         <Clock />
-        <span dir="auto" class="" v-if="isBeforeLastWeek">{{
+        <span dir="auto" class="" v-if="publishedAt && isBeforeLastWeek">{{
           formatDateTimeString(
             publishedAt.toString(),
             undefined,
@@ -26,7 +26,7 @@
             "short"
           )
         }}</span>
-        <span v-else>{{
+        <span v-else-if="publishedAt">{{
           formatDistanceToNow(publishedAt, {
             locale: dateFnsLocale,
             addSuffix: true,
@@ -75,30 +75,22 @@ const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
 const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
 
-const publishedAt = computed((): Date => {
-  return new Date((props.post.publishAt ?? props.post.insertedAt) as Date);
+const publishedAt = computed((): Date | undefined => {
+  const date = props.post.publishAt ?? props.post.insertedAt;
+  if (!date) return undefined;
+  return new Date(date);
 });
 
 const isBeforeLastWeek = computed((): boolean => {
-  return isBefore(publishedAt.value, subWeeks(new Date(), 1));
+  return (
+    publishedAt.value !== undefined &&
+    isBefore(publishedAt.value, subWeeks(new Date(), 1))
+  );
 });
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 
-// .post-minimalist-card-wrapper {
-//   display: grid;
-//   grid-gap: 5px 10px;
-//   grid-template-areas: "preview" "body";
-//   text-decoration: none;
-//   // width: 100%;
-//   // color: initial;
-
-//   // @include desktop {
-//   grid-template-columns: 200px 3fr;
-//   grid-template-areas: "preview body";
-//   // }
-
 .title-info-wrapper {
   .post-minimalist-title {
     font-size: 18px;