Handle GitHub token revocation

apps/projects/app/App.js

@@ -16,12 +16,12 @@ import {
   REQUESTED_GITHUB_TOKEN_FAILURE,
 } from './store/eventTypes'
 
-import { initApolloClient } from './utils/apollo-client'
+import { useApolloClient } from './utils/apollo-client'
 import { getToken, githubPopup, STATUS } from './utils/github'
 import Unauthorized from './components/Content/Unauthorized'
 import { LoadingAnimation } from './components/Shared'
 import { EmptyWrapper } from './components/Shared'
-import { Error } from './components/Card'
+import { Error, Revoked } from './components/Card'
 import { DecoratedReposProvider } from './context/DecoratedRepos'
 import usePathSegments from './hooks/usePathSegments'
 
@@ -50,14 +50,13 @@ const App = () => {
   const [ githubLoading, setGithubLoading ] = useState(false)
   const [ panel, setPanel ] = useState(null)
   const [ panelProps, setPanelProps ] = useState(null)
+  const client = useApolloClient()
 
   const {
     github = { status : STATUS.INITIAL },
     isSyncing = true,
   } = appState
 
-  const client = github.token ? initApolloClient(github.token) : null
-
   const handlePopupMessage = useCallback(message => {
     if (!popupRef) return
     if (message.data.from !== 'popup') return
@@ -136,6 +135,12 @@ const App = () => {
         <Error action={noop} />
       </Main>
     )
+  } else if (github.status === STATUS.REVOKED) {
+    return (
+      <Main>
+        <Revoked action={handleGithubSignIn} />
+      </Main>
+    )
   }
 
   return (

apps/projects/app/components/Card/Revoked.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, EmptyStateCard, GU, Text, useTheme } from '@aragon/ui'
+import { EmptyWrapper } from '../Shared'
+import revoked from '../../assets/revoked.svg'
+
+const Illustration = () => <img src={revoked} alt="" />
+
+
+const Revoked = ({ action }) => {
+  const theme = useTheme()
+  return (
+    <EmptyWrapper>
+      <EmptyStateCard
+        text={
+          <>
+            <Text css={`margin: ${GU}px`}>
+              Reconnect to GitHub
+            </Text>
+            <Text.Block
+              size="small"
+              color={`${theme.surfaceContentSecondary}`}
+            >
+              It seems that your connection to GitHub has been revoked; please
+              reconnect.
+            </Text.Block>
+          </>
+        }
+        illustration={<Illustration />}
+        action={<Button label="Sign in" onClick={action} />}
+      />
+    </EmptyWrapper>
+  )
+}
+
+Revoked.propTypes = {
+  action: PropTypes.func.isRequired,
+}
+
+export default Revoked

apps/projects/app/components/Card/index.js

@@ -2,4 +2,5 @@ import Empty from './Empty'
 import Project from './Project'
 import Issue from './Issue'
 import Error from './Error'
-export { Empty, Project, Issue, Error }
+import Revoked from './Revoked'
+export { Empty, Project, Issue, Error, Revoked }

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { useAragonApi } from '../../../api-react'
 import {
@@ -12,7 +12,7 @@ import {
 import { useQuery } from '@apollo/react-hooks'
 import useShapedIssue from '../../../hooks/useShapedIssue'
 import { GET_ISSUE } from '../../../utils/gql-queries.js'
-import { initApolloClient } from '../../../utils/apollo-client'
+import { useApolloClient } from '../../../utils/apollo-client'
 import EventsCard from './EventsCard'
 import DetailsCard from './DetailsCard'
 import BountyCard from './BountyCard'
@@ -44,13 +44,11 @@ Wrap.propTypes = {
 }
 
 const IssueDetail = ({ issueId }) => {
-  const { appState: { github } } = useAragonApi()
-  const client = useMemo(() => initApolloClient(github.token), [])
+  const client = useApolloClient()
   const { layoutName } = useLayout()
   const shapeIssue = useShapedIssue()
   const { loading, error, data } = useQuery(GET_ISSUE, {
     client,
-    onError: console.error,
     variables: { id: issueId },
   })
   if (loading) return <Wrap>Loading...</Wrap>

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

@@ -7,10 +7,9 @@ import { useAragonApi } from '../../api-react'
 import { Button, GU, Header, IconPlus, Text } from '@aragon/ui'
 import { compareAsc, compareDesc } from 'date-fns'
 
-import { initApolloClient } from '../../utils/apollo-client'
+import { useApolloClient } from '../../utils/apollo-client'
 import useShapedIssue from '../../hooks/useShapedIssue'
 import usePathSegments from '../../hooks/usePathSegments'
-import { STATUS } from '../../utils/github'
 import { getIssuesGQL } from '../../utils/gql-queries.js'
 import { Issue } from '../Card'
 import { EmptyWrapper, FilterBar, LoadingAnimation, Tabs } from '../Shared'
@@ -35,7 +34,7 @@ class Issues extends React.PureComponent {
     filters: PropTypes.object.isRequired,
     graphqlQuery: PropTypes.shape({
       data: PropTypes.object,
-      error: PropTypes.string,
+      error: PropTypes.object,
       loading: PropTypes.bool.isRequired,
       refetch: PropTypes.func,
     }).isRequired,
@@ -350,7 +349,7 @@ class Issues extends React.PureComponent {
 }
 
 const IssuesQuery = ({ client, query, ...props }) => {
-  const graphqlQuery = useQuery(query, { client, onError: console.error })
+  const graphqlQuery = useQuery(query, { client })
   return <Issues graphqlQuery={graphqlQuery} {...props} />
 }
 
@@ -360,16 +359,15 @@ IssuesQuery.propTypes = {
 }
 
 const IssuesWrap = props => {
+  const client = useApolloClient()
   const { appState } = useAragonApi()
   const {
     repos,
     issues = [],
-    github = { status : STATUS.INITIAL },
   } = appState
   const shapeIssue = useShapedIssue()
   const { query: { repoId }, selectIssue } = usePathSegments()
   const { setupNewIssue } = usePanelManagement()
-  const [ client, setClient ] = useState(null)
   const [ downloadedRepos, setDownloadedRepos ] = useState({})
   const [ query, setQuery ] = useState(null)
   const [ filters, setFilters ] = useState({
@@ -416,10 +414,6 @@ const IssuesWrap = props => {
     setQuery(getIssuesGQL(reposQueryParams))
   }, [ downloadedRepos, filters, repos ])
 
-  useEffect(() => {
-    setClient(github.token ? initApolloClient(github.token) : null)
-  }, [github.token])
-
   return (
     <>
       <Header

apps/projects/app/components/Panel/NewIssue/NewIssue.js

@@ -110,7 +110,6 @@ class NewIssue extends React.PureComponent {
         <Mutation
           mutation={NEW_ISSUE}
           variables={{ title, description, id }}
-          onError={console.error}
         >
           {(newIssue, result) => {
             const { data, loading, error, called } = result

apps/projects/app/components/Panel/NewProject/NewProject.js

@@ -123,7 +123,6 @@ const NewProject = () => {
           <Query
             fetchPolicy="cache-first"
             query={GET_REPOSITORIES}
-            onError={console.error}
           >
             {({ data, loading, error, refetch }) => {
               if (data && data.viewer) {

apps/projects/app/hooks/useGithubAuth.js

@@ -1,18 +1,19 @@
 import { useEffect, useState } from 'react'
 import { useAragonApi } from '../api-react'
-import { initApolloClient } from '../utils/apollo-client'
+import { useApolloClient } from '../utils/apollo-client'
 import { CURRENT_USER } from '../utils/gql-queries'
 
 const useGithubAuth = () => {
   const { appState } = useAragonApi()
+  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/store/eventTypes.js

@@ -3,6 +3,7 @@ export const REQUESTING_GITHUB_TOKEN = 'Requesting_GitHub_Token'
 export const REQUESTED_GITHUB_TOKEN_SUCCESS = 'Requesting_GitHub_Token_Success'
 export const REQUESTED_GITHUB_TOKEN_FAILURE = 'Requesting_GitHub_Token_Failure'
 export const REQUESTED_GITHUB_DISCONNECT = 'Requested_GitHub_Disconnect'
+export const GITHUB_TOKEN_REVOKED = 'Github_Token_Revoked'
 
 /* Projects.sol events */
 export const REPO_ADDED = 'RepoAdded'

apps/projects/app/store/events.js

@@ -6,6 +6,7 @@ import {
   REQUESTED_GITHUB_TOKEN_SUCCESS,
   REQUESTED_GITHUB_TOKEN_FAILURE,
   REQUESTED_GITHUB_DISCONNECT,
+  GITHUB_TOKEN_REVOKED,
   REPO_ADDED,
   REPO_REMOVED,
   BOUNTY_ADDED,
@@ -77,6 +78,14 @@ export const handleEvent = async (state, action, vaultAddress, vaultContract, se
     app.cache('github', state.github).toPromise()
     return state
   }
+  case GITHUB_TOKEN_REVOKED: {
+    state.github = {
+      ...INITIAL_STATE.github,
+      status: STATUS.REVOKED,
+    }
+    app.cache('github', state.github).toPromise()
+    return state
+  }
   case REPO_ADDED: {
     return await syncRepos(state, returnValues)
   }

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

@@ -1,16 +1,35 @@
 import ApolloClient from 'apollo-boost'
+import { useAragonApi } from '../api-react'
+import { GITHUB_TOKEN_REVOKED } from '../store/eventTypes'
+import { STATUS } from '../utils/github'
 
-export const initApolloClient = token =>
-  new ApolloClient({
+export const useApolloClient = () => {
+  const {
+    api,
+    appState: {
+      github: { token } = { token: null }
+    }
+  } = useAragonApi()
+  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}`,
-          },
+      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,
         })
       }
-    },
+      else console.error(error)
+    }
   })
+}

apps/projects/app/utils/github.js

@@ -2,6 +2,7 @@ const STATUS = {
   AUTHENTICATED: 'authenticated',
   FAILED: 'failed',
   INITIAL: 'initial',
+  REVOKED: 'revoked',
 }
 // TODO: STATUS.loading with a smooth transition component