Use SimpleDropdown to reduce code duplication (#2670)

* Use SimpleDropdown in NavigationBarLangSelectButton

* Remove useState and rename defaultValue to selectedValue

* Add key prop to MenuItem by label value

* Fix failing tests for NavigationBarLangSelectButton

---------

Co-authored-by: sayomaki <[email protected]>

Author: RichDom2185

src/commons/SimpleDropdown.tsx

@@ -1,27 +1,24 @@
 import { Button, Menu, MenuItem } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
-import { useState } from 'react';
 
 type OptionType = { value: any; label: string };
 type Props<T extends OptionType> = {
   options: T[];
-  defaultValue?: T['value'];
+  selectedValue?: T['value'];
   onClick?: (v: T['value']) => void;
-  buttonProps?: Partial<React.ComponentProps<typeof Button>>;
+  buttonProps?: Partial<React.ComponentProps<typeof Button> & { 'data-testid': string }>;
   popoverProps?: Partial<React.ComponentProps<typeof Popover2>>;
 };
 
 function SimpleDropdown<T extends OptionType>(props: Props<T>) {
-  const { options, defaultValue, onClick, buttonProps, popoverProps } = props;
-  const [selectedOption, setSelectedOption] = useState(defaultValue);
+  const { options, selectedValue, onClick, buttonProps, popoverProps } = props;
 
   const handleClick = (value: T['value']) => {
-    setSelectedOption(value);
     onClick?.(value);
   };
 
   const buttonLabel = () => {
-    const option = options.find(({ value }) => value === selectedOption);
+    const option = options.find(({ value }) => value === selectedValue);
     return option?.label;
   };
 
@@ -32,7 +29,7 @@ function SimpleDropdown<T extends OptionType>(props: Props<T>) {
       content={
         <Menu>
           {options.map(({ value, label }) => (
-            <MenuItem text={label} onClick={() => handleClick(value)} />
+            <MenuItem key={label} text={label} onClick={() => handleClick(value)} />
           ))}
         </Menu>
       }

src/commons/navigationBar/subcomponents/NavigationBarLangSelectButton.tsx

@@ -1,5 +1,4 @@
-import { Button, Menu, MenuItem, Position } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Position } from '@blueprintjs/core';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
@@ -11,6 +10,7 @@ import {
   SUPPORTED_LANGUAGES,
   SupportedLanguage
 } from 'src/commons/application/ApplicationTypes';
+import SimpleDropdown from 'src/commons/SimpleDropdown';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { chapterSelect } from 'src/commons/workspace/WorkspaceActions';
 import { playgroundConfigLanguage } from 'src/features/playground/PlaygroundActions';
@@ -36,28 +36,17 @@ const NavigationBarLangSelectButton = () => {
   };
 
   return (
-    <Popover2
-      hasBackdrop
-      interactionKind="click"
-      position={Position.BOTTOM_RIGHT}
-      isOpen={isOpen}
-      content={
-        <Menu>
-          {SUPPORTED_LANGUAGES.map(language => (
-            <MenuItem key={language} onClick={() => selectLang(language)} text={language} />
-          ))}
-        </Menu>
-      }
-      onClose={() => setIsOpen(false)}
-    >
-      <Button
-        rightIcon="caret-down"
-        onClick={() => setIsOpen(true)}
-        data-testid="NavigationBarLangSelectButton"
-      >
-        {lang}
-      </Button>
-    </Popover2>
+    <SimpleDropdown
+      options={SUPPORTED_LANGUAGES.map(lang => ({ value: lang, label: lang }))}
+      onClick={selectLang}
+      selectedValue={lang}
+      popoverProps={{ position: Position.BOTTOM_RIGHT, onClose: () => setIsOpen(false), isOpen }}
+      buttonProps={{
+        rightIcon: 'caret-down',
+        onClick: () => setIsOpen(true),
+        'data-testid': 'NavigationBarLangSelectButton'
+      }}
+    />
   );
 };
 

src/pages/academy/grading/Grading.tsx

@@ -110,15 +110,15 @@ const Grading: React.FC = () => {
                   <Text>Viewing</Text>
                   <SimpleDropdown
                     options={showOptions}
-                    defaultValue={showAllSubmissions}
+                    selectedValue={showAllSubmissions}
                     onClick={setShowAllSubmissions}
                     popoverProps={{ position: Position.BOTTOM }}
                     buttonProps={{ minimal: true, rightIcon: 'caret-down' }}
                   />
                   <Text>submissions from</Text>
                   <SimpleDropdown
                     options={groupOptions}
-                    defaultValue={showAllGroups}
+                    selectedValue={showAllGroups}
                     onClick={setShowAllGroups}
                     popoverProps={{ position: Position.BOTTOM }}
                     buttonProps={{ minimal: true, rightIcon: 'caret-down' }}