Merge pull request #4255 from Ocelot-Social-Community/track-teaser-visibility

feat: Count Post Teaser Views

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-backend",
-  "version": "0.6.14",
+  "version": "0.6.15",
   "description": "GraphQL Backend for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",

backend/src/db/factories.js

@@ -131,6 +131,7 @@ Factory.define('post')
     imageBlurred: false,
     imageAspectRatio: 1.333,
     clickedCount: 0,
+    viewedTeaserCount: 0,
   })
   .attr('pinned', ['pinned'], (pinned) => {
     // Convert false to null

backend/src/db/migrations/1614177130817-add-viewedTeaserCount-to-posts.js

@@ -0,0 +1,53 @@
+import { getDriver } from '../../db/neo4j'
+
+export const description = `
+This migration adds the viewedTeaserCount property to all posts, setting it to 0.
+`
+
+module.exports.up = async function (next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+  try {
+    // Implement your migration here.
+    await transaction.run(`
+        MATCH (p:Post)
+        SET p.viewedTeaserCount = 0
+    `)
+    await transaction.commit()
+    next()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+}
+
+module.exports.down = async function (next) {
+  const driver = getDriver()
+  const session = driver.session()
+  const transaction = session.beginTransaction()
+  try {
+    // Implement your migration here.
+    await transaction.run(`
+        MATCH (p:Post)
+        REMOVE p.viewedTeaserCount
+    `)
+    await transaction.commit()
+    next()
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+    await transaction.rollback()
+    // eslint-disable-next-line no-console
+    console.log('rolled back')
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+}

backend/src/middleware/permissionsMiddleware.js

@@ -168,6 +168,7 @@ export default shield(
       UpdateDonations: isAdmin,
       GenerateInviteCode: isAuthenticated,
       switchUserRole: isAdmin,
+      markTeaserAsViewed: allow,
     },
     User: {
       email: or(isMyOwn, isAdmin),

backend/src/models/Post.js

@@ -23,6 +23,7 @@ export default {
   deleted: { type: 'boolean', default: false },
   disabled: { type: 'boolean', default: false },
   clickedCount: { type: 'int', default: 0 },
+  viewedTeaserCount: { type: 'int', default: 0 },
   notified: {
     type: 'relationship',
     relationship: 'NOTIFIED',

backend/src/schema/resolvers/posts.js

@@ -89,6 +89,7 @@ export default {
             SET post.createdAt = toString(datetime())
             SET post.updatedAt = toString(datetime())
             SET post.clickedCount = 0
+            SET post.viewedTeaserCount = 0
             WITH post
             MATCH (author:User {id: $userId})
             MERGE (post)<-[:WROTE]-(author)
@@ -316,6 +317,31 @@ export default {
       }
       return unpinnedPost
     },
+    markTeaserAsViewed: async (_parent, params, context, _resolveInfo) => {
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const transactionResponse = await transaction.run(
+          `
+          MATCH (post:Post { id: $params.id })
+          MATCH (user:User { id: $userId })
+          MERGE (user)-[relation:VIEWED_TEASER { }]->(post)
+          ON CREATE
+          SET relation.createdAt = toString(datetime()),
+          post.viewedTeaserCount = post.viewedTeaserCount + 1
+          RETURN post
+        `,
+          { userId: context.user.id, params },
+        )
+        return transactionResponse.records.map((record) => record.get('post').properties)
+      })
+      try {
+        const [post] = await writeTxResultPromise
+        post.viewedTeaserCount = post.viewedTeaserCount.low
+        return post
+      } finally {
+        session.close()
+      }
+    },
   },
   Post: {
     ...Resolver('Post', {
@@ -342,6 +368,8 @@ export default {
       boolean: {
         shoutedByCurrentUser:
           'MATCH(this)<-[:SHOUTED]-(related:User {id: $cypherParams.currentUserId}) RETURN COUNT(related) >= 1',
+        viewedTeaserByCurrentUser:
+          'MATCH (this)<-[:VIEWED_TEASER]-(u:User {id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1',
       },
     }),
     relatedContributions: async (parent, params, context, resolveInfo) => {

backend/src/schema/resolvers/searches.js

@@ -39,7 +39,8 @@ const searchPostsSetup = {
     author: properties(author),
     commentsCount: toString(size(comments)),
     shoutedCount: toString(size(shouter)),
-    clickedCount: toString(resource.clickedCount)
+    clickedCount: toString(resource.clickedCount),
+    viewedTeaserCount: toString(resource.viewedTeaserCount)
   }`,
   limit: 'LIMIT $limit',
 }

backend/src/schema/resolvers/viewedTeaserCount.spec.js

@@ -0,0 +1,83 @@
+import { createTestClient } from 'apollo-server-testing'
+import Factory, { cleanDatabase } from '../../db/factories'
+import { gql } from '../../helpers/jest'
+import { getNeode, getDriver } from '../../db/neo4j'
+import createServer from '../../server'
+
+const driver = getDriver()
+const neode = getNeode()
+
+let mutate
+let authenticatedUser
+let variables
+
+beforeAll(async () => {
+  await cleanDatabase()
+  const { server } = createServer({
+    context: () => {
+      return {
+        driver,
+        neode,
+        user: authenticatedUser,
+      }
+    },
+  })
+  mutate = createTestClient(server).mutate
+})
+
+afterAll(async () => {
+  await cleanDatabase()
+})
+
+describe('count post teaser views', () => {
+  let aUser, bUser
+  const markTeaserAsViewed = gql`
+    mutation($id: ID!) {
+      markTeaserAsViewed(id: $id) {
+        id
+        viewedTeaserCount
+      }
+    }
+  `
+
+  beforeAll(async () => {
+    Factory.build('post', { id: 'post-to-be-viewed' })
+    aUser = await Factory.build('user', { id: 'a-user' })
+    bUser = await Factory.build('user', { id: 'b-user' })
+    variables = {
+      id: 'post-to-be-viewed',
+    }
+    authenticatedUser = await aUser.toJson()
+  })
+
+  it('marks the post as viewed and increases the viewedTeaserCount', async () => {
+    await expect(mutate({ mutation: markTeaserAsViewed, variables })).resolves.toMatchObject({
+      data: {
+        markTeaserAsViewed: expect.objectContaining({
+          viewedTeaserCount: 1,
+        }),
+      },
+    })
+  })
+
+  it('does not increase the viewedTeaserCount when accidently called again', async () => {
+    await expect(mutate({ mutation: markTeaserAsViewed, variables })).resolves.toMatchObject({
+      data: {
+        markTeaserAsViewed: expect.objectContaining({
+          viewedTeaserCount: 1,
+        }),
+      },
+    })
+  })
+
+  it('increases the viewedTeaserCount when viewed by another user', async () => {
+    authenticatedUser = await bUser.toJson()
+    await expect(mutate({ mutation: markTeaserAsViewed, variables })).resolves.toMatchObject({
+      data: {
+        markTeaserAsViewed: expect.objectContaining({
+          viewedTeaserCount: 2,
+        }),
+      },
+    })
+  })
+})

backend/src/schema/types/type/Post.gql

@@ -158,6 +158,12 @@ type Post {
 
   clickedCount: Int!
 
+  viewedTeaserCount: Int!
+  viewedTeaserByCurrentUser: Boolean!
+    @cypher(
+      statement: "MATCH (this)<-[:VIEWED_TEASER]-(u:User {id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
+    )
+  
   emotions: [EMOTED]
   emotionsCount: Int!
     @cypher(statement: "MATCH (this)<-[emoted:EMOTED]-(:User) RETURN COUNT(DISTINCT emoted)")
@@ -195,6 +201,7 @@ type Mutation {
   RemovePostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
   pinPost(id: ID!): Post
   unpinPost(id: ID!): Post
+  markTeaserAsViewed(id: ID!): Post
 }
 
 type Query {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social",
-  "version": "0.6.14",
+  "version": "0.6.15",
   "description": "Fullstack and API tests with cypress and cucumber for ocelot.social",
   "author": "ocelot.social Community",
   "license": "MIT",

webapp/components/PostTeaser/PostTeaser.spec.js

@@ -26,6 +26,7 @@ describe('PostTeaser', () => {
         shoutedCount: 0,
         commentsCount: 0,
         clickedCount: 0,
+        viewedTeaserCount: 0,
         name: 'It is a post',
         author: {
           id: 'u1',

webapp/components/PostTeaser/PostTeaser.story.js

@@ -44,6 +44,7 @@ export const post = {
   commentsCount: 12,
   categories: [],
   shoutedCount: 421,
+  viewedTeaserCount: 1584,
   __typename: 'Post',
 }
 

webapp/components/PostTeaser/PostTeaser.vue

@@ -22,7 +22,10 @@
       <!-- eslint-disable vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
       <!-- eslint-enable vue/no-v-html -->
-      <footer class="footer">
+      <footer
+        class="footer"
+        v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
+      >
         <div class="categories-placeholder"></div>
         <counter-icon
           icon="bullhorn"
@@ -39,6 +42,11 @@
           :count="post.clickedCount"
           :title="$t('contribution.amount-clicks', { amount: post.clickedCount })"
         />
+        <counter-icon
+          icon="eye"
+          :count="post.viewedTeaserCount"
+          :title="$t('contribution.amount-views', { amount: post.viewedTeaserCount })"
+        />
         <client-only>
           <content-menu
             resource-type="contribution"
@@ -64,6 +72,7 @@ import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcRibbon from '~/components/Ribbon'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import { mapGetters } from 'vuex'
+import PostMutations from '~/graphql/PostMutations'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 
 export default {
@@ -135,6 +144,18 @@ export default {
     unpinPost(post) {
       this.$emit('unpinPost', post)
     },
+    visibilityChanged(isVisible, entry, id) {
+      if (!this.post.viewedTeaserByCurrentUser && isVisible) {
+        this.$apollo
+          .mutate({
+            mutation: PostMutations().markTeaserAsViewed,
+            variables: { id },
+          })
+          .catch((error) => this.$toast.error(error.message))
+        this.post.viewedTeaserByCurrentUser = true
+        this.post.viewedTeaserCount++
+      }
+    },
   },
 }
 </script>

webapp/components/generic/SearchPost/SearchPost.spec.js

@@ -16,6 +16,7 @@ describe('SearchPost.vue', () => {
         commentsCount: 3,
         shoutedCount: 6,
         clickedCount: 5,
+        viewedTeaserCount: 15,
         createdAt: '23.08.2019',
         author: {
           name: 'Post Author',

webapp/components/generic/SearchPost/SearchPost.vue

@@ -6,6 +6,7 @@
         <counter-icon icon="comments" :count="option.commentsCount" soft />
         <counter-icon icon="bullhorn" :count="option.shoutedCount" soft />
         <counter-icon icon="hand-pointer" :count="option.clickedCount" soft />
+        <counter-icon icon="eye" :count="option.viewedTeaserCount" soft />
       </span>
       {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
     </div>

webapp/components/generic/SearchableInput/SearchableInput.story.js

@@ -15,6 +15,7 @@ export const searchResults = [
     shoutedCount: 0,
     commentsCount: 4,
     clickedCount: 8,
+    viewedTeaserCount: 15,
     createdAt: '2019-11-13T03:03:16.155Z',
     author: {
       id: 'u3',
@@ -31,6 +32,7 @@ export const searchResults = [
     shoutedCount: 0,
     commentsCount: 0,
     clickedCount: 9,
+    viewedTeaserCount: 2,
     createdAt: '2019-11-13T03:00:45.478Z',
     author: {
       id: 'u6',
@@ -47,6 +49,7 @@ export const searchResults = [
     shoutedCount: 1,
     commentsCount: 1,
     clickedCount: 1,
+    viewedTeaserCount: 4,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',
@@ -63,6 +66,7 @@ export const searchResults = [
     shoutedCount: 0,
     commentsCount: 12,
     clickedCount: 14,
+    viewedTeaserCount: 58,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',

webapp/graphql/Fragments.js

@@ -68,6 +68,8 @@ export const postCountsFragment = gql`
     shoutedByCurrentUser
     emotionsCount
     clickedCount
+    viewedTeaserCount
+    viewedTeaserByCurrentUser
   }
 `
 

webapp/graphql/PostMutations.js

@@ -118,5 +118,12 @@ export default () => {
         }
       }
     `,
+    markTeaserAsViewed: gql`
+      mutation($id: ID!) {
+        markTeaserAsViewed(id: $id) {
+          id
+        }
+      }
+    `,
   }
 }

webapp/graphql/Search.js

@@ -13,6 +13,7 @@ export const searchQuery = gql`
         commentsCount
         shoutedCount
         clickedCount
+        viewedTeaserCount
         author {
           ...user
         }
@@ -42,6 +43,7 @@ export const searchPosts = gql`
         commentsCount
         shoutedCount
         clickedCount
+        viewedTeaserCount
         author {
           ...user
         }

webapp/locales/de.json

@@ -177,6 +177,7 @@
     "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
+    "amount-views": "{amount} views",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
     },

webapp/locales/en.json

@@ -177,6 +177,7 @@
     "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
+    "amount-views": "{amount} views",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
     },

webapp/nuxt.config.js

@@ -115,6 +115,7 @@ export default {
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
     { src: '~/plugins/vue-infinite-loading.js', ssr: false },
+    { src: '~/plugins/vue-observe-visibility.js', ssr: false },
   ],
 
   router: {

webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-webapp",
-  "version": "0.6.14",
+  "version": "0.6.15",
   "description": "ocelot.social Frontend",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",
@@ -71,6 +71,7 @@
     "date-fns": "2.12.0",
     "express": "~4.17.1",
     "graphql": "~14.6.0",
+    "intersection-observer": "^0.12.0",
     "jsonwebtoken": "~8.5.1",
     "linkify-it": "~2.2.0",
     "node-fetch": "^2.6.1",
@@ -88,6 +89,7 @@
     "vue-count-to": "~1.0.13",
     "vue-infinite-loading": "^2.4.5",
     "vue-izitoast": "^1.2.1",
+    "vue-observe-visibility": "^1.0.0",
     "vue-scrollto": "^2.17.1",
     "vue-sweetalert-icons": "~4.2.0",
     "vuex-i18n": "~1.13.1",

webapp/plugins/vue-observe-visibility.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueObserveVisibility from 'vue-observe-visibility'
+
+Vue.use(VueObserveVisibility)

webapp/storybook/helpers.js

@@ -82,6 +82,7 @@ const helpers = {
         shoutedCount: faker.random.number(),
         commentsCount: faker.random.number(),
         clickedCount: faker.random.number(),
+        viewedTeaserCount: faker.random.number(),
       }
     })
   },

webapp/test/testSetup.js

@@ -6,6 +6,9 @@ import BaseComponents from '~/plugins/base-components'
 import Filters from '~/plugins/vue-filters'
 import InfiniteLoading from '~/plugins/vue-infinite-loading'
 import Directives from '~/plugins/vue-directives'
+import VueObserveVisibility from '~/plugins/vue-observe-visibility'
+
+require('intersection-observer')
 
 global.localVue = createLocalVue()
 
@@ -16,3 +19,4 @@ global.localVue.use(BaseComponents)
 global.localVue.use(Filters)
 global.localVue.use(Directives)
 global.localVue.use(InfiniteLoading)
+global.localVue.use(VueObserveVisibility)

webapp/yarn.lock

@@ -10077,6 +10077,11 @@ interpret@^2.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.0.0.tgz#b783ffac0b8371503e9ab39561df223286aa5433"
   integrity sha512-e0/LknJ8wpMMhTiWcjivB+ESwIuvHnBSlBbmP/pSb8CQJldoj1p2qv7xGZ/+BtbTziYRFSz8OsvdbiX45LtYQA==
 
+intersection-observer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
+  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
+
 invariant@2.2.4, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -17770,6 +17775,11 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-resize@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"