198 online status

components/Author.vue

@@ -17,10 +17,11 @@
       >
         <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
           <ds-avatar
+            style="display: inline-block; vertical-align: middle;"
+            size="small"
             :image="author.avatar"
             :name="author.name"
-            style="display: inline-block; vertical-align: middle;"
-            size="32px"
+            :online="isOnline"
           />
         </div>
         <div style="display: inline-block; height: 100%; vertical-align: middle;">
@@ -128,6 +129,7 @@
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
 import Dropdown from '~/components/Dropdown'
+import differenceInMinutes from 'date-fns/differenceInMinutes'
 
 export default {
   name: 'HcAuthor',
@@ -156,6 +158,14 @@ export default {
             name: 'Anonymus'
           }
     },
+    isOnline() {
+      if (this.author && this.author.lastActiveAt) {
+        // eslint-disable-next-line prettier/prettier
+        return differenceInMinutes(new Date(), new Date(this.author.lastActiveAt)) <= 15
+      } else {
+        return false
+      }
+    },
     hasAuthor() {
       return Boolean(this.post && this.post.author)
     }

graphql/ModerationListQuery.js

@@ -21,6 +21,7 @@ export default app => {
           author {
             name
             slug
+            lastActiveAt
           }
           post {
             title
@@ -33,6 +34,7 @@ export default app => {
           author {
             name
             slug
+            lastActiveAt
           }
         }
       }

graphql/UserProfileQuery.js

@@ -10,6 +10,7 @@ export default app => {
         avatar
         about
         locationName
+        lastActiveAt
         location {
           name: name${lang}
         }
@@ -30,6 +31,7 @@ export default app => {
           avatar
           followedByCount
           followedByCurrentUser
+          lastActiveAt
           contributionsCount
           commentsCount
           badges {
@@ -50,6 +52,7 @@ export default app => {
           avatar
           followedByCount
           followedByCurrentUser
+          lastActiveAt
           contributionsCount
           commentsCount
           badges {
@@ -81,6 +84,7 @@ export default app => {
             id
             avatar
             name
+            lastActiveAt
             location {
               name: name${lang}
             }

layouts/default.vue

@@ -33,7 +33,7 @@
                     <ds-avatar
                       :image="user.avatar"
                       :name="user.name"
-                      size="42"
+                      size="base"
                     />
                     <ds-icon
                       size="xx-small"

pages/index.vue

@@ -109,6 +109,7 @@ export default {
                 commentsCount
                 followedByCount
                 followedByCurrentUser
+                lastActiveAt
                 location {
                   name: name${this.$i18n.locale().toUpperCase()}
                 }

pages/post/_slug/index.vue

@@ -191,6 +191,7 @@ export default {
                 commentsCount
                 followedByCount
                 followedByCurrentUser
+                lastActiveAt
                 location {
                   name: name${this.$i18n.locale().toUpperCase()}
                 }
@@ -219,6 +220,7 @@ export default {
                   commentsCount
                   followedByCount
                   followedByCurrentUser
+                  lastActiveAt
                   location {
                     name: name${this.$i18n.locale().toUpperCase()}
                   }

pages/post/_slug/more-info.vue

@@ -110,6 +110,7 @@ export default {
                   contributionsCount
                   followedByCount
                   followedByCurrentUser
+                  lastActiveAt
                   commentsCount
                   location {
                     name: name${this.$i18n.locale().toUpperCase()}

pages/profile/_slug.vue

@@ -12,10 +12,11 @@
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
         <ds-card style="position: relative; height: auto;">
           <ds-avatar
+            class="profile-avatar"
+            size="x-large"
             :image="user.avatar"
             :name="user.name || 'Anonymus'"
-            class="profile-avatar"
-            size="120px"
+            :online="isOnline"
           />
           <no-ssr>
             <content-menu
@@ -307,6 +308,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
+import differenceInMinutes from 'date-fns/differenceInMinutes'
 
 export default {
   components: {
@@ -356,6 +358,14 @@ export default {
         return []
       }
       return this.uniq(this.user.contributions.filter(post => !post.deleted))
+    },
+    isOnline() {
+      if (this.user && this.user.lastActiveAt) {
+        // eslint-disable-next-line prettier/prettier
+        return differenceInMinutes(new Date(), new Date(this.user.lastActiveAt)) <= 15
+      } else {
+        return false
+      }
     }
   },
   watch: {