Fix custom theme and settings (#759)

* Fix announcement link

* fix: allow custom theme and settings from connect props

* fix: update getTheme to use custom supplied settings

* fix: removed unnecessary import

Author: BrunoScheufler

packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx

@@ -20,7 +20,6 @@ import {
 import OldThemeProvider from './Theme/ThemeProvider'
 import { getActiveEndpoints } from './util'
 import { ISettings } from '../types'
-import { createStructuredSelector } from 'reselect'
 import { connect } from 'react-redux'
 import { getTheme, getSettings } from '../state/workspace/reducers'
 import { Session, Tab } from '../state/sessions/reducers'
@@ -511,10 +510,11 @@ class PlaygroundWrapper extends React.Component<
   }
 }
 
-const mapStateToProps = createStructuredSelector({
-  theme: getTheme,
-  settings: getSettings,
-})
+const mapStateToProps = (state, ownProps) => {
+  const theme = ownProps.theme || getTheme(state, ownProps.settings)
+  const settings = ownProps.settings || getSettings(state)
+  return { theme, settings }
+}
 
 export default connect(
   mapStateToProps,

packages/graphql-playground-react/src/state/workspace/reducers.ts

@@ -205,7 +205,7 @@ export function normalizeSettingsString(settingsString) {
   return JSON.stringify(parseSettingsString(settingsString), null, 2)
 }
 
-export const getTheme = createSelector(
-  [getSettings],
-  s => s['editor.theme'] || 'dark',
-)
+export const getTheme = (state, customSettings) => {
+  const settings = customSettings || getSettings(state)
+  return settings['editor.theme'] || 'dark'
+}