Exercise7

.github/workflows/webapp.yml

@@ -5,9 +5,9 @@ name: Build, Test, Lint
 
 on:
   push:
-    branches: [ main, exercise3 ]
+    branches: [ main, exercise7 ]
   pull_request:
-    branches: [ main, exercise3 ]
+    branches: [ main, exercise7 ]
 
 defaults:
   run:
@@ -31,4 +31,4 @@ jobs:
 
       - run: npm ci
       - run: npm run lint
-      - run: npm run test:unit
+      - run: npm run test

.gitignore

@@ -2,6 +2,8 @@ git-crypt-key
 *.DS_Store
 */node_modules
 */dist
+*/.nuxt-storybook
+*/storybook-static
 
 
 # local env files

README.md

@@ -19,21 +19,33 @@ $ (webapp) npm install
 ### Run unit tests
 
 ```
-$ (webapp) npm run test:unit
+$ (webapp) npm run test
 ```
 
 ### Compiles and hot-reloads for development
 
 ```
-$ (webapp) npm run serve
+$ (webapp) npm run dev
 ```
 
-### Compiles and minifies for production
+### Compiles and minifies for production (server build)
 
 ```
 $ (webapp) npm run build
 ```
 
+### Compiles and minifies for production (static build)
+
+```
+$ (webapp) npm run generate
+```
+
+### Serve in production
+
+```
+$ (webapp) npm run start
+```
+
 ### Run linter
 
 ```

backend/src/NeodeDS.js

@@ -113,6 +113,24 @@ export class NeodeDS extends DataSource {
       .map(neo4jInt => neo4jInt.toNumber())
   }
 
+  async getVoteForPost (postId, userId) {
+    return await Promise
+      .all([
+        this.getPost(postId),
+        this.getUser(userId)
+      ])
+      .then(async ([{ id: postId }, { id: userId }]) => {
+        const { records: [record] } = await this.neode.cypher(`
+        MATCH (u:User{ id: $userId }), (p:Post{ id: $postId })
+        RETURN EXISTS((u)-[:DOWNVOTED]->(p)) AS has_downvote, EXISTS((u)-[:UPVOTED]->(p)) AS has_upvote
+        `, {
+          postId,
+          userId
+        })
+        return record.get('has_downvote') ? -1 : (record.get('has_upvote') ? +1 : 0)
+      })
+  }
+
   async getPost (id) {
     const node = await this.neode.first('Post', { id })
     if (!node) throw new PostIdNotFoundError(id)

backend/src/api.graphql

@@ -23,6 +23,7 @@ type Mutation {
 
 extend type Post {
     votes: Int!
+    userVote: Int
 }
 
 input PostInput {

backend/src/resolvers.js

@@ -141,6 +141,15 @@ export default ({ subschema }) => {
           const [upvotes, downvotes] = await dataSources.db.getVotesForPost(obj.id)
           return upvotes - downvotes
         }
+      },
+      userVote: {
+        selectionSet: '{ id }',
+        resolve: async (obj, _, {
+          dataSources,
+          userId
+        }) => {
+          return userId !== null ? await dataSources.db.getVoteForPost(obj.id, userId) : null
+        }
       }
     },
     User: {

webapp/.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

webapp/.storybook/main.js

@@ -0,0 +1,11 @@
+const { nuxifyStorybook } = require('../.nuxt-storybook/storybook/main.js')
+
+module.exports = nuxifyStorybook({
+  stories: [
+    '../pages/*.stories.js'
+  ],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+  ]
+})

webapp/.storybook/preview.js

@@ -0,0 +1,4 @@
+export * from '~~/.nuxt-storybook/storybook/preview.js'
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

webapp/apollo/mutations/createPost.gql

@@ -0,0 +1,14 @@
+# __typename added to not break mock-apollo-client
+mutation createPost($title: String!) {
+    createPost(post: { title: $title }) {
+        id
+        title
+        votes
+        userVote
+        __typename
+        author {
+            id
+            __typename
+        }
+    }
+}

webapp/apollo/mutations/deletePost.gql

@@ -0,0 +1,7 @@
+# __typename added to not break mock-apollo-client
+mutation deletePost($id: ID!) {
+    deletePost(id: $id) {
+        id
+        __typename
+    }
+}

webapp/apollo/mutations/downvotePost.gql

@@ -0,0 +1,7 @@
+mutation downvotePost($id: ID!) {
+    downvotePost(id: $id) {
+        id
+        votes
+        userVote
+    }
+}

webapp/apollo/mutations/login.gql

@@ -0,0 +1,3 @@
+mutation login($email: String!, $password: String!) {
+    login(email: $email, password: $password)
+}

webapp/apollo/mutations/upvotePost.gql

@@ -0,0 +1,7 @@
+mutation upvotePost($id: ID!) {
+    upvotePost(id: $id) {
+        id
+        votes
+        userVote
+    }
+}

webapp/apollo/queries/posts.gql

@@ -0,0 +1,13 @@
+{
+    posts {
+        id
+        title
+        votes
+        userVote
+        author {
+            id
+            __typename
+        }
+        __typename
+    }
+}

webapp/components/LoginForm.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <template v-if="isAuthenticated">
+      <span>You're logged in!</span>
+      <nuxt-link to="/">Return to home page</nuxt-link>
+      or
+      <a href="#" @click.prevent="$router.go(-1)">return to the previously browsed page</a>
+    </template>
+    <form v-else @submit.prevent="onSubmit" id="form-login">
+      <table>
+        <tbody>
+        <tr>
+          <td>
+            <label for="input-email"> E-Mail </label>
+          </td>
+          <td>
+            <input id="input-email" type="text" v-model.trim="email" placeholder="Enter your e-mail address.."
+                   required/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input-password"> Password </label>
+          </td>
+          <td>
+            <input id="input-password" type="password" v-model="password" placeholder="Enter your password.."
+                   required/>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <input type="submit" value="Login" :disabled="!(email.length && password.length)"/>
+          </td>
+        </tr>
+        <tr v-if="submitting">
+          <td colspan="2">
+            Logging in...
+          </td>
+        </tr>
+        <tr v-if="error">
+          <td colspan="2">
+            <span id="login-error-message">{{ error }}</span>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </form>
+  </div>
+</template>
+
+<script>
+import login from '../apollo/mutations/login.gql'
+import { mapActions, mapGetters } from 'vuex'
+import { ApolloError } from '@apollo/client'
+
+export default {
+  data () {
+    return {
+      submitting: false,
+      error: null,
+      email: '',
+      password: '',
+    }
+  },
+  computed: {
+    ...mapGetters({
+      isAuthenticated: 'auth/isAuthenticated'
+    })
+  },
+  methods: {
+    ...mapActions({
+      setToken: 'auth/setToken'
+    }),
+    async onSubmit () {
+      this.error = null
+      this.submitting = true
+      try {
+        const res = await this.$apollo.mutate({
+          mutation: login,
+          variables: {
+            email: this.email,
+            password: this.password
+          }
+        }).then(({ data }) => data && data.login)
+        await this.setToken(res)
+        await this.$apolloHelpers.onLogin(res)
+        if (this.$route.params.returnPath) {
+          await this.$router.push({
+            path: this.$route.params.returnPath
+          })
+        }
+      } catch (e) {
+        if (e instanceof ApolloError) {
+          this.error = e.graphQLErrors.join(",\n")
+        } else {
+          this.error = e
+        }
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+form#form-login > table {
+  margin: 0 auto;
+}
+</style>
+