🔨 Refactor, 🧠 Overmind | /app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.js

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

@@ -1,16 +1,18 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const FilesContainer = styled.div`
   margin-top: 1rem;
 `;
 
-export const File = styled.div`
-  position: relative;
-  transition: 0.3s ease background-color;
-  padding: 0.75rem 1rem;
+export const File = styled.div<{ created: boolean }>`
+  ${({ created }) => css`
+    position: relative;
+    transition: 0.3s ease background-color;
+    padding: 0.75rem 1rem;
 
-  ${props => props.created && `cursor: pointer`};
-  ${props => !props.created && `opacity: 0.9`};
+    ${created && `cursor: pointer`};
+    ${!created && `opacity: 0.9`};
+  `}
 `;
 
 export const CreateButton = styled.button`

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

@@ -4,7 +4,7 @@ import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import { Module, Configuration } from '@codesandbox/common/lib/types';
 import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 
 import BookIcon from 'react-icons/lib/md/library-books';
 import UIIcon from 'react-icons/lib/md/dvr';
@@ -21,12 +21,13 @@ import {
 } from './elements';
 
 type FileConfigProps = {
-  path: string,
+  path: string;
   info: {
-    module?: Module,
-    config: Configuration,
-  },
-  createModule: (title: string) => void,
+    module?: Module;
+    config: Configuration;
+  };
+  createModule?: (title: string) => void;
+  openModule?: (id: string) => void;
 };
 
 const FileConfig = ({
@@ -82,8 +83,13 @@ const FileConfig = ({
   );
 };
 
-const ConfigurationFiles = ({ store, signals }) => {
-  const sandbox = store.editor.currentSandbox;
+const ConfigurationFiles = () => {
+  const {
+    state,
+    actions: { files, editor },
+  } = useOvermind();
+
+  const sandbox = state.editor.currentSandbox;
   const { configurationFiles } = getDefinition(sandbox.template);
 
   const createdPaths = {};
@@ -123,7 +129,7 @@ const ConfigurationFiles = ({ store, signals }) => {
             <FileConfig
               key={path}
               openModule={id => {
-                signals.editor.moduleSelected({ id });
+                editor.moduleSelected({ id });
               }}
               path={path}
               info={info}
@@ -140,7 +146,7 @@ const ConfigurationFiles = ({ store, signals }) => {
             <FileConfig
               key={path}
               createModule={title => {
-                signals.files.moduleCreated({ title });
+                files.moduleCreated({ title, directoryShortid: null });
               }}
               path={path}
               info={info}
@@ -152,4 +158,4 @@ const ConfigurationFiles = ({ store, signals }) => {
   );
 };
 
-export default inject('signals', 'store')(observer(ConfigurationFiles));
+export default ConfigurationFiles;

packages/common/src/types/index.ts

@@ -61,6 +61,13 @@ export type Module = {
   type: 'file';
 };
 
+export type Configuration = {
+  title: string;
+  moreInfoUrl: string;
+  type: string;
+  description: string;
+};
+
 export type Directory = {
   id: string;
   title: string;