Merge pull request #4248 from Ocelot-Social-Community/count-post-views

feat: 🍰 Count Post Clicks

backend/src/db/factories.js

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

backend/src/db/migrations/1614023644903-add-clickedCount-to-posts.js

@@ -0,0 +1,53 @@
+import { getDriver } from '../../db/neo4j'
+
+export const description = `
+This migration adds the clickedCount 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.clickedCount = 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.clickedCount
+    `)
+    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/index.js

@@ -15,6 +15,7 @@ import hashtags from './hashtags/hashtagsMiddleware'
 import email from './email/emailMiddleware'
 import sentry from './sentryMiddleware'
 import languages from './languages/languages'
+import userInteractions from './userInteractions'
 
 export default (schema) => {
   const middlewares = {
@@ -32,6 +33,7 @@ export default (schema) => {
     includedFields,
     orderBy,
     languages,
+    userInteractions,
   }
 
   let order = [
@@ -40,6 +42,7 @@ export default (schema) => {
     'xss',
     // 'activityPub', disabled temporarily
     'validation',
+    'userInteractions',
     'sluggify',
     'languages',
     'excerpt',

backend/src/middleware/slugifyMiddleware.spec.js

@@ -11,7 +11,8 @@ let variables
 const driver = getDriver()
 const neode = getNeode()
 
-beforeAll(() => {
+beforeAll(async () => {
+  await cleanDatabase()
   const { server } = createServer({
     context: () => {
       return {

backend/src/middleware/userInteractions.js

@@ -0,0 +1,44 @@
+const createRelatedCypher = (relation) => `
+MATCH (user:User { id: $currentUser})
+MATCH (post:Post { id: $postId})
+OPTIONAL MATCH (post)<-[r:${relation}]-(u:User)
+WHERE NOT u.disabled AND NOT u.deleted
+WITH user, post, count(DISTINCT u) AS count
+MERGE (user)-[relation:${relation} { }]->(post)
+ON CREATE
+SET relation.count = 1,
+relation.createdAt = toString(datetime()),
+post.clickedCount =  count + 1
+ON MATCH
+SET relation.count = relation.count + 1,
+relation.updatedAt = toString(datetime()),
+post.clickedCount = count
+RETURN user, post, relation
+`
+
+const setPostCounter = async (postId, relation, context) => {
+  const {
+    user: { id: currentUser },
+  } = context
+  const session = context.driver.session()
+  try {
+    await session.writeTransaction((txc) => {
+      return txc.run(createRelatedCypher(relation), { currentUser, postId })
+    })
+  } finally {
+    session.close()
+  }
+}
+
+const userClickedPost = async (resolve, root, args, context, info) => {
+  if (args.id) {
+    await setPostCounter(args.id, 'CLICKED', context)
+  }
+  return resolve(root, args, context, info)
+}
+
+export default {
+  Query: {
+    Post: userClickedPost,
+  },
+}

backend/src/middleware/userInteractions.spec.js

@@ -0,0 +1,98 @@
+import Factory, { cleanDatabase } from '../db/factories'
+import { gql } from '../helpers/jest'
+import { getNeode, getDriver } from '../db/neo4j'
+import createServer from '../server'
+import { createTestClient } from 'apollo-server-testing'
+
+let query, aUser, bUser, post, authenticatedUser, variables
+
+const driver = getDriver()
+const neode = getNeode()
+
+const postQuery = gql`
+  query($id: ID) {
+    Post(id: $id) {
+      clickedCount
+    }
+  }
+`
+
+beforeAll(async () => {
+  await cleanDatabase()
+  aUser = await Factory.build('user', {
+    id: 'a-user',
+  })
+  bUser = await Factory.build('user', {
+    id: 'b-user',
+  })
+  post = await Factory.build('post')
+  authenticatedUser = await aUser.toJson()
+  const { server } = createServer({
+    context: () => {
+      return {
+        driver,
+        neode,
+        user: authenticatedUser,
+      }
+    },
+  })
+  query = createTestClient(server).query
+})
+
+afterAll(async () => {
+  await cleanDatabase()
+})
+
+describe('middleware/userInteractions', () => {
+  describe('given one post', () => {
+    it('does not change clickedCount when queried without ID', async () => {
+      await expect(query({ query: postQuery, variables })).resolves.toMatchObject({
+        data: {
+          Post: expect.arrayContaining([
+            {
+              clickedCount: 0,
+            },
+          ]),
+        },
+      })
+    })
+
+    it('changes clickedCount when queried with ID', async () => {
+      variables = { id: post.get('id') }
+      await expect(query({ query: postQuery, variables })).resolves.toMatchObject({
+        data: {
+          Post: expect.arrayContaining([
+            {
+              clickedCount: 1,
+            },
+          ]),
+        },
+      })
+    })
+
+    it('does not change clickedCount when same user queries the post again', async () => {
+      await expect(query({ query: postQuery, variables })).resolves.toMatchObject({
+        data: {
+          Post: expect.arrayContaining([
+            {
+              clickedCount: 1,
+            },
+          ]),
+        },
+      })
+    })
+
+    it('changes clickedCount when another user queries the post', async () => {
+      authenticatedUser = await bUser.toJson()
+      await expect(query({ query: postQuery, variables })).resolves.toMatchObject({
+        data: {
+          Post: expect.arrayContaining([
+            {
+              clickedCount: 2,
+            },
+          ]),
+        },
+      })
+    })
+  })
+})

backend/src/models/Post.js

@@ -22,6 +22,7 @@ export default {
   contentExcerpt: { type: 'string', allow: [null] },
   deleted: { type: 'boolean', default: false },
   disabled: { type: 'boolean', default: false },
+  clickedCount: { type: 'int', default: 0 },
   notified: {
     type: 'relationship',
     relationship: 'NOTIFIED',

backend/src/schema/resolvers/posts.js

@@ -88,6 +88,7 @@ export default {
             SET post += $params
             SET post.createdAt = toString(datetime())
             SET post.updatedAt = toString(datetime())
+            SET post.clickedCount = 0
             WITH post
             MATCH (author:User {id: $userId})
             MERGE (post)<-[:WROTE]-(author)

backend/src/schema/resolvers/searches.js

@@ -38,7 +38,8 @@ const searchPostsSetup = {
     __typename: labels(resource)[0],
     author: properties(author),
     commentsCount: toString(size(comments)),
-    shoutedCount: toString(size(shouter))
+    shoutedCount: toString(size(shouter)),
+    clickedCount: toString(resource.clickedCount)
   }`,
   limit: 'LIMIT $limit',
 }

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

@@ -156,6 +156,8 @@ type Post {
       statement: "MATCH (this)<-[:SHOUTED]-(u:User {id: $cypherParams.currentUserId}) RETURN COUNT(u) >= 1"
     )
 
+  clickedCount: Int!
+
   emotions: [EMOTED]
   emotionsCount: Int!
     @cypher(statement: "MATCH (this)<-[emoted:EMOTED]-(:User) RETURN COUNT(DISTINCT emoted)")

webapp/assets/_new/icons/svgs/hand-pointer.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>hand-pointer-o</title>
+<path  d="M13 2c1.645 0 3 1.355 3 3v4.188c0.316-0.114 0.647-0.188 1-0.188 0.767 0 1.467 0.3 2 0.781 0.533-0.481 1.233-0.781 2-0.781 1.395 0 2.578 0.982 2.906 2.281 0.368-0.163 0.762-0.281 1.188-0.281 1.645 0 3 1.355 3 3v7.813c0 4.533-3.654 8.188-8.188 8.188h-1.719c-1.935 0-3.651-0.675-5-1.688l-0.031-0.063-0.063-0.031-8.188-8.094v-0.031c-1.154-1.154-1.154-3.034 0-4.188s3.034-1.154 4.188 0l0.25 0.219 0.656 0.688v-11.813c0-1.645 1.355-3 3-3zM13 4c-0.555 0-1 0.445-1 1v16.625l-4.313-4.313c-0.446-0.446-0.929-0.446-1.375 0s-0.446 0.929 0 1.375l8.094 8c1.051 0.788 2.317 1.313 3.781 1.313h1.719c3.467 0 6.188-2.721 6.188-6.188v-7.813c0-0.555-0.445-1-1-1s-1 0.445-1 1v2h-2.094v-4c0-0.555-0.445-1-1-1s-1 0.445-1 1v4h-2v-4c0-0.555-0.445-1-1-1s-1 0.445-1 1v4h-2v-11c0-0.555-0.445-1-1-1z"></path>
+</svg>

webapp/components/PostTeaser/PostTeaser.spec.js

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

webapp/components/PostTeaser/PostTeaser.story.js

@@ -28,6 +28,7 @@ export const post = {
     shoutedCount: 5,
     commentedCount: 39,
     followedByCount: 2,
+    clickedCount: 42,
     followedByCurrentUser: true,
     location: null,
     badges: [

webapp/components/PostTeaser/PostTeaser.vue

@@ -34,6 +34,11 @@
           :count="post.commentsCount"
           :title="$t('contribution.amount-comments', { amount: post.commentsCount })"
         />
+        <counter-icon
+          icon="hand-pointer"
+          :count="post.clickedCount"
+          :title="$t('contribution.amount-clicks', { amount: post.clickedCount })"
+        />
         <client-only>
           <content-menu
             resource-type="contribution"

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

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

webapp/components/generic/SearchPost/SearchPost.vue

@@ -5,6 +5,7 @@
       <span class="counts">
         <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 />
       </span>
       {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
     </div>

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

@@ -14,6 +14,7 @@ export const searchResults = [
     value: 'User Post by Jenny',
     shoutedCount: 0,
     commentsCount: 4,
+    clickedCount: 8,
     createdAt: '2019-11-13T03:03:16.155Z',
     author: {
       id: 'u3',
@@ -29,6 +30,7 @@ export const searchResults = [
     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
     shoutedCount: 0,
     commentsCount: 0,
+    clickedCount: 9,
     createdAt: '2019-11-13T03:00:45.478Z',
     author: {
       id: 'u6',
@@ -44,6 +46,7 @@ export const searchResults = [
     value: 'This is post #7',
     shoutedCount: 1,
     commentsCount: 1,
+    clickedCount: 1,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',
@@ -59,6 +62,7 @@ export const searchResults = [
     value: 'This is post #12',
     shoutedCount: 0,
     commentsCount: 12,
+    clickedCount: 14,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',

webapp/graphql/Fragments.js

@@ -67,6 +67,7 @@ export const postCountsFragment = gql`
     shoutedCount
     shoutedByCurrentUser
     emotionsCount
+    clickedCount
   }
 `
 

webapp/graphql/Search.js

@@ -12,6 +12,7 @@ export const searchQuery = gql`
         ...post
         commentsCount
         shoutedCount
+        clickedCount
         author {
           ...user
         }
@@ -40,6 +41,7 @@ export const searchPosts = gql`
         ...tagsCategoriesAndPinned
         commentsCount
         shoutedCount
+        clickedCount
         author {
           ...user
         }

webapp/locales/de.json

@@ -174,6 +174,7 @@
     }
   },
   "contribution": {
+    "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
     "categories": {

webapp/locales/en.json

@@ -174,6 +174,7 @@
     }
   },
   "contribution": {
+    "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
     "categories": {

webapp/storybook/helpers.js

@@ -81,6 +81,7 @@ const helpers = {
         slug: faker.lorem.slug(title),
         shoutedCount: faker.random.number(),
         commentsCount: faker.random.number(),
+        clickedCount: faker.random.number(),
       }
     })
   },