add DDO attributes and claims

backslash47 · Apr 12, 2018 · 3bfd192 · 3bfd192
1 parent 45e5601
commit 3bfd192
Show file tree

Hide file tree

Showing 10 changed files with 377 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "ont-sdk-ts": "backslash47/ontology-ts-sdk#exported",
     "query-string": "^6.0.0",
     "react": "^16.2.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts-ts": "2.14.0",
@@ -49,6 +50,7 @@
     "@types/react": "^16.0.40",
     "@types/react-dom": "^16.0.4",
     "@types/react-router-dom": "^4.2.5",
+    "@types/react-copy-to-clipboard": "^4.2.5",
     "@types/recompose": "^0.24.6",
     "@types/ws": "^4.0.2",
     "typescript": "^2.7.2"

diff --git a/src/ontIds/ontIdClaims.tsx → src/ontIds/ontIdAttributes.tsx b/src/ontIds/ontIdClaims.tsx → src/ontIds/ontIdAttributes.tsx
@@ -23,10 +23,10 @@ import { Segment, Table, Popup } from 'semantic-ui-react';
 import { Claim } from '~/shared/ont/model';
 
 type Props = {
-    claims: Claim[]
+    attributes: Claim[]
 };
 
-const OntIds: React.SFC<Props> = (props) => (
+const OntIdAttributes: React.SFC<Props> = (props) => (
     <Segment.Group>
         <Segment>
             <Table celled={false} basic="very" selectable={true} fixed={true}>
@@ -37,19 +37,19 @@ const OntIds: React.SFC<Props> = (props) => (
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {props.claims.map(claim => (
-                        <Table.Row>
+                    {props.attributes.map(attr => (
+                        <Table.Row key={attr.Attribute}>
                             <Table.Cell width={1}>
-                                <Link to={`/transactions/${claim.TxHash}`}>
+                                <Link to={`/transactions/${attr.TxHash}`}>
                                     <Popup 
-                                        trigger={<span>{distanceInWordsToNow(claim.Timestamp)}</span>}
+                                        trigger={<span>{distanceInWordsToNow(attr.Timestamp)}</span>}
                                     >
-                                        {format(claim.Timestamp, 'MMM Do YYYY HH:mm:ss')}
+                                        {format(attr.Timestamp, 'MMM Do YYYY HH:mm:ss')}
                                     </Popup>
                                 </Link>
                             </Table.Cell>
                             <Table.Cell width={1}>
-                                {claim.Attribute}
+                                {attr.Attribute}
                             </Table.Cell>
                         </Table.Row>
                     ))}
@@ -59,4 +59,4 @@ const OntIds: React.SFC<Props> = (props) => (
     </Segment.Group>
 );
 
-export default OntIds;
+export default OntIdAttributes;
diff --git a/src/ontIds/ontIdDdoAttributes.tsx b/src/ontIds/ontIdDdoAttributes.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2018 Matus Zamborsky
+ * This file is part of The ONT Detective.
+ *
+ * The ONT Detective is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The ONT Detective is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with The ONT Detective.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import { Segment, Table, Popup, Button, Icon } from 'semantic-ui-react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { DdoAttribute } from '~/shared/ont/model';
+
+type Props = {
+    attributes: DdoAttribute[]
+};
+
+const DdoAttributes: React.SFC<Props> = (props) => (
+    <Segment.Group>
+        <Segment>
+            <Table celled={false} basic="very" selectable={true} fixed={true}>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell selectable={true} width={6}>Id</Table.HeaderCell>
+                        <Table.HeaderCell selectable={true} width={1}>Type</Table.HeaderCell>
+                        <Table.HeaderCell selectable={true} width={1}>Value</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {props.attributes.map(attr => (
+                        <Table.Row key={attr.Id}>
+                            <Table.Cell>
+                                {attr.Id}
+                            </Table.Cell>
+                            <Table.Cell>
+                                {attr.Type}
+                            </Table.Cell>
+                            <Table.Cell>                                
+                                <Popup 
+                                    trigger={(
+                                        <CopyToClipboard text={attr.Value}>
+                                            <Button icon={true} size="mini">
+                                                <Icon name="copy" />
+                                            </Button>
+                                        </CopyToClipboard>
+                                    )}
+                                >
+                                    <span>{attr.Value}</span>
+                                </Popup>
+
+                            </Table.Cell>
+                        </Table.Row>
+                    ))}
+                </Table.Body>
+            </Table>
+        </Segment>
+    </Segment.Group>
+);
+
+export default DdoAttributes;
diff --git a/src/ontIds/ontIdDdoClaims.tsx b/src/ontIds/ontIdDdoClaims.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2018 Matus Zamborsky
+ * This file is part of The ONT Detective.
+ *
+ * The ONT Detective is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The ONT Detective is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with The ONT Detective.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { distanceInWordsToNow, format } from 'date-fns';
+import { Segment, Table, Popup, Icon, Button } from 'semantic-ui-react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { DdoClaim } from '~/shared/ont/model';
+
+type Props = {
+    claims: DdoClaim[]
+};
+
+const DdoClaims: React.SFC<Props> = (props) => (
+    <Segment.Group>
+        <Segment>
+            <Table celled={false} basic="very" selectable={true} fixed={true}>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell selectable={true} width={6}>Issuer</Table.HeaderCell>
+                        <Table.HeaderCell selectable={true} width={1}>Created</Table.HeaderCell>                        
+                        <Table.HeaderCell selectable={true} width={1}>Content</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {props.claims.map(claim => (
+                        <Table.Row key={claim.Id}>
+                            <Table.Cell>
+                                {claim.Issuer !== null ? (
+                                    <Link to={`/ont-ids/${claim.Issuer}`}>{claim.Issuer}</Link>
+                                ) : null}
+                            </Table.Cell>
+                            <Table.Cell>
+                                {claim.Timestamp !== null ? (
+                                    <Popup 
+                                        trigger={<span>{distanceInWordsToNow(claim.Timestamp)}</span>}
+                                    >
+                                        {format(claim.Timestamp, 'MMM Do YYYY HH:mm:ss')}
+                                    </Popup>
+                                ) : null}
+                            </Table.Cell>
+                            <Table.Cell>
+                                {claim.Content !== null ? (
+                                    <Popup 
+                                        trigger={(
+                                            <CopyToClipboard text={claim.Content}>
+                                                <Button icon={true} size="mini">
+                                                    <Icon name="copy" />
+                                                </Button>
+                                            </CopyToClipboard>
+                                        )}
+                                    >
+                                        <span>{claim.Content}</span>
+                                    </Popup>
+                                ) : null}
+                            </Table.Cell>
+                        </Table.Row>
+                    ))}
+                </Table.Body>
+            </Table>
+        </Segment>
+    </Segment.Group>
+);
+
+export default DdoClaims;
diff --git a/src/ontIds/ontIdDetail.ts b/src/ontIds/ontIdDetail.ts
@@ -21,7 +21,8 @@ import { match } from 'react-router';
 import { Location } from 'history';
 import { StateSetter } from '~/utils';
 import { getOntId } from '~/shared/ontIdApi';
-import { OntId } from '~/shared/ont/model';
+import { getDdo } from '~/shared/ddoApi';
+import { OntId, Ddo } from '~/shared/ont/model';
 import View from './ontIdDetailView';
 
 interface PropsOuter {
@@ -35,6 +36,7 @@ interface PropsOwn {
 
 interface State {
     ontId: OntId;
+    ddo?: Ddo;
     loaded: boolean;
 }
 
@@ -56,6 +58,18 @@ export default compose<PropsInner, PropsOuter>(
                 ontId,
                 loaded: true
             });
+
+            // load ddo if possible
+            try {
+                const ddo = await getDdo(this.props.id);
+
+                this.props.setState({
+                    ...this.props.state,
+                    ddo
+                });
+            } catch (e) {
+                console.log('Failed to load DDO', e);
+            }
         }
     }),
     flattenProp('state')

diff --git a/src/ontIds/ontIdDetailView.tsx b/src/ontIds/ontIdDetailView.tsx
@@ -21,7 +21,9 @@ import { Link } from 'react-router-dom';
 import { Breadcrumb, Segment, Table, Header, Popup, Loader } from 'semantic-ui-react';
 import { distanceInWordsToNow, format } from 'date-fns';
 import { PropsInner as Props } from './ontIdDetail';
-import OntIdClaims from './ontIdClaims';
+import OntIdAttributes from './ontIdAttributes';
+import OntIdDdoAttributes from './ontIdDdoAttributes';
+import OntIdDdoClaims from './ontIdDdoClaims';
 
 const OntIdView: React.SFC<Props> = (props) => (
     <Segment.Group>
@@ -74,8 +76,22 @@ const OntIdView: React.SFC<Props> = (props) => (
         </Segment>
         {props.loaded && props.ontId.ClaimsCount > 0 ? (
             <Segment>
-                <Header as="h2">Claims</Header>
-                    <OntIdClaims claims={props.ontId.Claims}/>
+                <Header as="h2">Attributes</Header>
+                    <OntIdAttributes attributes={props.ontId.Claims}/>
+            </Segment>
+        ) : null}
+
+        {props.loaded && props.ddo !== undefined && props.ddo.Attributes.length > 0 ? (
+            <Segment>
+                <Header as="h2">DDO Attributes</Header>
+                    <OntIdDdoAttributes attributes={props.ddo.Attributes}/>
+            </Segment>
+        ) : null}
+
+        {props.loaded && props.ddo !== undefined && props.ddo.Claims.length > 0 ? (
+            <Segment>
+                <Header as="h2">DDO Claims</Header>
+                    <OntIdDdoClaims claims={props.ddo.Claims}/>
             </Segment>
         ) : null}
     </Segment.Group>