Merge pull request #141 from oslabs-beta/electron-packaging

Electron packaging

Author: AlenaBudzko

.gitignore

@@ -1,5 +1,9 @@
 node_modules
+package-lock.json
+Release.key
+winehq.key
+.env
+out
 public/bundle.js
 public/bundle.js.map
-package-lock.json
 .DS_Store

main.js

@@ -17,7 +17,7 @@ function createWindow() {
       nodeIntegration: true
     },
     // this is only for Windows and Linux
-    icon: './public/assets/pictures/ProtoGraphQLLogo.png'
+    icon: path.join(__dirname, 'public/assets/pictures/ProtoGraphQLLogo64.png')
   });
 
   win.setMinimumSize(265, 630);

package.json

@@ -1,17 +1,17 @@
 {
   "name": "protographql",
   "version": "1.0.0",
-  "description": "GraphQL prototyping desktop tool, build GQL schemas, queries, and mutations.",
+  "description": "ProtGraphQl is prototyping tool to easily build and visualize GraphQl schemas and queries",
   "main": "main.js",
   "scripts": {
     "start": "electron .",
     "build": "webpack -p",
     "dev": "webpack-dev-server --mode=development",
     "test": "test",
-    "package-all": "electron-packager . --all --asar",
+    "package": "sudo electron-forge make",
     "package-linux": "electron-packager . --linux --asar",
     "package-mac": "electron-packager . --darwin --asar",
-    "package-win": "electron-packager . --win32 --asar"
+    "package-win": "electron-packager . --platform win32 --arch x64 --asar"
   },
   "repository": {
     "type": "git",
@@ -25,13 +25,21 @@
   "homepage": "https://github.com/protographql/protographql#readme",
   "config": {
     "forge": {
-      "packagerConfig": {
+      "electronPackagerConfig": {
         "asar": true,
         "executableName": "protographql",
         "icon": "public/pictures/icon/icon",
         "overwrite": true,
-        "platform": "all",
-        "prune": true
+        "prune": true,
+        "arch": "x64"
+      },
+      "make_targets": {
+        "darwin": [
+          "dmg"
+        ],
+        "linux": [
+          "deb"
+        ]
       },
       "makers": [
         {
@@ -47,13 +55,6 @@
           "config": {
             "format": "ULFO"
           }
-        },
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "certificateFile": "./cert.pfx",
-            "certificatePassword": "this-is-a-secret"
-          }
         }
       ]
     }
@@ -95,4 +96,4 @@
     "react-dom": "^16.8.6",
     "react-draggable": "^3.3.0"
   }
-}
+}

public/.DS_Store

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import NavButton from './navButton';
+import NoTableButton from './noTableButton';
 import styled from 'styled-components';
 import { Store } from '../../state/store';
 import {
@@ -40,8 +41,7 @@ function changeButtonStyleOnClick(view) {
 }
 
 function NavSideBar() {
-  const { dispatch } = useContext(Store);
-
+  const { dispatch, state: { tableIndex } } = useContext(Store);
   return (
     <SideBar>
       <NavButton
@@ -77,7 +77,7 @@ function NavSideBar() {
           document.querySelector("svg") ? document.querySelector("svg").remove() : "";
         }}
       />
-      <NavButton
+      {tableIndex !== 0 && <NavButton
         key='NavButton3'
         className='fas fa-plus-square'
         view='Add Table'
@@ -94,7 +94,25 @@ function NavSideBar() {
           borderTop: '1px solid rgba(0, 0, 0, 0.08)',
           width: '100%'
         }}
-      />
+      />}
+      {tableIndex === 0 && <NoTableButton
+        key='NavButton4'
+        className='fas fa-plus-square'
+        view='Add Table'
+        click={() => {
+          dispatch({ type: SET_VIEW, payload: 'schema' })
+          dispatch({ type: SET_POP_UP, payload: 'table' })
+          dispatch({ type: ADD_TABLE })
+          changeButtonStyleOnClick("Schema")
+          document.querySelector("svg") ? document.querySelector("svg").remove() : "";
+        }}
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+          width: '100%'
+        }}
+      />} 
     </SideBar>
   )
 }

public/assets/.DS_Store

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+/*-------------------- Styled Components --------------------*/
+
+const fontColor = keyframes`
+  0% {
+    color: rgba(50, 67, 83, 1);
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00);
+    bottom: 0px;
+  }
+  50% {
+    color: #e535ab;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.10);
+    bottom: 25px;
+  }
+  100% {
+    color: rgba(50, 67, 83, 1);
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00);
+    bottom: 0px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  padding: 1px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  min-width: 200px;
+  cursor: pointer;
+  animation: ${fontColor} 2s;
+  animation-fill-mode: both;
+  animation-iteration-count: 5;
+`;
+
+const Button = styled.div`
+  height: 60px;
+  background-color: none;
+  margin: auto;
+  margin-left: calc(15.5px + .25vw);
+  margin-top: 25px;
+`;
+
+const Icon = styled.span`
+  margin: 5px;
+  font-size: calc(14px + 1vw);
+`;
+
+/*-------------------- Functional Component --------------------*/
+
+const NoTableButton = ({ className, click, view, style }) => {
+  return (
+    <ButtonContainer style={style} onClick={click} id={view}>
+      <Button>
+        <Icon><i className={className} /></Icon>
+        {view}
+      </Button>
+    </ButtonContainer>
+  )
+}
+
+export default NoTableButton;

public/assets/pictures/ProtoGraphQLLogo64.png

@@ -1,6 +1,6 @@
 /* eslint-disable no-case-declarations */
 import React from 'react';
-import * as state from '../state/mockState';
+import * as state from '../state/initialState';
 import deepClone from '../utils/deepClone';
 import buildGQLSchema from '../utils/buildGQLSchema';
 import buildGQLResolvers from '../utils/buildGQLResolvers';