From 44e2bce92006296ec26f2f06a9ebf4e8a9443775 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 10 Feb 2022 18:31:55 +0100
Subject: [PATCH] refactor: clean up ref types (#45070)

The react-hotkeys innerRef type is incorrect (it accepts both callback
and object refs), but the lib is unmaintained at this point.
---
 client/src/templates/Challenges/classic/show.tsx           | 4 ++--
 client/src/templates/Challenges/components/Hotkeys.tsx     | 7 ++-----
 client/src/templates/Challenges/projects/frontend/Show.tsx | 7 ++-----
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index e5ce1c4567..0dc6b783f5 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -135,8 +135,8 @@ const BASE_LAYOUT = {
 // Component
 class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
   static displayName: string;
-  containerRef: React.RefObject<unknown>;
-  editorRef: React.RefObject<unknown>;
+  containerRef: React.RefObject<HTMLElement>;
+  editorRef: React.RefObject<HTMLElement>;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   resizeProps: ResizeProps;
 
diff --git a/client/src/templates/Challenges/components/Hotkeys.tsx b/client/src/templates/Challenges/components/Hotkeys.tsx
index 3f612d5710..3354ff7ed2 100644
--- a/client/src/templates/Challenges/components/Hotkeys.tsx
+++ b/client/src/templates/Challenges/components/Hotkeys.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { navigate } from 'gatsby';
 import React from 'react';
 import { HotKeys, GlobalHotKeys } from 'react-hotkeys';
@@ -42,11 +40,10 @@ interface HotkeysProps {
   canFocusEditor: boolean;
   challengeFiles: ChallengeFiles;
   children: React.ReactElement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.Ref<HTMLElement> | any;
+  editorRef?: React.RefObject<HTMLElement>;
   executeChallenge?: (options?: { showCompletionModal: boolean }) => void;
   submitChallenge: () => void;
-  innerRef: React.Ref<HTMLElement> | unknown;
+  innerRef: React.Ref<HTMLElement>;
   instructionsPanelRef?: React.RefObject<HTMLElement>;
   nextChallengePath: string;
   prevChallengePath: string;
diff --git a/client/src/templates/Challenges/projects/frontend/Show.tsx b/client/src/templates/Challenges/projects/frontend/Show.tsx
index 9ada016c22..36efc15831 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/Show.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
@@ -65,8 +63,7 @@ interface ProjectProps {
 // Component
 class Project extends Component<ProjectProps> {
   static displayName: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _container: any;
+  private _container: HTMLElement | null = null;
 
   constructor(props: ProjectProps) {
     super(props);
@@ -90,7 +87,7 @@ class Project extends Component<ProjectProps> {
       helpCategory
     });
     challengeMounted(challengeMeta.id);
-    this._container.focus();
+    this._container?.focus();
   }
 
   componentDidUpdate(prevProps: ProjectProps): void {