feat: customize for pokeapi

Naramsim · Naramsim · commit 92b49ddf27cc · 2021-03-16T21:22:55.000+01:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+static/dist
diff --git a/Dockerfile b/Dockerfile
@@ -1,15 +1,15 @@
-FROM node:8.9-alpine
+FROM node:12-alpine
 
 # Create app directory
 WORKDIR /app
 
 # Install app dependencies
-RUN npm config set unsafe-perm true
+# RUN npm config set unsafe-perm true
 RUN npm -g install serve
 # A wildcard is used to ensure both package.json AND package-lock.json are copied
 COPY package*.json ./
 
-RUN npm install
+RUN npm ci
 
 # Bundle app source
 COPY . /app
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Hasura
+Copyright (c) 2020 PokeAPI
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,5 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+The code has been forked from https://github.com/hasura/graphiql-online (2877840f53c9e0a94966dfaa78c07312bd6f9ffd) which has been licensed with a MIT license.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "start-dev": "better-npm-run start-dev",
     "watch-client": "better-npm-run watch-client",
     "dev": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev\" ",
-    "deploy": "now"
+    "deploy": "now",
+    "serve": "serve -s static -p 8082"
   },
   "betterScripts": {
     "start-prod": {
@@ -40,42 +41,42 @@
     }
   },
   "dependencies": {
-    "apollo-link": "^1.2.2",
-    "apollo-link-ws": "^1.0.8",
+    "apollo-link": "^1.2.14",
+    "apollo-link-ws": "^1.0.20",
     "graphiql": "^0.13.2",
     "graphiql-explorer": "^0.6.2",
-    "graphql": "^14.3.0",
-    "graphql-voyager": "^1.0.0-rc.27",
+    "graphql": "^14.7.0",
+    "graphql-voyager": "1.0.0-rc.31",
     "hasura-console-graphiql": "0.1.0-alpha.1",
-    "history": "^3.0.0",
+    "history": "^3.3.0",
     "isomorphic-fetch": "^2.2.1",
-    "jsonwebtoken": "^8.5.0",
-    "less": "^3.7.1",
-    "lru-memoize": "^1.0.0",
+    "jsonwebtoken": "^8.5.1",
+    "less": "^3.13.1",
+    "lru-memoize": "^1.1.0",
     "map-props": "^1.0.0",
     "match-sorter": "^2.3.0",
     "multireducer": "^1.0.2",
     "piping": "^0.3.2",
-    "prettier": "^1.16.4",
+    "prettier": "^1.19.1",
     "pretty-error": "^1.2.0",
-    "prop-types": "^15.6.0",
-    "react": "16.8.2",
-    "react-ace": "^6.1.1",
-    "react-bootstrap": "^0.32.1",
-    "react-copy-to-clipboard": "^5.0.0",
-    "react-dom": "16.8.2",
-    "react-helmet": "^5.2.0",
+    "prop-types": "^15.7.2",
+    "react": "17.0.1",
+    "react-ace": "^6.6.0",
+    "react-bootstrap": "^0.32.4",
+    "react-copy-to-clipboard": "^5.0.3",
+    "react-dom": "17.0.1",
+    "react-helmet": "^5.2.1",
     "react-notification-system": "^0.2.17",
     "react-progress-bar-plus": "^1.3.1",
-    "react-redux": "^5.0.6",
-    "react-router": "^3.2.0",
+    "react-redux": "^5.1.2",
+    "react-router": "^3.2.6",
     "react-router-redux": "^4.0.8",
-    "react-tabs": "^2.1.0",
-    "redux": "^4.0.0",
+    "react-tabs": "^2.3.1",
+    "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "^2.3.0",
     "semver": "5.5.1",
-    "subscriptions-transport-ws": "^0.9.12",
+    "subscriptions-transport-ws": "^0.9.18",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {
@@ -132,7 +133,7 @@
     "json-loader": "^0.5.4",
     "less-loader": "^4.1.0",
     "lint-staged": "^6.1.1",
-    "mini-css-extract-plugin": "^0.4.0",
+    "mini-css-extract-plugin": "^0.4.5",
     "node-sass": "^4.14.0",
     "nyc": "^13.3.0",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
diff --git a/src/components/Common/Common.scss b/src/components/Common/Common.scss
@@ -1261,7 +1261,7 @@ code {
 }
 
 .graphQLHeight {
-  height: 72vh;
+  height: 79vh;
   margin-bottom: 50px;
 }
 
diff --git a/src/components/Services/ApiExplorer/ApiExplorer.js b/src/components/Services/ApiExplorer/ApiExplorer.js
@@ -53,7 +53,7 @@ class ApiExplorer extends Component {
             request={displayedApi.request}
             route={route}
             dataHeaders={dataHeaders}
-            numberOfTables={0}
+            numberOfTables={1}
             headerFocus={headerFocus}
             queryParams={this.props.location.query}
             graphqlEndpoint={localStorageUrl}
diff --git a/src/components/Services/ApiExplorer/ApiRequest/ApiRequest.js b/src/components/Services/ApiExplorer/ApiRequest/ApiRequest.js
@@ -171,7 +171,7 @@ class ApiRequest extends Component {
 
       return (
         <CollapsibleToggle
-          title={'GraphQL Endpoint'}
+          title={'PokeAPI GraphQL Endpoint'}
           isOpen={endpointSectionIsOpen}
           toggleHandler={toggleHandler}
           useDefaultTitleStyle
diff --git a/src/components/Services/ApiExplorer/ApiRequest/ApiRequestDetails.js b/src/components/Services/ApiExplorer/ApiRequest/ApiRequestDetails.js
@@ -6,12 +6,12 @@ class ApiRequestDetails extends Component {
     const styles = require('../ApiExplorer.scss');
     return (
       <div className={styles.apiRequestWrapper + ' ' + styles.apiContentPadd}>
-        <div className={styles.apiRequestContent}>{this.props.description}</div>
+        <div className={styles.apiRequestContent}>PokeAPI GraphiQL interface</div>
         <div className={styles.built}>
-          Built with <i className="fa fa-heart" /> by <a href={'http://hasura.io/'} target={'_blank'}>Hasura</a>
+          A rate limit of 50 calls per day is enforced
         </div>
         <div className={styles.apiHasura}>
-          <a href="https://github.com/hasura/graphql-engine/tree/master/community/tools/graphiql-online" target={'_blank'}>
+          <a href="https://github.com/PokeAPI/pokeapi" target={'_blank'}>
             <i className="fa fa-github" />
           </a>
         </div>
diff --git a/src/components/Services/ApiExplorer/ApiRequest/utils.js b/src/components/Services/ApiExplorer/ApiRequest/utils.js
@@ -17,7 +17,7 @@ export const setHeadersSectionIsOpen = isOpen => {
 };
 
 export const getHeadersSectionIsOpen = () => {
-  const defaultIsOpen = true;
+  const defaultIsOpen = false;
 
   const isOpen = window.localStorage.getItem(
     'ApiExplorer:HeadersSectionIsOpen'
diff --git a/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js b/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
@@ -51,7 +51,7 @@ class GraphiQLWrapper extends Component {
       return (
         <GraphiQL
           fetcher={graphQLFetcher}
-          voyagerUrl={voyagerUrl}
+          // voyagerUrl={voyagerUrl}
           {...graphiqlProps}
         />
       );
diff --git a/src/components/Services/ApiExplorer/OneGraphExplorer/OneGraphExplorer.js b/src/components/Services/ApiExplorer/OneGraphExplorer/OneGraphExplorer.js
@@ -24,7 +24,28 @@ class OneGraphExplorer extends React.Component {
     explorerWidth: getExplorerWidth(),
     explorerClientX: null,
     schema: null,
-    query: undefined,
+    query: `
+# Use the left-side Explorer to form GQL queries
+
+query samplePokeAPIquery {
+
+  # Gets all the pokemon belonging to generation 3
+  gen3_species: pokemon_v2_pokemonspecies(where: {pokemon_v2_generation: {name: {_eq: "generation-iii"}}}, order_by: {id: asc}) {
+    name
+    id
+  }
+  
+  # You can run multiple queries at the same time
+  # Counts how many pokemon where release for each generation
+  generations: pokemon_v2_generation {
+    name
+    pokemon_species: pokemon_v2_pokemonspecies_aggregate {
+      aggregate {
+        count
+      }
+    }
+  }
+}`,
     isResizing: false,
     loading: false,
     previousIntrospectionHeaders: [],
@@ -52,7 +73,7 @@ class OneGraphExplorer extends React.Component {
     const queryFile = urlParams ? urlParams.query_file : null;
 
     if (queryFile) {
-      getRemoteQueries(queryFile, remoteQuery =>
+      getRemoteQueries(queryFile, (remoteQuery) =>
         this.setState({ query: remoteQuery })
       );
     } else if (numberOfTables === 0) {
@@ -66,8 +87,8 @@ class OneGraphExplorer extends React.Component {
       const localStorageQuery = getGraphiQLQueryFromLocalStorage();
 
       if (localStorageQuery) {
-        if (localStorageQuery.includes('do not have')) {
-          const FRESH_GRAPHQL_MSG = '# Try out GraphQL queries here\n';
+        if (localStorageQuery.includes("do not have")) {
+          const FRESH_GRAPHQL_MSG = "# Try out GraphQL queries here\n";
 
           this.setState({ query: FRESH_GRAPHQL_MSG });
         } else {
@@ -82,14 +103,14 @@ class OneGraphExplorer extends React.Component {
     const headers = JSON.parse(JSON.stringify(this.props.headers));
     this.setState({ loading: true });
     fetch(endpoint, {
-      method: 'POST',
+      method: "POST",
       headers: getHeadersAsJSON(headers || []),
       body: JSON.stringify({
         query: getIntrospectionQuery(),
       }),
     })
-      .then(response => response.json())
-      .then(result => {
+      .then((response) => response.json())
+      .then((result) => {
         this.setState({
           schema: buildClientSchema(result.data),
           loading: false,
@@ -105,7 +126,7 @@ class OneGraphExplorer extends React.Component {
       });
   }
 
-  onExplorerResize = e => {
+  onExplorerResize = (e) => {
     const { explorerClientX, explorerWidth } = this.state;
 
     if (explorerClientX === null) {
@@ -122,7 +143,7 @@ class OneGraphExplorer extends React.Component {
     }
   };
 
-  editQuery = query => {
+  editQuery = (query) => {
     this.setState({ query });
   };
 
@@ -134,17 +155,17 @@ class OneGraphExplorer extends React.Component {
     this.setState({ explorerOpen: newIsOpen });
   };
 
-  handleExplorerResize = e => {
+  handleExplorerResize = (e) => {
     e.preventDefault();
-    document.addEventListener('mousemove', this.onExplorerResize);
+    document.addEventListener("mousemove", this.onExplorerResize);
     this.setState({
       isResizing: true,
     });
   };
 
-  handleExplorerResizeStop = e => {
+  handleExplorerResizeStop = (e) => {
     e.preventDefault();
-    document.removeEventListener('mousemove', this.onExplorerResize);
+    document.removeEventListener("mousemove", this.onExplorerResize);
     this.setState({
       isResizing: false,
     });
@@ -195,7 +216,7 @@ class OneGraphExplorer extends React.Component {
     return (
       <div
         className={
-          'graphiql-container' + (isResizing ? ' explorerCursorResize' : '')
+          "graphiql-container" + (isResizing ? " explorerCursorResize" : "")
         }
         onMouseUp={this.handleExplorerResizeStop}
       >
diff --git a/src/components/Services/ApiExplorer/state.js b/src/components/Services/ApiExplorer/state.js
@@ -1,11 +1,25 @@
 const defaultHeader = [
   {
-    key: 'content-type',
+    key: 'Content-Type',
     value: 'application/json',
     isActive: true,
     isNewHeader: false,
     isDisabled: true,
   },
+  {
+    key: 'X-Method-Used',
+    value: 'graphiql',
+    isActive: true,
+    isNewHeader: false,
+    isDisabled: true,
+  },
+  {
+    key: 'X-Token',
+    value: '',
+    isActive: false,
+    isNewHeader: false,
+    isDisabled: true,
+  },
 ];
 defaultHeader.push({
   key: '',
diff --git a/static/index.html b/static/index.html
@@ -1,23 +1,23 @@
 <html lang="en-us">
   <head>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-130585335-1"></script>
+    <!--<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130585335-1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
 
       gtag('config', 'UA-130585335-1');
-    </script>
-    <link rel="icon" type="image/png" href="./favicon.png" />
-    <title>GraphiQL Online with Headers | Built by Hasura</title>
-    <meta name="title" content="GraphiQL Online with Headers | Built by Hasura" />
-    <meta name="description" content="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers" />
+    </script> -->
+    <link rel="icon" type="image/png" href="https://pokeapi.co/favicon-48x48.png" />
+    <title>Pokeapi GraphiQL</title>
+    <meta name="title" content="Pokeapi GraphiQL" />
+    <meta name="description" content="Pokeapi GraphiQL" />
     <script>
       window.__env = {
-        graphqlEndpoint: '',
+        graphqlEndpoint: 'http://localhost/graphql/v1beta',
         headers: '',
         variables: '',
-        query: ''
+        query: 'doesnt work'
       };
     </script>
   </head>

Original file line number	Diff line number	Diff line change
`@@ -1261,7 +1261,7 @@ code {`
`1261`	`1261`	`}`
`1262`	`1262`
`1263`	`1263`	`.graphQLHeight {`
`1264`		`- height: 72vh;`
	`1264`	`+ height: 79vh;`
`1265`	`1265`	`margin-bottom: 50px;`
`1266`	`1266`	`}`
`1267`	`1267`