🔨 Refactored 🧠 Overmind Hacktober | Refactor app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js to use Overmind (codesandbox#2818)

* refactor EnvironmentVariables to use useOvermind

* Fix typing of EnvVariables

Author: deinakings

packages/app/src/app/overmind/effects/api/index.ts

@@ -23,15 +23,15 @@ import { client } from 'app/graphql/client';
 import { LIST_TEMPLATES } from 'app/pages/Dashboard/queries';
 
 import {
-  transformSandbox,
   transformDirectory,
   transformModule,
+  transformSandbox,
 } from '../utils/sandbox';
 import apiFactory, { Api, ApiConfig } from './apiFactory';
 import {
-  SandboxAPIResponse,
-  IModuleAPIResponse,
   IDirectoryAPIResponse,
+  IModuleAPIResponse,
+  SandboxAPIResponse,
 } from './types';
 
 let api: Api;
@@ -154,7 +154,9 @@ export default {
       },
     });
   },
-  getEnvironmentVariables(sandboxId: string): Promise<EnvironmentVariable[]> {
+  getEnvironmentVariables(
+    sandboxId: string
+  ): Promise<{ [key: string]: string }> {
     return api.get(
       `/sandboxes/${sandboxId}/env`,
       {},
@@ -164,7 +166,7 @@ export default {
   saveEnvironmentVariable(
     sandboxId: string,
     environmentVariable: EnvironmentVariable
-  ): Promise<EnvironmentVariable[]> {
+  ): Promise<{ [key: string]: string }> {
     return api.post(
       `/sandboxes/${sandboxId}/env`,
       {
@@ -178,7 +180,7 @@ export default {
   deleteEnvironmentVariable(
     sandboxId: string,
     name: string
-  ): Promise<EnvironmentVariable[]> {
+  ): Promise<{ [key: string]: string }> {
     return api.delete(
       `/sandboxes/${sandboxId}/env/${name}`,
       {},

…/Workspace/items/Server/EnvVars/index.js …Workspace/items/Server/EnvVars/index.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/index.tsx

@@ -1,12 +1,17 @@
+import { useOvermind } from 'app/overmind';
 import React, { useEffect } from 'react';
-import { inject, observer } from 'app/componentConnectors';
 
 import { WorkspaceInputContainer } from '../../../elements';
-
 import { EnvEntry } from './EnvEntry';
 import { EnvModal } from './EnvModal';
 
-const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
+export const EnvironmentVariables: React.FC<{}> = props => {
+  const {
+    actions: { editor },
+    state: {
+      editor: { currentSandbox },
+    },
+  } = useOvermind();
   useEffect(() => {
     editor.fetchEnvironmentVariables();
   }, [editor]);
@@ -19,7 +24,7 @@ const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
     editor.deleteEnvironmentVariable({ name });
   };
 
-  const envVars = store.editor.currentSandbox.environmentVariables;
+  const envVars = currentSandbox.environmentVariables;
 
   if (!envVars) {
     return (
@@ -31,17 +36,13 @@ const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
 
   return (
     <div>
-      {Object.keys(envVars.toJSON ? envVars.toJSON() : envVars).map(keyName => (
+      {Object.keys(envVars).map(keyName => (
         <EnvEntry
           onSubmit={createEnv}
           onDelete={deleteEnv}
           key={keyName}
           name={keyName}
-          value={
-            typeof envVars.get === 'function'
-              ? envVars.get(keyName)
-              : envVars[keyName]
-          }
+          value={envVars[keyName]}
         />
       ))}
 
@@ -51,7 +52,3 @@ const EnvironmentVariablesComponent = ({ signals: { editor }, store }) => {
     </div>
   );
 };
-
-export const EnvironmentVariables = inject('store', 'signals')(
-  observer(EnvironmentVariablesComponent)
-);

packages/common/src/types/index.ts

@@ -307,7 +307,9 @@ export type Sandbox = {
   git: GitInfo | null;
   tags: string[];
   isFrozen: boolean;
-  environmentVariables: EnvironmentVariable[] | null;
+  environmentVariables: {
+    [key: string]: string;
+  } | null;
   /**
    * This is the source it's assigned to, a source contains all dependencies, modules and directories
    *