Lint fixes

Author: jmgasper

.eslintrc

@@ -4,10 +4,7 @@
     "jsx-a11y/anchor-is-valid": false,
     "import/no-cycle": [2, { "maxDepth": 1 }],
     "react/forbid-prop-types": false,
-    "react/no-unknown-property": false,
-    "react/jsx-no-bind": false,
-    "react/destructuring-assignment": false,
-    "react/no-array-index-key": false
+    "react/no-unknown-property": ["error", { "ignore": ["styleName"] }]
   },
   "env": {
     "browser": true

src/shared/components/Contentful/AppComponent/index.jsx

@@ -18,41 +18,59 @@ import PathSelector from 'components/MemberPath/PathSelector';
 const { fireErrorMessage } = errors;
 
 export function AppComponentSwitch(appComponent) {
-  if (appComponent.fields.type === 'TCO-Leaderboard') {
+  const {
+    fields: {
+      type,
+      theme,
+      props,
+      props: {
+        leaderboardApiUrl,
+        title,
+        podiumSpots,
+        isCopilot,
+        hasChallengeHistory,
+        tcoPointsApiUrl,
+        memberLimit,
+        isAlgo,
+      },
+    },
+    sys: { id },
+  } = appComponent;
+  if (type === 'TCO-Leaderboard') {
     return (
       <Leaderboard
-        id={appComponent.sys.id}
-        apiUrl={appComponent.fields.props.leaderboardApiUrl}
-        title={appComponent.fields.props.title}
-        podiumSpots={appComponent.fields.props.podiumSpots}
-        isCopilot={appComponent.fields.props.isCopilot}
-        hasChallengeHistory={appComponent.fields.props.hasChallengeHistory}
-        tcoPointsApiUrl={appComponent.fields.props.tcoPointsApiUrl}
-        memberLimit={appComponent.fields.props.memberLimit}
-        isAlgo={appComponent.fields.props.isAlgo}
-        key={appComponent.sys.id}
-        themeName={appComponent.fields.theme}
+        id={id}
+        apiUrl={leaderboardApiUrl}
+        title={title}
+        podiumSpots={podiumSpots}
+        isCopilot={isCopilot}
+        hasChallengeHistory={hasChallengeHistory}
+        tcoPointsApiUrl={tcoPointsApiUrl}
+        memberLimit={memberLimit}
+        isAlgo={isAlgo}
+        key={id}
+        themeName={theme}
       />
     );
   }
-  if (appComponent.fields.type === 'RecruitCRM-Jobs') {
-    return <RecruitCRMJobs {...appComponent.fields.props} key={appComponent.sys.id} />;
+  if (type === 'RecruitCRM-Jobs') {
+    return <RecruitCRMJobs {...props} key={id} />;
   }
-  if (appComponent.fields.type === 'EmailSubscribeForm') {
-    return <EmailSubscribeForm {...appComponent.fields.props} key={appComponent.sys.id} />;
+  if (type === 'EmailSubscribeForm') {
+    return <EmailSubscribeForm {...props} key={id} />;
   }
-  if (appComponent.fields.type === 'GSheet') {
-    return <GSheet {...appComponent.fields.props} key={appComponent.sys.id} />;
+  if (type === 'GSheet') {
+    return <GSheet {...props} key={id} />;
   }
-  if (appComponent.fields.type === 'MemberPath') {
+  if (type === 'MemberPath') {
     return (
       <PathSelector
-        {...appComponent.fields.props}
-        key={appComponent.sys.id}
+        {...props}
+        key={id}
       />
     );
   }
-  fireErrorMessage(`Unsupported app component type ${appComponent.fields.type}`, '');
+  fireErrorMessage(`Unsupported app component type ${type}`, '');
   return null;
 }
 

src/shared/components/Contentful/Viewport/index.jsx

@@ -272,7 +272,7 @@ export function ViewportLoader(props) {
   }
 
   if (query) {
-    queries.push({ ...props.query, content_type: 'viewport' });
+    queries.push({ ...query, content_type: 'viewport' });
   }
 
   return (

src/shared/components/Gigs/ReferralCode/index.jsx

@@ -25,7 +25,7 @@ function ReferralCode(props) {
   const [growSurfState, setGrowSurfState] = useState(growSurf);
   const [copyBtnText, setCopyBtnText] = useState('COPY');
   useEffect(() => {
-    setGrowSurfState(props.growSurf);
+    setGrowSurfState(growSurf);
   }, [growSurf]);
 
   return (

src/shared/components/Settings/Account/LinkedAccount/ExistingLink.jsx

@@ -64,7 +64,15 @@ export default function ExistingLink(props) {
   return (
     <div role="link" styleName={`external-link-tile ${pending ? 'external-link-tile--pending' : ''}`} onClick={e => openLink(e, link)}>
       <div styleName="ext-link-tile_edit-header">
-        <div role="button" onClick={e => onConfirmDeleteLink(e, link)} styleName={`ext-link-tile_edit-header_delete ${link.deleting ? 'ext-link-tile_edit-header_delete--disabled' : ''}`} prevent-event-propagation="true" />
+        <div
+          role="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onConfirmDeleteLink(e, link);
+          }}
+          styleName={`ext-link-tile_edit-header_delete ${link.deleting ? 'ext-link-tile_edit-header_delete--disabled' : ''}`}
+        />
       </div>
       <div styleName="top">
         <div styleName="logo">
@@ -94,7 +102,7 @@ export default function ExistingLink(props) {
               <p className={!pending ? 'hidden' : ''} styleName="link-title">
                 Loading data. This will take a few minutes.
               </p>
-              <a styleName="link-url" id="link-url" href={prependProtocol(link.URL)} target="_blank" rel="noopener noreferrer" prevent-event-propagation="true">
+              <a styleName="link-url" id="link-url" href={prependProtocol(link.URL)} target="_blank" rel="noopener noreferrer">
                 {prependProtocol(link.URL)}
               </a>
             </div>

src/shared/components/challenge-detail/Header/TabSelector/index.jsx

@@ -404,9 +404,9 @@ export default function ChallengeViewSelector(props) {
                   </div>
                   <div styleName="sort-body">
                     {
-                      sortOptions.map((option, index) => (
+                      sortOptions.map(option => (
                         <div
-                          map={`sort-option-${index}`}
+                          key={`sort-option-${option.name}`}
                           styleName="sort-item"
                           onClick={() => {
                             setSelectedSortOption(option.name);

src/shared/components/challenge-listing/ChallengeCard/Prize/index.jsx

@@ -6,7 +6,7 @@
 
 import PT from 'prop-types';
 import React from 'react';
-import Tooltip from 'components/Tooltip';
+import Tooltip from '../../../Tooltip';
 import Tip from './Tip';
 import './style.scss';
 
@@ -35,11 +35,6 @@ export default function Prize({
     </div>
   );
 
-  function placeArrow(TooltipNode) {
-    const arrow = TooltipNode.querySelector('.rc-tooltip-arrow');
-    arrow.style.left = '33%';
-  }
-
   const component = (
     <div
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -48,7 +43,13 @@ export default function Prize({
     >
       {((onlyShowTooltipForPrize && !withoutTooltip)
         ? (
-          <Tooltip content={tip} placeArrow={placeArrow}>
+          <Tooltip
+            content={tip}
+            placeArrow={(TooltipNode) => {
+              const arrow = TooltipNode.querySelector('.rc-tooltip-arrow');
+              arrow.style.left = '33%';
+            }}
+          >
             {prizeUI}
           </Tooltip>
         )

src/shared/components/tc-communities/AccessDenied/index.jsx

@@ -24,6 +24,7 @@ export default function AccessDenied(props) {
     spaceName,
     environment,
     viewportId,
+    children,
   } = props;
 
   if (viewportId) {
@@ -67,7 +68,7 @@ export default function AccessDenied(props) {
           <div styleName="msg">
             You are not authorized to access this page.
           </div>
-          {props.children}
+          {children}
         </div>
       );
     case CAUSE.HAVE_NOT_SUBMITTED_TO_THE_CHALLENGE:

src/shared/components/tc-communities/communities/wipro/Home/index.jsx

@@ -123,6 +123,7 @@ const settings = {
 export default function Home(props) {
   const {
     userId,
+    resetChallengeListing,
   } = props;
 
   return (
@@ -199,7 +200,7 @@ export default function Home(props) {
       >
         <div styleName="ImageTextStyles.linkWrap style.linkWrap">
           <Link
-            onClick={() => props.resetChallengeListing()}
+            onClick={() => resetChallengeListing()}
             styleName="ImageTextStyles.link"
             to="challenges?communityId="
           >

src/shared/containers/ErrorIcons/index.jsx

@@ -25,8 +25,8 @@ function Tip({ errors, clear }) {
         ⨯
       </a>
       {
-        errors.map(({ title, message }, i) => (
-          <div key={i.toString()} styleName="item">
+        errors.map(({ title, message }) => (
+          <div key={`${title}-${message}`} styleName="item">
             <div styleName="title" title={title}>
               {title}
             </div>