improved ui and added menu

drex44 · Apr 13, 2019 · f5583a0 · f5583a0
1 parent 1d49bd1
commit f5583a0
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -6,12 +6,23 @@
 
 A tool to test websockets until this feature comes to Postman.
 
-We just started working on this so it still has some code from the boilerplate. Kept it to use it as reference. Will remove it soon.
+We just started working on this so it still has some code from the boilerplate. Kept it to use it as
+reference. Will remove it soon.
 
 Help us build it better with your suggestions!
 
 - Suggest a feature submitting new issues
 
+## Features
+
+- Multiple tabs
+- Available on all platforms
+- Automatic save all open requests on close
+- Modern UI thanks to React and Bulma
+- Need more? Raise an issue and tell us!
+
+![Screenshot](/docs/ss1.png)
+
 ## Quick start
 
 1. Clone the repository
@@ -35,11 +46,12 @@ Help us build it better with your suggestions!
 
 ## Contributing
 
-This repository is open to all forms of suggestions. so wear your thinking hat and let the hacking begin.
+This repository is open to all forms of suggestions. so wear your thinking hat and let the hacking
+begin.
 
-For more, check out the [Contributing.md](https://github.com/drex44/martian/blob/master/CONTRIBUTING.md)
+For more, check out the
+[Contributing.md](https://github.com/drex44/martian/blob/master/CONTRIBUTING.md)
 
 ## License
 
-This repository is licensed under the MIT license. See `LICENSE` for
-details.
+This repository is licensed under the MIT license. See `LICENSE` for details.
diff --git a/app/main/index.js b/app/main/index.js
@@ -1,5 +1,5 @@
 import path from 'path';
-import { app, crashReporter, BrowserWindow, Menu } from 'electron';
+import { app, crashReporter, BrowserWindow, Menu, shell } from 'electron';
 
 const isDevelopment = process.env.NODE_ENV === 'development';
 
@@ -39,6 +39,50 @@ app.on('ready', async () => {
     await installExtensions();
   }
 
+  const menuTemplate = [
+    {
+      label: 'File',
+      submenu: [
+        {
+          type: 'separator',
+        },
+        {
+          label: 'Quit',
+          role: 'quit',
+        },
+      ],
+    },
+    {
+      label: 'Edit',
+      role: 'editMenu',
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Toggle Full Screen',
+          role: 'toggleFullScreen',
+        },
+      ],
+    },
+    {
+      label: 'Help',
+      submenu: [
+        {
+          label: 'About/GitHub',
+          click: () => {
+            shell.openExternal(
+              'https://github.com/drex44/martian#wip-martian--electron-based-websocket-testing-tool',
+            );
+          },
+        },
+      ],
+    },
+  ];
+
+  const menu = Menu.buildFromTemplate(menuTemplate);
+  Menu.setApplicationMenu(menu);
+
   mainWindow = new BrowserWindow({
     width: 1000,
     height: 800,

diff --git a/app/renderer/app.js b/app/renderer/app.js
@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { Provider } from "react-redux";
-import { ConnectedRouter } from "connected-react-router";
-import { createMemoryHistory } from "history";
-import routes from "./routes";
-import configureStore from "./store";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import { createMemoryHistory } from 'history';
+import routes from './routes';
+import configureStore from './store';
 
 const syncHistoryWithStore = (store, history) => {
   const { router } = store.getState();
@@ -18,15 +18,11 @@ const routerHistory = createMemoryHistory();
 const store = configureStore(initialState, routerHistory);
 syncHistoryWithStore(store, routerHistory);
 
-const rootElement = document.querySelector(
-  document.currentScript.getAttribute("data-container")
-);
+const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
 
 ReactDOM.render(
   <Provider store={store}>
-    <ConnectedRouter history={routerHistory}>
-      <div className="section">{routes}</div>
-    </ConnectedRouter>
+    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
   </Provider>,
-  rootElement
+  rootElement,
 );
diff --git a/app/renderer/components/PacketDataList.js b/app/renderer/components/PacketDataList.js
@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function PacketDataList({ packetList }) {
+function PacketDataList({ packetList, incoming }) {
   return (
     <div>
       {packetList.map((packet, index) => (
         <React.Fragment key={index}>
-          <p>{packet.timestamp}</p>
-          <p>{packet.data}</p>
+          <article className={['message', incoming ? 'is-success' : 'is-warning'].join(' ')}>
+            <div className="message-body">
+              <p>{packet.timestamp}</p>
+              <strong>
+                <p>{packet.data}</p>
+              </strong>
+            </div>
+          </article>
         </React.Fragment>
       ))}
     </div>

diff --git a/app/renderer/components/RequestTab.js b/app/renderer/components/RequestTab.js
@@ -157,15 +157,15 @@ class RequestTab extends Component {
         </div>
 
         <div className="box">
-          <div className="tabs is-boxed">
+          <div className="tabs">
             <ul>
-              {this.state.requestOptions.map((request, index) => (
+              {this.state.requestOptions.map((option, index) => (
                 <li key={index} className={this.state.activeTab == index ? 'is-active' : undefined}>
                   <a
                     onClick={() => {
                       this.handleActiveTab(index);
                     }}>
-                    {request}
+                    {option}
                   </a>
                 </li>
               ))}
@@ -186,7 +186,7 @@ class RequestTab extends Component {
                 </div>
               </div>
               <div className="control">
-                <button className="button is-primary" onClick={this.handleMessageSend}>
+                <button className="button is-warning" onClick={this.handleMessageSend}>
                   Send
                 </button>
               </div>
@@ -202,12 +202,12 @@ class RequestTab extends Component {
 
           <div className="columns is-gapless">
             <div className="column">
-              <h2 className="label">Outgoing: </h2>
+              <h2 className="label">Sent: </h2>
               <PacketDataList packetList={this.state.outgoingData} />
             </div>
             <div className="column">
-              <h2 className="label">Incoming: </h2>
-              <PacketDataList packetList={this.state.incomingData} />
+              <h2 className="label">Received: </h2>
+              <PacketDataList packetList={this.state.incomingData} incoming />
             </div>
           </div>
         </div>

diff --git a/app/renderer/components/RequestTabList.js b/app/renderer/components/RequestTabList.js
@@ -32,26 +32,35 @@ export default class RequestTabList extends Component {
 
     return (
       <div>
-        <div className="tabs is-boxed">
+        <div className="tabs is-boxed" style={{ margin: '0.15em' }}>
           <ul>
             {requests.map((tab, index) => (
-              <li key={index} className={this.state.activeTab == index ? 'is-active' : undefined}>
-                <a style={{ paddingRight: '0px' }}>
-                  <p
-                    onClick={() => {
-                      this.handleActiveTab(index);
-                    }}>
-                    {tab.name}
-                  </p>
+              <li
+                key={index}
+                className={[
+                  'field has-addons ',
+                  this.state.activeTab == index ? 'is-active' : undefined,
+                ].join(' ')}
+                style={{ margin: '0em 0.2em' }}>
+                <div className="control">
+                  <a>
+                    <p
+                      onClick={() => {
+                        this.handleActiveTab(index);
+                      }}>
+                      {tab.name}
+                    </p>
+                  </a>
+                </div>
+                <div className="control" style={{ marginLeft: '0.1em' }}>
                   <button
-                    className="button is-small is-danger is-rounded is-inverted"
+                    className="button is-small is-rounded is-danger is-inverted"
                     onClick={() => {
                       this.handleDeleteTab(index);
-                    }}
-                    style={{ margin: '0px 5px' }}>
+                    }}>
                     x
                   </button>
-                </a>
+                </div>
               </li>
             ))}
             <li>
@@ -64,13 +73,15 @@ export default class RequestTabList extends Component {
             </li>
           </ul>
         </div>
-        {requests.map((tab) => (
-          <RequestTab
-            key={tab.id}
-            request={tab}
-            isActive={requests[this.state.activeTab].id == tab.id}
-          />
-        ))}
+        <div style={{ margin: '1em' }}>
+          {requests.map((tab) => (
+            <RequestTab
+              key={tab.id}
+              request={tab}
+              isActive={requests[this.state.activeTab].id == tab.id}
+            />
+          ))}
+        </div>
       </div>
     );
   }

diff --git a/buildcommand.txt b/buildcommand.txt
@@ -0,0 +1,10 @@
+docker run --rm -ti \
+ --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
+ --env ELECTRON_CACHE="/root/.cache/electron" \
+ --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
+ -v ${PWD}:/project \
+ -v ${PWD##*/}-node-modules:/project/node_modules \
+ -v ~/.cache/electron:/root/.cache/electron \
+ -v ~/.cache/electron-builder:/root/.cache/electron-builder \
+ electronuserland/builder:wine
+ /bin/bash -c "yarn && yarn pack:linux && yarn pack:win"
diff --git a/docs/ss1.png b/docs/ss1.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "martian",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "description": "Websocket test tool",
   "main": "init.js",
   "author": {