support older react versions

Author: timsuchanek

packages/graphql-playground-electron/package.json

@@ -4,7 +4,7 @@
   "homepage": "https://github.com/graphcool/graphql-playground",
   "repository": "graphcool/graphql-playground",
   "description": "Playground app",
-  "version": "1.1.1",
+  "version": "1.1.6",
   "author": {
     "name": "Graphcool",
     "email": "[email protected]",
@@ -130,7 +130,7 @@
     "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "file-loader": "^0.11.2",
     "fork-ts-checker-webpack-plugin": "^0.1.5",
-    "graphql-playground": "^1.1.0",
+    "graphql-playground": "^1.1.6",
     "happypack": "^3.1.0",
     "html-webpack-plugin": "^2.30.1",
     "identity-obj-proxy": "^3.0.0",

packages/graphql-playground-electron/yarn.lock

@@ -1389,6 +1389,13 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.0.3:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builder-util-runtime@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-2.1.0.tgz#82362a92e202ee8315334391bbb23b2ea9099765"
@@ -1936,6 +1943,10 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+
 [email protected]:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1991,6 +2002,14 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-to-react-native@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
+  dependencies:
+    css-color-keywords "^1.0.0"
+    fbjs "^0.8.5"
+    postcss-value-parser "^3.3.0"
+
 [email protected]:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -2870,7 +2889,7 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fbjs@^0.8.16:
+fbjs@^0.8.16, fbjs@^0.8.5:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3311,9 +3330,9 @@ [email protected]:
     graphql "^0.10.1"
     graphql-language-service-types "0.0.21"
 
-graphql-playground@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/graphql-playground/-/graphql-playground-1.1.0.tgz#553063ae343bb7bff1218e5d623acf1fc1ab52b5"
+graphql-playground@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/graphql-playground/-/graphql-playground-1.1.6.tgz#0e5f07c94519310f560d05d1ad1184d83c11ceb6"
   dependencies:
     calculate-size "^1.1.1"
     classnames "^2.2.5"
@@ -3335,7 +3354,7 @@ graphql-playground@^1.1.0:
     react-dom "^16.0.0"
     react-helmet "^5.2.0"
     react-modal "^3.1.0"
-    react-redux "^5.0.5"
+    react-redux "^5.0.6"
     react-router-dom "^4.2.2"
     react-transition-group "^1.1.3"
     react-virtualized "^9.12.0"
@@ -3344,6 +3363,7 @@ graphql-playground@^1.1.0:
     redux-localstorage-filter "^0.1.1"
     rxjs "^5.0.3"
     seamless-immutable "^7.0.1"
+    styled-components "^2.2.3"
     styled-jsx-postcss "git+https://github.com/timsuchanek/styled-jsx-postcss#build3"
     subscriptions-transport-ws "^0.8.1"
 
@@ -3500,6 +3520,10 @@ [email protected]:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 hoist-non-react-statics@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.2.2.tgz#c0eca5a7d5a28c5ada3107eb763b01da6bfa81fb"
@@ -3817,6 +3841,10 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -5733,7 +5761,7 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-redux@^5.0.5:
+react-redux@^5.0.5, react-redux@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
   dependencies:
@@ -6643,6 +6671,20 @@ style-loader@^0.18.2:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+styled-components@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
+  dependencies:
+    buffer "^5.0.3"
+    css-to-react-native "^2.0.3"
+    fbjs "^0.8.9"
+    hoist-non-react-statics "^1.2.0"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.4"
+    stylis "3.x"
+    supports-color "^3.2.3"
+
 "styled-jsx-postcss@git+https://github.com/timsuchanek/styled-jsx-postcss#build3":
   version "0.2.0"
   resolved "git+https://github.com/timsuchanek/styled-jsx-postcss#677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
@@ -6654,6 +6696,18 @@ style-loader@^0.18.2:
     postcss-load-plugins "^2.2.0"
     styled-jsx "^0.5.7"
 
+"styled-jsx-postcss@git+https://github.com/timsuchanek/styled-jsx-postcss.git#build3":
+  version "0.2.0"
+  uid "677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
+  resolved "git+https://github.com/timsuchanek/styled-jsx-postcss.git#677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
+  dependencies:
+    babel-traverse "^6.21.0"
+    babylon "^6.14.1"
+    deasync "^0.1.9"
+    postcss "^5.2.8"
+    postcss-load-plugins "^2.2.0"
+    styled-jsx "^0.5.7"
+
 [email protected]:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-0.5.2.tgz#59740216c3db371636f9beec02149f9da5ea02e5"
@@ -6679,6 +6733,10 @@ styled-jsx@^0.5.7:
     source-map "0.5.6"
     string-hash "1.1.1"
 
+[email protected]:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.3.tgz#875bd0db3db37bb6de08f89275fc38ee2e32ee75"
+
 subscriptions-transport-ws@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.8.2.tgz#2325b3cff1bdcd824b60a8ba7135cdfeb6161091"

packages/graphql-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground",
-  "version": "1.1.6",
+  "version": "1.1.7-beta.1",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",

packages/graphql-playground/src/components/Playground.tsx

@@ -971,22 +971,21 @@ query ${operationName} {
     value: any,
     cb?: () => void,
   ) {
-    this.setState(
-      state => {
-        // TODO optimize the lookup with a lookup table
-        const i = state.sessions.findIndex(s => s.id === sessionId)
-        return {
-          ...state,
-          sessions: Immutable.setIn(state.sessions, [i, key], value),
-          changed: true,
-        }
-      },
-      () => {
-        if (typeof cb === 'function') {
-          cb()
-        }
-      },
-    )
+    this.setState(state => {
+      // TODO optimize the lookup with a lookup table
+      const i = state.sessions.findIndex(s => s.id === sessionId)
+      return {
+        ...state,
+        sessions: Immutable.setIn(state.sessions, [i, key], value),
+        changed: true,
+      }
+    })
+    // hack to support older react versions
+    setTimeout(() => {
+      if (typeof cb === 'function') {
+        cb()
+      }
+    }, 100)
   }
 
   private autofillMutation = () => {
@@ -1273,7 +1272,7 @@ query ${operationName} {
   private createSessionFromQuery = (query: string) => {
     return Immutable({
       id: cuid(),
-      selectedViewer: 'ADMIN',
+      selectedViewer: 'EVERYONE',
       query,
       variables: '',
       result: '',