Fix eslint warnings

Author: vtm9

services/app/apps/codebattle/assets/js/app.js

@@ -17,7 +17,7 @@ import 'core-js/stable';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'regenerator-runtime/runtime';
 import 'phoenix_html';
-import '@fortawesome/fontawesome-free/js/all';
+import './fontawesome';
 // import '../css/style.scss';
 import 'bootstrap';
 
@@ -54,9 +54,12 @@ import {
 } from './widgets';
 
 if (process.env.NODE_ENV === 'development') {
-  inspect({
-    iframe: () => document.querySelector('.xstate'),
-  });
+  const xstateIframe = document.querySelector('.xstate');
+  if (xstateIframe) {
+    inspect({
+      iframe: () => xstateIframe,
+    });
+  }
 }
 
 const Hooks = {

services/app/apps/codebattle/assets/js/fontawesome.js

@@ -0,0 +1,9 @@
+// FontAwesome icon library setup
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+// Add all solid, regular, and brand icons to the library
+// This allows using icons by string name throughout the app
+library.add(fas, far, fab);

services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx

@@ -2,11 +2,9 @@ import React, { memo, useRef, useEffect } from 'react';
 
 import MonacoEditor from '@monaco-editor/react';
 import { initVimMode } from 'monaco-vim';
-import PropTypes from 'prop-types';
 
 import '../initEditor';
 import languages from '../config/languages';
-import { actions } from '../slices';
 import useEditor from '../utils/useEditor';
 
 import EditorLoading from './EditorLoading';
@@ -19,12 +17,6 @@ function Editor(props) {
     theme,
     loading = false,
     mode,
-    wordWrap = 'off',
-    lineNumbers = 'on',
-    fontSize = 16,
-    mute = true,
-    editable = false,
-    toggleMuteSound = actions.toggleMuteSound,
   } = props;
 
   // Map your custom language key to an actual Monaco recognized language
@@ -104,23 +96,4 @@ function Editor(props) {
   );
 }
 
-Editor.propTypes = {
-  value: PropTypes.string.isRequired,
-  syntax: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
-  mode: PropTypes.string.isRequired,
-  loading: PropTypes.bool,
-  wordWrap: PropTypes.string,
-  lineNumbers: PropTypes.string,
-  fontSize: PropTypes.number,
-  editable: PropTypes.bool,
-  roomMode: PropTypes.string.isRequired,
-  checkResult: PropTypes.func.isRequired,
-  toggleMuteSound: PropTypes.func,
-  mute: PropTypes.bool,
-  userType: PropTypes.string.isRequired,
-  userId: PropTypes.number.isRequired,
-};
-
 export default memo(Editor);

services/app/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.jsx

@@ -1,7 +1,6 @@
 // SEE: https://gist.github.com/lou/571b7c0e7797860d6c555a9fdc0496f9
 import React, { useState, useEffect, useRef } from 'react';
 
-import PropTypes from 'prop-types';
 import Overlay from 'react-bootstrap/Overlay';
 import Popover from 'react-bootstrap/Popover';
 
@@ -72,13 +71,4 @@ function PopoverStickOnHover({
   );
 }
 
-PopoverStickOnHover.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.element.isRequired,
-  delay: PropTypes.number,
-  onMouseEnter: PropTypes.func,
-  component: PropTypes.node.isRequired,
-  placement: PropTypes.string.isRequired,
-};
-
 export default PopoverStickOnHover;

services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx

@@ -89,7 +89,6 @@ const CustomToggle = React.forwardRef(({ onClick, className, disabled }, ref) =>
 
 function GiveUpButtonDropdownItem({ onSelect, status }) {
   const commonProps = {
-    key: 'giveUp',
     href: '#',
     title: i18next.t('Give Up'),
     onSelect,
@@ -98,7 +97,7 @@ function GiveUpButtonDropdownItem({ onSelect, status }) {
   };
 
   return (
-    <Dropdown.Item {...commonProps}>
+    <Dropdown.Item key="giveUp" {...commonProps}>
       <span className={status === 'disabled' ? 'text-muted' : 'text-danger'}>
         <FontAwesomeIcon icon={['far', 'flag']} className="mr-1" />
         {i18next.t('Give up')}
@@ -109,7 +108,6 @@ function GiveUpButtonDropdownItem({ onSelect, status }) {
 
 function ResetButtonDropDownItem({ onSelect, status }) {
   const commonProps = {
-    key: 'reset',
     href: '#',
     title: i18next.t('Reset solution'),
     onSelect,
@@ -118,7 +116,7 @@ function ResetButtonDropDownItem({ onSelect, status }) {
   };
 
   return (
-    <Dropdown.Item {...commonProps}>
+    <Dropdown.Item key="reset" {...commonProps}>
       <span className="text-white">
         <FontAwesomeIcon icon={['fas', 'sync']} className="mr-1" />
         {i18next.t('Reset solution')}

services/app/apps/codebattle/assets/js/widgets/pages/game/GameWidget.jsx

@@ -1,4 +1,6 @@
-import React, { useState, useContext, memo, useMemo } from 'react';
+import React, {
+ useState, useContext, memo, useMemo,
+} from 'react';
 
 import cn from 'classnames';
 import i18next from 'i18next';

services/app/apps/codebattle/assets/js/widgets/slices/event.js

@@ -89,25 +89,25 @@ const eventSlice = createSlice({
       ...payload,
     }),
   },
-  extraReducers: builder => {
-    // builder
-    //   .addCase(fetchCommonLeaderboard.pending, state => {
-    //     state.loading = loadingStatuses.LOADING;
-    //   })
-    //   .addCase(fetchCommonLeaderboard.fulfilled, (state, action) => {
-    //     state.loading = loadingStatuses.PENDING;
-    //     state.commonLeaderboard = {
-    //       items: action.payload.items,
-    //       pageNumber: action.payload.pageInfo.pageNumber,
-    //       pageSize: action.payload.pageInfo.pageSize,
-    //       totalEntries: action.payload.pageInfo.totalEntries,
-    //     };
-    //   })
-    //   .addCase(fetchCommonLeaderboard.rejected, state => {
-    //     state.loading = loadingStatuses.PENDING;
-    //     state.commonLeaderboard = {};
-    //   });
-  },
+  // extraReducers: builder => {
+  //   builder
+  //     .addCase(fetchCommonLeaderboard.pending, state => {
+  //       state.loading = loadingStatuses.LOADING;
+  //     })
+  //     .addCase(fetchCommonLeaderboard.fulfilled, (state, action) => {
+  //       state.loading = loadingStatuses.PENDING;
+  //       state.commonLeaderboard = {
+  //         items: action.payload.items,
+  //         pageNumber: action.payload.pageInfo.pageNumber,
+  //         pageSize: action.payload.pageInfo.pageSize,
+  //         totalEntries: action.payload.pageInfo.totalEntries,
+  //       };
+  //     })
+  //     .addCase(fetchCommonLeaderboard.rejected, state => {
+  //       state.loading = loadingStatuses.PENDING;
+  //       state.commonLeaderboard = {};
+  //     });
+  // },
 });
 
 const { actions, reducer } = eventSlice;

services/app/apps/codebattle/package.json

@@ -48,11 +48,11 @@
     "@ebay/nice-modal-react": "^1.2.13",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@fortawesome/fontawesome-free": "^5.15.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.1.13",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@inline-svg-unique-id/react": "^1.2.3",
     "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^1.6.2",