resolve review comments

joshwcomeau · Sep 2, 2018 · 6afbcc3 · 6afbcc3
1 parent dcdf510
commit 6afbcc3
Show file tree

Hide file tree

Showing 12 changed files with 642 additions and 619 deletions.
diff --git a/src/components/AddDependencySearchResult/AddDependencySearchResult.js b/src/components/AddDependencySearchResult/AddDependencySearchResult.js
@@ -25,6 +25,16 @@ import CustomHighlight from '../CustomHighlight';
 
 import type { DependencyStatus } from '../../types';
 
+const DEPENDENCY_ACTIONS_COPY = {
+ idle: 'Installed',
+ installing: 'Installing…',
+ updating: 'Updating…',
+ deleting: 'Deleting…',
+ 'queued-install': 'Queued for Install',
+ 'queued-update': 'Queued for Update',
+ 'queued-delete': 'Queued for Delete',
+};
+
 type Props = {
  projectId: string,
  currentStatus: ?DependencyStatus,
@@ -76,8 +86,9 @@ const getColorForDownloadNumber = (num: number) => {
 class AddDependencySearchResult extends PureComponent<Props> {
  renderActionArea() {
  const { hit, projectId, currentStatus, addDependency } = this.props;
+ const isAlreadyInstalled = currentStatus === 'idle';
 
- if (currentStatus === 'idle') {
+ if (isAlreadyInstalled) {
  return (
  <NoActionAvailable>
  <IconBase
@@ -96,16 +107,7 @@ class AddDependencySearchResult extends PureComponent<Props> {
  <NoActionAvailable>
  <Spinner size={24} />
  <Spacer size={6} />
- {
- {
- installing: 'Installing..',
- updating: 'Updating..',
- deleting: 'Deleting..',
- 'queued-install': 'Queued for Install',
- 'queued-update': 'Queued for Update',
- 'queued-delete': 'Queued for Delete',
- }[currentStatus]
- }
+ {DEPENDENCY_ACTIONS_COPY[currentStatus]}
  </NoActionAvailable>
  );
  }

diff --git a/src/components/DeleteDependencyButton/DeleteDependencyButton.js b/src/components/DeleteDependencyButton/DeleteDependencyButton.js
@@ -12,6 +12,11 @@ import PixelShifter from '../PixelShifter';
 
 const { dialog } = remote;
 
+const DEPENDENCY_DELETE_COPY = {
+ idle: 'Delete',
+ 'queued-delete': 'Queued for Delete…',
+};
+
 type Props = {
  projectId: string,
  dependencyName: string,
@@ -75,10 +80,7 @@ class DeleteDependencyButton extends PureComponent<Props> {
  <Spinner size={18} color={COLORS.white} />
  </PixelShifter>
  ) : (
- {
- idle: 'Delete',
- 'queued-delete': 'Queued for Delete..',
- }[dependencyStatus]
+ DEPENDENCY_DELETE_COPY[dependencyStatus]
  )}
  </Button>
  );

diff --git a/src/components/DependencyManagementPane/DependencyManagementPane.js b/src/components/DependencyManagementPane/DependencyManagementPane.js
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import IconBase from 'react-icons-kit';
-import { moreHorizontal, plus } from 'react-icons-kit/feather';
+import { plus } from 'react-icons-kit/feather/plus';
 
 import { runTask, abortTask } from '../../actions';
 import { getSelectedProject } from '../../reducers/projects.reducer';
@@ -102,6 +102,44 @@ class DependencyManagementPane extends PureComponent<Props, State> {
  this.setState({ addingNewDependency: false });
  };
 
+ renderListAddon = (dependency, isSelected) => {
+ if (
+ dependency.status === 'installing' ||
+ dependency.status.match(/^queued-/)
+ ) {
+ return (
+ <Spinner size={20} color={isSelected ? COLORS.white : undefined} />
+ );
+ }
+
+ return (
+ <DependencyVersion isSelected={isSelected}>
+ {dependency.version}
+ </DependencyVersion>
+ );
+ };
+
+ renderMainContents = (selectedDependency, projectId) => {
+ if (
+ selectedDependency.status === 'installing' ||
+ selectedDependency.status === 'queued-install'
+ ) {
+ return (
+ <DependencyInstalling
+ name={selectedDependency.name}
+ queued={selectedDependency.status === 'queued-install'}
+ />
+ );
+ }
+
+ return (
+ <DependencyDetails
+ projectId={projectId}
+ dependency={selectedDependency}
+ />
+ );
+ };
+
  render() {
  const { id, dependencies } = this.props.project;
  const { selectedDependencyIndex, addingNewDependency } = this.state;
@@ -123,32 +161,9 @@ class DependencyManagementPane extends PureComponent<Props, State> {
  onClick={() => this.selectDependency(dependency.name)}
  >
  <DependencyName>{dependency.name}</DependencyName>
- {dependency.status === 'installing' ? (
- <Spinner
- size={20}
- color={
- selectedDependencyIndex === index
- ? COLORS.white
- : undefined
- }
- />
- ) : dependency.status.match(/^queued-/) ? (
- <span
- style={{
- color:
- selectedDependencyIndex === index
- ? COLORS.white
- : undefined,
- }}
- >
- <IconBase size={20} icon={moreHorizontal} />
- </span>
- ) : (
- <DependencyVersion
- isSelected={selectedDependencyIndex === index}
- >
- {dependency.version}
- </DependencyVersion>
+ {this.renderListAddon(
+ dependency,
+ selectedDependencyIndex === index
  )}
  </DependencyButton>
  ))}
@@ -182,18 +197,7 @@ class DependencyManagementPane extends PureComponent<Props, State> {
  </MountAfter>
  </DependencyList>
  <MainContent>
- {selectedDependency.status === 'installing' ||
- selectedDependency.status === 'queued-install' ? (
- <DependencyInstalling
- name={selectedDependency.name}
- queued={selectedDependency.status === 'queued-install'}
- />
- ) : (
- <DependencyDetails
- projectId={id}
- dependency={selectedDependency}
- />
- )}
+ {this.renderMainContents(selectedDependency, id)}
  </MainContent>
  </Wrapper>