Merge pull request hyperledger-archives#25 from eloaverona/with-post-…

…nodes

Submit new node to registry

ui/saplings/circuits/package.json

@@ -41,6 +41,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
+    "react-toast-notifications": "^2.4.0",
     "react-scripts": "3.4.1",
     "rewire": "^4.0.1",
     "splinter-saplingjs": "github:cargill/splinter-saplingjs#master"

ui/saplings/circuits/src/App.js

@@ -26,10 +26,13 @@ import {
   faExclamationCircle,
   faBusinessTime,
   faCheck,
-  faTimes
+  faTimes,
+  faPlusCircle,
+  faMinusCircle
 } from '@fortawesome/free-solid-svg-icons';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { library } from '@fortawesome/fontawesome-svg-core';
+import { ToastProvider } from 'react-toast-notifications';
 
 import MainHeader from './components/MainHeader';
 import { LocalNodeProvider } from './state/localNode';
@@ -46,24 +49,28 @@ library.add(
   faExclamationCircle,
   faBusinessTime,
   faCheck,
-  faTimes
+  faTimes,
+  faPlusCircle,
+  faMinusCircle
 );
 
 function App() {
   return (
     <div className="circuits-app">
       <LocalNodeProvider>
-        <Router>
-          <Switch>
-            <Route exact path="/circuits">
-              <MainHeader />
-              <Content />
-            </Route>
-            <Route path="/circuits/propose">
-              <ProposeCircuitForm />
-            </Route>
-          </Switch>
-        </Router>
+        <ToastProvider>
+          <Router>
+            <Switch>
+              <Route exact path="/circuits">
+                <MainHeader />
+                <Content />
+              </Route>
+              <Route path="/circuits/propose">
+                <ProposeCircuitForm />
+              </Route>
+            </Switch>
+          </Router>
+        </ToastProvider>
       </LocalNodeProvider>
     </div>
   );

ui/saplings/circuits/src/api/requests.js

@@ -42,7 +42,7 @@ export function get(url) {
       });
     };
 
-    request.onError = () => {
+    request.onerror = () => {
       resolve(errorResponse());
     };
 
@@ -53,3 +53,35 @@ export function get(url) {
     request.send();
   });
 }
+
+export function post(url, node, headerFn) {
+  return new Promise(resolve => {
+    const request = new XMLHttpRequest();
+    request.open('POST', url, true);
+    if (headerFn) {
+      headerFn(request);
+    }
+    request.timeout = 5000;
+
+    request.onload = () => {
+      return resolve({
+        ok: request.status >= 200 && request.status < 300,
+        status: request.status,
+        statusText: request.statusText,
+        headers: request.getAllResponseHeaders(),
+        data: request.responseText,
+        json: JSON.parse(request.responseText || '{}')
+      });
+    };
+
+    request.onerror = () => {
+      resolve(errorResponse());
+    };
+
+    request.ontimeout = () => {
+      resolve(errorResponse(request, 'Request took longer than expected.'));
+    };
+
+    request.send(node);
+  });
+}

ui/saplings/circuits/src/api/splinter.js

@@ -15,7 +15,7 @@
  */
 
 import { getSharedConfig } from 'splinter-saplingjs';
-import { get } from './requests';
+import { get, post } from './requests';
 import { NodeRegistryResponse } from '../data/nodeRegistry';
 
 const { splinterURL } = getSharedConfig().canopyConfig;
@@ -56,3 +56,20 @@ export const getNodeRegistry = async () => {
   }
   throw Error(result.data);
 };
+
+export const postNode = async node => {
+  const setHeader = request => {
+    request.setRequestHeader('Content-Type', 'application/json');
+  };
+
+  const result = await post(
+    `${splinterURL}/registry/nodes`,
+    JSON.stringify(node),
+    setHeader
+  );
+
+  if (result.ok) {
+    return node;
+  }
+  throw Error(result.json.message);
+};

ui/saplings/circuits/src/components/OverlayModal.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2018-2020 Cargill Incorporated
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import './OverlayModal.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+export function OverlayModal({ open, closeFn, children }) {
+  return (
+    <div className={classnames('overlay-modal', 'modal', open && 'open')}>
+      {closeFn ? (
+        <FontAwesomeIcon
+          icon={faTimes}
+          className="close"
+          onClick={closeFn}
+          tabIndex="0"
+        />
+      ) : (
+        ''
+      )}
+      <div className="content">{children}</div>
+    </div>
+  );
+}
+
+OverlayModal.defaultProps = {
+  open: false,
+  children: undefined,
+  closeFn: undefined
+};
+
+OverlayModal.propTypes = {
+  open: PropTypes.bool,
+  closeFn: PropTypes.func,
+  children: PropTypes.node
+};

ui/saplings/circuits/src/components/OverlayModal.scss

@@ -0,0 +1,63 @@
+/**
+ * Copyright 2018-2020 Cargill Incorporated
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.overlay-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  background: rgba(30, 30, 30, 0.8);
+  transition: all 0.2s;
+  overflow-y: auto;
+
+  .content {
+    display: none;
+    width: auto;
+    width: 60%;
+    height: 80%;
+    position: relative;
+    top: 10%;
+    margin: auto;
+    background: #ffffff;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-y: auto;
+  }
+
+  &.open {
+    visibility: visible;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+
+    .close,
+    .content {
+      display: block;
+    }
+  }
+}
+
+
+@media only screen and (max-width: 600px) {
+  .overlay-modal {
+    .content {
+      max-width: 80%;
+    }
+  }
+}

ui/saplings/circuits/src/components/forms/MultiStepForm.js

@@ -89,7 +89,7 @@ export function MultiStepForm({
         </div>
       </div>
       <div className="form-wrapper">
-        <form className="form">
+        <form className="steps-form">
           {children.map(child =>
             React.cloneElement(child, { currentStep: step })
           )}

ui/saplings/circuits/src/components/forms/MultiStepForm.scss

@@ -144,7 +144,7 @@
     align-items: center;
     justify-content: space-between;
 
-    form {
+    .steps-form {
       display: flex;
       flex-direction: column;
       flex: 0 1 100%;
@@ -209,7 +209,7 @@
       flex: unset;
       width: 100%;
 
-      .form {
+      .steps-form {
         padding: 2% 0 2% 2%;
       }
     }