Cleanup Explorer screen (#4505)

Co-authored-by: Sara Vieira <[email protected]>

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/BundleSizes.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
 import { Stack, Text } from '@codesandbox/components';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 
 const formatSize = (value: number) => {
   let unit: string;
   let size: number;
+
   if (Math.log10(value) < 3) {
     unit = 'B';
     size = value;
@@ -18,42 +19,52 @@ const formatSize = (value: number) => {
   return `${size.toFixed(1)}${unit}`;
 };
 
+type Bundle = {
+  gzip: number;
+  size: number;
+};
 type Props = {
   dependency: string;
   version: string;
 };
-
-export const BundleSizes = ({ dependency, version = '' }: Props) => {
-  const [size, setSize] = useState(null);
+export const BundleSizes: FunctionComponent<Props> = ({
+  dependency,
+  version,
+}) => {
+  const [bundle, setBundle] = useState<Bundle | null>(null);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    const cleanVersion = version.split('^');
-    getSizeForPKG(`${dependency}@${cleanVersion[cleanVersion.length - 1]}`);
-  }, [dependency, version]);
-
   const getSizeForPKG = (pkg: string) => {
     fetch(`https://bundlephobia.com/api/size?package=${pkg}`)
-      .then(rsp => rsp.json())
-      .then(setSize)
+      .then(response => response.json())
+      .then(setBundle)
       .catch(setError);
   };
+  useEffect(() => {
+    const cleanVersion = version.split('^');
+    getSizeForPKG(`${dependency}@${cleanVersion[cleanVersion.length - 1]}`);
+  }, [dependency, version]);
 
   if (error) {
     return (
-      <Text variant="muted" marginBottom={2}>
+      <Text marginBottom={2} variant="muted">
         There was a problem getting the size for {dependency}
       </Text>
     );
   }
 
-  return size ? (
+  return bundle ? (
     <Stack justify="space-between" css={{ width: '100%' }}>
       <Text>
-        <Text variant="muted">Gzip:</Text> {formatSize(size.gzip)}
+        <Text variant="muted">Gzip: </Text>
+
+        {formatSize(bundle.gzip)}
       </Text>
+
       <Text>
-        <Text variant="muted">Size:</Text> {formatSize(size.size)}
+        <Text variant="muted">Size: </Text>
+
+        {formatSize(bundle.size)}
       </Text>
     </Stack>
   ) : null;

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx

@@ -1,66 +1,66 @@
-import React, { useState, useEffect } from 'react';
-import CrossIcon from 'react-icons/lib/md/clear';
-import RefreshIcon from 'react-icons/lib/md/refresh';
-import ArrowDropDown from 'react-icons/lib/md/keyboard-arrow-down';
-import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
-import algoliasearch from 'algoliasearch/lite';
-import compareVersions from 'compare-versions';
 import Tooltip, {
   SingletonTooltip,
 } from '@codesandbox/common/lib/components/Tooltip';
 import { formatVersion } from '@codesandbox/common/lib/utils/ci';
-
-import css from '@styled-system/css';
 import {
+  Button,
+  Link,
   ListAction,
-  Stack,
-  SidebarRow,
   Select,
+  SidebarRow,
+  Stack,
   Text,
-  Link,
-  Button,
 } from '@codesandbox/components';
+import css from '@styled-system/css';
+import algoliasearch from 'algoliasearch/lite';
+import compareVersions from 'compare-versions';
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import CrossIcon from 'react-icons/lib/md/clear';
+import RefreshIcon from 'react-icons/lib/md/refresh';
+import ArrowDropDown from 'react-icons/lib/md/keyboard-arrow-down';
+import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
 
-import { BundleSizes } from './BundleSizes';
+import { useOvermind } from 'app/overmind';
 
-interface Props {
-  dependencies: { [dep: string]: string };
-  dependency: string;
-  onRemove: (dep: string) => void;
-  onRefresh: (dep: string, version?: string) => void;
-}
+import { BundleSizes } from './BundleSizes';
 
 const client = algoliasearch('OFCNCOG2CU', '00383ecd8441ead30b1b0ff981c426f5');
 const index = client.initIndex('npm-search');
 
-export const Dependency = ({
+type Props = {
+  dependencies: { [dependency: string]: string };
+  dependency: string;
+};
+export const Dependency: FunctionComponent<Props> = ({
   dependencies,
   dependency,
-  onRemove,
-  onRefresh,
-}: Props) => {
-  const [version, setVersion] = useState(null);
+}) => {
+  const {
+    actions: {
+      editor: { addNpmDependency, npmDependencyRemoved },
+    },
+  } = useOvermind();
   const [open, setOpen] = useState(false);
+  const [version, setVersion] = useState(null);
   const [versions, setVersions] = useState([]);
 
   const setVersionsForLatestPkg = (pkg: string) => {
     fetch(`/api/v1/dependencies/${pkg}`)
       .then(response => response.json())
-      .then(data => setVersion(data.data.version))
+      .then(({ data }) => setVersion(data.version))
       .catch(err => {
         if (process.env.NODE_ENV === 'development') {
           console.error(err); // eslint-disable-line no-console
         }
       });
   };
-
   useEffect(() => {
     // @ts-ignore
     index.getObject(dependency, ['versions']).then(({ versions: results }) => {
       const orderedVersions = Object.keys(results).sort((a, b) => {
         try {
           return compareVersions(b, a);
-        } catch (e) {
+        } catch {
           return 0;
         }
       });
@@ -84,15 +84,16 @@ export const Dependency = ({
       e.preventDefault();
       e.stopPropagation();
     }
-    onRemove(dependency);
-  };
 
+    npmDependencyRemoved(dependency);
+  };
   const handleRefresh = e => {
     if (e) {
       e.preventDefault();
       e.stopPropagation();
     }
-    onRefresh(dependency);
+
+    addNpmDependency({ name: dependency });
   };
 
   if (typeof dependencies[dependency] !== 'string') {
@@ -102,67 +103,67 @@ export const Dependency = ({
   return (
     <>
       <ListAction
-        justify="space-between"
         align="center"
         css={css({
           position: 'relative',
+
           '.actions': {
             backgroundColor: 'sideBar.background',
             display: 'none',
           },
+
           ':hover .actions': {
             backgroundColor: 'list.hoverBackground',
             display: 'flex',
           },
         })}
+        justify="space-between"
       >
         <Link
+          css={{ maxWidth: '60%', position: 'absolute', zIndex: 2 }}
           href={`/examples/package/${dependency}`}
+          maxWidth="60%"
           target="_blank"
           title={dependency}
-          maxWidth="60%"
-          css={{
-            position: 'absolute',
-            zIndex: 2,
-            maxWidth: '60%',
-          }}
         >
           {dependency}
         </Link>
 
         <Stack
           align="center"
-          justify="flex-end"
           css={css({
             position: 'absolute',
             right: 2,
             flexGrow: 0,
             flexShrink: 1,
             width: '100%',
           })}
+          justify="flex-end"
         >
-          <Text variant="muted" maxWidth="30%">
+          <Text maxWidth="30%" variant="muted">
             {formatVersion(dependencies[dependency])}{' '}
             {version && <span>({formatVersion(version)})</span>}
           </Text>
         </Stack>
 
         <Stack
-          className="actions"
           align="center"
-          justify="flex-end"
           css={css({
             position: 'absolute',
             right: 0,
             width: 'auto',
             zIndex: 2, // overlay on dependency name
             paddingLeft: 1,
           })}
+          className="actions"
+          justify="flex-end"
         >
           <Select
             css={{ width: '80px' }}
+            onChange={({ target: { value } }) =>
+              addNpmDependency({ name: dependency, version: value })
+            }
             value={versions.find(v => v === dependencies[dependency])}
-            onChange={e => onRefresh(dependency, e.target.value)}
           >
             {versions.map(a => (
               <option key={a}>{a}</option>
@@ -174,39 +175,41 @@ export const Dependency = ({
               <>
                 <Tooltip
                   content={open ? 'Hide sizes' : 'Show sizes'}
-                  style={{ outline: 'none' }}
                   singleton={singleton}
+                  style={{ outline: 'none' }}
                 >
                   <Button
-                    variant="link"
-                    onClick={() => setOpen(!open)}
                     css={css({ minWidth: 5 })}
+                    onClick={() => setOpen(show => !show)}
+                    variant="link"
                   >
                     {open ? <ArrowDropUp /> : <ArrowDropDown />}
                   </Button>
                 </Tooltip>
+
                 <Tooltip
                   content="Update to latest"
-                  style={{ outline: 'none' }}
                   singleton={singleton}
+                  style={{ outline: 'none' }}
                 >
                   <Button
-                    variant="link"
-                    onClick={handleRefresh}
                     css={css({ minWidth: 5 })}
+                    onClick={handleRefresh}
+                    variant="link"
                   >
                     <RefreshIcon />
                   </Button>
                 </Tooltip>
+
                 <Tooltip
                   content="Remove"
                   style={{ outline: 'none' }}
                   singleton={singleton}
                 >
                   <Button
-                    variant="link"
-                    onClick={handleRemove}
                     css={css({ minWidth: 5 })}
+                    onClick={handleRemove}
+                    variant="link"
                   >
                     <CrossIcon />
                   </Button>
@@ -216,6 +219,7 @@ export const Dependency = ({
           </SingletonTooltip>
         </Stack>
       </ListAction>
+
       {open ? (
         <SidebarRow marginX={2}>
           <BundleSizes

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx

@@ -10,14 +10,12 @@ import React, { FunctionComponent } from 'react';
 
 import { Dependency } from './Dependency';
 
-export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
-  readonly = false,
-}) => {
+type Props = {
+  readonly: boolean;
+};
+export const Dependencies: FunctionComponent<Props> = ({ readonly }) => {
   const {
-    actions: {
-      modalOpened,
-      editor: { addNpmDependency, npmDependencyRemoved },
-    },
+    actions: { modalOpened },
     state: {
       editor: { parsedConfigurations },
     },
@@ -32,7 +30,6 @@ export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
   }
 
   const { error, parsed } = parsedConfigurations.package;
-
   if (error) {
     return (
       <SidebarRow marginX={2}>
@@ -42,9 +39,8 @@ export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
   }
 
   const { dependencies = {} } = parsed;
-
   return (
-    <Collapsible title="Dependencies" defaultOpen>
+    <Collapsible defaultOpen title="Dependencies">
       <List marginBottom={2}>
         {Object.keys(dependencies)
           .sort()
@@ -53,16 +49,15 @@ export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
               dependencies={dependencies}
               dependency={dependency}
               key={dependency}
-              onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={npmDependencyRemoved}
             />
           ))}
       </List>
-      {!readonly && (
+
+      {readonly ? null : (
         <SidebarRow marginX={2}>
           <Button
-            variant="secondary"
             onClick={() => modalOpened({ modal: 'searchDependencies' })}
+            variant="secondary"
           >
             Add dependency
           </Button>