feat: Global state for identity

decentralized-identity · Jan 24, 2020 · 06ff655 · 06ff655
1 parent 19236cd
commit 06ff655
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 232 deletions.
diff --git a/examples/react-graphql/client/src/context/AppProvider.tsx b/examples/react-graphql/client/src/context/AppProvider.tsx
@@ -0,0 +1,28 @@
+import React, { useState, createContext } from 'react'
+
+export const AppContext = createContext<AppState | any>({})
+
+interface AppState {
+  defaultDid: string
+}
+
+export const AppProvider = (props: any) => {
+  const defaultDid = localStorage.getItem('defaultId') || ''
+
+  const [appState, setGlobalState] = useState<AppState>({
+    defaultDid: defaultDid,
+  })
+
+  const setDefaultDid = (did: string) => {
+    localStorage.setItem('defaultId', did)
+
+    const newState = {
+      ...appState,
+      defaultDid: did,
+    }
+
+    setGlobalState(newState)
+  }
+
+  return <AppContext.Provider value={[appState, setDefaultDid]}>{props.children}</AppContext.Provider>
+}
diff --git a/examples/react-graphql/client/src/index.tsx b/examples/react-graphql/client/src/index.tsx
@@ -6,6 +6,7 @@ import { ApolloProvider } from 'react-apollo'
 import * as serviceWorker from './serviceWorker'
 import { BaseStyles, theme } from 'rimble-ui'
 import { ThemeProvider } from 'styled-components'
+import { AppProvider } from './context/AppProvider'
 
 import '../src/styles/base.css'
 
@@ -25,24 +26,26 @@ const client = new ApolloClient({
 })
 
 ReactDOM.render(
-  <ApolloProvider client={client}>
-    <ThemeProvider
-      theme={Object.assign({}, theme, {
-        colors: {
-          ...theme.colors, // keeps existing colors
-          text: '#EEE', // sets color for text
-          background: '#222', // sets color for background
-          primary: '#3259D6', // sets primary color
-        },
-        fontSizes: [12, 14, 16, 20, 24, 32, 48, 64], // sets font scale
-        space: [0, 4, 8, 16, 32, 64, 128, 256], // sets spacing scale
-      })}
-    >
-      <BaseStyles id="base_styles_container">
-        <Layout />
-      </BaseStyles>
-    </ThemeProvider>
-  </ApolloProvider>,
+  <AppProvider>
+    <ApolloProvider client={client}>
+      <ThemeProvider
+        theme={Object.assign({}, theme, {
+          colors: {
+            ...theme.colors, // keeps existing colors
+            text: '#EEE', // sets color for text
+            background: '#222', // sets color for background
+            primary: '#3259D6', // sets primary color
+          },
+          fontSizes: [12, 14, 16, 20, 24, 32, 48, 64], // sets font scale
+          space: [0, 4, 8, 16, 32, 64, 128, 256], // sets spacing scale
+        })}
+      >
+        <BaseStyles id="base_styles_container">
+          <Layout />
+        </BaseStyles>
+      </ThemeProvider>
+    </ApolloProvider>
+  </AppProvider>,
   document.getElementById('root'),
 )
 

diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -18,8 +18,6 @@ import NavigationLeft from './NavigationLeft'
 interface DashboardProps {}
 
 const Dashboard: React.FC<DashboardProps> = () => {
-  const [sidePanelOpen, toggleSidePanel] = useState(true)
-
   return (
     <Router>
       <Flex flexDirection={'row'} flex={1}>

diff --git a/examples/react-graphql/client/src/styles/base.css b/examples/react-graphql/client/src/styles/base.css
@@ -34,23 +34,17 @@ tr.interactive_table_row:hover {
   background-color: #313131;
   cursor: pointer;
 }
+tr.interactive_table_row.highlighted {
+  background-color: #1c2131;
+  cursor: pointer;
+}
 
 ul.left-nav-list {
   padding: 0;
   margin: 0;
   list-style-type: none;
 }
 
-/* li.left-nav-item {
-  padding: 8px;
-  margin-bottom: 10px;
-  list-style-type: none;
-  background-color: #222222;
-  text-decoration: none;
-  border-radius: 5px;
-  padding-left: 16px;
-} */
-
 li.left-nav-item a {
   text-decoration: none;
   color: #f5f5f5;
@@ -65,6 +59,6 @@ li.left-nav-item a {
 }
 
 li.left-nav-item a.active {
-  background-color: #a51699;
+  background-color: #3259d6;
   font-weight: bold;
 }
diff --git a/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx b/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx
@@ -1,56 +1,34 @@
-import React from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Panel from '../../components/Panel/Panel'
 import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
-
-const identities = [
-  {
-    did: 'did:ethr:0x49a8246758f8d28e348318183d9498496074ca71',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xd24400ae8bfebb18ca49be86258a3c749cf46853',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0x4f509786981ed37a6b2c693d75dfd0202a4bfb57',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xcd959e71449425f6e4ac814b7f5aebde93012e24',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xc257274276a4e539741ca11b590b9447b26a8051',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0x64db1b94a0304e4c27de2e758b2f962d09dfe503',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xc257274276a4e539741ca11b590b9447b26a8051',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0x2140efd7ba31169c69dfff6cdc66c542f0211825',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xc257274276a4e539741ca11b590b9447b26a8051',
-    name: 'Jack Sparrow',
-  },
-  {
-    did: 'did:ethr:0xc257274276a4e539741ca11b590b9447b26a8051',
-    name: 'Jack Sparrow',
-  },
-]
+import * as queries from '../../queries'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import { AppContext } from '../../context/AppProvider'
 
 const Component = () => {
-  let history = useHistory()
-  let { url } = useRouteMatch()
-  let { id } = useParams()
+  const history = useHistory()
+  const { url } = useRouteMatch()
+  const [highlightedIdentity, highlightIdentity] = useState()
+  const [appState] = useContext(AppContext)
+  const { defaultDid } = appState
+  const { data: managedIdentitiesData } = useQuery(queries.managedIdentities)
+  const [createIdentity] = useMutation(queries.createIdentity, {
+    refetchQueries: [{ query: queries.managedIdentities }],
+  })
+
+  const showIdentityDetail = (did: string) => {
+    highlightIdentity(did)
+
+    history.push(`${url}/${did}`)
+  }
+
+  console.log(appState)
+
+  // useEffect(() => {
+  //   highlightIdentity(null)
+  // }, [])
 
   return (
     <Page title={'Identity Manger'}>
@@ -59,8 +37,12 @@ const Component = () => {
         headerBorder={0}
         headerRight={
           <Box>
-            <Button icononly icon={'Search'} size={'small'} mr={1}></Button>
-            <Button icononly icon={'Add'} size={'small'}></Button>
+            <Button
+              icononly
+              icon={'Add'}
+              size={'small'}
+              onClick={() => createIdentity({ variables: { type: 'ethr-did-fs' } })}
+            ></Button>
           </Box>
         }
       >
@@ -69,28 +51,38 @@ const Component = () => {
             <tr>
               <th>DID</th>
               <th>Type</th>
-              <th>Name</th>
-              <th>Time</th>
+              <th>Short ID</th>
+              <th>Default</th>
             </tr>
           </thead>
           <tbody>
-            {identities.map(identity => {
-              const isSelected = identity.did === id
-              return (
+            {managedIdentitiesData?.managedIdentities?.map(
+              (identity: { did: string; type: string; shortId: string; name: string }) => (
                 <tr
                   key={identity.did}
-                  className={`interactive_table_row ${isSelected ? 'selected' : ''}`}
-                  onClick={() => history.push(`${url}/${identity.did}`)}
+                  className={`interactive_table_row ${
+                    highlightedIdentity === identity.did ? 'highlighted' : ''
+                  }`}
+                  onClick={() => showIdentityDetail(identity.did)}
                 >
                   <td>{identity.did}</td>
-                  <td>ethr-did-fs</td>
-                  <td>{identity.name}</td>
-                  <td>Jack</td>
+                  <td>{identity.type}</td>
+                  <td>{identity.shortId}</td>
+                  <td className={'icon_cell'}>
+                    {defaultDid === identity.did && <Icon name={'Check'} color={'green'} />}
+                  </td>
                 </tr>
-              )
-            })}
+              ),
+            )}
           </tbody>
         </Table>
+        <Box pl={4}>
+          {managedIdentitiesData?.managedIdentityTypes?.map((type: string) => (
+            <Button mt={3} mb={3} mr={3} key={type} onClick={() => createIdentity({ variables: { type } })}>
+              Create {type} DID
+            </Button>
+          ))}
+        </Box>
       </Panel>
     </Page>
   )