feat: GraphQL client settings: apiUrl, apiKey

examples/react-graphql/client/src/components/ActivityItem/ActivityItem.tsx

@@ -28,7 +28,7 @@ interface Props {
   /**
    * The viewer's did
    */
-  viewerDid: Types.Identity
+  viewerDid: string
 
   /**
    * The issuer of this message item

examples/react-graphql/client/src/components/Request/Request.tsx

@@ -30,7 +30,7 @@ const Component: React.FC<Props> = ({ sdr, from, to, threadId, close }) => {
   const [sending, updateSending] = useState<boolean>(false)
   const [selected, updateSelected] = useState<ValidationState>({})
   const [formValid, setValid] = useState(true)
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
 
   const checkValidity = () => {
     let valid = true

examples/react-graphql/client/src/context/AppProvider.tsx

@@ -1,28 +1,78 @@
 import React, { useState, createContext } from 'react'
 
-export const AppContext = createContext<AppState | any>({})
+export interface IAppContext {
+  appState: AppState
+  setDefaultDid: (defaultDid: string) => void
+  setApiKey: (apiKey: string) => void
+  setApiUrl: (apiUrl: string) => void
+}
+
+export const AppContext = createContext<IAppContext>({
+  appState: {
+    defaultDid: '',
+    apiUrl: '',
+    apiKey: ''
+  },
+  setDefaultDid: (defaultDid: string) => {},
+  setApiKey: (apiKey: string) => {},
+  setApiUrl: (apiUrl: string) => {}
+})
 
 interface AppState {
   defaultDid: string
+  apiUrl: string
+  apiKey: string
 }
 
 export const AppProvider = (props: any) => {
   const defaultDid = localStorage.getItem('defaultId') || ''
+  const apiUrl = localStorage.getItem('apiUrl') || 'http://localhost:4000/'
+  const apiKey = localStorage.getItem('apiKey') || 'hardcoded-example-token'
 
   const [appState, setGlobalState] = useState<AppState>({
-    defaultDid: defaultDid,
+    defaultDid,
+    apiKey,
+    apiUrl
   })
 
-  const setDefaultDid = (did: string) => {
-    localStorage.setItem('defaultId', did)
+  const setDefaultDid = (defaultDid: string) => {
+    localStorage.setItem('defaultId', defaultDid)
+
+    const newState = {
+      ...appState,
+      defaultDid,
+    }
+
+    setGlobalState(newState)
+  }
+
+  const setApiUrl = (apiUrl: string) => {
+    localStorage.setItem('apiUrl', apiUrl)
 
     const newState = {
       ...appState,
-      defaultDid: did,
+      apiUrl,
     }
 
     setGlobalState(newState)
   }
 
-  return <AppContext.Provider value={[appState, setDefaultDid]}>{props.children}</AppContext.Provider>
+  const setApiKey = (apiKey: string) => {
+    localStorage.setItem('apiKey', apiKey)
+
+    const newState = {
+      ...appState,
+      apiKey,
+    }
+
+    setGlobalState(newState)
+  }
+
+
+  return <AppContext.Provider value={{
+    appState,
+    setDefaultDid,
+    setApiKey,
+    setApiUrl
+  }}>{props.children}</AppContext.Provider>
 }

examples/react-graphql/client/src/context/GraphQLProvider.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react'
+import { ApolloProvider } from 'react-apollo'
+import ApolloClient from 'apollo-boost'
+import { AppContext } from './AppProvider'
+
+
+export const GraphQLProvider = (props: any) => {
+
+  const { appState } = useContext(AppContext)
+
+  const client = new ApolloClient({
+    uri: appState.apiUrl,
+
+    // Authorization is out of scope for this example,
+    // but this is where you could add your auth logic
+    request: operation => {
+      const token = appState.apiKey
+      operation.setContext({
+        headers: {
+          Authorization: token ? `Bearer ${token}` : '',
+        },
+      })
+    },
+  })
+
+
+
+  return <ApolloProvider client={client}>{props.children}</ApolloProvider>
+}

examples/react-graphql/client/src/index.tsx

@@ -1,33 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Layout from './layout/Layout'
-import ApolloClient from 'apollo-boost'
-import { ApolloProvider } from 'react-apollo'
 import * as serviceWorker from './serviceWorker'
 import { BaseStyles, theme, ToastMessage } from 'rimble-ui'
 import { ThemeProvider } from 'styled-components'
 import { AppProvider } from './context/AppProvider'
+import { GraphQLProvider } from './context/GraphQLProvider'
 
 import '../src/styles/base.css'
 
-const client = new ApolloClient({
-  uri: 'http://localhost:4000/',
-
-  // Authorization is out of scope for this example,
-  // but this is where you could add your auth logic
-  request: operation => {
-    const token = 'hardcoded-example-token'
-    operation.setContext({
-      headers: {
-        authorization: token ? `Bearer ${token}` : '',
-      },
-    })
-  },
-})
-
 ReactDOM.render(
   <AppProvider>
-    <ApolloProvider client={client}>
+    <GraphQLProvider>
       <ThemeProvider
         theme={Object.assign({}, theme, {
           colors: {
@@ -45,7 +29,7 @@ ReactDOM.render(
           <Layout />
         </BaseStyles>
       </ThemeProvider>
-    </ApolloProvider>
+    </GraphQLProvider>
   </AppProvider>,
   document.getElementById('root'),
 )

examples/react-graphql/client/src/layout/Layout.tsx

@@ -16,6 +16,7 @@ import NavigationLeft from './NavigationLeft'
 
 import Credential from '../components/Credential/Credential'
 import RequestDetail from '../components/Request/Request'
+import Settings from '../views/Settings/Settings'
 
 import * as queries from '../gql/queries'
 
@@ -58,6 +59,9 @@ const Dashboard: React.FC<DashboardProps> = () => {
             <Route path="/connections">
               <Connections />
             </Route>
+            <Route path="/settings">
+              <Settings />
+            </Route>
           </Switch>
         </Box>
 

examples/react-graphql/client/src/layout/NavigationLeft.tsx

@@ -28,6 +28,9 @@ const Component = () => {
         <li className={'left-nav-item'}>
           <NavLink to="/connections">Connections</NavLink>
         </li>
+        <li className={'left-nav-item'}>
+          <NavLink to="/settings">Settings</NavLink>
+        </li>
       </ul>
     </Box>
   )

examples/react-graphql/client/src/layout/SidePanel.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQuery }) => {
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
   const history = useHistory()
   const { id } = useParams()
 

examples/react-graphql/client/src/layout/Sidebar.tsx

@@ -6,7 +6,7 @@ import * as queries from '../gql/queries'
 import { useQuery } from 'react-apollo'
 
 const Component = () => {
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
   const { data } = useQuery(queries.identity, { variables: { did: appState.defaultDid } })
 
   return (

examples/react-graphql/client/src/views/Activity/Activity.tsx

@@ -11,7 +11,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom'
 interface Activity {}
 
 const Activity: React.FC<Activity> = () => {
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
   const history = useHistory()
   const { url } = useRouteMatch()
 

examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx

@@ -13,7 +13,7 @@ const Component = () => {
   const history = useHistory()
   const { url } = useRouteMatch()
   const [highlightedIdentity, highlightIdentity] = useState()
-  const [appState, setDefaultDid] = useContext(AppContext)
+  const { appState, setDefaultDid } = useContext(AppContext)
   const { defaultDid } = appState
   const { data: managedIdentitiesData } = useQuery(queries.managedIdentities)
   const [createIdentity] = useMutation(mutations.createIdentity, {

examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx

@@ -11,7 +11,7 @@ interface IdentityDetail {}
 const Component: React.FC<IdentityDetail> = () => {
   let { id } = useParams()
   let history = useHistory()
-  const [appState, setDefaultDid] = useContext(AppContext)
+  const { appState, setDefaultDid } = useContext(AppContext)
   const { defaultDid } = appState
   const [deleteIdentity] = useMutation(mutations.deleteIdentity, {
     refetchQueries: [{ query: queries.managedIdentities }],
@@ -46,7 +46,7 @@ const Component: React.FC<IdentityDetail> = () => {
               ? 'This is your current default identity'
               : 'Set this DID as the default identity'}
           </Text>
-          <Button mt={3} mb={3} mr={3} onClick={() => setDefaultDid(id)} disabled={defaultDid === id}>
+          <Button mt={3} mb={3} mr={3} onClick={() => setDefaultDid(id || '')} disabled={defaultDid === id}>
             Set as default
           </Button>
         </Box>

examples/react-graphql/client/src/views/Issue/Issue.tsx

@@ -14,7 +14,7 @@ declare global {
 }
 
 const Component = () => {
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
   const [isSending, setIsSending] = useState(false)
   const [receiver, setReceiver] = useState('did:web:uport.me')
   const [claimType, setClaimType] = useState('name')

examples/react-graphql/client/src/views/Request/Request.tsx

@@ -14,7 +14,7 @@ declare global {
 }
 
 const Component = () => {
-  const [appState] = useContext(AppContext)
+  const { appState } = useContext(AppContext)
   const [isSending, setIsSending] = useState(false)
   const [receiver, setReceiver] = useState('did:web:uport.me')
   const [claims, updateClaims] = useState<any>([])

examples/react-graphql/client/src/views/Settings/Settings.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useState } from 'react'
+import { Box, Heading, Input, Field, Button, Flex, Form } from 'rimble-ui'
+import Page from '../../layout/Page'
+import Avatar from '../../components/Avatar/Avatar'
+import * as Types from '../../types'
+import Panel from '../../components/Panel/Panel'
+import { AppContext } from '../../context/AppProvider'
+
+const Component = () => {
+  const { appState, setApiKey, setApiUrl } = useContext(AppContext)
+  const [ newApiKey, setNewApiKey ] = useState(appState.apiKey)
+  const [ newApiUrl, setNewApiUrl ] = useState(appState.apiUrl)
+
+  const handleSave = () => {
+    setApiKey(newApiKey)
+    setApiUrl(newApiUrl)
+  }
+
+  return (
+    <Page title={'Settings'}>
+
+      <Box p={3}>
+        <Panel heading={'API details'}>
+
+
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box width={1} px={3}>
+
+              <Field label="API URL">
+                <Input
+                  border={0}
+                  type="text"
+                  required
+                  backgroundColor={'#313131'}
+                  value={newApiUrl}
+                  onChange={(e: any) => setNewApiUrl(e.target.value)}
+                />
+              </Field>
+            </Box>
+          </Flex>
+
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box width={1} px={3}>
+
+              <Field label="API Key">
+                <Input
+                  border={0}
+                  type="text"
+                  required
+                  backgroundColor={'#313131'}
+                  value={newApiKey}
+                  onChange={(e: any) => setNewApiKey(e.target.value)}
+                />
+              </Field>
+              </Box>
+          </Flex>
+
+        </Panel>
+        <Button onClick={handleSave}>Save</Button>
+      </Box>
+    </Page>
+  )
+}
+
+export default Component