add preference button to header (codesandbox#116)

* add preference button to header

* update contributors list

Author: Tushar Sonawane

.all-contributorsrc

@@ -71,6 +71,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Tushkiz",
+      "name": "Tushar Sonawane",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/1854763?v=4",
+      "profile": "https://twitter.com/tushkiz",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.gitignore

@@ -16,4 +16,5 @@ www
 npm-debug.log
 yarn-error.log
 .vscode
+.idea
 jest

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
 
 An online code editor with a focus on React.
 
@@ -44,8 +44,8 @@ CodeSandbox consists several separate servers, some of these are open sourced.
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub>James Gillmore</sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub>Ade Viankakrisna Fadlil</sub>](https://musify.id)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=viankakrisna "Code") |
-| :---: | :---: | :---: | :---: | :---: | :---: |
+| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub>James Gillmore</sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub>Ade Viankakrisna Fadlil</sub>](https://musify.id)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub>Tushar Sonawane</sub>](https://twitter.com/tushkiz)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=Tushkiz "Code") |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -13,11 +13,13 @@ import HeartIcon from 'react-icons/lib/fa/heart-o';
 import FullHeartIcon from 'react-icons/lib/fa/heart';
 import TwitterIcon from 'react-icons/lib/fa/twitter';
 import SearchIcon from 'react-icons/lib/go/search';
+import SettingsIcon from 'react-icons/lib/md/settings';
 import { Tooltip } from 'react-tippy';
 
 import type { Sandbox, CurrentUser } from 'common/types';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import userActionCreators from 'app/store/user/actions';
+import modalActionCreators from 'app/store/modal/actions';
 import {
   searchUrl,
   newSandboxUrl,
@@ -31,6 +33,7 @@ import PatronBadge from '-!svg-react-loader!app/utils/badges/svg/patron-4.svg';
 import Margin from 'app/components/spacing/Margin';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 import UserMenu from 'app/containers/UserMenu';
+import Preferences from 'app/containers/Preferences';
 
 import Action from './Action';
 import FeedbackView from './FeedbackView';
@@ -94,6 +97,7 @@ type Props = {
   sandbox: Sandbox,
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
+  modalActions: typeof modalActionCreators,
   user: CurrentUser,
   canSave: boolean,
 };
@@ -147,6 +151,13 @@ export default class Header extends React.PureComponent {
     }
   };
 
+  openPreferences = () => {
+    this.props.modalActions.openModal({
+      width: 900,
+      Body: <Preferences />,
+    });
+  };
+
   render() {
     const {
       sandbox,
@@ -249,6 +260,12 @@ export default class Header extends React.PureComponent {
             tooltip="New Sandbox"
             Icon={PlusIcon}
           />
+          {user.jwt &&
+            <Action
+              onClick={this.openPreferences}
+              tooltip="Preferences"
+              Icon={SettingsIcon}
+            />}
           <Margin
             style={{
               zIndex: 20,

src/app/pages/Sandbox/Editor/Content/index.js

@@ -17,6 +17,7 @@ import type {
 import { currentUserSelector } from 'app/store/user/selectors';
 import moduleActionCreators from 'app/store/entities/sandboxes/modules/actions';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
+import modalActionCreators from 'app/store/modal/actions';
 import previewApiActionCreators from 'app/store/preview-actions-api/actions';
 import userActionCreators from 'app/store/user/actions';
 import {
@@ -49,6 +50,7 @@ type Props = {
   moduleActions: typeof moduleActionCreators,
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
+  modalActions: typeof modalActionCreators,
   previewApiActions: typeof previewApiActionCreators,
 };
 
@@ -79,6 +81,7 @@ const mapDispatchToProps = dispatch => ({
   moduleActions: bindActionCreators(moduleActionCreators, dispatch),
   sandboxActions: bindActionCreators(sandboxActionCreators, dispatch),
   userActions: bindActionCreators(userActionCreators, dispatch),
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
   previewApiActions: bindActionCreators(previewApiActionCreators, dispatch),
 });
 class EditorPreview extends React.PureComponent {
@@ -131,6 +134,7 @@ class EditorPreview extends React.PureComponent {
       directories,
       preferences,
       userActions,
+      modalActions,
       user,
       workspaceHidden,
       toggleWorkspace,
@@ -209,6 +213,7 @@ class EditorPreview extends React.PureComponent {
           sandbox={sandbox}
           sandboxActions={sandboxActions}
           userActions={userActions}
+          modalActions={modalActions}
           user={user}
           workspaceHidden={workspaceHidden}
           toggleWorkspace={toggleWorkspace}