Merge pull request #39 from EOS-uiux-Solutions/refactor

refactor graphql queries

Author: sharmaadityaHQ

.eslintrc.yml

@@ -15,4 +15,4 @@ rules:
   prefer-const: 'error'
   prefer-template: 'error'
   prefer-destructuring: ['error', { 'object': true, 'array': false }]
-  object-curly-spacing: [2, 'always']
+  object-curly-spacing: [2, 'always']

README.md

@@ -1,8 +1,10 @@
 [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
 [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](https://choosealicense.com/licenses/mit/)
+
 # User Story
 
 ![](./static/user_story.png)
+
 # Introduction
 
 The goal of **User Story** is to design and present a scalable backend infrastructure that delivers a web interface allowing users to request new features and give feedback in an easy and intuitive way. Users can attach files with their story to explain what they want. The admins can then resolve, close and update the status of these stories. Users can interact with other stories via comments and votes. This can also serve as an efficient feedback and response mechanism which is critical for any organization to improve and make progress. Simply, its a **product management tool**.
@@ -12,6 +14,7 @@ The goal of **User Story** is to design and present a scalable backend infrastru
 ![](./static/user_story_workflow.png)
 
 # Guidelines for development
+
 ### Setting up the project
 
 After cloning this repository you will need to install all the dependencies: `npm i`

src/components/Comments.js

@@ -1,12 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { Link } from '@reach/router'
 import Button from './Button'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { useForm } from 'react-hook-form'
 
 import Context from '../modules/Context'
 import FormError from '../components/FormError'
+import userStory from '../services/user_story'
 
 const Comments = (props) => {
   const { storyId } = props
@@ -43,80 +42,14 @@ const Comments = (props) => {
 
   useEffect(() => {
     const fetchComments = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `
-        query {
-          userStory(id: "${storyId}") {
-            user_story_comments {
-              id
-              Comments
-              user {
-                id
-                username
-              }
-              createdAt
-              user_story_comment_replies {
-                createdAt
-                Comments
-                user {
-                  id
-                  username
-                }
-              }
-            }
-          }
-        }
-        `
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getComments(storyId)
       setComments(response.data.data.userStory.user_story_comments)
     }
     fetchComments()
   }, [storyId, fetchComments])
 
   const addComment = async (data) => {
-    const response = await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `
-      mutation {
-        createUserStoryComment(input: {
-          data: {
-            Comments: "${data.addComment}"
-            user_story: "${storyId}"
-            user: "${id}"
-          }
-        }) {
-          userStoryComment {
-            id
-            user {
-              id
-              username
-            }
-            Comments
-            createdAt
-            user_story_comment_replies {
-              createdAt
-              Comments
-              user {
-                id
-                username
-              }
-            }
-          }
-        }
-      }
-      `
-      },
-      {
-        withCredentials: true
-      }
-    )
+    const response = await userStory.postComment(data.addComment, storyId, id)
     setComments([
       ...comments,
       response.data.data.createUserStoryComment.userStoryComment
@@ -125,27 +58,7 @@ const Comments = (props) => {
   }
 
   const addCommentReply = async (data) => {
-    await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `
-      mutation {
-        createUserStoryCommentThread (input: {
-          data: {
-            Comments: "${data.addReply}"
-            user_story_comment: "${commentId}"
-            user: "${id}"
-          }
-        }){
-          userStoryCommentThread {
-            createdAt
-          }
-        }
-      }
-      `
-      },
-      { withCredentials: true }
-    )
+    await userStory.postCommentReply(data.addReply, commentId, id)
     setCommentReply('')
     setFetchComments((fetchComments) => !fetchComments)
     setRepliesToggled(null)

src/components/Notifications.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
-import axios from 'axios'
 import { Link, navigate } from '@reach/router'
-import { apiURL } from '../config.json'
 import Context from '../modules/Context'
+import userStory from '../services/user_story'
 
 const Notifications = () => {
   const userId = localStorage.getItem('id')
@@ -39,32 +38,7 @@ const Notifications = () => {
 
   useEffect(() => {
     const fetchNotifications = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-              userStoryNotifications (where: {
-                users: {
-                  id: "${userId}"
-                }
-              }){
-                message
-                id
-                users {
-                  id
-                }
-                seenBy {
-                  id
-                }
-                date
-                link
-              }
-            }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getNotificationsByUserId(userId)
       let unseenNotifications = []
       if (response.data.data.userStoryNotifications) {
         unseenNotifications = response.data.data.userStoryNotifications
@@ -87,31 +61,7 @@ const Notifications = () => {
         const seenBy = notification.seenBy.map((seen) => seen.id)
         if (!seenBy.includes(userId)) {
           seenBy.push(userId)
-          await axios.post(
-            `${apiURL}/graphql`,
-            {
-              query: `mutation updateNotifications($seenBy: [ID]){
-                updateUserStoryNotification(input: {
-                  where: {
-                    id: "${notification.id}"
-                  }
-                  data: {
-                    seenBy: $seenBy
-                  }
-                }) {
-                  userStoryNotification {
-                    id
-                  }
-                }
-              }`,
-              variables: {
-                seenBy: seenBy
-              }
-            },
-            {
-              withCredentials: true
-            }
-          )
+          await userStory.markNotificationAsRead(notification.id, seenBy)
           setNotifications([])
           setNotificationCount(0)
           setNotificationsSeen(false)

src/config.json

@@ -1,4 +1,4 @@
 {
-    "apiURL": "http://localhost:1337",
-    "APP_ENV": "dev"
-}
+  "apiURL": "http://localhost:1337",
+  "APP_ENV": "dev"
+}

src/services/user_story.js

@@ -300,6 +300,132 @@ const userStory = {
       }`
     }
     return apiCall('/graphql', updateQuery)
+  },
+  getComments: (storyId) => {
+    const commentsQuery = {
+      query: `
+      query {
+        userStory(id: "${storyId}") {
+          user_story_comments {
+            id
+            Comments
+            user {
+              id
+              username
+            }
+            createdAt
+            user_story_comment_replies {
+              createdAt
+              Comments
+              user {
+                id
+                username
+              }
+            }
+          }
+        }
+       }`
+    }
+    return apiCall('/graphql', commentsQuery)
+  },
+  postComment: (addComment, storyId, id) => {
+    const postCommentQuery = {
+      query: `
+      mutation {
+        createUserStoryComment(input: {
+          data: {
+            Comments: "${addComment}"
+            user_story: "${storyId}"
+            user: "${id}"
+          }
+        }) {
+          userStoryComment {
+            id
+            user {
+              id
+              username
+            }
+            Comments
+            createdAt
+            user_story_comment_replies {
+              createdAt
+              Comments
+              user {
+                id
+                username
+              }
+            }
+          }
+        }
+      }
+      `
+    }
+    return apiCall('/graphql', postCommentQuery)
+  },
+  postCommentReply: (addReply, commentId, id) => {
+    const postCommentReplyQuery = {
+      query: `
+      mutation {
+        createUserStoryCommentThread (input: {
+          data: {
+            Comments: "${addReply}"
+            user_story_comment: "${commentId}"
+            user: "${id}"
+          }
+        }){
+          userStoryCommentThread {
+            createdAt
+          }
+        }
+      }
+      `
+    }
+    return apiCall('/graphql', postCommentReplyQuery)
+  },
+  getNotificationsByUserId: (userId) => {
+    const getNotificationsByUserIdQuery = {
+      query: `query {
+      userStoryNotifications (where: {
+        users: {
+          id: "${userId}"
+        }
+      }){
+        message
+        id
+        users {
+          id
+        }
+        seenBy {
+          id
+        }
+        date
+        link
+      }
+    }`
+    }
+    return apiCall('/graphql', getNotificationsByUserIdQuery)
+  },
+  markNotificationAsRead: (notificationId, seenBy) => {
+    const markNotificationAsReadQuery = {
+      query: `mutation updateNotifications($seenBy: [ID]){
+        updateUserStoryNotification(input: {
+          where: {
+            id: "${notificationId}"
+          }
+          data: {
+            seenBy: $seenBy
+          }
+        }) {
+          userStoryNotification {
+            id
+          }
+        }
+      }`,
+      variables: {
+        seenBy: seenBy
+      }
+    }
+    return apiCall('/graphql', markNotificationAsReadQuery)
   }
 }