🔨 Refactor, 🧠 Overmind, refactored OpenedTabs to use Overmind (codesandbox#2769)

* refactored OpenedTabs to use Overmind

* Rename index.js to index.tsx

* fix types

* Use named import and functional component type

Author: fullstackzach

…ectoryEntry/Entry/EntryIcons/elements.js …ectoryEntry/Entry/EntryIcons/elements.tspackages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js renamed to 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;

…DirectoryEntry/Entry/EntryIcons/index.js …irectoryEntry/Entry/EntryIcons/index.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js renamed to 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;

…e/Files/DirectoryEntry/Entry/elements.js …e/Files/DirectoryEntry/Entry/elements.tspackages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts

@@ -0,0 +1,80 @@
+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 React from 'react';
+import CrossIcon from 'react-icons/lib/md/clear';
+import { EntryContainer } from '../elements';
+import { WorkspaceItem } from '../WorkspaceItem';
+import { CrossIconContainer, Dir, Title } from './elements';
+import SaveIcon from './SaveIcon';
+
+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 = (state.editor.tabs as ModuleTab[])
+    .map(t => moduleObject[t.moduleShortid])
+    .filter(x => x);
+
+  return (
+    <WorkspaceItem
+      title="Open Tabs"
+      actions={
+        <SaveIcon
+          disabled={state.editor.isAllModulesSynced}
+          onClick={e => {
+            if (e) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+            saveAllModules(state, actions);
+          }}
+        />
+      }
+    >
+      {openModules.map((m, i) => (
+        <EntryContainer
+          onClick={() => {
+            actions.editor.moduleSelected({ id: m.id });
+          }}
+          active={currentModuleShortid === m.shortid}
+          key={m.id}
+        >
+          <EntryIcons
+            type={getType(m.title)}
+            error={m.errors && m.errors.length > 0}
+          />
+          <Title>{m.title}</Title>
+          <Dir>
+            {getModulePath(sandbox.modules, sandbox.directories, m.id)
+              .replace('/', '')
+              .replace(new RegExp(m.title + '$'), '')}
+          </Dir>
+          {currentModuleShortid !== m.shortid && (
+            <CrossIconContainer
+              onClick={e => {
+                if (e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+
+                actions.editor.tabClosed(i);
+              }}
+            >
+              <CrossIcon />
+            </CrossIconContainer>
+          )}
+        </EntryContainer>
+      ))}
+    </WorkspaceItem>
+  );
+};

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

@@ -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/WorkspaceItem/index.tsx

@@ -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;