removed connector (codesandbox#3255)

christianalfoni · SaraVieira · commit a03e01e1d691 · 2020-01-03T17:00:29.000Z
diff --git a/packages/app/src/app/componentConnectors.ts b/packages/app/src/app/componentConnectors.ts
diff --git a/packages/app/src/app/overmind/index.ts b/packages/app/src/app/overmind/index.ts
@@ -6,6 +6,7 @@ import {
   IOperator,
   IReaction,
   IState,
+  Overmind,
 } from 'overmind';
 import { createHook } from 'overmind-react';
 import { merge, namespaced } from 'overmind/config';
@@ -77,3 +78,14 @@ export interface Reaction extends IReaction<Config> {}
 export const connect = createConnect<typeof config>();
 
 export const useOvermind = createHook<typeof config>();
+
+export const Observer: React.FC<{
+  children: <T>(overmind: {
+    state: Overmind<Config>['state'];
+    actions: Overmind<Config>['actions'];
+  }) => T;
+}> = ({ children }) => {
+  const overmind = useOvermind();
+
+  return children(overmind);
+};
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/DeletedSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/DeletedSandboxes/index.js
@@ -1,12 +1,11 @@
+import { Observer } from 'app/overmind';
 import React from 'react';
-import { Observer } from 'app/componentConnectors';
-import Helmet from 'react-helmet';
 import { Query } from 'react-apollo';
+import Helmet from 'react-helmet';
 import RemoveIcon from 'react-icons/lib/md/highlight-remove';
 
-import { Content as Sandboxes } from '../../Sandboxes';
-
 import { DELETED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
+import { Content as Sandboxes } from '../../Sandboxes';
 import { getPossibleTemplates } from '../../Sandboxes/utils';
 
 const DeletedSandboxes = () => (
@@ -20,7 +19,7 @@ const DeletedSandboxes = () => (
     >
       {({ loading, error, data }) => (
         <Observer>
-          {({ store, signals }) => {
+          {({ state, actions }) => {
             if (error) {
               return <div>Error!</div>;
             }
@@ -31,10 +30,10 @@ const DeletedSandboxes = () => (
 
             const possibleTemplates = getPossibleTemplates(sandboxes);
 
-            const orderedSandboxes = store.dashboard.getFilteredSandboxes(
+            const orderedSandboxes = state.dashboard.getFilteredSandboxes(
               sandboxes
             );
-            signals.dashboard.setTrashSandboxes({
+            actions.dashboard.setTrashSandboxes({
               sandboxIds: orderedSandboxes.map(i => i.id),
             });
 
@@ -51,7 +50,7 @@ const DeletedSandboxes = () => (
                           name: 'Empty Trash',
                           Icon: <RemoveIcon />,
                           run: () => {
-                            signals.modalOpened({
+                            actions.modalOpened({
                               modal: 'emptyTrash',
                             });
                           },
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js
@@ -1,16 +1,17 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-import { Observer } from 'app/componentConnectors';
-import { Query } from 'react-apollo';
 import { basename } from 'path';
+
 import { CreateNewSandboxButton } from 'app/components/CreateNewSandbox';
-import { Content as Sandboxes } from '../../Sandboxes';
-import { Navigation } from './Navigation';
-// import Folders from './Folders';
-import getMostUsedTemplate from '../../../utils/get-most-used-template';
+import { Observer } from 'app/overmind';
+import React from 'react';
+import { Query } from 'react-apollo';
+import Helmet from 'react-helmet';
 
 import { PATHED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
+// import Folders from './Folders';
+import getMostUsedTemplate from '../../../utils/get-most-used-template';
+import { Content as Sandboxes } from '../../Sandboxes';
 import { getPossibleTemplates } from '../../Sandboxes/utils';
+import { Navigation } from './Navigation';
 
 const PathedSandboxes = props => {
   const path = '/' + decodeURIComponent(props.match.params.path || '');
@@ -26,7 +27,7 @@ const PathedSandboxes = props => {
       >
         {({ loading, error, data }) => (
           <Observer>
-            {({ store }) => {
+            {({ state }) => {
               if (error) {
                 console.error(error);
                 return <div>Error!</div>;
@@ -44,7 +45,7 @@ const PathedSandboxes = props => {
               const noTemplateSandboxes = sandboxes.filter(
                 s => !s.customTemplate
               );
-              const orderedSandboxes = store.dashboard.getFilteredSandboxes(
+              const orderedSandboxes = state.dashboard.getFilteredSandboxes(
                 noTemplateSandboxes
               );
 
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/SearchSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/SearchSandboxes/index.js
@@ -1,12 +1,11 @@
+import { Observer } from 'app/overmind';
+import Fuse from 'fuse.js';
 import React from 'react';
-import Helmet from 'react-helmet';
-import { Observer } from 'app/componentConnectors';
 import { Query } from 'react-apollo';
-import Fuse from 'fuse.js';
-
-import { Content as Sandboxes } from '../../Sandboxes';
+import Helmet from 'react-helmet';
 
 import { SEARCH_SANDBOXES_QUERY } from '../../../queries';
+import { Content as Sandboxes } from '../../Sandboxes';
 import { getPossibleTemplates } from '../../Sandboxes/utils';
 
 let lastSandboxes = null;
@@ -16,12 +15,12 @@ const SearchSandboxes = () => (
   <Query query={SEARCH_SANDBOXES_QUERY}>
     {({ loading, error, data }) => (
       <Observer>
-        {({ store }) => {
+        {({ state }) => {
           if (error) {
             return <div>Error!</div>;
           }
 
-          const { search } = store.dashboard.filters;
+          const { search } = state.dashboard.filters;
           let sandboxes = data && data.me && data.me.sandboxes;
           if (
             sandboxes &&
@@ -55,7 +54,7 @@ const SearchSandboxes = () => (
           if (sandboxes) {
             possibleTemplates = getPossibleTemplates(sandboxes);
 
-            sandboxes = store.dashboard
+            sandboxes = state.dashboard
               .getFilteredSandboxes(sandboxes)
               .filter(x => !x.customTemplate);
           }
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
@@ -1,30 +1,28 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-import { Query, Mutation } from 'react-apollo';
-import { Observer } from 'app/componentConnectors';
-import { sortBy } from 'lodash-es';
-
-import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
-import { Button } from '@codesandbox/common/lib/components/Button';
 import AutosizeTextArea from '@codesandbox/common/lib/components/AutosizeTextArea';
+import { Button } from '@codesandbox/common/lib/components/Button';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
 import track from '@codesandbox/common/lib/utils/analytics';
+import { Observer } from 'app/overmind';
+import { sortBy } from 'lodash-es';
+import React from 'react';
+import { Mutation, Query } from 'react-apollo';
+import Helmet from 'react-helmet';
 
-import { Container, HeaderContainer, Description } from '../../elements';
-import {
-  TeamContainer,
-  Section,
-  Members,
-  MemberHeader,
-  StyledEditIcon,
-} from './elements';
 import {
-  TEAM_QUERY,
   REVOKE_TEAM_INVITATION,
   SET_TEAM_DESCRIPTION,
+  TEAM_QUERY,
 } from '../../../queries';
-
+import { Container, Description, HeaderContainer } from '../../elements';
 import { AddTeamMember } from './AddTeamMember';
+import {
+  MemberHeader,
+  Members,
+  Section,
+  StyledEditIcon,
+  TeamContainer,
+} from './elements';
 import { RemoveTeamMember } from './RemoveTeamMember';
 
 const User = ({ user, rightElement }) => (
@@ -64,8 +62,8 @@ class TeamView extends React.PureComponent {
         <Query query={TEAM_QUERY} variables={{ id: teamId }}>
           {({ data, loading, error }) => (
             <Observer>
-              {({ store }) => {
-                const currentUser = store.user;
+              {({ state }) => {
+                const currentUser = state.user;
                 if (loading || error) {
                   return null;
                 }
@@ -163,8 +161,8 @@ class TeamView extends React.PureComponent {
 
                             <StyledEditIcon
                               onClick={() => {
-                                this.setState(state => ({
-                                  editingDescription: !state.editingDescription,
+                                this.setState(currentState => ({
+                                  editingDescription: !currentState.editingDescription,
                                 }));
                               }}
                             />
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Keywords.tsx
@@ -1,10 +1,9 @@
-import React, { FunctionComponent } from 'react';
 import Tags from '@codesandbox/common/lib/components/Tags';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
-
-import { clone } from 'app/componentConnectors';
 import { EditableTags } from 'app/components/EditableTags';
 import { useOvermind } from 'app/overmind';
+import { json } from 'overmind';
+import React, { FunctionComponent } from 'react';
 
 import { Item } from './elements';
 
@@ -46,7 +45,7 @@ export const Keywords: FunctionComponent<Props> = ({ editable }) => {
             tags.length !== 5 ? <input type="text" {...props} /> : null
           }
           template={getTemplateDefinition(template)}
-          value={clone(tags)}
+          value={json(tags)}
         />
       ) : (
         <Tags style={{ fontSize: 13 }} tags={tags} />
