fix: search and sort props need to be passed to SearchSort component

Author: xitij2000

src/editors/sharedComponents/SelectionModal/SearchSort.jsx

@@ -2,13 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  ActionRow,
-  Dropdown,
-  Form,
-  Icon,
-  IconButton,
-  SelectMenu,
-  MenuItem,
+  ActionRow, Dropdown, Form, Icon, IconButton, SelectMenu, MenuItem,
 } from '@openedx/paragon';
 import { Check, Close, Search } from '@openedx/paragon/icons';
 import {
@@ -18,13 +12,14 @@ import {
 
 import messages from './messages';
 import './index.scss';
-import { sortKeys, sortMessages } from '../../containers/VideoGallery/utils';
 
 const SearchSort = ({
   searchString,
   onSearchChange,
   clearSearchString,
   sortBy,
+  sortKeys,
+  sortMessages,
   onSortClick,
   filterBy,
   onFilterClick,
@@ -43,24 +38,26 @@ const SearchSort = ({
           autoFocus
           onChange={onSearchChange}
           placeholder={intl.formatMessage(messages.searchPlaceholder)}
-          trailingElement={searchString
-            ? (
-              <IconButton
-                alt={intl.formatMessage(messages.clearSearch)}
-                iconAs={Icon}
-                invertColors
-                isActive
-                onClick={clearSearchString}
-                size="sm"
-                src={Close}
-              />
-            )
-            : <Icon src={Search} />}
+          trailingElement={
+            searchString
+              ? (
+                <IconButton
+                  alt={intl.formatMessage(messages.clearSearch)}
+                  iconAs={Icon}
+                  invertColors
+                  isActive
+                  onClick={clearSearchString}
+                  size="sm"
+                  src={Close}
+                />
+              )
+              : <Icon src={Search} />
+          }
           value={searchString}
         />
       </Form.Group>
 
-      {!showSwitch && <ActionRow.Spacer />}
+      { !showSwitch && <ActionRow.Spacer /> }
       <SelectMenu variant="link" className="search-sort-menu">
         {Object.keys(sortKeys).map(key => (
           <MenuItem
@@ -71,34 +68,34 @@ const SearchSort = ({
           >
             <span className="search-sort-menu-by">
               <FormattedMessage {...messages.sortBy} />
-              <span style={{ whiteSpace: 'pre-wrap' }}></span>
+              <span style={{ whiteSpace: 'pre-wrap' }}> </span>
             </span>
             <FormattedMessage {...sortMessages[key]} />
           </MenuItem>
         ))}
       </SelectMenu>
 
-      {onFilterClick && (
-        <Dropdown>
-          <Dropdown.Toggle
-            data-testid="dropdown-filter"
-            className="text-gray-700"
-            id="gallery-filter-button"
-            variant="tertiary"
-          >
-            <FormattedMessage {...filterMessages[filterBy]} />
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            {Object.keys(filterKeys).map(key => (
-              <Dropdown.Item data-testid={`dropdown-filter-${key}`} key={key} onClick={onFilterClick(key)}>
-                <FormattedMessage {...filterMessages[key]} />
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Menu>
-        </Dropdown>
+      { onFilterClick && (
+      <Dropdown>
+        <Dropdown.Toggle
+          data-testid="dropdown-filter"
+          className="text-gray-700"
+          id="gallery-filter-button"
+          variant="tertiary"
+        >
+          <FormattedMessage {...filterMessages[filterBy]} />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {Object.keys(filterKeys).map(key => (
+            <Dropdown.Item data-testid={`dropdown-filter-${key}`} key={key} onClick={onFilterClick(key)}>
+              <FormattedMessage {...filterMessages[key]} />
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
       )}
 
-      {showSwitch && (
+      { showSwitch && (
         <>
           <ActionRow.Spacer />
           <Form.SwitchSet
@@ -112,6 +109,7 @@ const SearchSort = ({
           </Form.SwitchSet>
         </>
       )}
+
     </ActionRow>
   );
 };
@@ -135,6 +133,8 @@ SearchSort.propTypes = {
   onFilterClick: PropTypes.func,
   filterKeys: PropTypes.shape({}),
   filterMessages: PropTypes.shape({}),
+  sortKeys: PropTypes.shape({}).isRequired,
+  sortMessages: PropTypes.shape({}).isRequired,
   showSwitch: PropTypes.bool,
   switchMessage: PropTypes.shape({}).isRequired,
   onSwitchClick: PropTypes.func,