Refactored Profile.js

Author: SundeepChand

src/pages/Profile.js

@@ -1,6 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 import { Helmet } from 'react-helmet'
 import { navigate } from '@reach/router'
@@ -13,6 +11,9 @@ import Dropdown from '../components/Dropdown'
 import UserProfile from '../components/UserProfile'
 import Lists from '../utils/Lists'
 
+import userStory from '../services/user_story'
+import User from '../services/user'
+
 const Profile = (props) => {
   const { profileId } = props
   const [stories, setStories] = useState([])
@@ -35,19 +36,7 @@ const Profile = (props) => {
 
   useEffect(() => {
     const fetchProducts = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-          products {
-            Name
-          }
-        }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getProducts()
       setProducts(
         response.data.data.products.map((ele) => {
           return ele.Name
@@ -60,9 +49,7 @@ const Profile = (props) => {
 
   useEffect(() => {
     const fetchCategories = async () => {
-      const response = await axios.post(`${apiURL}/graphql`, {
-        query: '{ __type(name: "ENUM_USERSTORY_CATEGORY") {enumValues {name}}}'
-      })
+      const response = await userStory.getCategories()
 
       setCategories(
         response.data.data.__type.enumValues.map((ele) => {
@@ -76,30 +63,7 @@ const Profile = (props) => {
 
   useEffect(() => {
     const fetchUserInfo = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-          user(id: "${profileId}") {
-            profilePicture {
-              url
-            }
-            Name
-            Bio
-            username
-            Company
-            Profession
-            email
-            LinkedIn
-            Twitter
-          }
-        }
-        `
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await User.getInfo(profileId)
       setUser(response.data.data.user)
     }
     if (profileId) {
@@ -109,40 +73,7 @@ const Profile = (props) => {
 
   useEffect(() => {
     const fetchMyStories = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            user(id: "${profileId}") {
-              user_stories {
-                id
-                Title
-                Description
-                user_story_status {
-                  Status
-                }
-                followers {
-                  username
-                }
-                product {
-                  Name
-                }
-                author {
-                  id
-                  username
-                }
-                user_story_comments {
-                  Comments
-                }
-                Category
-              }
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await User.getUserStoriesByUser(profileId)
       setStories(response.data.data.user.user_stories)
     }
     trackPromise(fetchMyStories())

src/services/user.js

@@ -1,4 +1,5 @@
 import apiCall from './api'
+import { BASIC_STORY_INFO_FRAGMENT } from './gql_fragments'
 
 const User = {
   updateUser: (user) => {
@@ -25,10 +26,10 @@ const User = {
     }
     return apiCall('/graphql', updateQuery)
   },
-  getInfo: (id) => {
+  getInfo: (userId) => {
     const userQuery = {
       query: `query {
-        user(id: "${id}") {
+        user(id: "${userId}") {
           profilePicture {
             id
             url
@@ -46,6 +47,34 @@ const User = {
       `
     }
     return apiCall('/graphql', userQuery)
+  },
+  getUserStoriesByUser: (userId) => {
+    const userQuery = {
+      query: `query {
+        user(id: "${userId}") {
+          user_stories {
+            ...BasicStoryInfo
+            user_story_status {
+              Status
+            }
+            product {
+              Name
+            }
+            author {
+              id
+              username
+            }
+            user_story_comments {
+              Comments
+            }
+            Category
+          }
+        }
+      }
+      ${BASIC_STORY_INFO_FRAGMENT}
+      `
+    }
+    return apiCall('/graphql', userQuery)
   }
 }