Endpoint switch fix / Visual updates / Rename

andev-software · Nov 26, 2016 · ed8b900 · ed8b900
1 parent f05a6f2
commit ed8b900
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 <p align="center">
-    <img alt="GraphiQL app" src="assets/logo.png" width="440">
+    <img alt="GraphQL IDE" src="assets/logo.png" width="440">
 </p>
 
 <p align="center">
-  An Electron-based wrapper around GraphiQL
+  An extensive IDE for exploring GraphQL API's
 </p>
 
 ---
@@ -50,4 +50,4 @@ Project variables for dynamic headers
 Manage projects
 ![Manage projects](assets/screenshot-4.png)
 
-[0]: https://github.com/redound/graphiql-app/releases
+[0]: https://github.com/redound/graphql-ide/releases
diff --git a/assets/icon.sketch b/assets/icon.sketch
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/css/app.css b/css/app.css
@@ -186,16 +186,16 @@
   margin-top: -1px;
   padding: 0 15px 0 13px; }
   .QueryListItem__Icon .Icon {
-    width: 49px;
-    height: 49px;
+    width: 39px;
+    height: 39px;
     border-radius: 50%;
     background-color: #E10098;
     display: flex;
     justify-content: center;
     align-items: center; }
     .QueryListItem__Icon .Icon span {
       color: #fff;
-      font-size: 24px;
+      font-size: 18px;
       text-transform: uppercase;
       font-weight: 200; }
 
@@ -225,7 +225,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 21px;
   color: #000;
   flex-grow: 1;

diff --git a/gulpfile.js b/gulpfile.js
diff --git a/index.html b/index.html
@@ -105,5 +105,5 @@
 </div>
 </body>
 <script src="dist/vendor.js"></script>
-<script src="dist/main.js"></script>
+<script src="dist/app.js"></script>
 </html>
diff --git a/main.js b/main.js
@@ -11,7 +11,7 @@ const url = require('url')
 electron.crashReporter.start({
     productName: 'GraphiQL',
     companyName: 'Redound',
-    submitURL: 'https://github.com/redound/graphiql-app/issues',
+    submitURL: 'https://github.com/redound/graphql-ide/issues',
     autoSubmit: true
 })
 

diff --git a/package.js b/package.js
@@ -7,7 +7,7 @@ const assign = require('lodash/assign')
 const latest = require('github-latest-release')
 const argv = require('minimist')(process.argv.slice(2))
 
-const appName = argv.name || argv.n || 'GraphiQL'
+const appName = argv.name || argv.n || 'GraphQL IDE'
 const shouldUseAsar = argv.asar || argv.a || false
 const shouldBuildAll = argv.all || false
 const shouldPrune = argv.prune || true

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "graphiql-app",
-  "version": "0.1.3",
+  "name": "graphql-ide",
+  "version": "0.1.4",
   "description": "",
   "main": "main.js",
   "scripts": {
@@ -10,13 +10,13 @@
   },
   "keywords": [],
   "license": "MIT",
-  "homepage": "https://github.com/redound/graphiql-app",
+  "homepage": "https://github.com/redound/graphql-ide",
   "bugs": {
-    "url": "https://github.com/redound/graphiql-app/issues"
+    "url": "https://github.com/redound/graphql-ide/issues"
   },
   "repository": {
     "type": "git",
-    "url": "http://github.com/redound/graphiql-app.git"
+    "url": "http://github.com/redound/graphql-ide.git"
   },
   "dependencies": {
     "classnames": "^2.2.5",

diff --git a/scss/app/components/query-list/_query-list.scss b/scss/app/components/query-list/_query-list.scss
@@ -75,8 +75,8 @@
   padding: 0 15px 0 13px;
 
   .Icon {
-    width: 49px;
-    height: 49px;
+    width: 39px;
+    height: 39px;
     border-radius: 50%;
     background-color: #E10098;
     display: flex;
@@ -85,7 +85,7 @@
 
     span {
       color: #fff;
-      font-size: 24px;
+      font-size: 16px;
       text-transform: uppercase;
       font-weight: 200;
     }
@@ -120,7 +120,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 21px;
   color: #000;
   flex-grow: 1;

diff --git a/src/app/components/project-detail/project-detail.jsx b/src/app/components/project-detail/project-detail.jsx
@@ -87,7 +87,7 @@ function getOperationType({schema, query, operationName}) {
 
 function getQueryEndpointOrProjectDefault(query, project) {
 
-    const id = query.endpointId || null
+    const id = query.get('endpointId') || null
 
     if (id) {
         const endpoint = project.endpoints.find(endpoint => endpoint.id === id)
@@ -135,8 +135,8 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
 
         state = {
             panel: null,
-            project: true,
-            queries: true,
+            project: null,
+            queries: [],
             loading: true,
             operationName: '',
             schemas: Map(),
@@ -193,6 +193,10 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
 
         fetchQueries({projectId}) {
 
+            if (!this.state.project.settings.queryListState) {
+                return
+            }
+
             return queries.findProjectQueries({
                 projectId,
                 type: this.state.project.settings.queryListState
@@ -241,17 +245,19 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
 
             const endpoint = getQueryEndpointOrProjectDefault(this.state.query, this.state.project)
 
+            const queryListState = this.state.project.settings.queryListState
+
             const buttonsLeft = [{
                 description: 'Back',
                 onClick: () => history.push('/project-list')
             }, {
                 description: 'Collection',
-                active: this.state.project.settings.queryListState === 'COLLECTION',
-                onClick: () => this.setQueryListState('COLLECTION')
+                active: queryListState === 'COLLECTION',
+                onClick: () => queryListState === 'COLLECTION' ? this.setQueryListState(null) : this.setQueryListState('COLLECTION')
             }, {
                 description: 'History',
-                active: this.state.project.settings.queryListState === 'HISTORY',
-                onClick: () => this.setQueryListState('HISTORY')
+                active: queryListState === 'HISTORY',
+                onClick: () => queryListState === 'HISTORY' ? this.setQueryListState(null) : this.setQueryListState('HISTORY')
             }]
 
             const headerLeft = (
@@ -315,7 +321,7 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
 
             const HEADER_HEIGHT = 40
             const PANEL_HEIGHT = this.state.panel !== null ? 200 : 0
-            const DRAWER_WIDTH = 350
+            const DRAWER_WIDTH = queryListState !== null ? 350 : 0
 
             return (
                 <Layout>
@@ -355,21 +361,23 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
                                      height: height - HEADER_HEIGHT - PANEL_HEIGHT
                                  }}
                             >
-                                <div
-                                    className="ProjectDetail__Drawer"
-                                    style={{
-                                        width: DRAWER_WIDTH,
-                                        height: height - HEADER_HEIGHT - PANEL_HEIGHT
-                                    }}
-                                >
-                                    <QueryList
-                                        data={this.state.queries}
-                                        rowHeight={72}
-                                        activeId={this.state.query && this.state.query._id}
-                                        onItemClick={this.handleQueryClick}
-                                        onItemRemove={this.handleQueryRemove}
-                                    />
-                                </div>
+                                {queryListState !== null ? (
+                                    <div
+                                        className="ProjectDetail__Drawer"
+                                        style={{
+                                            width: DRAWER_WIDTH,
+                                            height: height - HEADER_HEIGHT - PANEL_HEIGHT
+                                        }}
+                                    >
+                                        <QueryList
+                                            data={this.state.queries}
+                                            rowHeight={72}
+                                            activeId={this.state.query && this.state.query._id}
+                                            onItemClick={this.handleQueryClick}
+                                            onItemRemove={this.handleQueryRemove}
+                                        />
+                                    </div>
+                                ): null}
                                 <div
                                     className="ProjectDetail__GraphiQL"
                                     style={{
@@ -586,7 +594,7 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
                 projectId,
                 key: 'queryListState',
                 value: state
-            }).then(project => {
+            }).then(() => {
 
                 this.fetchProject({
                     projectId
@@ -622,11 +630,6 @@ export default (mutations, queries, history, Loader, Layout, WorkspaceHeader, Me
                 options.body = JSON.stringify(params)
             }
 
-            console.log({
-                url,
-                options
-            })
-
             return fetch(url, options).then(res => res.json())
         }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,12 +10,12 @@ var options = {
             'react-dom',
             'react-router'
         ],
-        main: [
+        app: [
             './src/index.jsx'
         ]
     },
     output: {
-        filename: "main.js",
+        filename: "[name].js",
         path: './dist'
     },
     resolve: {