new component added in to the snet

README.md

@@ -1,6 +1,6 @@
 # snet-dapp
 
-This Dapp allows you to browse the list of services from the SingularityNET Registry and call them.
+This Dapp allows you to browse the list of services from the SingularityNET Registry and call them. Once you register and publish the AI service in the publisher portal it reflect in the snet-dapp.
 The beta dapp is under active development and will see several changes in the upcoming weeks
 
 ## How to call a Service
@@ -88,3 +88,17 @@ For the following [proto file](https://github.com/singnet/example-service/blob/m
 
         npm run sandbox
 
+
+## Frequently Asked Questions
+
+Q:While creating the js files from proto file protoc-gen-grpc :unknown option:--js_out
+A:Add the protoc-gen-grpc.exe in to the programm files and to the system environment variables
+
+Q:During the creation of js files from the proto --grpc_out: options:mode is required
+A:Add mode --grpc_out=mode=grpcwebtext 
+
+Q:For windows machine faced the eslint issues
+A:For temporarly solving this issue, disable the eslint using this command /*eslint-disable */
+
+Q: While publishing the service in to the publisher portal the metamask interaction looks    failed with enough Ropsten ETH  (It shown Not able to estimate gas)
+

src/assets/thirdPartyServices/index.js

@@ -1,6 +1,8 @@
+import { add } from "lodash";
 import React, { lazy } from "react";
 import AlertBox from "../../components/common/AlertBox";
 
+const ClientData = lazy(() => import("./snet/client_data"));
 const ExampleService = lazy(() => import("./snet/example_service"));
 const CNTKImageRecognition = lazy(() => import("./snet/cntk_image_recon"));
 const CNTKNextDayTrend = lazy(() => import("./snet/cntk_next_day_trend"));
@@ -106,6 +108,7 @@ const addNunetCustomUI = (serviceId, CustomUIComponent) => {
   thirdPartyCustomUIComponents.addCustomUIComponent("nunet", serviceId, CustomUIComponent);
 };
 
+addSnetCustomUI("client-data", ClientData);
 addSnetCustomUI("example-service", ExampleService);
 addSnetCustomUI("freecall", ExampleService);
 addSnetCustomUI("cntk-image-recon", CNTKImageRecognition);
@@ -192,4 +195,7 @@ thirdPartyCustomUIComponents.addCustomUIComponent("org_id_test_praveen", "test_c
 // For testing phase 2 ropsten
 thirdPartyCustomUIComponents.addCustomUIComponent("new_contract_test_1", "speed_detector_rt_v2", ExampleService);
 
+// thirdPartyCustomUIComponents.addCustomUIComponent("org_id", "service_id", ExampleService);
+thirdPartyCustomUIComponents.addCustomUIComponent("snet","test_data_client_data",ClientData);
+
 export default thirdPartyCustomUIComponents;

src/assets/thirdPartyServices/snet/client_data/index.js

@@ -0,0 +1,191 @@
+/*eslint-disable*/
+import React, { Fragment } from "react";
+import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
+import { Checkbox,FormControlLabel } from "@material-ui/core";
+import * as grpcWeb from 'grpc-web';
+
+
+import OutlinedTextArea from "../../common/OutlinedTextArea";
+import OutlinedDropDown from "../../common/OutlinedDropdown";
+
+let todos = [
+  { id : '1',title : 'Todo 1',iscompleted : false },
+
+]
+const grpc = {};
+grpc.web = require('grpc-web');
+const methodDescriptor_TodoService_List = require('./todo_grpc_web_pb');
+const  methodDescriptor_TodoService_Insert = require('./todo_grpc_web_pb');
+const TodoServiceClient = require('./todo_grpc_web_pb');
+const getTodoList = require('./todo_pb');
+
+// let data = methodDescriptor_TodoService_List.TodoList;
+// let insert = methodDescriptor_TodoService_Insert.Todo;
+let data_data = TodoServiceClient.TodoList;
+let insert_insert = TodoServiceClient.Todo;
+
+
+const initialUserInput = {
+  methodIndex: "0",
+  methodNames: [
+    {
+      label: "ListData",
+      content: "List",
+      value: "0",
+    },
+    {
+      label: "InsertData",
+      content: "insert",
+      value: "1",
+    },
+  ],
+    string_id : 0,
+    string_title : "0",
+    bool_iscompleted : false,
+  };
+
+export default class ClientData extends React.Component{
+    constructor(props){
+        super(props);
+        this.submitAction = this.submitAction.bind(this);
+        this.handleFormUpdate = this.handleFormUpdate.bind(this);
+        this.state = {...initialUserInput};
+    }
+    handleFormUpdate(event){
+        this.setState({
+            [event.target.name]:
+            event.target.value,
+        });
+
+    }
+
+    handleChangeCheckbox = e => this.setState({ bool_iscompleted: e.target.checked });
+
+
+
+  submitAction() {
+    console.log('hai');
+    const { methodIndex, methodNames } = this.state;
+    // const methodDescriptor = TodoServiceClient[methodNames[methodIndex].content];
+    const methodDescriptor = TodoServiceClient[methodNames[methodIndex].content];
+
+    console.log('75');
+    console.log(methodDescriptor);
+    console.log(grpcWeb.MethodType);
+    const request = new methodDescriptor.TodoList();
+
+    console.log('76');
+    // request.string_id('1');
+    // request.string_title('Todo1');
+    // request.bool_iscompleted(false);
+
+    const props = {
+      request,
+      onEnd: ({ message }) => {
+        this.setState({ ...initialUserInput, response: { value: message.getTodoList() } });
+      },
+    };
+    console.log('86');
+    this.props.serviceClient.unary(methodDescriptor, props);
+  }
+  // handleFocus = event => event.target.select();
+
+    renderForm(){
+        return(
+            <React.Fragment>
+              <Grid container direction="column" alignItems="center" justify="center">
+              <Grid item xs={6} container style={{ textAlign: "center" }}>
+                <OutlinedDropDown
+                id="method"
+                name="methodIndex"
+                label="Method"
+                fullWidth={true}
+                list={this.state.methodNames}
+                value={this.state.methodIndex}
+                onChange={this.handleFormUpdate}
+                // onFocus={this.handleFocus}
+                />
+              </Grid>
+              {this.state.methodIndex === "1" ?(
+              <Grid item xs={6}>
+                <Grid>
+                <OutlinedTextArea
+                  id="string_id"
+                  name="string_id"
+                  label="String_id"
+                  type="text"
+                  fullWidth={false}
+                  value={this.state.string_id}
+                  onChange={this.handleFormUpdate}
+                  onFocus={this.handleFocus}
+                />
+                </Grid>
+                <Grid>
+                <OutlinedTextArea
+                  id="string_title"
+                  name="string_title"
+                  label="String_title"
+                  type="text"
+                  fullWidth={false}
+                  value={this.state.string_title}
+                  onChange={this.handleFormUpdate}
+                  // onFocus={this.handleFocus}
+                />
+                </Grid>
+                <Grid>
+                <FormControlLabel
+                  control={<Checkbox
+                  id="bool_iscompleted"
+                  name="bool_iscompleted"
+                  onChange={this.handleChangeCheckbox}
+                  checked={this.state.bool_iscompleted}
+                  onFocus={this.handleFocus}
+                />
+                }
+                label="Bool_iscompleted"
+                />
+                </Grid>
+              </Grid>
+              ) : (<></>)}
+              <Grid item xs={12} style={{ textAlign: "center" }}>
+                <Button variant="contained" color="primary" onClick={this.submitAction}>
+                  Invoke
+                </Button>
+              </Grid>
+            </Grid>
+            </React.Fragment>
+        );
+    }
+
+    parseResponse() {
+      const { response } = this.state;
+      if (typeof response !== "undefined") {
+        if (typeof response === "string") {
+          return response;
+        }
+        return response.value;
+      }
+    }
+
+    renderComplete() {
+      const response = this.parseResponse();
+      return (
+        <Grid item xs={12} container justify="center">
+          <p style={{ fontSize: "20px" }}>Response from service: {response} </p>
+        </Grid>
+      );
+    }
+
+    render() {
+      console.log(this.state);
+
+        // return <div>{this.renderForm()}</div>;
+
+        if (this.props.isComplete) return <div>{this.renderComplete()}</div>;
+    else {
+      return <div>{this.renderForm()}</div>;
+    }
+      }
+
+}