refactor: resolved eslint issues

openedx · Apr 6, 2023 · fb765eb · fb765eb
1 parent 72d262d
commit fb765eb
Show file tree

Hide file tree

Showing 84 changed files with 560 additions and 511 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,9 +1,10 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint',
-{
-  "plugins": ["simple-import-sort"],
-    "rules": {
+module.exports = createConfig(
+  'eslint',
+  {
+    plugins: ['simple-import-sort'],
+    rules: {
       'import/no-extraneous-dependencies': 'off',
       'react-hooks/exhaustive-deps': 'off',
       'jsx-a11y/no-noninteractive-element-interactions': 'off',
@@ -25,7 +26,6 @@ module.exports = createConfig('eslint',
         },
       ],
       'simple-import-sort/exports': 'error',
-    }
-  }
+    },
+  },
 );
-
diff --git a/src/components/FilterBar.jsx b/src/components/FilterBar.jsx
@@ -19,19 +19,21 @@ import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
 import messages from '../discussions/posts/post-filter-bar/messages';
 import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
 
-function FilterBar({
+const FilterBar = ({
   intl,
   filters,
   selectedFilters,
   onFilterChange,
   showCohortsFilter,
-}) {
+}) => {
   const [isOpen, setOpen] = useState(false);
   const cohorts = useSelector(selectCourseCohorts);
   const { status } = useSelector(state => state.cohorts);
-  const selectedCohort = useMemo(() => cohorts.find(cohort => (
-    toString(cohort.id) === selectedFilters.cohort)),
-  [selectedFilters.cohort]);
+  const selectedCohort = useMemo(
+    () => cohorts.find(cohort => (
+      toString(cohort.id) === selectedFilters.cohort)),
+    [selectedFilters.cohort],
+  );
 
   const allFilters = [
     {
@@ -183,7 +185,7 @@ function FilterBar({
       </Collapsible.Body>
     </Collapsible.Advanced>
   );
-}
+};
 
 FilterBar.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/components/FormikErrorFeedback.jsx b/src/components/FormikErrorFeedback.jsx
@@ -5,7 +5,7 @@ import { getIn, useFormikContext } from 'formik';
 
 import { Form, TransitionReplace } from '@edx/paragon';
 
-function FormikErrorFeedback({ name }) {
+const FormikErrorFeedback = ({ name }) => {
   const {
     touched,
     errors,
@@ -26,7 +26,7 @@ function FormikErrorFeedback({ name }) {
         )}
     </TransitionReplace>
   );
-}
+};
 
 FormikErrorFeedback.propTypes = {
   name: PropTypes.string.isRequired,

diff --git a/src/components/HTMLLoader.jsx b/src/components/HTMLLoader.jsx
@@ -12,9 +12,9 @@ const defaultSanitizeOptions = {
   ADD_ATTR: ['columnalign'],
 };
 
-function HTMLLoader({
+const HTMLLoader = ({
   htmlNode, componentId, cssClassName, testId, delay,
-}) {
+}) => {
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef(null);
   const debouncedPostContent = useDebounce(htmlNode, delay);
@@ -45,7 +45,7 @@ function HTMLLoader({
   return (
     <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
   );
-}
+};
 
 HTMLLoader.propTypes = {
   htmlNode: PropTypes.node,

diff --git a/src/components/NavigationBar/CourseTabsNavigation.jsx b/src/components/NavigationBar/CourseTabsNavigation.jsx
@@ -12,9 +12,9 @@ import messages from './messages';
 
 import './navBar.scss';
 
-function CourseTabsNavigation({
+const CourseTabsNavigation = ({
   activeTab, className, intl, courseId, rootSlug,
-}) {
+}) => {
   const dispatch = useDispatch();
 
   const tabs = useSelector(state => state.courseTabs.tabs);
@@ -45,7 +45,7 @@ function CourseTabsNavigation({
       </div>
     </div>
   );
-}
+};
 
 CourseTabsNavigation.propTypes = {
   activeTab: PropTypes.string,

diff --git a/src/components/NavigationBar/data/api.test.js b/src/components/NavigationBar/data/api.test.js
@@ -56,8 +56,10 @@ describe('Navigation bar api tests', () => {
   });
 
   it('Denied to get navigation bar when user has no access on course', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200,
-      (Factory.build('navigationBar', 1, { hasCourseAccess: false })));
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
+      200,
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false })),
+    );
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 
     expect(store.getState().courseTabs.courseStatus).toEqual('denied');

diff --git a/src/components/NavigationBar/tabs/Tabs.jsx b/src/components/NavigationBar/tabs/Tabs.jsx
@@ -8,7 +8,7 @@ import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 
-export default function Tabs({ children, className, ...attrs }) {
+const Tabs = ({ children, className, ...attrs }) => {
   const [
     indexOfLastVisibleChild,
     containerElementRef,
@@ -31,25 +31,28 @@ export default function Tabs({ children, className, ...attrs }) {
 
     // Insert the overflow menu at the cut off index (even if it will be hidden
     // it so it can be part of measurements)
-    wrappedChildren.splice(indexOfOverflowStart, 0, (
-      <div
-        className="nav-item flex-shrink-0"
-        style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
-        ref={overflowElementRef}
-        key="overflow"
-      >
-        <Dropdown className="h-100">
-          <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
-            <FormattedMessage
-              id="learn.course.tabs.navigation.overflow.menu"
-              description="The title of the overflow menu for course tabs"
-              defaultMessage="More..."
-            />
-          </Dropdown.Toggle>
-          <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
-        </Dropdown>
-      </div>
-    ));
+    wrappedChildren.splice(
+      indexOfOverflowStart,
+      0, (
+        <div
+          className="nav-item flex-shrink-0"
+          style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
+          ref={overflowElementRef}
+          key="overflow"
+        >
+          <Dropdown className="h-100">
+            <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
+              <FormattedMessage
+                id="learn.course.tabs.navigation.overflow.menu"
+                description="The title of the overflow menu for course tabs"
+                defaultMessage="More..."
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
+          </Dropdown>
+        </div>
+      ),
+    );
     return wrappedChildren;
   }, [children, indexOfLastVisibleChild]);
 
@@ -62,7 +65,7 @@ export default function Tabs({ children, className, ...attrs }) {
       {tabChildren}
     </nav>
   );
-}
+};
 
 Tabs.propTypes = {
   children: PropTypes.node,
@@ -73,3 +76,5 @@ Tabs.defaultProps = {
   children: null,
   className: undefined,
 };
+
+export default Tabs;
diff --git a/src/components/PostPreviewPanel.jsx b/src/components/PostPreviewPanel.jsx
@@ -8,9 +8,9 @@ import { Close } from '@edx/paragon/icons';
 import messages from '../discussions/posts/post-editor/messages';
 import HTMLLoader from './HTMLLoader';
 
-function PostPreviewPanel({
+const PostPreviewPanel = ({
   htmlNode, intl, isPost, editExisting,
-}) {
+}) => {
   const [showPreviewPane, setShowPreviewPane] = useState(false);
 
   return (
@@ -55,7 +55,7 @@ function PostPreviewPanel({
       </div>
     </>
   );
-}
+};
 
 PostPreviewPanel.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -13,7 +13,7 @@ import { setSearchQuery } from '../discussions/posts/data';
 import postsMessages from '../discussions/posts/post-actions-bar/messages';
 import { setFilter as setTopicFilter } from '../discussions/topics/data/slices';
 
-function Search({ intl }) {
+const Search = ({ intl }) => {
   const dispatch = useDispatch();
   const { page } = useContext(DiscussionContext);
   const postSearch = useSelector(({ threads }) => threads.filters.search);
@@ -56,29 +56,27 @@ function Search({ intl }) {
 
   useEffect(() => onClear(), [page]);
   return (
-    <>
-      <SearchField.Advanced
-        onClear={onClear}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        value={currentValue}
-      >
-        <SearchField.Label />
-        <SearchField.Input
-          style={{ paddingRight: '1rem' }}
-          placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
+    <SearchField.Advanced
+      onClear={onClear}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      value={currentValue}
+    >
+      <SearchField.Label />
+      <SearchField.Input
+        style={{ paddingRight: '1rem' }}
+        placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
+      />
+      <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
+        <Icon
+          src={SearchIcon}
+          onClick={() => onSubmit(searchValue)}
+          data-testid="search-icon"
         />
-        <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
-          <Icon
-            src={SearchIcon}
-            onClick={() => onSubmit(searchValue)}
-            data-testid="search-icon"
-          />
-        </span>
-      </SearchField.Advanced>
-    </>
+      </span>
+    </SearchField.Advanced>
   );
-}
+};
 
 Search.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/components/SearchInfo.jsx b/src/components/SearchInfo.jsx
@@ -8,34 +8,32 @@ import { Search } from '@edx/paragon/icons';
 import { RequestStatus } from '../data/constants';
 import messages from '../discussions/posts/post-actions-bar/messages';
 
-function SearchInfo({
+const SearchInfo = ({
   intl,
   count,
   text,
   loadingStatus,
   onClear,
   textSearchRewrite,
-}) {
-  return (
-    <div className="d-flex flex-row border-bottom border-light-400">
-      <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
-      <Button variant="" size="inline" className="text-justify p-2">
-        {loadingStatus === RequestStatus.SUCCESSFUL && (
-          textSearchRewrite ? intl.formatMessage(messages.searchRewriteInfo, {
-            searchString: text,
-            count,
-            textSearchRewrite,
-          })
-            : intl.formatMessage(messages.searchInfo, { count, text })
-        )}
-        {loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
-      </Button>
-      <Button variant="link" size="inline" className="ml-auto mr-3" onClick={onClear} style={{ minWidth: '26%' }}>
-        {intl.formatMessage(messages.clearSearch)}
-      </Button>
-    </div>
-  );
-}
+}) => (
+  <div className="d-flex flex-row border-bottom border-light-400">
+    <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
+    <Button variant="" size="inline" className="text-justify p-2">
+      {loadingStatus === RequestStatus.SUCCESSFUL && (
+        textSearchRewrite ? intl.formatMessage(messages.searchRewriteInfo, {
+          searchString: text,
+          count,
+          textSearchRewrite,
+        })
+          : intl.formatMessage(messages.searchInfo, { count, text })
+      )}
+      {loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
+    </Button>
+    <Button variant="link" size="inline" className="ml-auto mr-3" onClick={onClear} style={{ minWidth: '26%' }}>
+      {intl.formatMessage(messages.clearSearch)}
+    </Button>
+  </div>
+);
 
 SearchInfo.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/components/TinyMCEEditor.jsx b/src/components/TinyMCEEditor.jsx
@@ -58,7 +58,7 @@ const setup = (editor) => {
 };
 
 /* istanbul ignore next */
-export default function TinyMCEEditor(props) {
+const TinyMCEEditor = (props) => {
   // note that skin and content_css is disabled to avoid the normal
   // loading process and is instead loaded as a string via content_style
 
@@ -148,4 +148,6 @@ export default function TinyMCEEditor(props) {
     </>
 
   );
-}
+};
+
+export default TinyMCEEditor;
diff --git a/src/components/TopicStats.jsx b/src/components/TopicStats.jsx
@@ -14,12 +14,12 @@ import {
 } from '../discussions/data/selectors';
 import messages from '../discussions/in-context-topics/messages';
 
-function TopicStats({
+const TopicStats = ({
   threadCounts,
   activeFlags,
   inactiveFlags,
   intl,
-}) {
+}) => {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
@@ -87,7 +87,7 @@ function TopicStats({
       )}
     </div>
   );
-}
+};
 
 TopicStats.propTypes = {
   threadCounts: PropTypes.shape({