🔨 Refactor, 🧠 Overmind, refactored OpenedTabs to use Overmind

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js → packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts

@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 
-export const RedIcon = styled.span`
+export const RedIcon = styled.span<{
+  width: number;
+  height: number;
+}>`
   color: ${props => props.theme.red};
   width: ${props => props.width}px;
   height: ${props => props.height}px;
 `;
 
-export const SVGIcon = styled.span`
+export const SVGIcon = styled.span<{
+  url: string;
+  width: number;
+  height: number;
+}>`
   background-image: url(${props => props.url});
   background-size: ${props => props.width}px;
   background-position: 0;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js → packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx

@@ -1,11 +1,17 @@
 import React, { Component } from 'react';
-
 import ErrorIcon from 'react-icons/lib/md/error';
 
 import { RedIcon, SVGIcon } from './elements';
 import getIconURL from './GetIconURL';
 
-class GetIcon extends Component {
+type Props = {
+  type: string;
+  width?: number;
+  height?: number;
+  error?: boolean;
+};
+
+class GetIcon extends Component<Props> {
   state = { icon: null };
 
   getIcon = async type => {
@@ -27,36 +33,29 @@ class GetIcon extends Component {
   }
 
   render() {
-    const { type, error, width, height } = this.props;
+    const { error, width, height } = this.props;
     const { icon } = this.state;
 
     if (error) {
       return (
-        <RedIcon>
+        <RedIcon width={width} height={height}>
           <ErrorIcon width={width} height={height} />
         </RedIcon>
       );
     }
-    return <SVGIcon url={icon} type={type} width={width} height={height} />;
+    return <SVGIcon url={icon} width={width} height={height} />;
   }
 }
 
-function EntryIcon({
+const EntryIcon: React.FC<Props> = ({
   type,
   width = 16,
   height = 16,
   error,
-}: {
-  type: string,
-  width?: number,
-  height?: number,
-  error?: boolean,
-}) {
-  return (
-    <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-      <GetIcon type={type} error={error} width={width} height={height} />
-    </div>
-  );
-}
+}) => (
+  <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+    <GetIcon type={type} error={error} width={width} height={height} />
+  </div>
+);
 
 export default EntryIcon;

packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js → packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.tsx

@@ -1,28 +1,27 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import { ModuleTab } from '@codesandbox/common/lib/types';
+import { useOvermind } from 'app/overmind';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { saveAllModules } from 'app/store/modules/editor/utils';
 // eslint-disable-next-line import/extensions
 import getType from 'app/utils/get-type.ts';
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { saveAllModules } from 'app/store/modules/editor/utils';
-
+import React from 'react';
 import CrossIcon from 'react-icons/lib/md/clear';
-
-import WorkspaceItem from '../WorkspaceItem';
 import { EntryContainer } from '../elements';
-import { Title, Dir, CrossIconContainer } from './elements';
+import { WorkspaceItem } from '../WorkspaceItem';
+import { CrossIconContainer, Dir, Title } from './elements';
 import SaveIcon from './SaveIcon';
 
-const OpenedTabs = ({ store, signals }) => {
-  const sandbox = store.editor.currentSandbox;
-  const { currentModuleShortid } = store.editor;
+export const OpenedTabs: React.FC = () => {
+  const { state, actions } = useOvermind();
+  const sandbox = state.editor.currentSandbox;
+  const { currentModuleShortid } = state.editor;
   const moduleObject = {};
   sandbox.modules.forEach(m => {
     moduleObject[m.shortid] = m;
   });
 
-  const openModules = store.editor.tabs
+  const openModules = (state.editor.tabs as ModuleTab[])
     .map(t => moduleObject[t.moduleShortid])
     .filter(x => x);
 
@@ -31,27 +30,26 @@ const OpenedTabs = ({ store, signals }) => {
       title="Open Tabs"
       actions={
         <SaveIcon
-          disabled={store.editor.isAllModulesSynced}
+          disabled={state.editor.isAllModulesSynced}
           onClick={e => {
             if (e) {
               e.preventDefault();
               e.stopPropagation();
             }
-            saveAllModules(store, signals);
+            saveAllModules(state, actions);
           }}
         />
       }
     >
       {openModules.map((m, i) => (
         <EntryContainer
           onClick={() => {
-            signals.editor.moduleSelected({ id: m.id });
+            actions.editor.moduleSelected({ id: m.id });
           }}
           active={currentModuleShortid === m.shortid}
           key={m.id}
         >
           <EntryIcons
-            isNotSynced={m.isNotSynced}
             type={getType(m.title)}
             error={m.errors && m.errors.length > 0}
           />
@@ -69,7 +67,7 @@ const OpenedTabs = ({ store, signals }) => {
                   e.stopPropagation();
                 }
 
-                signals.editor.tabClosed({ tabIndex: i });
+                actions.editor.tabClosed(i);
               }}
             >
               <CrossIcon />
@@ -80,5 +78,3 @@ const OpenedTabs = ({ store, signals }) => {
     </WorkspaceItem>
   );
 };
-
-export default inject('signals', 'store')(observer(OpenedTabs));

packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/index.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Animate as ReactShow } from 'react-show';
 
 import {
+  Actions,
   ChildContainer,
+  ExpandIconContainer,
   ItemHeader,
   Title,
-  ExpandIconContainer,
-  Actions,
 } from './elements';
 
 type Props = {
@@ -15,7 +15,7 @@ type Props = {
   keepState?: boolean;
   disabled?: boolean;
   defaultOpen?: boolean;
-  actions?: React.Component<any, any>;
+  actions?: React.ReactNode;
   style?: React.CSSProperties;
   showOverflow?: boolean;
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.js → packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts

@@ -1,7 +1,19 @@
-import styled from 'styled-components';
 import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
+import styled from 'styled-components';
+
+type ContainerStylesProps = {
+  theme?: any;
+  color?: string;
+  alternative?: boolean;
+  noTransition?: boolean;
+  depth?: number;
+  active?: boolean;
+  editing?: boolean;
+  nameValidationError?: string;
+  rightColors?: string[];
+};
 
-export const getContainerStyles = props => {
+export const getContainerStyles = (props: ContainerStylesProps) => {
   const { theme } = props;
   const getSelectedColor = activeColor => {
     // some have active as full white and should never be
@@ -94,7 +106,7 @@ export const getContainerStyles = props => {
   return styles;
 };
 
-export const EntryContainer = styled.div`
+export const EntryContainer = styled.div<ContainerStylesProps>`
   ${props => getContainerStyles(props)};
 `;
 
@@ -152,7 +164,7 @@ export const IconArea = styled.div`
   ${fadeIn(0)};
 `;
 
-export const WorkspaceInputContainer = styled.div`
+export const WorkspaceInputContainer = styled.div<{ errorMessage?: string }>`
   display: inline-block;
   display: flex;
   overflow: visible;