Get the links of the Tags in the Post as a URL driven query to work

Co-Authored-By: mattwr18 <mattwr18@gmail.com>

backend/src/schema/resolvers/passwordReset.js

@@ -13,7 +13,10 @@ const transporter = () => {
   }
   const { SMTP_USERNAME: user, SMTP_PASSWORD: pass } = CONFIG
   if (user && pass) {
-    configs.auth = { user, pass }
+    configs.auth = {
+      user,
+      pass,
+    }
   }
   return nodemailer.createTransport(configs)
 }
@@ -41,11 +44,21 @@ export default {
   Mutation: {
     requestPasswordReset: async (_, { email }, { driver }) => {
       const code = uuid().substring(0, 6)
-      const [user] = await createPasswordReset({ driver, code, email })
+      const [user] = await createPasswordReset({
+        driver,
+        code,
+        email,
+      })
       if (CONFIG.SMTP_HOST && CONFIG.SMTP_PORT) {
         const name = (user && user.name) || ''
         const mailTemplate = user ? resetPasswordMail : wrongAccountMail
-        await transporter().sendMail(mailTemplate({ email, code, name }))
+        await transporter().sendMail(
+          mailTemplate({
+            email,
+            code,
+            name,
+          }),
+        )
       }
       return true
     },
@@ -62,7 +75,12 @@ export default {
       SET u.password = $newHashedPassword
       RETURN pr
       `
-      let transactionRes = await session.run(cypher, { stillValid, email, code, newHashedPassword })
+      let transactionRes = await session.run(cypher, {
+        stillValid,
+        email,
+        code,
+        newHashedPassword,
+      })
       const [reset] = transactionRes.records.map(record => record.get('pr'))
       const result = !!(reset && reset.properties.usedAt)
       session.close()

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-card>
+  <ds-card class="filter-menu-card">
     <ds-flex>
       <ds-flex-item class="filter-menu-title">
         <ds-heading size="h3">{{ $t('filter-menu.title') }}</ds-heading>
@@ -20,6 +20,28 @@
         </div>
       </ds-flex-item>
     </ds-flex>
+    <div v-if="hashtag">
+      <ds-space margin-bottom="x-small" />
+      <ds-flex>
+        <ds-flex-item>
+          <ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
+        </ds-flex-item>
+        <ds-flex-item>
+          <div class="filter-menu-buttons">
+            <ds-button
+              v-tooltip="{
+                content: this.$t('filter-menu.clearSearch'),
+                placement: 'left',
+                delay: { show: 500 },
+              }"
+              name="filter-by-followed-authors-only"
+              icon="close"
+              @click="clearSearch"
+            />
+          </div>
+        </ds-flex-item>
+      </ds-flex>
+    </div>
   </ds-card>
 </template>
 
@@ -27,6 +49,7 @@
 export default {
   props: {
     user: { type: Object, required: true },
+    hashtag: { type: Object, default: null },
   },
   data() {
     return {
@@ -50,11 +73,18 @@ export default {
         : { author: { followedBy_some: { id: this.user.id } } }
       this.$emit('changeFilterBubble', this.filter)
     },
+    clearSearch() {
+      this.$emit('clearSearch')
+    },
   },
 }
 </script>
 
 <style lang="scss">
+.filter-menu-card {
+  background-color: $background-color-soft;
+}
+
 .filter-menu-title {
   display: flex;
   align-items: center;

webapp/graphql/PostMutations.js

@@ -50,7 +50,6 @@ export default () => {
           content
           contentExcerpt
           language
-          image
         }
       }
     `,

webapp/locales/de.json

@@ -1,6 +1,8 @@
 {
   "filter-menu": {
-    "title": "Deine Filterblase"
+    "title": "Deine Filterblase",
+    "hashtag-search": "Suche nach #{hashtag}",
+    "clearSearch": "Suche löschen"
   },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",

webapp/locales/en.json

@@ -1,6 +1,8 @@
 {
   "filter-menu": {
-    "title": "Your filter bubble"
+    "title": "Your filter bubble",
+    "hashtag-search": "Searching for #{hashtag}",
+    "clearSearch": "Clear search"
   },
   "login": {
     "copy": "If you already have a human-connection account, login here.",

webapp/pages/index.vue

@@ -2,7 +2,12 @@
   <div>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item>
-        <filter-menu :user="currentUser" @changeFilterBubble="changeFilterBubble" />
+        <filter-menu
+          :user="currentUser"
+          @changeFilterBubble="changeFilterBubble"
+          :hashtag="hashtag"
+          @clearSearch="clearSearch"
+        />
       </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in uniq(Post)"
@@ -41,12 +46,19 @@ export default {
     HcLoadMore,
   },
   data() {
+    const { hashtag = null } = this.$route.query
     return {
       // Initialize your apollo data
       Post: [],
       page: 1,
       pageSize: 12,
       filter: {},
+      hashtag,
+    }
+  },
+  mounted() {
+    if (this.hashtag) {
+      this.changeFilterBubble({ tags_some: { name: this.hashtag } })
     }
   },
   computed: {
@@ -62,9 +74,21 @@ export default {
   },
   methods: {
     changeFilterBubble(filter) {
+      if (this.hashtag) {
+        filter = {
+          ...filter,
+          tags_some: { name: this.hashtag },
+        }
+      }
       this.filter = filter
       this.$apollo.queries.Post.refresh()
     },
+    clearSearch() {
+      this.$router.push({ path: '/' })
+      this.hashtag = null
+      delete this.filter.tags_some
+      this.changeFilterBubble(this.filter)
+    },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },

webapp/pages/search/hashtag/_id.vue

@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    const { id: hashtag } = this.$route.params
+    this.$router.push({ path: '/', query: { hashtag } })
+  },
+}
+</script>