feat: Activity feed

decentralized-identity · Jan 24, 2020 · 50bc5d5 · 50bc5d5
1 parent 85eb66c
commit 50bc5d5
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 11 deletions.
diff --git a/examples/react-graphql/client/src/components/Credential/Credential.tsx b/examples/react-graphql/client/src/components/Credential/Credential.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+import Page from '../../layout/Page'
+
+interface Props {
+  onClick?: () => void
+}
+
+const Component: React.FC<Props> = ({ onClick }) => {
+  return (
+    <Box border={1} borderRadius={5} borderColor={'#555555'} p={3} maxWidth={350} mb={16} onClick={onClick}>
+      <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
+        <Avatar size={'40'} src={''} />
+        <Box ml={2}>
+          <Text fontWeight={'bold'}>Simon</Text>
+          <Box flexDirection={'row'} display={'flex'}>
+            <Icon name={'PlayArrow'} />
+            <Text>Mircea</Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default Component
diff --git a/examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx b/examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+
+import Credential from '../../components/Credential/Credential'
+
+interface Props {
+  credentialAction?: () => void
+}
+
+const Component: React.FC<Props> = ({ credentialAction }) => {
+  return (
+    <Box>
+      <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
+        <Avatar size={'50'} src="https://airswap-token-images.s3.amazonaws.com/DAI.png" />
+        <Box ml={2}>
+          <Text>
+            <b>Simon</b> sent 4 credentials to <b>Mircea</b>
+          </Text>
+        </Box>
+      </Box>
+      <Box p={3} pl={4}>
+        <Credential onClick={credentialAction} />
+        <Credential onClick={credentialAction} />
+        <Credential onClick={credentialAction} />
+        <Credential onClick={credentialAction} />
+      </Box>
+    </Box>
+  )
+}
+
+export default Component
diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useQuery, useMutation } from '@apollo/react-hooks'
 
 import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui'
-import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
+import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom'
 
 import Activity from '../views/Activity/Activity'
 import Explore from '../views/Explore/Explore'
@@ -14,6 +14,7 @@ import Issue from '../views/Issue/Issue'
 
 import Sidebar from './Sidebar'
 import NavigationLeft from './NavigationLeft'
+import Credential from '../components/Credential/Credential'
 
 interface DashboardProps {}
 
@@ -26,6 +27,9 @@ const Dashboard: React.FC<DashboardProps> = () => {
         <Box flex={1} bg="#1C1C1C">
           <Switch>
             <Route exact path="/">
+              <Redirect to="/activity" />
+            </Route>
+            <Route path="/activity">
               <Activity />
             </Route>
             <Route path="/explore">
@@ -47,9 +51,12 @@ const Dashboard: React.FC<DashboardProps> = () => {
         </Box>
 
         <Switch>
-          <Route path="/identities/:id">
+          <Route path="*/user/:id">
             <IdentityDetail />
           </Route>
+          <Route path="/credential/:id">
+            <Credential />
+          </Route>
         </Switch>
       </Flex>
     </Router>

diff --git a/examples/react-graphql/client/src/layout/NavigationLeft.tsx b/examples/react-graphql/client/src/layout/NavigationLeft.tsx
@@ -11,9 +11,7 @@ const Component = () => {
       </Box>
       <ul className={'left-nav-list'}>
         <li className={'left-nav-item'}>
-          <NavLink exact to="/">
-            Activity
-          </NavLink>
+          <NavLink to="/activity">Activity</NavLink>
         </li>
         <li className={'left-nav-item'}>
           <NavLink to="/explore">Explore</NavLink>

diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts
@@ -59,6 +59,7 @@ export const allMessages = gql`
         }
         vc {
           rowId
+          hash
           fields {
             type
             value

diff --git a/examples/react-graphql/client/src/views/Activity/Activity.tsx b/examples/react-graphql/client/src/views/Activity/Activity.tsx
@@ -13,19 +13,23 @@ import {
   Loader,
   QR,
   Modal,
+  Avatar,
 } from 'rimble-ui'
-import Panel from '../../components/Panel/Panel'
+import MessageItem from '../../components/MessageItem/MessageItem'
 import Page from '../../layout/Page'
 import * as queries from '../../queries'
 import { AppContext } from '../../context/AppProvider'
 import { useQuery } from '@apollo/react-hooks'
+import { useHistory, useRouteMatch } from 'react-router-dom'
 
 interface Activity {}
 
 const Activity: React.FC<Activity> = () => {
   const [appState] = useContext(AppContext)
   const [isQROpen, setIsQROpen] = useState(false)
   const [qrValue, setQrValue] = useState('')
+  const history = useHistory()
+  const { url } = useRouteMatch()
 
   const { loading: messagesLoading, data: messagesData } = useQuery(queries.allMessages, {
     variables: { activeDid: appState.defaultDid },
@@ -49,8 +53,44 @@ const Activity: React.FC<Activity> = () => {
         />
         <QR value={qrValue} size={500} />
       </Modal>
-      <Panel heading={'Messages'} headerBorder={0}>
-        <Table border={0} color={'#FFFFFF'} borderColor={'#4B4B4B'}>
+
+      <MessageItem
+        credentialAction={() =>
+          history.push(
+            `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`,
+          )
+        }
+      />
+      <MessageItem
+        credentialAction={() =>
+          history.push(
+            `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`,
+          )
+        }
+      />
+      <MessageItem
+        credentialAction={() =>
+          history.push(
+            `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`,
+          )
+        }
+      />
+      <MessageItem
+        credentialAction={() =>
+          history.push(
+            `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`,
+          )
+        }
+      />
+      <MessageItem
+        credentialAction={() =>
+          history.push(
+            `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`,
+          )
+        }
+      />
+
+      {/* <Table border={0} color={'#FFFFFF'} borderColor={'#4B4B4B'}>
           <thead>
             <tr>
               <th>Sender</th>
@@ -91,8 +131,7 @@ const Activity: React.FC<Activity> = () => {
               </tr>
             ))}
           </tbody>
-        </Table>
-      </Panel>
+        </Table> */}
     </Page>
   )
 }

diff --git a/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx b/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx
@@ -21,7 +21,7 @@ const Component = () => {
   const showIdentityDetail = (did: string) => {
     highlightIdentity(did)
 
-    history.push(`${url}/${did}`)
+    history.push(`${url}/user/${did}`)
   }
 
   console.log(appState)
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ export const allMessages = gql` @@
             }
             vc {
               rowId
+              hash
               fields {
                 type
                 value
@@ Expand Down @@