From 06ff6555fc0ca2f99ea2f3fbf1a1c688242ad819 Mon Sep 17 00:00:00 2001 From: Jason Healy Date: Thu, 23 Jan 2020 12:11:42 +0000 Subject: [PATCH] feat: Global state for identity --- .../client/src/context/AppProvider.tsx | 28 ++++ examples/react-graphql/client/src/index.tsx | 39 +++-- .../client/src/layout/Layout.tsx | 2 - .../react-graphql/client/src/styles/base.css | 16 +- .../src/views/Identity/IdentitiyManager.tsx | 114 ++++++------- .../src/views/Identity/IdentityDetail.tsx | 154 ++---------------- 6 files changed, 121 insertions(+), 232 deletions(-) create mode 100644 examples/react-graphql/client/src/context/AppProvider.tsx diff --git a/examples/react-graphql/client/src/context/AppProvider.tsx b/examples/react-graphql/client/src/context/AppProvider.tsx new file mode 100644 index 000000000..d1cb12c74 --- /dev/null +++ b/examples/react-graphql/client/src/context/AppProvider.tsx @@ -0,0 +1,28 @@ +import React, { useState, createContext } from 'react' + +export const AppContext = createContext({}) + +interface AppState { + defaultDid: string +} + +export const AppProvider = (props: any) => { + const defaultDid = localStorage.getItem('defaultId') || '' + + const [appState, setGlobalState] = useState({ + defaultDid: defaultDid, + }) + + const setDefaultDid = (did: string) => { + localStorage.setItem('defaultId', did) + + const newState = { + ...appState, + defaultDid: did, + } + + setGlobalState(newState) + } + + return {props.children} +} diff --git a/examples/react-graphql/client/src/index.tsx b/examples/react-graphql/client/src/index.tsx index e1fbe207d..131ffe013 100644 --- 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( - - - - - - - , + + + + + + + + + , document.getElementById('root'), ) diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx index 679a56784..4f1dfdb3f 100644 --- 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 = () => { - const [sidePanelOpen, toggleSidePanel] = useState(true) - return ( diff --git a/examples/react-graphql/client/src/styles/base.css b/examples/react-graphql/client/src/styles/base.css index f85a4156f..1cfb9a43d 100644 --- a/examples/react-graphql/client/src/styles/base.css +++ b/examples/react-graphql/client/src/styles/base.css @@ -34,6 +34,10 @@ 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; @@ -41,16 +45,6 @@ ul.left-nav-list { 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 index d751dd719..031ebc19e 100644 --- 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 ( @@ -59,8 +37,12 @@ const Component = () => { headerBorder={0} headerRight={ - - + } > @@ -69,28 +51,38 @@ const Component = () => { DID Type - Name - Time + Short ID + Default - {identities.map(identity => { - const isSelected = identity.did === id - return ( + {managedIdentitiesData?.managedIdentities?.map( + (identity: { did: string; type: string; shortId: string; name: string }) => ( history.push(`${url}/${identity.did}`)} + className={`interactive_table_row ${ + highlightedIdentity === identity.did ? 'highlighted' : '' + }`} + onClick={() => showIdentityDetail(identity.did)} > {identity.did} - ethr-did-fs - {identity.name} - Jack + {identity.type} + {identity.shortId} + + {defaultDid === identity.did && } + - ) - })} + ), + )} + + {managedIdentitiesData?.managedIdentityTypes?.map((type: string) => ( + + ))} + ) diff --git a/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx b/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx index 48d24c8de..c22ba80c2 100644 --- a/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx +++ b/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx @@ -1,10 +1,13 @@ -import React from 'react' -import { Box, Heading, Field, Input, Icon, Flash } from 'rimble-ui' +import React, { useContext } from 'react' +import { Box, Heading, Field, Input, Icon, Flash, Button } from 'rimble-ui' import { useParams, useHistory } from 'react-router-dom' +import { AppContext } from '../../context/AppProvider' const Component = () => { let { id } = useParams() let history = useHistory() + const [appState, setDefaultDid] = useContext(AppContext) + const { defaultDid } = appState return ( @@ -21,149 +24,20 @@ const Component = () => { history.push('/identities')} /> - - {id} - - - DID + DID Details - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + did + + {id} + )