🔨 Switch OpenedTabs to use useOvermind (codesandbox#3428)

* 🔨 Switch OpenedTabs to use useOvermind

* Fix types

* Fix types

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -366,12 +366,18 @@ export const likeSandboxToggled: AsyncAction<string> = async (
   state.editor.sandboxes[id].userLiked = !state.editor.sandboxes[id].userLiked;
 };
 
-export const moduleSelected: Action<{
-  // Path means it is coming from VSCode
-  path?: string;
-  // Id means it is coming from Explorer
-  id?: string;
-}> = ({ state, effects, actions }, { path, id }) => {
+export const moduleSelected: Action<
+  | {
+      // Id means it is coming from Explorer
+      id: string;
+      path?: undefined;
+    }
+  | {
+      // Path means it is coming from VSCode
+      id?: undefined;
+      path: string;
+    }
+> = ({ actions, effects, state }, { id, path }) => {
   effects.analytics.track('Open File');
 
   const sandbox = state.editor.currentSandbox;
@@ -381,17 +387,13 @@ export const moduleSelected: Action<{
   }
 
   try {
-    let module;
-
-    if (path) {
-      module = effects.utils.resolveModule(
-        path.replace(/^\/sandbox\//, ''),
-        sandbox.modules,
-        sandbox.directories
-      );
-    } else {
-      module = sandbox.modules.find(moduleItem => moduleItem.id === id);
-    }
+    const module = path
+      ? effects.utils.resolveModule(
+          path.replace(/^\/sandbox\//, ''),
+          sandbox.modules,
+          sandbox.directories
+        )
+      : sandbox.modules.filter(moduleItem => moduleItem.id === id)[0];
 
     if (module.shortid === state.editor.currentModuleShortid) {
       return;
@@ -594,7 +596,7 @@ export const fetchEnvironmentVariables: AsyncAction = async ({
 };
 
 export const updateEnvironmentVariables: AsyncAction<EnvironmentVariable> = async (
-  { state, effects },
+  { effects, state },
   environmentVariable
 ) => {
   if (!state.editor.currentSandbox) {

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -259,12 +259,12 @@ export const onFollow: Action<{
 
   const user = state.live.roomInfo.users.find(u => u.id === liveUserId);
 
-  if (user && user.currentModuleShortid && state.editor.currentSandbox) {
+  if (user!.currentModuleShortid && state.editor.currentSandbox) {
     const { modules } = state.editor.currentSandbox;
-    const module = modules.find(m => m.shortid === user.currentModuleShortid);
+    const module = modules.filter(
+      ({ shortid }) => shortid === user!.currentModuleShortid
+    )[0];
 
-    actions.editor.moduleSelected({
-      id: module ? module.id : undefined,
-    });
+    actions.editor.moduleSelected({ id: module.id });
   }
 };

packages/app/src/app/overmind/utils/saveAllModules.ts

@@ -1,27 +1,33 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-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 Container = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+export const RedIcon = styled.span<{ height: number; width: number }>`
+  ${({ height, theme, width }) => css`
+    color: ${theme.red};
+    width: ${width}px;
+    height: ${height}px;
+  `};
 `;
 
 export const SVGIcon = styled.span<{
+  height: number;
   url: string;
   width: number;
-  height: number;
 }>`
-  background-image: url(${props => props.url});
-  background-size: ${props => props.width}px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  vertical-align: top;
-  flex-shrink: 0;
+  ${({ height, url, width }) => css`
+    background-image: url(${url});
+    background-size: ${width}px;
+    background-position: 0;
+    background-repeat: no-repeat;
+    width: ${width}px;
+    height: ${height}px;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    vertical-align: top;
+    flex-shrink: 0;
+  `};
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -0,0 +1,36 @@
+import CodeSandboxSvg from '@codesandbox/common/lib/icons/codesandbox.svg';
+import fileSvg from '@codesandbox/common/lib/icons/file.svg';
+import folderSvg from '@codesandbox/common/lib/icons/folder.svg';
+import folderOpenSvg from '@codesandbox/common/lib/icons/folder-open.svg';
+import imageSvg from '@codesandbox/common/lib/icons/image.svg';
+import nowSvg from '@codesandbox/common/lib/icons/now.svg';
+
+const imageExists = async (url: string): Promise<boolean> =>
+  new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = resolve;
+    img.onerror = reject;
+    img.src = url;
+  })
+    .then(() => true)
+    .catch(() => false);
+
+const base =
+  'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons';
+export const getIconURL = async (type: string): Promise<string> => {
+  const defaultURL = `${base}/${type}.svg`;
+  const URLByType = {
+    codesandbox: CodeSandboxSvg,
+    image: imageSvg,
+    now: nowSvg,
+    directory: folderSvg,
+    'directory-open': folderOpenSvg,
+  };
+  const url: string = URLByType[type] || defaultURL;
+
+  if (await imageExists(url)) {
+    return url;
+  }
+
+  return fileSvg;
+};

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

@@ -1,61 +1,48 @@
-import React, { Component } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import ErrorIcon from 'react-icons/lib/md/error';
 
-import { RedIcon, SVGIcon } from './elements';
-import getIconURL from './GetIconURL';
+import { Container, RedIcon, SVGIcon } from './elements';
+import { getIconURL } from './getIconURL';
 
 type Props = {
+  error?: boolean;
+  height?: number;
   type: string;
   width?: number;
-  height?: number;
-  error?: boolean;
 };
 
-class GetIcon extends Component<Props> {
-  state = { icon: null };
-
-  getIcon = async type => {
-    const icon = await getIconURL(type);
-
-    this.setState({
-      icon,
-    });
-  };
-
-  async componentDidMount() {
-    this.getIcon(this.props.type);
-  }
-
-  async componentDidUpdate(prevProps) {
-    if (this.props.type !== prevProps.type) {
-      this.getIcon(this.props.type);
-    }
-  }
-
-  render() {
-    const { error, width, height } = this.props;
-    const { icon } = this.state;
-
-    if (error) {
-      return (
-        <RedIcon width={width} height={height}>
-          <ErrorIcon width={width} height={height} />
-        </RedIcon>
-      );
-    }
-    return <SVGIcon url={icon} width={width} height={height} />;
-  }
-}
-
-const EntryIcon: React.FC<Props> = ({
+const EntryIcon: FunctionComponent<Props> = ({
+  error,
+  height = 16,
   type,
   width = 16,
-  height = 16,
-  error,
-}) => (
-  <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-    <GetIcon type={type} error={error} width={width} height={height} />
-  </div>
-);
+}) => {
+  const [icon, setIcon] = useState<string>(null);
+
+  useEffect(() => {
+    const fetchIconURL = async () => {
+      const iconURL = await getIconURL(type);
+
+      setIcon(iconURL);
+    };
+
+    fetchIconURL();
+  }, [type]);
+
+  const Icon = () =>
+    error ? (
+      <RedIcon height={height} width={width}>
+        <ErrorIcon height={height} width={width} />
+      </RedIcon>
+    ) : (
+      <SVGIcon height={height} url={icon} width={width} />
+    );
+
+  return (
+    <Container>
+      <Icon />
+    </Container>
+  );
+};
 
 export default EntryIcon;