eslint: fix config and lint code

- make useEffect deps exhaustive to unbreak rerendering
  - memo-ize everything to cache between rerenders
  - make sure we are accounting for everything
- fix some types
  - we are not using strict linting for now

.eslintrc.json

@@ -1,99 +1,3 @@
 {
-  "$schema": "https://json.schemastore.org/eslintrc.json",
-  "env": {
-    "browser": false,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "plugins": [
-    "react",
-    "unused-imports",
-    "import",
-    "@typescript-eslint",
-    "jsx-a11y",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-console": "warn",
-    "react/prop-types": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "jsx-a11y/click-events-have-key-events": "warn",
-    "jsx-a11y/interactive-supports-focus": "warn",
-    "prettier/prettier": "warn",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "args": "after-used",
-        "ignoreRestSiblings": false,
-        "argsIgnorePattern": "^_.*?$"
-      }
-    ],
-    "import/order": [
-      "warn",
-      {
-        "groups": [
-          "type",
-          "builtin",
-          "object",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "~/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always"
-      }
-    ],
-    "react/self-closing-comp": "warn",
-    "react/jsx-sort-props": [
-      "warn",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "noSortAlphabetically": false,
-        "reservedFirst": true
-      }
-    ],
-    "padding-line-between-statements": [
-      "warn",
-      { "blankLine": "always", "prev": "*", "next": "return" },
-      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
-      {
-        "blankLine": "any",
-        "prev": ["const", "let", "var"],
-        "next": ["const", "let", "var"]
-      }
-    ]
-  }
+  "extends": "next"
 }

app/actions/getCourses.ts

@@ -4,7 +4,6 @@ import { cookies } from "next/headers";
 import prisma from "../../lib/prisma";
 import { Prisma } from "@prisma/client";
 export async function setPlanCookie(plan: string) {
-  //@ts-ignore
   (await cookies()).set("plan", plan);
 }
 

components/CreatePlan.tsx

@@ -112,7 +112,7 @@ export default function CreatePlan(props: any) {
     const objDiv: any = document.getElementById("scrollMe");
 
     objDiv.scrollTop = objDiv.scrollHeight;
-  }, [data]);
+  }, [data, cookies]);
 
   const CoursesList = () => {
     const output: any = [];

components/FullCourseList.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Course, Prisma } from "@prisma/client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import CourseCard from "./CourseCard";
 import React from "react";
@@ -31,7 +31,7 @@ export function FullCourseList({
   const [courses, setCourses] = useState<Course[]>(init);
   const { ref, inView } = useInView();
 
-  const loadMoreUsers = async () => {
+  const loadMoreUsers = useCallback(async () => {
     // NOTE: if this isn't done every time we get a double take and a
     // race condition desync, breaking isDone. Maybe we'll have better
     // logic in the future.
@@ -49,17 +49,19 @@ export function FullCourseList({
       setIsDone(false);
     }
     setCourses(apiCourses);
-  };
+  }, [courses, cursor, take, query, term, dotw, stime, inView]);
+
   useEffect(() => {
     if (inView) {
       loadMoreUsers();
     }
-  }, [inView]);
+  }, [inView, loadMoreUsers]);
+
   useEffect(() => {
     setIsDone(false);
     loadMoreUsers();
-  }, [query, term, dotw, stime]);
-  //const courseList: Course[] = await getCourses(query, term, dotw, stime);
+  }, [query, term, dotw, stime, loadMoreUsers]);
+
   return (
     <>
       <div className="flex flex-col gap-3">

components/Search.tsx

@@ -4,7 +4,7 @@ import { Input } from "@nextui-org/input";
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { useDebouncedCallback } from "use-debounce";
 import { Select, SelectItem } from "@nextui-org/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import moment from "moment";
 import { Chip } from "@mui/material";
 
@@ -19,7 +19,11 @@ export default function Search(props: any) {
   const [search, setSearch]: any = useState();
   const pathname = usePathname();
   const { replace } = useRouter();
-  const params = new URLSearchParams(searchParams);
+
+  const params = useMemo(
+    () => new URLSearchParams(searchParams),
+    [searchParams]
+  );
 
   const replaceText = (text: any) => {
     setSearch(text?.replace(/\w+:/, <Chip>{text}</Chip>));
@@ -81,17 +85,14 @@ export default function Search(props: any) {
     setSelectedDOTW(searchParams.get("dotw")?.toString().split(","));
     setSelectedStartTime(searchParams.get("stime")?.toString().split(","));
     //handleSelectionChange({ target: { value: selectedTerm } });
-  }, [
-    searchParams.get("term")?.toString(),
-    searchParams.get("dotw")?.toString(),
-    searchParams.get("stime")?.toString(),
-  ]);
+  }, [searchParams]);
+
   useEffect(() => {
     // Update the document title using the browser API
     params.set("term", "S2025");
     replace(`${pathname}?${params.toString()}`);
     setSelectedTerm(searchParams.get("term")?.toString().split(","));
-  }, []);
+  }, [searchParams, params, pathname, replace]);
 
   const handleDOTWChange = (e: any) => {
     setSelectedDOTW(...[e]);

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . -c .ts,.tsx -c .eslintrc.json --fix"
+    "lint": "next lint"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -68,7 +68,7 @@
     "use-debounce": "^10.0.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.14.0",
+    "@eslint/js": "^9.15.0",
     "@next/eslint-plugin-next": "^15.0.3",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",