feat: 🍰 My Groups Page

backend/README.md

@@ -64,6 +64,7 @@ your `.env` configuration file.
 Your backend is up and running at [http://localhost:4000/](http://localhost:4000/)
 This will start the GraphQL service \(by default on localhost:4000\) where you
 can issue GraphQL requests or access GraphQL Playground in the browser.
+More details about our GraphQL playground and how to use it with ocelot.social can be found [here](./src/graphql/GraphQL-Playground.md).
 
 ![GraphQL Playground](../.gitbook/assets/graphql-playground.png)
 

backend/src/db/seed.js

@@ -325,13 +325,6 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           userId: 'u2',
         },
       }),
-      mutate({
-        mutation: joinGroupMutation,
-        variables: {
-          groupId: 'g0',
-          userId: 'u3',
-        },
-      }),
       mutate({
         mutation: joinGroupMutation,
         variables: {
@@ -364,14 +357,6 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           roleInGroup: 'admin',
         },
       }),
-      mutate({
-        mutation: changeGroupMemberRoleMutation,
-        variables: {
-          groupId: 'g0',
-          userId: 'u3',
-          roleInGroup: 'owner',
-        },
-      }),
     ])
 
     authenticatedUser = await jennyRostock.toJson()
@@ -430,31 +415,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u1',
           roleInGroup: 'usual',
         },
       }),
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
-          userId: 'u2',
-          roleInGroup: 'usual',
-        },
-      }),
-      mutate({
-        mutation: changeGroupMemberRoleMutation,
-        variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u5',
           roleInGroup: 'admin',
         },
       }),
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u6',
           roleInGroup: 'owner',
         },
@@ -477,6 +454,13 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
     await Promise.all([
+      mutate({
+        mutation: joinGroupMutation,
+        variables: {
+          groupId: 'g2',
+          userId: 'u3',
+        },
+      }),
       mutate({
         mutation: joinGroupMutation,
         variables: {
@@ -510,23 +494,31 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
+          userId: 'u3',
+          roleInGroup: 'pending',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation,
+        variables: {
+          groupId: 'g2',
           userId: 'u4',
           roleInGroup: 'usual',
         },
       }),
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
           userId: 'u5',
           roleInGroup: 'usual',
         },
       }),
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
           userId: 'u6',
           roleInGroup: 'usual',
         },

backend/src/graphql/GraphQL-Playground.md

@@ -0,0 +1,108 @@
+# GraphQL Playground
+
+To use GraphQL Playground, we need to know some basics:
+
+## How To Login?
+
+First, we need to have a user from ocelot.social to log in as.
+The user can be created by seeding the Neo4j database from the backend or by multiple GraphQL mutations.
+
+### Seed The Neo4j Database
+
+In your browser you can reach the GraphQL Playground under `http://localhost:4000/`, if the database and the backend are running, see [backend](../../README.md).
+There you will also find instructions on how to seed the database.
+
+### Use GraphQL Mutations To Create A User
+
+TODO: Describe how to create a user using GraphQL mutations!
+
+### Login Via GraphQL
+
+You can register a user by sending the query:
+
+```gql
+mutation {
+  login(email: "[email protected]", password: "1234")
+}
+```
+
+Or use `"[email protected]"` or `"[email protected]"` for the roll you need.
+
+If all goes well, you will receive a QGL response like:
+
+```json
+{
+  "data": {
+    "login": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
+  }
+}
+```
+
+You can use this response to set an HTTP header when you click `HTTP HEADERS` in the footer.
+Just set it with the login token you received in response:
+
+```json
+{
+  "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
+}
+```
+
+This token is used for all other queries and mutations you send to the backend.
+
+## Query And Mutate
+
+When you are logged in and open a new playground tab by clicking "+", you can create a new group by sending the following mutation:
+
+```gql
+mutation {
+  CreateGroup(
+    # id: ""
+    name: "My Group"
+    # slug: ""
+    about: "We will save the world"
+    description: "<p class=\"\"><em>English:</em></p><p class=\"\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\"\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\"\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\"\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>"
+    groupType: hidden
+    actionRadius: interplanetary
+    categoryIds: ["cat12"]
+  ) {
+    id
+    name
+    slug
+    createdAt
+    updatedAt
+    disabled
+    deleted
+    about
+    description
+    groupType
+    actionRadius
+    myRole
+  }
+}
+```
+
+You will receive the answer:
+
+```json
+{
+  "data": {
+    "CreateGroup": {
+      "id": "2e3bbadb-804b-4ebc-a673-2d7c7f05e827",
+      "name": "My Group",
+      "slug": "my-group",
+      "createdAt": "2022-09-01T09:44:47.969Z",
+      "updatedAt": "2022-09-01T09:44:47.969Z",
+      "disabled": false,
+      "deleted": false,
+      "about": "We will save the world",
+      "description": "<p class=\"\"><em>English:</em></p><p class=\"\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\"\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\"\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\"\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>",
+      "groupType": "hidden",
+      "actionRadius": "interplanetary",
+      "myRole": "owner"
+    }
+  }
+}
+```
+
+If you look into the Neo4j database with your browser and search the groups, you will now also find your new group.
+For more details about our Neo4j database read [here](../../../neo4j/README.md).

webapp/components/CommentCard/CommentCard.story.js

@@ -18,7 +18,8 @@ const comment = {
   author: {
     id: '1',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',

webapp/components/DeleteData/DeleteData.vue

@@ -103,7 +103,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation ($id: ID!, $resource: [Deletable]) {
+            mutation($id: ID!, $resource: [Deletable]) {
               DeleteUser(id: $id, resource: $resource) {
                 id
               }

webapp/components/Editor/Editor.story.js

@@ -9,7 +9,8 @@ const embed = {
   title: 'Video Titel',
   // html: null,
   description: 'Video Description',
-  html: '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+  html:
+    '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
 }
 
 const plugins = [

webapp/components/Editor/nodes/Embed.spec.js

@@ -33,7 +33,8 @@ describe('Embed.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
           }),
         }
       })

webapp/components/Embed/EmbedComponent.spec.js

@@ -114,7 +114,8 @@ describe('EmbedComponent.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
           }
           wrapper = Wrapper()
         })

webapp/components/Emotions/Emotions.vue

@@ -83,7 +83,7 @@ export default {
       this.$apollo
         .query({
           query: gql`
-            query ($postId: ID!, $data: _EMOTEDInput!) {
+            query($postId: ID!, $data: _EMOTEDInput!) {
               PostsEmotionsCountByEmotion(postId: $postId, data: $data)
             }
           `,

webapp/components/Group/GroupCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <ds-container class="group-card">
+      <ds-page-title heading="Groups"></ds-page-title>
+      <ds-card v-for="item in items" :key="item.id" space="xx-small">
+        <nuxt-link to="/group/g1/testgruppe">{{ item.name }}</nuxt-link>
+        {{ item.categories ? item.categories.map((category) => category.name) : [] }}
+        <div>{{ item }}</div>
+        <ds-space>
+          <base-button
+            v-if="item.myRole === 'owner'"
+            icon="trash"
+            @click="deleteGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'pending'"
+            icon="question-circle"
+            @click="removePending(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'owner'"
+            icon="edit"
+            @click="editGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'usual'"
+            icon="close"
+            @click="unfollowGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === null"
+            icon="plus"
+            @click="addMemeberToGroup(item)"
+          ></base-button>
+        </ds-space>
+      </ds-card>
+    </ds-container>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'GroupList',
+  props: {
+    items: { type: Array, default: () => [] },
+  },
+  methods: {
+    removePending() {
+      alert('removePending group')
+    },
+    editGroup(item) {
+      this.$router.push({ path: `/group/edit/${item.id}` })
+    },
+    deleteGroup() {
+      alert('delete group')
+    },
+    unfollowGroup() {
+      alert('unfollow group')
+    },
+    addMemeberToGroup() {
+      alert('addMemeberToGroup group')
+    },
+  },
+}
+</script>