Merge pull request #166 from ynshung/lint

Stricter Typescript Linting

.eslintrc.js

@@ -28,10 +28,6 @@ module.exports = {
     sourceType: "module",
   },
   plugins: ["@typescript-eslint", "react"],
-  rules: {
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": "warn",
-  },
   ignorePatterns: ["*.png", ".eslintrc.js", "scripts/*"],
   settings: {
     react: {

src/components/EditButton.tsx

@@ -1,18 +1,13 @@
 import React from "react";
-import { StringDictionary } from "../lib/definitions";
 
 import { MdCreate } from "react-icons/md";
 
 interface Props {
-  keybindsState: StringDictionary;
-  setKeybindsState: any; // ! give specific type
   command: string;
   setSelectedCommand: (newState: string) => void;
   setIsModalOpen: (newState: boolean) => void;
 }
 export default function EditButton({
-  keybindsState,
-  setKeybindsState,
   command,
   setSelectedCommand,
   setIsModalOpen,

src/components/EditModal.tsx

@@ -14,7 +14,7 @@ interface Props {
   isModalOpen: boolean;
   setIsModalOpen: (newState: boolean) => void;
   keybindsState: StringDictionary;
-  setKeybindsState: any; // ! - use proper type
+  setKeybindsState: (keybinds: () => StringDictionary) => void;
 }
 
 export default function EditModal({
@@ -67,7 +67,7 @@ export default function EditModal({
   function handleSaveBind() {
     if (canUseKey()) {
       setKeybindsState(() => {
-        const newState = { ...keybindsState };
+        const newState: StringDictionary = { ...keybindsState };
         newState[selectedCommand] = pressedKey;
 
         saveKeybindsToStorage(newState);

src/components/FeaturesPage.tsx

@@ -1,14 +1,14 @@
 import { FEATURES_ORDER, setFeature } from "../lib/declarations";
-import { PolyDictionary } from "../lib/definitions";
+import { BooleanDictionary } from "../lib/definitions";
 import { disableAllFeatures, enableAllFeatures } from "../lib/ResetDefaults";
 import { saveFeaturesToStorage } from "../lib/SaveToStorage";
 import React, { useEffect, useState } from "react";
 import local from "../background/i18n";
 
 interface Props {
-  featuresState: PolyDictionary;
+  featuresState: BooleanDictionary;
   setFeaturesState: (
-    features: (previousState: PolyDictionary) => PolyDictionary,
+    features: (previousState: BooleanDictionary) => BooleanDictionary,
   ) => void;
 }
 
@@ -42,7 +42,10 @@ export default function FeaturesPage({
     });
   }
 
-  function handleFeatureChange(e: any, feature: string) {
+  function handleFeatureChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    feature: string,
+  ) {
     const value = e.target.checked;
 
     setFeaturesState(() => {

src/components/KeybindsPage.tsx

@@ -39,8 +39,6 @@ export default function KeybindsPage({
     return KEYBINDS_ORDER.map((command: string) => {
       const bind = keybindsState[command];
       const editButtonProps = {
-        keybindsState,
-        setKeybindsState,
         command,
         setSelectedCommand,
         setIsModalOpen,

src/components/OptionsPage.tsx

@@ -28,15 +28,18 @@ export default function OptionsPage({ optionsState, setOptionsState }: Props) {
     });
   }
 
-  function handleOptionChange(e: any, option: string) {
+  function handleOptionChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    option: string,
+  ) {
     if (optionsState === null) return;
 
     const target = e.target as HTMLInputElement;
-    let value: any = target.value;
+    let value: string | number | boolean;
 
-    // this may need changed depending on different input types
     if (target.type === "checkbox") value = target.checked;
     else if (!isNaN(target.valueAsNumber)) value = target.valueAsNumber;
+    else value = target.value;
 
     if (value === null)
       return console.warn(
@@ -68,8 +71,6 @@ export default function OptionsPage({ optionsState, setOptionsState }: Props) {
 
       if (OPTION_DICTIONARY === null) return <></>;
 
-      // const type = determineInputType(value);
-
       if (optionsState === null) return;
 
       return (
@@ -83,16 +84,16 @@ export default function OptionsPage({ optionsState, setOptionsState }: Props) {
             id={`extra_options_${option}`}
             type={OPTION_DICTIONARY[option]?.type ?? determineInputType(value)}
             name={`option_input_${option}`}
-            min={OPTION_DICTIONARY[option]?.min ?? null}
-            max={OPTION_DICTIONARY[option]?.max ?? null}
+            min={OPTION_DICTIONARY[option]?.min ?? undefined}
+            max={OPTION_DICTIONARY[option]?.max ?? undefined}
             value={
               OPTION_DICTIONARY[option]?.type !== "checkbox"
-                ? optionsState[option]
+                ? (optionsState[option] as number | string)
                 : undefined
             }
             checked={
               OPTION_DICTIONARY[option]?.type === "checkbox"
-                ? optionsState[option]
+                ? (optionsState[option] as boolean)
                 : undefined
             }
             onChange={(e) => handleOptionChange(e, option)}

src/components/PageIndicator.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { PopupPageNameEnum, StrictPolyDictionary } from "../lib/definitions";
-import { getEnumWithString } from "../lib/utils";
+import { PopupPageNameEnum, IconDictionary } from "../lib/definitions";
 
 import { MdVideoSettings } from "react-icons/md";
 import { MdOutlineVideoSettings } from "react-icons/md";
@@ -19,7 +18,7 @@ interface Props {
   isCurrentPage: boolean;
 }
 
-const ICONS = {
+const ICONS: IconDictionary = {
   OPTIONS: {
     active: <MdVideoSettings />,
     inactive: <MdOutlineVideoSettings />,
@@ -35,15 +34,15 @@ const ICONS = {
     inactive: <MdOutlineVisibilityOff />,
     name: local("toggleFeatures"),
   },
-} as StrictPolyDictionary;
+};
 
 export default function PageIndicator({
   page,
   setCurrentPage,
   isCurrentPage,
 }: Props) {
   function handlePageIndicatorClick() {
-    setCurrentPage(getEnumWithString(PopupPageNameEnum, page, 1));
+    setCurrentPage(PopupPageNameEnum[page as keyof typeof PopupPageNameEnum]);
   }
 
   function getIndicatorIcon() {

src/components/PageIndicatorContainer.tsx

@@ -1,20 +1,18 @@
 import React from "react";
 import PageIndicator from "./PageIndicator";
-import { PolyDictionary, PopupPageNameEnum } from "../lib/definitions";
+import { PopupPageNameEnum } from "../lib/definitions";
 import { getEnumEntries } from "../lib/utils";
 import { MdWeb } from "react-icons/md";
 import local from "../background/i18n";
 
 interface Props {
   currentPage: PopupPageNameEnum;
   setCurrentPage: (newPage: PopupPageNameEnum) => void;
-  setSettingsState: (settings: PolyDictionary) => void;
 }
 
 export default function PageIndicatorContainer({
   currentPage,
   setCurrentPage,
-  setSettingsState,
 }: Props) {
   function populatePageIndicators() {
     return getEnumEntries(PopupPageNameEnum).map(([name, page]) => {
@@ -26,7 +24,6 @@ export default function PageIndicatorContainer({
         page: name,
         setCurrentPage,
         isCurrentPage,
-        setSettingsState,
       };
 
       return <PageIndicator key={crypto.randomUUID()} {...props} />;

src/components/Popup.tsx

@@ -22,7 +22,6 @@ import {
   DEFAULT_FEATURES,
   DEFAULT_KEYBINDS,
   DEFAULT_OPTIONS,
-  DEFAULT_SETTINGS,
 } from "../lib/declarations";
 import FeaturesPage from "./FeaturesPage";
 import local from "../background/i18n";
@@ -37,28 +36,24 @@ function Popup() {
     useState<PolyDictionary>(DEFAULT_OPTIONS);
   const [featuresState, setFeaturesState] =
     useState<BooleanDictionary>(DEFAULT_FEATURES);
-  const [settingsState, setSettingsState] =
-    useState<PolyDictionary>(DEFAULT_SETTINGS);
 
   const [currentPage, setCurrentPage] = useState(PopupPageNameEnum.KEYBINDS);
 
   const keybindsProp = { keybindsState, setKeybindsState };
   const optionsProp = { optionsState, setOptionsState };
   const featuresProp = { featuresState, setFeaturesState };
 
-  const currentPageProps = { currentPage, setCurrentPage, setSettingsState };
+  const currentPageProps = { currentPage, setCurrentPage };
 
   useEffect(() => {
     // retrieve settings
     retrieveOptionsFromStorage(setOptionsState);
     retrieveKeybindsFromStorage(setKeybindsState);
     retrieveFeaturesFromStorage(setFeaturesState);
-    // retrieveFeaturesFromStorage( setSettingsState )
 
     pingChanges(ChangedObjectStateEnum.KEYBINDS, keybindsState as object);
     pingChanges(ChangedObjectStateEnum.OPTIONS, optionsState as object);
     pingChanges(ChangedObjectStateEnum.FEATURES, featuresState as object);
-    // pingChanges( ChangedObjectStateEnum.SETTINGS, settingsState as object )
   }, []);
 
   function getCurrentPageContent() {

src/content.ts

@@ -1,7 +1,12 @@
 import BROWSER from "./background/browser";
 import { checkVolume } from "./lib/VolumeSlider";
 import { DEFAULT_STATE } from "./lib/declarations";
-import { StateObject } from "./lib/definitions";
+import {
+  StateObject,
+  BooleanDictionary,
+  PolyDictionary,
+  StringDictionary,
+} from "./lib/definitions";
 import { getCurrentId, getVideo } from "./lib/getters";
 import { handleKeyEvent } from "./lib/handleKeyEvent";
 import {
@@ -29,7 +34,7 @@ import { handleHideShortsOverlay } from "./lib/HideShortsOverlay";
  */
 
 const state = new Proxy(DEFAULT_STATE, {
-  set(o: StateObject, prop: string, val: any) {
+  set(o: StateObject, prop: string, val: string | boolean | number | null) {
     o[prop] = val;
 
     const ytShorts = getVideo();
@@ -38,7 +43,7 @@ const state = new Proxy(DEFAULT_STATE, {
     if (ytShorts !== null) {
       switch (prop) {
         case "playbackRate":
-          ytShorts.playbackRate = val;
+          ytShorts.playbackRate = val as number;
           break;
       }
     }
@@ -47,10 +52,10 @@ const state = new Proxy(DEFAULT_STATE, {
   },
 });
 
-let keybinds = null as any;
-let options = null as any;
-let settings = null as any;
-let features = null as any;
+let keybinds: StringDictionary;
+let options: PolyDictionary;
+let settings: PolyDictionary;
+let features: BooleanDictionary;
 
 // todo  - add "settings" to localstorage (merge autoplay + player volume into one)
 // localStorage.getItem("yt-player-volume") !== null && JSON.parse(localStorage.getItem("yt-player-volume"))["data"]["volume"]
@@ -93,7 +98,7 @@ function main() {
   if (ytShorts === null) return;
   if (currentId === null) return;
 
-  if (state.topId < currentId) state.topId = currentId;
+  if ((state.topId as number) < currentId) state.topId = currentId;
 
   // video has to have been playing to skip.
   // I'm undecided whether to use 0.5 or 1 for currentTime, as 1 isn't quite fast enough, but sometimes with 0.5, it skips a video above the minimum like count.

src/lib/ActionElement.ts

@@ -1,13 +1,14 @@
 import { createAutoplaySwitch } from "./Autoplay";
 import { setPlaybackRate } from "./PlaybackRate";
 import { CYCLABLE_PLAYBACK_RATES } from "./declarations";
+import { StateObject, BooleanDictionary, PolyDictionary } from "./definitions";
 import { getActionElement, getCurrentId, getTitle, getVideo } from "./getters";
 import { wheel } from "./utils";
 
 export function populateActionElement(
-  state: any,
-  settings: any,
-  features: any,
+  state: StateObject,
+  settings: PolyDictionary,
+  features: BooleanDictionary,
 ) {
   // ! use proper types
   const id = getCurrentId();
@@ -86,7 +87,8 @@ export function populateActionElement(
 
   createAutoplaySwitch(settings, features["autoplay"]);
 
-  if (features["playbackRate"]) ytShorts.playbackRate = state.playbackRate;
+  if (features["playbackRate"])
+    ytShorts.playbackRate = state.playbackRate as number;
 
   setPlaybackRate(state);
   // injectedSuccess = setTimer( currTime || 0, Math.round(ytShorts.duration || 0))

src/lib/AutomaticallyOpenComments.ts

@@ -1,9 +1,9 @@
-import { StateObject } from "./definitions";
+import { StateObject, PolyDictionary } from "./definitions";
 import { getCommentsButton, getCurrentId } from "./getters";
 
 export function handleAutomaticallyOpenComments(
   state: StateObject,
-  options: any,
+  options: PolyDictionary,
 ) {
   if (shouldOpenComments(state, options)) openComments();
 }
@@ -12,7 +12,7 @@ function openComments() {
   getCommentsButton()?.click();
 }
 
-function shouldOpenComments(state: StateObject, options: any) {
+function shouldOpenComments(state: StateObject, options: PolyDictionary) {
   const currentId = getCurrentId();
 
   if (options === null) return false;

src/lib/Autoplay.ts

@@ -1,13 +1,13 @@
 import local from "../background/i18n";
 import { saveSettingsToStorage } from "./SaveToStorage";
 import { skipShort } from "./VideoState";
-import { StateObject } from "./definitions";
+import { StateObject, PolyDictionary } from "./definitions";
 import { getActionElement, getCurrentId, getVideo } from "./getters";
 import { render } from "./utils";
 
 export function handleAutoplay(
   state: StateObject,
-  settings: any,
+  settings: PolyDictionary,
   enabled: boolean,
 ) {
   if (!enabled) return;
@@ -27,7 +27,10 @@ export function handleEnableAutoplay() {
   if (ytShorts === null) return false;
 }
 
-export function createAutoplaySwitch(settings: any, enabled: boolean) {
+export function createAutoplaySwitch(
+  settings: PolyDictionary,
+  enabled: boolean,
+) {
   if (!enabled) return;
 
   const actionElement = getActionElement();
@@ -54,8 +57,8 @@ export function createAutoplaySwitch(settings: any, enabled: boolean) {
 
   document
     .getElementById(`autoplay-checkbox${getCurrentId()}`)
-    ?.addEventListener("change", (e: any) => {
-      settings.autoplay = e.target.checked;
+    ?.addEventListener("change", (e: Event) => {
+      settings.autoplay = (e.target as HTMLInputElement).checked;
 
       saveSettingsToStorage(settings);
     });