Adding next lint to pipeline

.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
 }

.github/workflows/algorithm.yml

@@ -1,16 +1,16 @@
 on:
   push:
-    paths: 
+    paths:
       - "algorithm/*"
   pull_request:
-    paths: 
+    paths:
       - "algorithm/*"
   workflow_dispatch:
 
 jobs:
   test:
     runs-on: "ubuntu-latest"
-    
+
     strategy:
       matrix:
         python-version: ["3.12"]
@@ -19,8 +19,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-python@v5
         with:
-          python-version: '3.12' 
-    
+          python-version: '3.12'
+
       - name: Install mip_matching
         run: |
           cd algorithm
@@ -30,4 +30,3 @@ jobs:
         run: |
           cd algorithm
           python -m unittest discover -p "*test.py"
-

.github/workflows/next-lint.yml

@@ -0,0 +1,25 @@
+name: Next Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  next-lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run next lint
+        run: npm run lint

components/Button.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import Link from "next/link";
 
 interface Props {

components/DropdownMenu.tsx

@@ -1,16 +1,7 @@
-import React from 'react';
+import React from "react";
 import ThemeToggle from "./ThemeToggle";
-import Link from 'next/link';
-
-interface User {
-  name: string;
-  role?: string;
-  isCommittee?: boolean;
-}
-
-interface Session {
-  user?: User;
-}
+import Link from "next/link";
+import { Session } from "../lib/types/next-auth";
 
 type Props = {
   session: Session | null;
@@ -19,10 +10,18 @@ type Props = {
   toggleDropdown: () => void;
 };
 
-const DropdownMenu = ({ session, handleLogin, handleLogout, toggleDropdown }: Props) => {
+const DropdownMenu = ({
+  session,
+  handleLogin,
+  handleLogout,
+  toggleDropdown,
+}: Props) => {
   const RenderLink = ({ path, label }: { path: string; label: string }) => (
     <Link href={path} passHref>
-      <a onClick={toggleDropdown} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+      <a
+        onClick={toggleDropdown}
+        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+      >
         {label}
       </a>
     </Link>
@@ -33,20 +32,34 @@ const DropdownMenu = ({ session, handleLogin, handleLogout, toggleDropdown }: Pr
       {!session?.user ? (
         <>
           <ThemeToggle />
-          <a onClick={handleLogin} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+          <a
+            onClick={handleLogin}
+            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
             Logg inn
           </a>
         </>
       ) : (
         <>
           <div className="px-4 py-2 cursor-default">
-            Logget inn som <span className="font-medium">{session?.user.name}</span>
+            Logget inn som{" "}
+            <span className="font-medium">{session?.user.name}</span>
           </div>
           <RenderLink path="/" label="Hjem" />
-          {session?.user.role === "admin" && <RenderLink path="/admin" label="Admin" />}
-          {session?.user.isCommittee && <RenderLink path="/committee" label="For komiteer" />}
+          {session?.user.role === "admin" && (
+            <RenderLink path="/admin" label="Admin" />
+          )}
+          {session?.user.isCommittee && (
+            <RenderLink path="/committee" label="For komiteer" />
+          )}
           <ThemeToggle />
-          <a onClick={() => { handleLogout(); toggleDropdown(); }} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+          <a
+            onClick={() => {
+              handleLogout();
+              toggleDropdown();
+            }}
+            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
             Logg ut
           </a>
         </>

components/Navbar.tsx

@@ -25,7 +25,7 @@ const Navbar = () => {
 
   const handleLogout = () => signOut();
   const handleLogin = () => signIn("auth0");
-  const isLinkActive = (uri: string) => router.pathname === uri;
+
   const smallOnlineLogoSrc =
     theme === "dark" ? "/Online_hvit_o.svg" : "/Online_bla_o.svg";
   const onlineLogoSrc =

components/applicantoverview/ApplicantTable.tsx

@@ -1,4 +1,4 @@
-import { applicantType, preferencesType } from "../../lib/types/types";
+import { applicantType } from "../../lib/types/types";
 import ApplicantCard from "./ApplicantCard";
 
 interface Props {

components/committee/CommitteeCard.tsx

@@ -1,6 +1,4 @@
-import router from "next/router";
 import React from "react";
-import Button from "../Button";
 import Link from "next/link";
 
 interface Props {

components/committee/CommitteeInterviewTimes.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { BaseSyntheticEvent, useEffect, useRef } from "react";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
@@ -52,7 +54,7 @@ const CommitteeInterviewTimes = ({
 
   const [deadLineHasPassed, setDeadLineHasPassed] = useState<boolean>(false);
 
-  const { unsavedChanges, setUnsavedChanges } = useUnsavedChangesWarning();
+  const { setUnsavedChanges } = useUnsavedChangesWarning();
 
   useEffect(() => {
     if (period) {
@@ -187,7 +189,6 @@ const CommitteeInterviewTimes = ({
         throw new Error("Failed to submit data");
       }
 
-      const result = await response.json();
       toast.success("Tidene er sendt inn!");
       setHasAlreadySubmitted(true);
       setUnsavedChanges(false);
@@ -243,7 +244,7 @@ const CommitteeInterviewTimes = ({
             />
           </button>
         )}
-        <h1 className="text-sm sm:text-xl md:text-2xl lg:text-3xl break-words">
+        <h1 className="text-sm break-words sm:text-xl md:text-2xl lg:text-3xl">
           {eventContent.event.title}
         </h1>
       </div>
@@ -477,14 +478,14 @@ const CommitteeInterviewTimes = ({
 
       {isModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="flex flex-col bg-gray-100 dark:bg-gray-800 p-5 rounded shadow-lg">
+          <div className="flex flex-col p-5 bg-gray-100 rounded shadow-lg dark:bg-gray-800">
             <h2 className="mb-4 text-xl font-semibold">
               Skriv inn navn på rom:
             </h2>
             <input
               ref={inputRef}
               type="text"
-              className="my-2 p-2 w-full rounded-lg dark:bg-gray-900  border-gray-900 dark:border-white transition-none outline-none"
+              className="w-full p-2 my-2 transition-none border-gray-900 rounded-lg outline-none dark:bg-gray-900 dark:border-white"
               value={roomInput}
               onChange={(e) => setRoomInput(e.target.value)}
             />

components/committee/SendCommitteeMessage.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useState, ChangeEvent } from "react";
+import { useEffect, useState } from "react";
 import Button from "../Button";
 import TextAreaInput from "../form/TextAreaInput";
-import LoadingPage from "../LoadingPage";
 import { useRouter } from "next/router";
 import { committeeInterviewType, periodType } from "../../lib/types/types";
-import { useSession } from "next-auth/react";
 import toast from "react-hot-toast";
 
 interface Props {

components/form/ApplicationForm.tsx

@@ -6,7 +6,6 @@ import Line from "./Line";
 import { DeepPartial, applicantType } from "../../lib/types/types";
 import { changeDisplayName } from "../../lib/utils/toString";
 import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
 
 interface Props {
   applicationData: DeepPartial<applicantType>;
@@ -65,8 +64,8 @@ export const ApplicationForm = (props: Props) => {
   }, [props.applicationData.email]);
 
   return (
-    <div className="flex justify-center items-center">
-      <form className="px-5 text-online-darkBlue dark:text-white max-w-sm w-full">
+    <div className="flex items-center justify-center">
+      <form className="w-full max-w-sm px-5 text-online-darkBlue dark:text-white">
         {isNtnuEmail && (
           <div className="px-5">
             <p className="text-red-500">

components/form/RadioInput.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 interface Props {
   updateInputValues: Function;
   label: string;

components/icons/icons/CommitteeIcon.tsx

@@ -13,7 +13,7 @@ const CommitteeIcon = ({
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_14_6)">
+    <g clipPath="url(#clip0_14_6)">
       <path
         d="M55 39H9C8.73478 39 8.48043 38.8946 8.29289 38.7071C8.10536 38.5196 8 38.2652 8 38V32C8 31.7348 8.10536 31.4804 8.29289 31.2929C8.48043 31.1054 8.73478 31 9 31H55C55.2652 31 55.5196 31.1054 55.7071 31.2929C55.8946 31.4804 56 31.7348 56 32V38C56 38.2652 55.8946 38.5196 55.7071 38.7071C55.5196 38.8946 55.2652 39 55 39ZM10 37H54V33H10V37Z"
         fill={fill}

components/skeleton/ApplicantOverviewSkeleton.tsx

@@ -32,8 +32,6 @@ const ApplicantOverviewSkeleton = () => {
             <input
               type="text"
               placeholder="Ola Nordmann"
-              value={""}
-              onChange={(e) => {}}
               className="w-full text-black border-gray-300 dark:bg-online-darkBlue dark:text-white dark:border-gray-600"
             />
           </div>

lib/mongo/committees.ts

@@ -1,7 +1,6 @@
-import { Collection, Db, MongoClient, ObjectId, UpdateResult } from "mongodb";
+import { Collection, Db, MongoClient, ObjectId } from "mongodb";
 import clientPromise from "./mongodb";
 import { commiteeType } from "../types/types";
-import { co } from "@fullcalendar/core/internal-common";
 
 let client: MongoClient;
 let db: Db;
@@ -23,15 +22,6 @@ async function init() {
   await init();
 })();
 
-const userHasAccessList = (
-  userCommittees: string[],
-  dbCommittees: string[]
-) => {
-  return dbCommittees.some((dbCommittee) =>
-    userCommittees.includes(dbCommittee)
-  );
-};
-
 const userHasAccessCommittee = (
   userCommittees: string[],
   dbCommittees: string

lib/mongo/mongodb.ts

@@ -9,6 +9,7 @@ let client: MongoClient = new MongoClient(URI, options);
 let clientPromise: Promise<MongoClient>;
 
 declare global {
+  // eslint-disable-next-line no-unused-vars
   var _mongoClientPromise: Promise<MongoClient>;
 }
 

lib/types/next-auth.d.ts

@@ -1,21 +1,17 @@
 import "next-auth";
-import { Session } from "next-auth";
-
-declare module "next-auth" {
-  interface Session {
-    accessToken?: string;
-    user?: User;
-  }
+export interface Session {
+  accessToken?: string;
+  user?: User;
+}
 
-  interface User {
-    owId?: string;
-    subId: string;
-    name: string;
-    role?: "admin" | "user";
-    email: string;
-    phone?: string;
-    grade?: number;
-    committees?: string[];
-    isCommittee: boolean;
-  }
+export interface User {
+  owId?: string;
+  subId: string;
+  name: string;
+  role?: "admin" | "user";
+  email: string;
+  phone?: string;
+  grade?: number;
+  committees?: string[];
+  isCommittee: boolean;
 }

lib/utils/dateUtils.ts

@@ -4,10 +4,7 @@ export const formatDate = (inputDate: undefined | Date) => {
   const day = date.getDate().toString().padStart(2, "0");
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
   const year = date.getFullYear();
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-
-  return `${day}.${month}.${year}`; //  - ${hours}:${minutes}
+  return `${day}.${month}.${year}`;
 };
 
 export const formatDateNorwegian = (inputDate?: Date): string => {

lib/utils/validators.ts

@@ -31,12 +31,12 @@ export const isApplicantType = (data: any): data is applicantType => {
       data.preferences.second !== data.preferences.third);
 
   // Check that the selectedTimes array is valid
-  const hasSelectedTimesFields =
+  /* const hasSelectedTimesFields = // TODO: DONT KNOW IF WE NEED THIS, LOOK AT THIS LATER
     Array.isArray(data.selectedTimes) &&
     data.selectedTimes.every(
       (time: { start: any; end: any }) =>
         typeof time.start === "string" && typeof time.end === "string"
-    );
+    ); */
 
   const hasOptionalFields =
     data.optionalCommittees &&

next.config.js

@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+// eslint-disable-next-line no-unused-vars
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,