addresses requested changes to deal with differences between editor d…

…rop down and sketch creation drop down. Changes the data passed in to the editor drop down to match format of sketch so that common dropdownbutton class works for both cases

src/components/Sketches/components/CreateSketchModal.js

@@ -247,10 +247,13 @@ class CreateSketchModal extends React.Component {
           </Col>
           <Col xs="8" className="d-flex align-items-center">
             <DropdownButton
-              dropdownItems={LanguageDropdownValues}
+              children={LanguageDropdownValues}
               onSelect={(lang) => this.setState({ language: lang })}
               displayValue={this.state.language.display || LanguageDropdownDefault.display}
-              isSketchCallee={true}
+              displayClass={'sketches'}
+              toggleClass={''}
+              toggleColor={'primary'}
+              toggleSize={'lg'}
             />
           </Col>
         </Row>

src/components/Sketches/components/EditSketchModal.js

@@ -190,14 +190,17 @@ class EditSketchModal extends React.Component {
             </Col>
             <Col xs="8" className="d-flex align-items-center">
               <DropdownButton
-                dropdownItems={LanguageDropdownValues}
+                children={LanguageDropdownValues}
                 onSelect={(lang) => this.setState({ newLanguage: lang })}
                 displayValue={
                   this.state.newLanguage !== -1
                     ? this.state.newLanguage.display
                     : this.props.sketchLang
                 }
-                isSketchCallee={true}
+                displayClass={'sketches'}
+                toggleClass={''}
+                toggleColor={'primary'}
+                toggleSize={'lg'}
               />
             </Col>
           </Row>

src/components/common/DropdownButton.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 /** --------Props---------------
- * dropdownItems: array of strings, each string being the name of a Program
+ * children: array of strings, each string being the name of a Program
  * displayValue: string to be displayed as the placeholder for the dropdown
  * onSelect: function called when an item is selected in the dropdown
  */
@@ -15,57 +15,51 @@ const DropdownButton = (props) => {
   const {
     dirty,
     onSelect,
-    dropdownItems,
+    children,
     defaultOpen,
     displayValue,
-    currentLanguage,
-    isSketchCallee,
+    displayClass,
+    toggleClass,
+    toggleColor,
+    toggleSize,
   } = props;
 
+  const parentDisplay = displayClass + '-language-dropdown';
+  const itemDisplay = displayClass + '-language-dropdown-closed-content';
   const [dropdownOpen, setdropdownOpen] = useState(defaultOpen || false);
 
   const toggleHandler = (prevVal) => {
     setdropdownOpen(!prevVal);
   };
 
-  const selectLanguage = (program) => {
-    let result = true;
-    if (dirty) {
-      result = window.confirm('Are you sure you want to change programs? You have unsaved changes');
-    }
-
-    if (onSelect && result) {
-      onSelect(program);
-    }
-  };
-
   const renderDropdownItems = () =>
-    !isSketchCallee
-      ? dropdownItems.map((program) => (
-          <DropdownItem key={program.key} onClick={() => selectLanguage(program.key)}>
-            <FontAwesomeIcon icon={program.language.icon} fixedWidth />
-            <span style={{ marginLeft: '10px' }}>{program.name}</span>
-          </DropdownItem>
-        ))
-      : dropdownItems.map(({ display, value }) => {
-          // if the program doesn't exist, or is an empty string, return null
-          if (!display || !display.length || !value || !value.length) {
-            return null;
-          }
-          return (
-            <DropdownItem
-              key={value}
-              onClick={onSelect ? () => onSelect({ display, value }) : null}
-            >
-              {display}
-            </DropdownItem>
-          );
-        });
+    children.map(({ display, value }) => {
+      return (
+        <DropdownItem key={value} onClick={() => onSelect({ display, value, dirty })}>
+          {display}
+        </DropdownItem>
+      );
+    });
+
+  return (
+    <div className={parentDisplay}>
+      <Dropdown isOpen={dropdownOpen} toggle={() => toggleHandler(dropdownOpen)}>
+        {/* HACK: disables the colors entirely, makes the dropdown transparent*/}
+        <DropdownToggle className={toggleClass} color={toggleColor} size={toggleSize} caret>
+          <div className={itemDisplay}>{displayValue}</div>
+        </DropdownToggle>
+        <DropdownMenu>{renderDropdownItems()}</DropdownMenu>
+      </Dropdown>
+    </div>
+  );
+};
+export default DropdownButton;
 
+/*
   return !isSketchCallee ? (
     <div className="editor-language-dropdown">
       <Dropdown isOpen={dropdownOpen} toggle={() => toggleHandler(dropdownOpen)}>
-        {/* HACK: disables the colors entirely, makes the dropdown transparent */}
+        {/* HACK: disables the colors entirely, makes the dropdown transparent/}
         <DropdownToggle className="btn-language-dropdown" color="" caret>
           <div className="editor-language-dropdown-closed-content">
             <FontAwesomeIcon icon={currentLanguage.icon} fixedWidth /> {displayValue}
@@ -85,5 +79,4 @@ const DropdownButton = (props) => {
     </div>
   );
 };
-
-export default DropdownButton;
+*/

src/components/common/containers/DropdownButtonContainer.js

@@ -1,37 +1,65 @@
 import { connect } from 'react-redux';
 import { setMostRecentProgram } from '../../../actions/userDataActions.js';
 import { getLanguageData } from '../../../util/languages/languages.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from '../DropdownButton.js';
 
 const mapStateToProps = (state) => {
   const { mostRecentProgram } = state.userData;
+
   const mostRecentLanguage = getLanguageData(
     state.programs.getIn([mostRecentProgram, 'language'], 'python'),
   );
-  const displayValue = state.programs.getIn([mostRecentProgram, 'name'], mostRecentProgram);
+
+  const displayValue = (
+    <div>
+      {' '}
+      <FontAwesomeIcon icon={mostRecentLanguage.icon} fixedWidth />{' '}
+      {state.programs.getIn([mostRecentProgram, 'name'], mostRecentProgram)}
+    </div>
+  );
 
   const listOfPrograms = state.programs.keySeq().map((id) => ({
-    name: state.programs.getIn([id, 'name'], id),
-    language: getLanguageData(state.programs.getIn([id, 'language'], 'python')),
-    key: id,
+    display: (
+      <div>
+        <FontAwesomeIcon
+          icon={getLanguageData(state.programs.getIn([id, 'language'], 'python')).icon}
+          fixedWidth
+        />{' '}
+        <span style={{ marginLeft: '10px' }}> {state.programs.getIn([id, 'name'], id)} </span>
+      </div>
+    ),
+    value: id,
   }));
 
   const dirty = state.programs.getIn([mostRecentProgram, 'dirty'], false);
 
-  const isSketchCallee = false;
+  const displayClass = 'editor';
+
+  const toggleClass = 'btn-language-dropdown';
+
+  const toggleColor = '';
+
+  const toggleSize = '';
 
   return {
-    isSketchCallee,
-    dirty,
-    dropdownItems: listOfPrograms,
+    toggleColor,
+    toggleSize,
+    toggleClass,
     displayValue,
-    currentLanguage: mostRecentLanguage,
+    displayClass,
+    dirty,
+    children: listOfPrograms,
   };
 };
 
 const mapDispatchToProps = (dispatch) => ({
-  onSelect: (value) => {
-    dispatch(setMostRecentProgram(value));
+  onSelect: ({ display, value, dirty }) => {
+    if (dirty) {
+      result = window.confirm('Are you sure you want to change programs? You have unsaved changes');
+    } else {
+      dispatch(setMostRecentProgram(value));
+    }
   },
 });