fix(projects): simplified useApolloClient hook

Previously, in order to use the Github API client, you had to:

1. Get the GitHub token from the appState
2. Call the `useApolloClient` hook and get the `initApolloClient` function
3. Call the `initApolloClient` function with the GitHub token as an
argument and get the client

But since `useApolloClient` is a hook, this commit simplifies it so
that the appState is accessed directly from within the hook, and the
actual API client is returned directly, so that the above steps get
simplified to:

1. Call the `useApolloClient` hook and get the client

Author: e18r

apps/projects/app/App.js

@@ -40,7 +40,7 @@ const App = () => {
   const [ githubLoading, setGithubLoading ] = useState(false)
   const [ panel, setPanel ] = useState(null)
   const [ panelProps, setPanelProps ] = useState(null)
-  const initApolloClient = useApolloClient()
+  const client = useApolloClient()
 
   const {
     repos = [],
@@ -57,8 +57,6 @@ const App = () => {
     selectIssue: setSelectedIssue,
   } = usePathSegments()
 
-  const client = initApolloClient(github.token)
-
   useEffect(() => {
     setSelectedIssue(selectedIssueId)
   }, [selectedIssueId])

apps/projects/app/components/Content/IssueDetail/index.js

@@ -1,6 +1,5 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { useAragonApi } from '../../../api-react'
 import { useLayout } from '@aragon/ui'
 import { useQuery } from '@apollo/react-hooks'
 import useShapedIssue from '../../../hooks/useShapedIssue'
@@ -11,9 +10,7 @@ import DetailsCard from './DetailsCard'
 import BountyCard from './BountyCard'
 
 const IssueDetail = ({ issueId }) => {
-  const { appState: { github } } = useAragonApi()
-  const initApolloClient = useApolloClient()
-  const client = useMemo(() => initApolloClient(github.token), [])
+  const client = useApolloClient()
   const { layoutName } = useLayout()
   const shapeIssue = useShapedIssue()
   const { loading, error, data } = useQuery(GET_ISSUE, {

apps/projects/app/components/Content/Issues.js

@@ -375,11 +375,10 @@ IssuesQuery.propTypes = {
 }
 
 const IssuesWrap = props => {
-  const initApolloClient = useApolloClient()
-  const { appState: { github, repos } } = useAragonApi()
+  const client = useApolloClient()
+  const { appState: { repos } } = useAragonApi()
   const shapeIssue = useShapedIssue()
   const { query: { repoId } } = usePathSegments()
-  const [ client, setClient ] = useState(null)
   const [ downloadedRepos, setDownloadedRepos ] = useState({})
   const [ query, setQuery ] = useState(null)
   const [ filters, setFilters ] = useState({
@@ -423,11 +422,6 @@ const IssuesWrap = props => {
     setQuery(getIssuesGQL(reposQueryParams))
   }, [ downloadedRepos, filters, repos ])
 
-  useEffect(() => {
-    const apolloClient = initApolloClient(github.token)
-    setClient(apolloClient)
-  }, [github.token])
-
   if (!query) return 'Loading...'
 
   if (!client) return 'You must sign into GitHub to view issues.'

apps/projects/app/hooks/useGithubAuth.js

@@ -5,15 +5,15 @@ import { CURRENT_USER } from '../utils/gql-queries'
 
 const useGithubAuth = () => {
   const { appState } = useAragonApi()
-  const initApolloClient = useApolloClient()
+  const client = useApolloClient()
   const token = appState.github && appState.github.token
 
   const [ githubCurrentUser, setGithubCurrentUser ] = useState({})
 
   useEffect(() => {
     if (!token) return
 
-    initApolloClient(token)
+    client
       .query({ query: CURRENT_USER })
       .then(res => setGithubCurrentUser(res.data.viewer))
   }, [token])

apps/projects/app/utils/apollo-client.js

@@ -4,31 +4,32 @@ import { GITHUB_TOKEN_REVOKED } from '../store/eventTypes'
 import { STATUS } from '../utils/github'
 
 export const useApolloClient = () => {
-  const { api } = useAragonApi()
-  const initApolloClient = token => {
-    if (token === null) return null
-    return new ApolloClient({
-      uri: 'https://api.github.com/graphql',
-      request: operation => {
-        if (token) {
-          operation.setContext({
-            headers: {
-              accept: 'application/vnd.github.starfire-preview+json', // needed to create issues
-              authorization: `bearer ${token}`,
-            },
-          })
-        }
-      },
-      onError: error => {
-        if (error.networkError && error.networkError.statusCode === 401) {
-          api.emitTrigger(GITHUB_TOKEN_REVOKED, {
-            status: STATUS.REVOKED,
-            scope: null,
-            token: null,
-          })
-        }
+  const {
+    api,
+    appState: {
+      github: { token } = { token: null }
+    }
+  } = useAragonApi()
+  if (token === null) return null
+  return new ApolloClient({
+    uri: 'https://api.github.com/graphql',
+    request: operation => {
+      operation.setContext({
+        headers: {
+          accept: 'application/vnd.github.starfire-preview+json', // needed to create issues
+          authorization: `bearer ${token}`,
+        },
+      })
+    },
+    onError: error => {
+      if (error.networkError && error.networkError.statusCode === 401) {
+        api.emitTrigger(GITHUB_TOKEN_REVOKED, {
+          status: STATUS.REVOKED,
+          scope: null,
+          token: null,
+        })
       }
-    })
-  }
-  return initApolloClient
+      else console.error(error)
+    }
+  })
 }