✨ add posting time to social media messages closes #7

McPringle · Mar 31, 2024 · e904837 · e904837
1 parent 70cacae
commit e904837
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/frontend/themes/apus/views/message-view.css b/frontend/themes/apus/views/message-view.css
@@ -30,3 +30,8 @@
 .message-view .invisible {
     display: none;
 }
+
+.message-view .datetime {
+    font-size: var(--lumo-font-size-xs);
+    text-align: right;
+}
diff --git a/pom.xml b/pom.xml
@@ -181,6 +181,11 @@
             <artifactId>jsoup</artifactId>
             <version>1.17.2</version>
         </dependency>
+        <dependency>
+            <groupId>org.ocpsoft.prettytime</groupId>
+            <artifactId>prettytime</artifactId>
+            <version>5.0.7.Final</version>
+        </dependency>
         <dependency>
             <groupId>social.bigbone</groupId>
             <artifactId>bigbone</artifactId>

diff --git a/src/main/java/swiss/fihlon/apus/ui/view/MessageView.java b/src/main/java/swiss/fihlon/apus/ui/view/MessageView.java
@@ -17,12 +17,16 @@
  */
 package swiss.fihlon.apus.ui.view;
 
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Html;
+import com.vaadin.flow.component.Text;
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Image;
 import org.jetbrains.annotations.NotNull;
 import org.jsoup.Jsoup;
+import org.ocpsoft.prettytime.PrettyTime;
 import swiss.fihlon.apus.social.Message;
 
 @CssImport(value = "./themes/apus/views/message-view.css")
@@ -40,10 +44,20 @@ public MessageView(@NotNull final Message message) {
         for (final String image : message.images()) {
             add(new Image(image, image));
         }
+        add(createDateTimeComponent(message));
     }
 
     @NotNull
     private String truncateMessageText(@NotNull final String messageText) {
         return "<p>" + messageText.substring(0, MAX_LENGTH) + TRUNC_INDICATOR + "</p>";
     }
+
+    @NotNull
+    private Component createDateTimeComponent(@NotNull final Message message) {
+        final var dateTimeComponent = new Div();
+        dateTimeComponent.addClassName("datetime");
+        final var prettyTime = new PrettyTime(UI.getCurrent().getLocale());
+        dateTimeComponent.add(new Text(prettyTime.format(message.date())));
+        return dateTimeComponent;
+    }
 }