Merge branch 'master' of https://github.com/Human-Connection/Human-Connection into 1017-send-out-notifications-on-create-omment

# Conflicts:
#	backend/src/middleware/handleHtmlContent/handleContentData.spec.js

backend/package.json

@@ -42,7 +42,7 @@
     ]
   },
   "dependencies": {
-    "@hapi/joi": "^15.1.0",
+    "@hapi/joi": "^15.1.1",
     "activitystrea.ms": "~2.1.3",
     "apollo-cache-inmemory": "~1.6.3",
     "apollo-client": "~2.6.4",
@@ -63,7 +63,7 @@
     "graphql": "~14.4.2",
     "graphql-custom-directives": "~0.2.14",
     "graphql-iso-date": "~3.6.1",
-    "graphql-middleware": "~3.0.3",
+    "graphql-middleware": "~3.0.5",
     "graphql-shield": "~6.0.4",
     "graphql-tag": "~2.10.1",
     "helmet": "~3.20.0",

backend/src/middleware/handleHtmlContent/handleContentData.spec.js

@@ -303,7 +303,6 @@ describe('Hashtags', () => {
       Post(id: $id) {
         tags {
           id
-          name
         }
       }
     }
@@ -339,16 +338,7 @@ describe('Hashtags', () => {
       })
 
       it('both Hashtags are created with the "id" set to their "name"', async () => {
-        const expected = [
+        const expected = [{ id: 'Democracy' }, { id: 'Liberty' }]
-          {
-            id: 'Democracy',
-            name: 'Democracy',
-          },
-          {
-            id: 'Liberty',
-            name: 'Liberty',
-          },
-        ]
         await expect(
           query({
             query: postWithHastagsQuery,
@@ -391,16 +381,7 @@ describe('Hashtags', () => {
             },
           })
 
-          const expected = [
+          const expected = [{ id: 'Elections' }, { id: 'Liberty' }]
-            {
-              id: 'Elections',
-              name: 'Elections',
-            },
-            {
-              id: 'Liberty',
-              name: 'Liberty',
-            },
-          ]
           await expect(
             query({
               query: postWithHastagsQuery,

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

@@ -1,6 +1,5 @@
 type Tag {
   id: ID!
-  name: String!
   taggedPosts: [Post]! @relation(name: "TAGGED", direction: "IN")
   taggedOrganizations: [Organization]! @relation(name: "TAGGED", direction: "IN")
   taggedCount: Int! @cypher(statement: "MATCH (this)<-[:TAGGED]-(p) RETURN COUNT(DISTINCT p)")

backend/src/seed/factories/tags.js

@@ -5,9 +5,9 @@ export default function(params) {
 
   return {
     mutation: `
-      mutation($id: ID!, $name: String!) {
+      mutation($id: ID!) {
-        CreateTag(id: $id, name: $name) {
+        CreateTag(id: $id) {
-          name
+          id
         }
       }
     `,

backend/yarn.lock

@@ -768,31 +768,26 @@
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
   integrity sha512-mV6T0IYqb0xL1UALPFplXYQmR0twnXG0M6jUswpquqT2sD12BOiCiLy3EvMp/Fy7s3DZElC4/aPjEjo2jeZpvw==
 
-"@hapi/hoek@6.x.x":
+"@hapi/bourne@1.x.x":
-  version "6.2.4"
+  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-6.2.4.tgz#4b95fbaccbfba90185690890bdf1a2fbbda10595"
+  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
-  integrity sha512-HOJ20Kc93DkDVvjwHyHawPwPkX44sIrbXazAUDiUXaY2R9JwQGo2PhFfnQtdrsIe4igjG2fPgMra7NYw7qhy0A==
+  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
 
 "@hapi/hoek@8.x.x":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.0.1.tgz#9712fa2ad124ac64668ab06ba847b1eaf83a03fd"
   integrity sha512-cctMYH5RLbElaUpZn3IJaUj9QNQD8iXDnl7xNY6KB1aFD2ciJrwpo3kvZowIT75uA+silJFDnSR2kGakALUymg==
 
-"@hapi/joi@^15.0.3", "@hapi/joi@^15.1.0":
+"@hapi/joi@^15.0.3", "@hapi/joi@^15.1.0", "@hapi/joi@^15.1.1":
-  version "15.1.0"
+  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.0.tgz#940cb749b5c55c26ab3b34ce362e82b6162c8e7a"
+  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
-  integrity sha512-n6kaRQO8S+kepUTbXL9O/UOL788Odqs38/VOfoCrATDtTvyfiO3fgjlSRaNkHabpTLgM7qru9ifqXlXbXk8SeQ==
+  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
   dependencies:
     "@hapi/address" "2.x.x"
-    "@hapi/hoek" "6.x.x"
+    "@hapi/bourne" "1.x.x"
-    "@hapi/marker" "1.x.x"
+    "@hapi/hoek" "8.x.x"
     "@hapi/topo" "3.x.x"
 
-"@hapi/marker@1.x.x":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/marker/-/marker-1.0.0.tgz#65b0b2b01d1be06304886ce9b4b77b1bfb21a769"
-  integrity sha512-JOfdekTXnJexfE8PyhZFyHvHjt81rBFSAbTIRAhF2vv/2Y1JzoKsGqxH/GpZJoF7aEfYok8JVcAHmSz1gkBieA==
-
 "@hapi/topo@3.x.x":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.2.tgz#57cc1317be1a8c5f47c124f9b0e3c49cd78424d2"
@@ -4062,10 +4057,10 @@ graphql-iso-date@~3.6.1:
   resolved "https://registry.yarnpkg.com/graphql-iso-date/-/graphql-iso-date-3.6.1.tgz#bd2d0dc886e0f954cbbbc496bbf1d480b57ffa96"
   integrity sha512-AwFGIuYMJQXOEAgRlJlFL4H1ncFM8n8XmoVDTNypNOZyQ8LFDG2ppMFlsS862BSTCDcSUfHp8PD3/uJhv7t59Q==
 
-graphql-middleware@~3.0.3:
+graphql-middleware@~3.0.5:
-  version "3.0.3"
+  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/graphql-middleware/-/graphql-middleware-3.0.3.tgz#58cbce80892fb933d72794447f33f978fc743aa5"
+  resolved "https://registry.yarnpkg.com/graphql-middleware/-/graphql-middleware-3.0.5.tgz#8cbce45ce4be95bd4600ffe5332e1936ec721e10"
-  integrity sha512-Os8Vt25MqqwIPJUCCcHznzs6EqarGmM0kkNPUiDnMEkX6vqjA+HugCWatinP+7+fqBqecFUsJmoL4ZypdqZZkg==
+  integrity sha512-84HBmvJlMKxgavbygbRgn2i1fOSrZ7KhxWToWDpe4xOgnWxGb5WY1rwRIkyK25ajh4qRwLtGPbBxtClzwGngCQ==
   dependencies:
     graphql-tools "^4.0.5"
 

cypress/integration/common/steps.js

@@ -42,9 +42,9 @@ Given("we have a selection of tags and categories as well as posts", () => {
       slug: "health-wellbeing",
       icon: "medkit"
     })
-    .create("Tag", { id: "t1", name: "Ecology" })
+    .create("Tag", { id: "Ecology" })
-    .create("Tag", { id: "t2", name: "Nature" })
+    .create("Tag", { id: "Nature" })
-    .create("Tag", { id: "t3", name: "Democracy" });
+    .create("Tag", { id: "Democracy" });
 
   const someAuthor = {
     id: "authorId",
@@ -71,14 +71,14 @@ Given("we have a selection of tags and categories as well as posts", () => {
     .relate("Post", "Categories", { from: "p0", to: "cat1" })
     .relate("Post", "Categories", { from: "p1", to: "cat2" })
     .relate("Post", "Categories", { from: "p2", to: "cat1" })
-    .relate("Post", "Tags", { from: "p0", to: "t1" })
+    .relate("Post", "Tags", { from: "p0", to: "Ecology" })
-    .relate("Post", "Tags", { from: "p0", to: "t2" })
+    .relate("Post", "Tags", { from: "p0", to: "Nature" })
-    .relate("Post", "Tags", { from: "p0", to: "t3" })
+    .relate("Post", "Tags", { from: "p0", to: "Democracy" })
-    .relate("Post", "Tags", { from: "p1", to: "t2" })
+    .relate("Post", "Tags", { from: "p1", to: "Nature" })
-    .relate("Post", "Tags", { from: "p1", to: "t3" })
+    .relate("Post", "Tags", { from: "p1", to: "Democracy" })
-    .relate("Post", "Tags", { from: "p2", to: "t2" })
+    .relate("Post", "Tags", { from: "p2", to: "Nature" })
-    .relate("Post", "Tags", { from: "p2", to: "t3" })
+    .relate("Post", "Tags", { from: "p2", to: "Democracy" })
-    .relate("Post", "Tags", { from: "p3", to: "t3" });
+    .relate("Post", "Tags", { from: "p3", to: "Democracy" });
 });
 
 Given("we have the following user accounts:", table => {

deployment/legacy-migration/maintenance-worker/migration/mongo/export.sh

@@ -38,14 +38,12 @@ export_collection "emotions"
 export_collection_query "follows" "{'foreignService': 'organizations'}" "organizations"
 export_collection_query "follows" "{'foreignService': 'users'}" "users"
 export_collection "invites"
-export_collection "notifications"
 export_collection "organizations"
 export_collection "pages"
 export_collection "projects"
 export_collection "settings"
 export_collection "shouts"
 export_collection "status"
-export_collection "systemnotifications"
 export_collection "users"
 export_collection "userscandos"
 export_collection "usersettings"

deployment/legacy-migration/maintenance-worker/migration/neo4j/contributions/contributions.cql

@@ -148,6 +148,6 @@ MATCH (c:Category {id: categoryId})
 MERGE (p)-[:CATEGORIZED]->(c)
 WITH p, post.tags AS tags
 UNWIND tags AS tag
-MERGE (t:Tag {id: tag, name: tag})
+MERGE (t:Tag {id: apoc.text.clean(tag), disabled: false, deleted: false})
 MERGE (p)-[:TAGGED]->(t)
 ;

deployment/legacy-migration/maintenance-worker/migration/neo4j/users/delete.cql

@@ -1 +1,2 @@
 MATCH (n:User) DETACH DELETE n;
+MATCH (e:EmailAddress) DETACH DELETE e;

deployment/legacy-migration/maintenance-worker/migration/neo4j/users/users.cql

@@ -94,12 +94,11 @@
       }
     }
 */
-
 CALL apoc.load.json("file:${IMPORT_CHUNK_PATH_CQL_FILE}") YIELD value as user
 MERGE(u:User {id: user._id["$oid"]})
 ON CREATE SET
 u.name       = user.name,
-u.slug       = user.slug,
+u.slug       = COALESCE(user.slug, apoc.text.random(20, "[A-Za-z]")),
 u.email      = user.email,
 u.encryptedPassword   = user.password,
 u.avatar     = replace(user.avatar, 'https://api-alpha.human-connection.org', ''),

neo4j/db_setup.sh

@@ -29,7 +29,6 @@ CREATE CONSTRAINT ON (u:User)          ASSERT u.id IS UNIQUE;
 CREATE CONSTRAINT ON (o:Organization)  ASSERT o.id IS UNIQUE;
 CREATE CONSTRAINT ON (t:Tag)           ASSERT t.id IS UNIQUE;
 
-
 CREATE CONSTRAINT ON (p:Post)          ASSERT p.slug IS UNIQUE;
 CREATE CONSTRAINT ON (c:Category)      ASSERT c.slug IS UNIQUE;
 CREATE CONSTRAINT ON (u:User)          ASSERT u.slug IS UNIQUE;

webapp/components/ContributionForm/ContributionForm.vue

@@ -244,9 +244,8 @@ export default {
       query() {
         return gql`
           {
-            Tag(orderBy: name_asc) {
+            Tag(orderBy: id_asc) {
               id
-              name
             }
           }
         `

webapp/components/CountTo.vue

@@ -2,7 +2,7 @@
   <span>
     <no-ssr placeholder="0" tag="span">
       <count-to
-        :start-val="lastEndVal || startVal"
+        :start-val="startVal"
         :end-val="endVal"
         :duration="duration"
         :autoplay="autoplay"
@@ -25,23 +25,5 @@ export default {
     autoplay: { type: Boolean, default: true },
     separator: { type: String, default: '.' },
   },
-  data() {
-    return {
-      lastEndVal: null,
-      isReady: false,
-    }
-  },
-  watch: {
-    endVal(endVal) {
-      if (this.isReady && this.startVal === 0 && !this.lastEndVal) {
-        this.lastEndVal = this.endVal
-      }
-    },
-  },
-  mounted() {
-    setTimeout(() => {
-      this.isReady = true
-    }, 500)
-  },
 }
 </script>

webapp/components/Editor/Editor.vue

@@ -12,15 +12,13 @@
           @click="selectItem(item)"
         >
           <div v-if="isMention">@{{ item.slug }}</div>
-          <div v-if="isHashtag">#{{ item.name }}</div>
+          <div v-if="isHashtag">#{{ item.id }}</div>
         </div>
         <div v-if="isHashtag">
           <!-- if query is not empty and is find fully in the suggestions array ... -->
-          <div v-if="query && !filteredItems.find(el => el.name === query)">
+          <div v-if="query && !filteredItems.find(el => el.id === query)">
             <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addHashtag') }}</div>
-            <div class="suggestion-list__item" @click="selectItem({ name: query })">
+            <div class="suggestion-list__item" @click="selectItem({ id: query })">#{{ query }}</div>
-              #{{ query }}
-            </div>
           </div>
           <!-- otherwise if sanitized query is empty advice the user to add a char -->
           <div v-else-if="!query">
@@ -40,9 +38,7 @@
           <!-- if "query" is not empty -->
           <div v-else>
             <div class="suggestion-list__item is-empty">{{ $t('editor.hashtag.addHashtag') }}</div>
-            <div class="suggestion-list__item" @click="selectItem({ name: query })">
+            <div class="suggestion-list__item" @click="selectItem({ id: query })">#{{ query }}</div>
-              #{{ query }}
-            </div>
           </div>
         </div>
       </div>
@@ -469,7 +465,7 @@ export default {
     // For hashtags handles pressing of space.
     spaceHandler() {
       if (this.suggestionType === this.hashtagSuggestionType && this.query !== '') {
-        this.selectItem({ name: this.query })
+        this.selectItem({ id: this.query })
       }
     },
     // we have to replace our suggestion text with a mention
@@ -481,8 +477,8 @@ export default {
           label: item.slug,
         },
         hashtag: {
-          id: item.name,
+          id: item.id,
-          label: item.name,
+          label: item.id,
         },
       }
       this.insertMentionOrHashtag({

webapp/components/Tag/index.vue

@@ -1,7 +1,7 @@
 <template>
   <ds-tag>
     <ds-icon name="tag" />
-    {{ name }}
+    {{ id }}
   </ds-tag>
 </template>
 
@@ -9,7 +9,7 @@
 export default {
   name: 'HcTag',
   props: {
-    name: { type: String, required: true },
+    id: { type: String, required: true },
   },
 }
 </script>

webapp/components/Tag/spec.js

@@ -6,20 +6,20 @@ const localVue = createLocalVue()
 localVue.use(Styleguide)
 
 describe('Tag', () => {
-  let name
+  let id
 
   let Wrapper = () => {
     return shallowMount(Tag, {
       localVue,
       propsData: {
-        name,
+        id,
       },
     })
   }
 
   describe('given a String for Name', () => {
     beforeEach(() => {
-      name = 'Liebe'
+      id = 'Liebe'
     })
 
     it('shows Name', () => {

webapp/graphql/PostQuery.js

@@ -34,7 +34,7 @@ export default i18n => {
             }
           }
           tags {
-            name
+            id
           }
           commentsCount
           comments(orderBy: createdAt_desc) {

webapp/nuxt.config.js

@@ -115,6 +115,7 @@ module.exports = {
     { src: '~/plugins/v-tooltip.js', ssr: false },
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
+    { src: '~/plugins/vue-infinite-scroll.js', ssr: false },
   ],
 
   router: {

webapp/package.json

@@ -50,7 +50,7 @@
     ]
   },
   "dependencies": {
-    "@human-connection/styleguide": "0.5.17",
+    "@human-connection/styleguide": "0.5.19",
     "@nuxtjs/apollo": "^4.0.0-rc10",
     "@nuxtjs/axios": "~5.5.4",
     "@nuxtjs/dotenv": "~1.4.0",
@@ -76,6 +76,7 @@
     "tiptap-extensions": "~1.26.2",
     "v-tooltip": "~2.0.2",
     "vue-count-to": "~1.0.13",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-izitoast": "roschaefer/vue-izitoast#patch-1",
     "vuex-i18n": "~1.13.1",
     "vue-sweetalert-icons": "~4.2.0",

webapp/pages/admin/index.vue

@@ -7,7 +7,7 @@
             <ds-space margin="small">
               <ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countUsers || 0" />
+                  <hc-count-to :end-val="statistics.countUsers || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -16,7 +16,7 @@
             <ds-space margin="small">
               <ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countPosts || 0" />
+                  <hc-count-to :end-val="statistics.countPosts || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -30,7 +30,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countComments || 0" />
+                  <hc-count-to :end-val="statistics.countComments || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -44,7 +44,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countNotifications || 0" />
+                  <hc-count-to :end-val="statistics.countNotifications || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -58,7 +58,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countOrganizations || 0" />
+                  <hc-count-to :end-val="statistics.countOrganizations || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -72,7 +72,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countProjects || 0" />
+                  <hc-count-to :end-val="statistics.countProjects || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -81,7 +81,7 @@
             <ds-space margin="small">
               <ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countInvites || 0" />
+                  <hc-count-to :end-val="statistics.countInvites || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -90,7 +90,7 @@
             <ds-space margin="small">
               <ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countFollows || 0" />
+                  <hc-count-to :end-val="statistics.countFollows || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -99,7 +99,7 @@
             <ds-space margin="small">
               <ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to :start-val="0" :end-val="statistics.countShouts || 0" />
+                  <hc-count-to :end-val="statistics.countShouts || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -128,9 +128,6 @@ export default {
       return process.client
     },
   },
-  mounted() {
-    this.$apollo.queries.statistics.startPolling(5000)
-  },
   apollo: {
     statistics: {
       query: gql`

webapp/pages/admin/tags.vue

@@ -1,12 +1,12 @@
 <template>
   <ds-card :header="$t('admin.tags.name')">
     <ds-table :data="Tag" :fields="fields" condensed>
-      <template slot="id" slot-scope="scope">
+      <template slot="index" slot-scope="scope">
         {{ scope.index + 1 }}.
       </template>
-      <template slot="name" slot-scope="scope">
+      <template slot="id" slot-scope="scope">
         <nuxt-link :to="{ path: '/', query: { hashtag: scope.row.id } }">
-          <b>#{{ scope.row.name | truncate(20) }}</b>
+          <b>#{{ scope.row.id | truncate(20) }}</b>
         </nuxt-link>
       </template>
     </ds-table>
@@ -25,8 +25,8 @@ export default {
   computed: {
     fields() {
       return {
-        id: this.$t('admin.tags.number'),
+        index: this.$t('admin.tags.number'),
-        name: this.$t('admin.tags.name'),
+        id: this.$t('admin.tags.name'),
         taggedCountUnique: {
           label: this.$t('admin.tags.tagCountUnique'),
           align: 'right',
@@ -44,7 +44,6 @@ export default {
         query {
           Tag(first: 20, orderBy: taggedCountUnique_desc) {
             id
-            name
             taggedCount
             taggedCountUnique
           }

webapp/pages/index.spec.js

@@ -5,6 +5,7 @@ import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
 import VTooltip from 'v-tooltip'
 import FilterMenu from '~/components/FilterMenu/FilterMenu'
+import InfiniteScroll from '~/plugins/vue-infinite-scroll'
 
 const localVue = createLocalVue()
 
@@ -12,6 +13,7 @@ localVue.use(Vuex)
 localVue.use(Styleguide)
 localVue.use(Filters)
 localVue.use(VTooltip)
+localVue.use(InfiniteScroll)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'

webapp/pages/index.vue

@@ -33,7 +33,16 @@
         primary
       />
     </no-ssr>
-    <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
+    <div
+      v-if="hasMore"
+      v-infinite-scroll="showMoreContributions"
+      :infinite-scroll-immediate-check="true"
+      :infinite-scroll-disabled="$apollo.loading"
+      :infinite-scroll-distance="10"
+      :infinite-scroll-throttle-delay="800"
+    >
+      <hc-load-more v-if="true" :loading="$apollo.loading" @click="showMoreContributions" />
+    </div>
   </div>
 </template>
 

webapp/pages/post/_id/_slug/index.vue

@@ -38,7 +38,7 @@
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
+        <hc-tag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">

webapp/pages/profile/_id/_slug.spec.js

@@ -3,12 +3,14 @@ import ProfileSlug from './_slug.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import InfiniteScroll from '~/plugins/vue-infinite-scroll'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
 localVue.use(Filters)
+localVue.use(InfiniteScroll)
 localVue.filter('date', d => d)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'

webapp/pages/profile/_id/_slug.vue

@@ -229,7 +229,14 @@
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
+        <div
+          v-if="hasMore"
+          v-infinite-scroll="showMoreContributions"
+          infinite-scroll-disabled="$apollo.loading"
+          infinite-scroll-distance="10"
+        >
+          <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
+        </div>
       </ds-flex-item>
     </ds-flex>
   </div>

webapp/plugins/vue-infinite-scroll.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import infiniteScroll from 'vue-infinite-scroll'
+
+Vue.use(infiniteScroll)

webapp/yarn.lock

@@ -966,12 +966,12 @@
     supports-color "^5.5.0"
     tslib "^1.9.3"
 
-"@human-connection/styleguide@0.5.17":
+"@human-connection/styleguide@0.5.19":
-  version "0.5.17"
+  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.17.tgz#99816579616c8d5be6c66ee86c39cb6c4e694878"
+  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.19.tgz#ab5df5e421bb8e8259747c0f48b1f324ad013c43"
-  integrity sha512-Qlo29eOi97lHls40Ms1hbGC29Aoz/W6BLoX/no5TQgHlP4qm+OK7Ra75g0sbj3a2x1Q4mZthUDWcqtjTYf6brw==
+  integrity sha512-UrmHtIvJ+bi0s4Q2Xjh0lIcBYcGiiOeIp34XT16CO4Oe/ziZZ/bFph5kTgrYtrIz42qucmNHZ8TxN5gYRD1MoQ==
   dependencies:
-    vue "^2.6.6"
+    vue "^2.6.10"
 
 "@jest/console@^24.7.1":
   version "24.7.1"
@@ -14887,9 +14887,13 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-infinite-scroll@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
+  integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
+
 vue-izitoast@roschaefer/vue-izitoast#patch-1:
   version "1.1.2"
-  uid ba6b03eb24c7c04c299e64a9703e101bf158ae50
   resolved "https://codeload.github.com/roschaefer/vue-izitoast/tar.gz/ba6b03eb24c7c04c299e64a9703e101bf158ae50"
   dependencies:
     izitoast "^1.3.0"
@@ -15015,7 +15019,7 @@ vue2-dropzone@3.5.8:
   dependencies:
     dropzone "^5.5.1"
 
-vue@^2.6.10, vue@^2.6.6:
+vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==