refactor: fix eslint errors

wtchnm · Jan 27, 2021 · 264660a · 264660a
1 parent 1bebc3d
commit 264660a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 22 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,7 @@
-module.exports = (ctx) => ({
+module.exports = (context) => ({
   plugins: {
     tailwindcss: {},
-    autoprefixer: ctx.env === "production" ? {} : false,
-    cssnano: ctx.env === "production" ? {} : false,
+    autoprefixer: context.env === "production" ? {} : false,
+    cssnano: context.env === "production" ? {} : false,
   },
 });
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,8 +1,8 @@
 import { babel } from "@rollup/plugin-babel";
-import postcss from "rollup-plugin-postcss";
-import { terser } from "rollup-plugin-terser";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
 import { sizeSnapshot } from "rollup-plugin-size-snapshot";
+import { terser } from "rollup-plugin-terser";
 
 const extensions = [".js", ".jsx", ".es6", ".es", ".mjs", ".ts", ".tsx"];
 

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 import useAutoId from "../utils/useAutoId";
 
-interface Props
+interface Properties
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> {
   label: string;
 }
 
-const Input = React.forwardRef<HTMLInputElement, Props>(
+const Input = React.forwardRef<HTMLInputElement, Properties>(
   (
     {
       label,
 
       ...rest
     },
-    ref
+    reference
   ) => {
     const id = useAutoId("Input");
 
@@ -23,7 +23,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
           {label}
         </label>
         <input
-          ref={ref}
+          ref={reference}
           type="text"
           id={id}
           className="mt-1 box-border w-full py-2 px-3 rounded border border-solid border-gray-400 text-base leading-normal placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-400"

diff --git a/src/components/Suggester/Suggester.tsx b/src/components/Suggester/Suggester.tsx
@@ -10,7 +10,7 @@ import { Option } from "../../types";
 import Input from "../Input";
 import styles from "./Suggester.module.css";
 
-interface Props {
+interface Properties {
   options: Option[];
 
   label: string;
@@ -37,15 +37,15 @@ function Suggester({
   onSearch,
   onSelect,
   onClear,
-}: Props): ReactElement {
+}: Properties): ReactElement {
   const [value, setValue] = useState(defaultOption?.label ?? "");
   const [open, setOpen] = useState(false);
   const [shouldBlur, setShouldBlur] = useState(true);
   const [hoveredOptionIndex, setHoveredOptionIndex] = useState(0);
-  const [selectedOption, setSelectedOption] = useState<Option | null>(
-    defaultOption ?? null
+  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
+    defaultOption
   );
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownReference = useRef<HTMLDivElement>(null);
 
   const closeDropdown = useCallback(() => {
     setOpen(false);
@@ -105,7 +105,7 @@ function Suggester({
         return;
       }
 
-      if (selectedOption !== null && value !== "") {
+      if (selectedOption && value !== "") {
         onOptionMouseUp(selectedOption)();
       } else {
         setValue("");
@@ -121,7 +121,7 @@ function Suggester({
 
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.defaultPrevented || !dropdownRef.current) {
+      if (event.defaultPrevented || !dropdownReference.current) {
         return;
       }
       switch (event.key) {
@@ -130,10 +130,10 @@ function Suggester({
           event.preventDefault();
           if (hoveredOptionIndex === filteredOptions.length - 1) {
             setHoveredOptionIndex(0);
-            dropdownRef.current.scrollTop = 0;
+            dropdownReference.current.scrollTop = 0;
           } else {
             setHoveredOptionIndex(hoveredOptionIndex + 1);
-            dropdownRef.current.scrollTop = hoveredOptionIndex * 32;
+            dropdownReference.current.scrollTop = hoveredOptionIndex * 32;
           }
 
           break;
@@ -143,10 +143,11 @@ function Suggester({
           event.preventDefault();
           if (hoveredOptionIndex === 0) {
             setHoveredOptionIndex(filteredOptions.length - 1);
-            dropdownRef.current.scrollTop = (filteredOptions.length - 1) * 32;
+            dropdownReference.current.scrollTop =
+              (filteredOptions.length - 1) * 32;
           } else {
             setHoveredOptionIndex(hoveredOptionIndex - 1);
-            dropdownRef.current.scrollTop = (hoveredOptionIndex - 1) * 32;
+            dropdownReference.current.scrollTop = (hoveredOptionIndex - 1) * 32;
           }
 
           break;
@@ -172,7 +173,7 @@ function Suggester({
       optionText = "Loading...";
     } else if (async && value.length < min) {
       optionText = `Enter at least ${min} characters`;
-    } else if (!filteredOptions.length) {
+    } else if (filteredOptions.length === 0) {
       optionText = "No suggestions";
     }
 
@@ -232,7 +233,7 @@ function Suggester({
       />
       {open && (
         <div
-          ref={dropdownRef}
+          ref={dropdownReference}
           className={clsx(
             "z-50 absolute overflow-auto mt-1 border border-solid border-gray-300 shadow-sm w-full bg-white rounded py-2 box-border",
             styles.Suggester__options