phenyl-api-explorer-client - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "phenyl-api-explorer-client",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Client application of phenyl-api-explorer",
@@ -59,2 +59,2 @@ "main": "index.js",
   }
-}
+}

src/components/OperationResult/Response.js

 import React from 'react'
-import { Segment, Message } from 'semantic-ui-react'
+import { Segment, Tab, Message } from 'semantic-ui-react'
 import JSONTree from 'react-json-tree'
@@ -28,9 +28,29 @@
     return (
-      <Segment className='result'>
-        <JSONTree
-          hideRoot
-          shouldExpandNode={() => expanded}
-          data={response}
-        />
-      </Segment>
+      <Tab
+        className='result'
+        panes={[
+          {
+            menuItem: 'Tree view',
+            // eslint-disable-next-line react/display-name
+            render: () => (
+              <Tab.Pane>
+                <JSONTree
+                  hideRoot
+                  shouldExpandNode={() => expanded}
+                  data={response}
+                />
+              </Tab.Pane>
+            )
+          },
+          {
+            menuItem: 'Raw JSON',
+            // eslint-disable-next-line react/display-name
+            render: () => (
+              <Tab.Pane>
+                <pre>{JSON.stringify(response, null, 2)}</pre>
+              </Tab.Pane>
+            )
+          },
+        ]}
+      />
     )
@@ -37,0 +57,0 @@ }

src/containers/LoginModal.js

@@ -10,2 +10,3 @@ /* global PhenylFunctionalGroupSkeleton */
   entityNames: Array<string>,
+  busy: boolean,
   error: ?Error,
@@ -60,3 +61,3 @@ open: boolean,
   render () {
-    const { error, entityNames, open, loginAsAnonymous } = this.props
+    const { error, busy, entityNames, open, loginAsAnonymous } = this.props
 
@@ -106,6 +107,6 @@ return (
         <Modal.Actions>
-          <Button basic color='red' inverted onClick={loginAsAnonymous}>
+          <Button basic color='red' inverted onClick={loginAsAnonymous} disabled={busy}>
             Login as anonymous
           </Button>
-          <Button color='green' inverted onClick={this.handleLogin}>
+          <Button color='green' inverted onClick={this.handleLogin} disabled={busy}>
             <Icon name='checkmark' /> Login
@@ -122,2 +123,3 @@ </Button>
   error: state.user.error,
+  busy: state.user.busy,
 })
@@ -124,0 +126,0 @@

src/modules/user.js

@@ -6,2 +6,3 @@ /* global PhenylFunctionalGroupSkeleton */
 const LOGIN_AS_ANONYMOUS = 'user/LOGIN_AS_ANONYMOUS'
+const LOGIN_REQUEST = 'user/LOGIN_REQUEST'
 const LOGIN_SUCCESS = 'user/LOGIN_SUCCESS'
@@ -12,2 +13,3 @@ const LOGIN_FAILED = 'user/LOGIN_FAILED'
 const initialState = {
+  busy: false,
   displayName: '',
@@ -33,2 +35,3 @@ session: null,
         ...state,
+        busy: false,
         anonymous: true,
@@ -39,2 +42,7 @@ session: null,
       }
+    case LOGIN_REQUEST:
+      return {
+        ...state,
+        busy: true
+      }
     case LOGIN_SUCCESS:
@@ -44,2 +52,3 @@ const { accountPropName } = PhenylFunctionalGroupSkeleton.users[action.session.entityName]
         ...state,
+        busy: false,
         error: null,
@@ -53,2 +62,3 @@ displayName: action.user[accountPropName],
         ...state,
+        busy: false,
         error: action.error,
@@ -70,2 +80,3 @@ }
   try {
+    dispatch(loginRequest())
     const { ok, user, session } = await client.login({
@@ -95,2 +106,6 @@ entityName,
 
+export const loginRequest = () => ({
+  type: LOGIN_REQUEST,
+})
+
 export const loginSuccess = ({ user, session }) => {
@@ -97,0 +112,0 @@ return { type: LOGIN_SUCCESS, user, session }

No alert changes

Improved metrics

Total package byte prevSize

62045

increased by1.52%

Lines of code

1698

increased by2.17%

No dependency changes