Merge pull request #36 from SundeepChand/refactor-newstory

Refactor GraphQL queries

Author: sharmaadityaHQ

src/components/UsersSuggestionDropdown.js

@@ -8,7 +8,7 @@ const UsersSuggestionDropdown = ({
   isOpen,
   userTerm,
   setUserTerm,
-  setUserQuery,
+  setAuthorQuery,
   setUsersSuggestionOpen
 }) => {
   const [usersToSuggest, setUsersToSuggest] = useState([])
@@ -90,7 +90,7 @@ const UsersSuggestionDropdown = ({
               key={user.id}
               onClick={() => {
                 setUserTerm(user.username)
-                setUserQuery(user.username)
+                setAuthorQuery(user.username)
                 setUsersSuggestionOpen(false)
               }}
               className='user-data'

src/pages/Home.js

@@ -76,7 +76,7 @@ const Home = () => {
 
   const [userTerm, setUserTerm] = useState('')
 
-  const [userQuery, setUserQuery] = useState('')
+  const [authorQuery, setAuthorQuery] = useState('')
 
   const getPage = useCallback((page) => {
     setPage(page)
@@ -97,7 +97,7 @@ const Home = () => {
       setSearchQuery('')
     }
     if (userTerm === '') {
-      setUserQuery('')
+      setAuthorQuery('')
     }
   }, [product, category, searchTerm, userTerm])
 
@@ -106,7 +106,7 @@ const Home = () => {
       const response = await userStory.getStories(
         page,
         currentStateSelected,
-        userQuery,
+        authorQuery,
         categoryQuery,
         productQuery,
         searchQuery
@@ -120,21 +120,29 @@ const Home = () => {
     page,
     productQuery,
     searchQuery,
-    userQuery
+    authorQuery
   ])
 
   useEffect(() => {
     const fetchStoryCount = async () => {
       const response = await userStory.getStoryCount(
         currentStateSelected,
-        userQuery,
+        authorQuery,
+        categoryQuery,
         productQuery,
         searchQuery
       )
       setStoryCount(response.data.data.userStoriesConnection.aggregate.count)
     }
     fetchStoryCount()
-  }, [currentStateSelected, product, productQuery, searchQuery, userQuery])
+  }, [
+    currentStateSelected,
+    product,
+    categoryQuery,
+    productQuery,
+    searchQuery,
+    authorQuery
+  ])
 
   useEffect(() => {
     const fetchProducts = async () => {
@@ -223,6 +231,15 @@ const Home = () => {
     setModal(false)
   }
 
+  const handleSearchSubmit = () => {
+    if (fieldToSearch === 'Title' && searchTerm.length > 0) {
+      setSearchQuery(`Title_contains: "${searchTerm}"`)
+    } else if (userTerm.length > 0) {
+      setAuthorQuery(userTerm)
+      setUsersSuggestionOpen(false)
+    }
+  }
+
   return (
     <>
       <Helmet>
@@ -291,7 +308,7 @@ const Home = () => {
                     isOpen={usersSuggestionOpen}
                     userTerm={userTerm}
                     setUserTerm={setUserTerm}
-                    setUserQuery={setUserQuery}
+                    setAuthorQuery={setAuthorQuery}
                     setUsersSuggestionOpen={setUsersSuggestionOpen}
                   />
                 }
@@ -311,12 +328,7 @@ const Home = () => {
                   }}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter') {
-                      if (fieldToSearch === 'Title' && searchTerm.length > 0) {
-                        setSearchQuery(`Title_contains: "${searchTerm}"`)
-                      } else if (userTerm.length > 0) {
-                        setUserQuery(userTerm)
-                        setUsersSuggestionOpen(false)
-                      }
+                      handleSearchSubmit()
                     }
                   }}
                   onFocus={() => {
@@ -353,13 +365,7 @@ const Home = () => {
               <Button
                 type='submit'
                 className='btn btn-default'
-                onClick={() => {
-                  if (fieldToSearch === 'Title' && searchTerm.length > 0) {
-                    setSearchQuery(`Title_contains: "${searchTerm}"`)
-                  } else if (userTerm.length > 0) {
-                    setUserQuery(userTerm)
-                  }
-                }}
+                onClick={handleSearchSubmit}
               >
                 Search
               </Button>

src/pages/MyProfile.js

@@ -1,6 +1,4 @@
 import React, { useEffect, useState, useContext } from 'react'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 import LoadingIndicator from '../modules/LoadingIndicator'
 import { Helmet } from 'react-helmet'
@@ -9,6 +7,7 @@ import Navigation from '../components/Navigation'
 import Context from '../modules/Context'
 import Login from './Login'
 import UserProfile from '../components/UserProfile'
+import userStory from '../services/user_story'
 
 const MyProfile = () => {
   const userId = localStorage.getItem('id')
@@ -29,65 +28,15 @@ const MyProfile = () => {
   }
 
   const updateProfile = async () => {
-    const response = await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `mutation {
-        updateUser(input: {
-          where: {
-            id: "${userId}"
-          }
-          data: {
-            Name: "${user.Name ?? user.username}"
-            Profession: "${user.Profession ?? ''}"
-            Company: "${user.Company ?? ''}"
-            LinkedIn: "${user.LinkedIn ?? ''}"
-            Twitter: "${user.Twitter ?? ''}"
-            Bio: "${user.Bio ?? ''}"
-          }
-        }) {
-          user {
-            username
-          }
-        }
-      }`
-      },
-      {
-        withCredentials: true
-      }
-    )
+    const response = await userStory.updateUser({ id: userId, ...user })
     if (response) {
       setUpdated(true)
     }
   }
 
   useEffect(() => {
     const fetchUserInfo = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-          user(id: "${userId}") {
-            profilePicture {
-              id
-              url
-            }
-            Name
-            Bio
-            username
-            Company
-            Profession
-            email
-            LinkedIn
-            Twitter
-          }
-        }
-        `
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getUserDetails(userId)
       setUser(response.data.data.user)
     }
     if (userId) {

src/pages/MyStories.js

@@ -15,6 +15,8 @@ import Lists from '../utils/Lists'
 import Context from '../modules/Context'
 import Login from './Login'
 
+import userStory from '../services/user_story'
+
 const MyStories = () => {
   const { state } = useContext(Context)
 
@@ -139,19 +141,7 @@ const MyStories = () => {
 
   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
@@ -164,9 +154,7 @@ const MyStories = () => {
 
   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) => {

src/pages/NewStory.js

@@ -3,8 +3,6 @@ import { useForm } from 'react-hook-form'
 
 import MarkdownEditor from '../components/MarkdownEditor'
 import { filterDescriptionText } from '../utils/filterText'
-import axios from 'axios'
-import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
 import { Helmet } from 'react-helmet'
 
@@ -18,6 +16,8 @@ import { navigate } from '@reach/router'
 import Context from '../modules/Context'
 import Login from './Login'
 
+import userStory from '../services/user_story'
+
 const initialDescriptionInputsValue = {
   None: ''
 }
@@ -60,9 +60,7 @@ const NewStory = () => {
 
   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) => {
@@ -74,21 +72,7 @@ const NewStory = () => {
     trackPromise(fetchCategories())
 
     const fetchProducts = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-          products {
-            id
-            Name
-            product_template
-          }
-        }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getProductsWithTemplates()
       const { products } = response.data.data
       setProducts(products)
       const productToTemplateTextMap = {}
@@ -104,15 +88,7 @@ const NewStory = () => {
     trackPromise(fetchProducts())
 
     const fetchPriorities = async () => {
-      const response = await axios.post(`${apiURL}/graphql`, {
-        query: `query {
-          __type(name: "ENUM_USERSTORY_PRIORITY") {
-            enumValues {
-              name
-            }
-          }
-        }`
-      })
+      const response = await userStory.getPriorities()
 
       setPriorities(
         response.data.data.__type.enumValues.map((ele) => {
@@ -124,24 +100,7 @@ const NewStory = () => {
     trackPromise(fetchPriorities())
 
     const fetchStoriesData = async () => {
-      const response = await axios.post(
-        `${apiURL}/graphql`,
-        {
-          query: `query {
-            userStories(sort: "votes:desc,createdAt:desc") {
-              id
-              Title
-              Description
-              followers {
-                username
-              }
-            }
-          }`
-        },
-        {
-          withCredentials: true
-        }
-      )
+      const response = await userStory.getAllStories()
       setStoriesData(response.data.data.userStories)
     }
     fetchStoriesData()
@@ -165,30 +124,7 @@ const NewStory = () => {
       return
     }
     data.description = filterDescriptionText(description)
-    await axios.post(
-      `${apiURL}/graphql`,
-      {
-        query: `mutation {
-          createUserStory(
-            input: {
-              data: {
-                Description: "${data.description}"
-                Title: "${data.title}"
-                Category: ${data.category}
-                product: "${data.product}"
-                Priority: ${data.priority}
-              }
-            }
-          ) {
-            userStory {
-              createdAt
-            }
-          }
-        }
-        `
-      },
-      { withCredentials: true }
-    )
+    await userStory.createStory(data)
     navigate('/')
   }