A few cake day fixes. #916

server/src/db/comment_view.rs

@@ -27,8 +27,8 @@ table! {
     creator_actor_id -> Text,
     creator_local -> Bool,
     creator_name -> Varchar,
-    creator_avatar -> Nullable<Text>,
     creator_published -> Timestamp,
+    creator_avatar -> Nullable<Text>,
     score -> BigInt,
     upvotes -> BigInt,
     downvotes -> BigInt,
@@ -63,8 +63,8 @@ table! {
     creator_actor_id -> Text,
     creator_local -> Bool,
     creator_name -> Varchar,
-    creator_avatar -> Nullable<Text>,
     creator_published -> Timestamp,
+    creator_avatar -> Nullable<Text>,
     score -> BigInt,
     upvotes -> BigInt,
     downvotes -> BigInt,
@@ -102,8 +102,8 @@ pub struct CommentView {
   pub creator_actor_id: String,
   pub creator_local: bool,
   pub creator_name: String,
-  pub creator_avatar: Option<String>,
   pub creator_published: chrono::NaiveDateTime,
+  pub creator_avatar: Option<String>,
   pub score: i64,
   pub upvotes: i64,
   pub downvotes: i64,

ui/src/components/cake-day.tsx

@@ -2,20 +2,15 @@ import { Component } from 'inferno';
 import { i18n } from '../i18next';
 
 interface CakeDayProps {
-  creator_name: string;
+  creatorName: string;
-  is_post_creator?: boolean;
 }
 
 export class CakeDay extends Component<CakeDayProps, any> {
   render() {
-    const { creator_name, is_post_creator } = this.props;
-
     return (
       <div
-        className={`mr-lg-2 d-inline-block unselectable pointer${
+        className={`mx-2 d-inline-block unselectable pointer`}
-          is_post_creator ? ' mx-2' : ''
+        data-tippy-content={this.cakeDayTippy()}
-        }`}
-        data-tippy-content={this.cakeDayTippy(creator_name)}
       >
         <svg class="icon icon-inline">
           <use xlinkHref="#icon-cake"></use>
@@ -24,7 +19,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
     );
   }
 
-  cakeDayTippy(creator_name: string): string {
+  cakeDayTippy(): string {
-    return i18n.t('cake_day_info', { creator_name });
+    return i18n.t('cake_day_info', { creator_name: this.props.creatorName });
   }
 }

ui/src/components/comment-node.tsx

@@ -26,7 +26,6 @@ import {
   isMod,
   setupTippy,
   colorList,
-  isCakeDay,
 } from '../utils';
 import moment from 'moment';
 import { MomentTime } from './moment-time';
@@ -34,7 +33,6 @@ import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
 import { UserListing } from './user-listing';
 import { i18n } from '../i18next';
-import { CakeDay } from './cake-day';
 
 interface CommentNodeState {
   showReply: boolean;
@@ -160,14 +158,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     id: node.comment.creator_id,
                     local: node.comment.creator_local,
                     actor_id: node.comment.creator_actor_id,
+                    published: node.comment.creator_published,
                   }}
                 />
               </span>
 
-              {isCakeDay(node.comment.creator_published) && (
-                <CakeDay creator_name={node.comment.creator_name} />
-              )}
-
               {this.isMod && (
                 <div className="badge badge-light d-none d-sm-inline mr-2">
                   {i18n.t('mod')}

ui/src/components/post-listing.tsx

@@ -33,10 +33,8 @@ import {
   setupTippy,
   hostname,
   previewLines,
-  isCakeDay,
 } from '../utils';
 import { i18n } from '../i18next';
-import { CakeDay } from './cake-day';
 
 interface PostListingState {
   showEdit: boolean;
@@ -436,13 +434,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       id: post.creator_id,
                       local: post.creator_local,
                       actor_id: post.creator_actor_id,
+                      published: post.creator_published,
                     }}
                   />
 
-                  {isCakeDay(post.creator_published) && (
-                    <CakeDay creator_name={post.creator_name} is_post_creator />
-                  )}
-
                   {this.isMod && (
                     <span className="mx-1 badge badge-light">
                       {i18n.t('mod')}

ui/src/components/user-listing.tsx

@@ -1,7 +1,13 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { UserView } from '../interfaces';
-import { pictrsAvatarThumbnail, showAvatars, hostname } from '../utils';
+import {
+  pictrsAvatarThumbnail,
+  showAvatars,
+  hostname,
+  isCakeDay,
+} from '../utils';
+import { CakeDay } from './cake-day';
 
 interface UserOther {
   name: string;
@@ -9,6 +15,7 @@ interface UserOther {
   avatar?: string;
   local?: boolean;
   actor_id?: string;
+  published?: string;
 }
 
 interface UserListingProps {
@@ -35,17 +42,21 @@ export class UserListing extends Component<UserListingProps, any> {
     }
 
     return (
-      <Link className="text-body font-weight-bold" to={link}>
+      <>
-        {user.avatar && showAvatars() && (
+        <Link className="text-body font-weight-bold" to={link}>
-          <img
+          {user.avatar && showAvatars() && (
-            height="32"
+            <img
-            width="32"
+              height="32"
-            src={pictrsAvatarThumbnail(user.avatar)}
+              width="32"
-            class="rounded-circle mr-2"
+              src={pictrsAvatarThumbnail(user.avatar)}
-          />
+              class="rounded-circle mr-2"
-        )}
+            />
-        <span>{name_}</span>
+          )}
-      </Link>
+          <span>{name_}</span>
+        </Link>
+
+        {isCakeDay(user.published) && <CakeDay creatorName={name_} />}
+      </>
     );
   }
 }

ui/src/utils.ts

@@ -502,10 +502,10 @@ export function showAvatars(): boolean {
   );
 }
 
-export function isCakeDay(creator_published: string): boolean {
+export function isCakeDay(published: string): boolean {
   // moment(undefined) or moment.utc(undefined) returns the current date/time
   // moment(null) or moment.utc(null) returns null
-  const userCreationDate = moment.utc(creator_published || null).local();
+  const userCreationDate = moment.utc(published || null).local();
   const currentDate = moment(new Date());
 
   return (