Refactored Notifications.js

Author: SundeepChand

src/pages/Notifications.js

@@ -4,9 +4,8 @@ import { navigate } from '@reach/router'
 
 import Navigation from '../components/Navigation'
 import LoadingIndicator from '../modules/LoadingIndicator'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { Helmet } from 'react-helmet'
+import userStory from '../services/user_story'
 
 const Notifications = () => {
   const userId = localStorage.getItem('id')
@@ -17,32 +16,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.getNotifications(userId)
       setNotifications(response.data.data.userStoryNotifications)
     }
     trackPromise(fetchNotifications())

src/services/gql_fragments.js

@@ -0,0 +1,22 @@
+export const BASIC_STORY_INFO_FRAGMENT = `fragment BasicStoryInfo on UserStory {
+  id
+  Title
+  Description
+  followers {
+    id
+    username
+  }
+}`
+
+export const NOTIFICATION_DATA_FRAGMENT = `fragment NotificationData on UserStoryNotification {
+  message
+  id
+  users {
+  id
+  }
+  seenBy {
+  id
+  }
+  date
+  link
+}`

src/services/user_story.js

@@ -1,14 +1,8 @@
 import apiCall from './api'
-
-const BASIC_STORY_INFO_FRAGMENT = `fragment BasicStoryInfo on UserStory {
-  id
-  Title
-  Description
-  followers {
-    id
-    username
-  }
-}`
+import {
+  BASIC_STORY_INFO_FRAGMENT,
+  NOTIFICATION_DATA_FRAGMENT
+} from './gql_fragments'
 
 const userStory = {
   createStory: ({ description, title, category, product, priority }) => {
@@ -181,22 +175,31 @@ const userStory = {
     }
     return apiCall('/graphql', productQuery)
   },
+  getNotifications: (userId) => {
+    const notificationQuery = {
+      query: `query {
+        userStoryNotifications (where: {
+          users: {
+            id: "${userId}"
+          }
+        }){
+          ...NotificationData
+        }
+      }
+      ${NOTIFICATION_DATA_FRAGMENT}
+      `
+    }
+    return apiCall('/graphql', notificationQuery)
+  },
   getPolicyNotifications: () => {
     const policyQuery = {
       query: `query {
             userStoryNotifications(where: {message: "User story privacy policy has been updated"}) {
-              message
-              id
-              users {
-                id
-              }
-              seenBy {
-                id
-              }
-              date
-              link
+              ...NotificationData
             }
-          }`
+          }
+          ${NOTIFICATION_DATA_FRAGMENT}
+          `
     }
     return apiCall('/graphql', policyQuery)
   },