ref(frontend): fix file or disable eslint rules

frontend/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

frontend/components/RouteGuard.js

@@ -11,9 +11,11 @@ export default function RouteGuard({ children }) {
 	const router = useRouter();
 	const [authorized, setAuthorized] = useState(false);
 
-	useEffect(async () => {
+	useEffect(() => {
 		// on initial load - run auth check
-		await authCheck(router.asPath);
+		(async () => {
+			await authCheck(router.asPath);
+		})();
 
 		// on route change start - hide page content by setting authorized to false
 		// #TODO: add the loading page when not yet authorized.
@@ -31,7 +33,6 @@ export default function RouteGuard({ children }) {
 			router.events.off("routeChangeComplete", authCheck);
 			// router.events.off("routeChangeError", onError);
 		};
-
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

frontend/components/basic/layout.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";

frontend/components/basic/popups/BottomRightPopup.js

@@ -1,8 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faXmark,
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
 export default function BottonRightPopup({
 	buttonText,
@@ -11,22 +9,34 @@ export default function BottonRightPopup({
 	emoji,
 	textLine1,
 	textLine2,
-	setCheckDocsPopUpVisible
+	setCheckDocsPopUpVisible,
 }) {
 	return (
-		<div class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6" role="alert">
+		<div
+			class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
+			role="alert"
+		>
 			<div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
 				<div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
 					<div>{titleText}</div>
 					<div class="ml-2.5">{emoji}</div>
 				</div>
-				<button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)}>
-					<FontAwesomeIcon icon={faXmark} className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer" />
+				<button
+					className="mt-1"
+					onClick={() => setCheckDocsPopUpVisible(false)}
+				>
+					<FontAwesomeIcon
+						icon={faXmark}
+						className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer"
+					/>
 				</button>
 			</div>
-			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
+			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+				{textLine1}
+			</div>
 			<div class="block sm:inline mb-4 px-6">{textLine2}</div>
 			<div className="flex flex-row px-6 w-full">
+				{/*eslint-disable-next-line react/jsx-no-target-blank */}
 				<a
 					class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
 					href={buttonLink}

frontend/components/basic/table/UserTable.js

@@ -81,7 +81,7 @@ const UserTable = ({
 		]);
 	};
 
-	useEffect(async () => {
+	useEffect(() => {
 		setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
 	}, [userData, myUser]);
 

frontend/components/billing/Card.js

@@ -37,24 +37,27 @@ export default function Card({ card, changeSelectedCard, selected }) {
 				<div className="flex flex-row items-center justify-between w-full">
 					<div className="flex flex-row items-center">
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>
 							))}
 						</p>
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>
 							))}
 						</p>
 						<p className="tracking-tighter mr-1 mt-0.5 flex">
-							{"****".split("").map(() => (
+							{"****".split("").map((_, index) => (
 								<FontAwesomeIcon
+									key={index}
 									className="text-xxxs mr-0.5"
 									icon={faCircle}
 								/>

frontend/components/dashboard/DashboardInputField.js

@@ -1,39 +1,44 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import guidGenerator from "../utilities/randomId";
 
-
 /**
  * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
  * @param {string} text - the value of the input in the Dashboard Input Field
- * @returns 
+ * @returns
  */
 const findReferences = (text) => {
-	var splitText = text.split('${');
+	var splitText = text.split("${");
 	let textArray = [splitText[0]];
 	for (var i = 1; i < splitText.length; i++) {
-		let insideBrackets = "${" + splitText[i].split('}')[0]
-		if (splitText[i].includes('}')) {
-			insideBrackets += "}"
+		let insideBrackets = "${" + splitText[i].split("}")[0];
+		if (splitText[i].includes("}")) {
+			insideBrackets += "}";
 		}
-		textArray.push(insideBrackets)
-		textArray.push(splitText[i].split('}')[1])
+		textArray.push(insideBrackets);
+		textArray.push(splitText[i].split("}")[1]);
 	}
 	return textArray;
-}
+};
 
 /**
  * This component renders the input fields on the dashboard
- * @param {object} obj - the order number of a keyPair 
- * @param {number} obj.index - the order number of a keyPair 
+ * @param {object} obj - the order number of a keyPair
+ * @param {number} obj.index - the order number of a keyPair
  * @param {function} obj.onChangeHandler - what happens when the input is modified
  * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
- * @param {string} obj.value - value of the InputField 
+ * @param {string} obj.value - value of the InputField
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
- * @returns 
+ * @returns
  */
-const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {
+const DashboardInputField = ({
+	index,
+	onChangeHandler,
+	type,
+	value,
+	blurred,
+}) => {
 	if (type === "varName") {
 		return (
 			<div className="flex-col w-full">
@@ -67,32 +72,58 @@ const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) =>
 						} asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`}
 						spellCheck="false"
 					/>
-					<div 
+					<div
 						className={`${
 							blurred
 								? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
 								: ""
 						} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-100`}
 					>
-						{findReferences(value).map((text, id) => 
-							id % 2 == 0 || text.length <= 2
-							? <span className="ph-no-capture">{text}</span> 
-							: <span className="ph-no-capture text-yellow">
-								{text.slice(0, 2)}
-								<span className="ph-no-capture text-yellow-200/80">
-									{text.slice(2, text.length - 1)}
+						{findReferences(value).map((texts, id) => {
+							if (id % 2 == 0 || texts.length <= 2) {
+								return (
+									<span className="ph-no-capture" key={id}>
+										{texts}
+									</span>
+								);
+							}
+							return (
+								<span
+									className="ph-no-capture text-yellow"
+									key={id}
+								>
+									{texts.slice(0, 2)}
+									<span className="ph-no-capture text-yellow-200/80">
+										{texts.slice(2, texts.length - 1)}
+									</span>
+									{texts.slice(
+										texts.length - 1,
+										texts.length
+									) == "}" ? (
+										<span className="ph-no-capture text-yellow">
+											{texts.slice(
+												texts.length - 1,
+												texts.length
+											)}{" "}
+										</span>
+									) : (
+										<span className="ph-no-capture text-yellow-400">
+											{texts.slice(
+												texts.length - 1,
+												texts.length
+											)}{" "}
+										</span>
+									)}
 								</span>
-								{text.slice(text.length - 1, text.length) == "}" 
-								? <span className="ph-no-capture text-yellow">{text.slice(text.length - 1, text.length)} </span> 
-								: <span className="ph-no-capture text-yellow-400">{text.slice(text.length - 1, text.length)} </span>}
-							</span>)}
+							);
+						})}
 					</div>
 					{blurred && (
 						<div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
 							<p className="ml-2"></p>
 							{value
 								.split("")
-								.slice(0,42)
+								.slice(0, 42)
 								.map(() => (
 									<FontAwesomeIcon
 										key={guidGenerator()}

frontend/components/navigation/NavBarDashboard.js

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/jsx-key */
 import React, { useState, Fragment, useEffect } from "react";
 import { useRouter } from "next/router";
 
@@ -106,6 +108,7 @@ export default function Navbar({ onButtonPressed }) {
 					>
 						<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-2 py-1.5">
 							{supportOptions.map((option) => (
+								// eslint-disable-next-line react/jsx-no-target-blank
 								<a
 									key={guidGenerator()}
 									target="_blank"

frontend/components/navigation/NavHeader.js

@@ -15,15 +15,18 @@ export default function NavHeader({ pageName, isProjectRelated }) {
 	const [workspaceName, setWorkspaceName] = useState("");
 	const router = useRouter();
 
-	useEffect(async () => {
-		let org = await getOrganization({
-			orgId: localStorage.getItem("orgData.id"),
-		});
-		setOrgName(org.name);
-		let workspace = await getWorkspaceInfo({
-			workspaceId: router.query.id,
-		});
-		setWorkspaceName(workspace.name);
+	useEffect(() => {
+		(async () => {
+			let org = await getOrganization({
+				orgId: localStorage.getItem("orgData.id"),
+			});
+			setOrgName(org.name);
+			let workspace = await getWorkspaceInfo({
+				workspaceId: router.query.id,
+			});
+			setWorkspaceName(workspace.name);
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return (

frontend/pages/dashboard.js

@@ -10,11 +10,14 @@ export default function DashboardRedirect() {
 	/**
 	 * Here we forward to the default workspace if a user opens this url
 	 */
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(async () => {
 		let userWorkspace;
 		try {
 			if (localStorage.getItem("projectData.id")) {
-				router.push("/dashboard/" + localStorage.getItem("projectData.id"));
+				router.push(
+					"/dashboard/" + localStorage.getItem("projectData.id")
+				);
 			} else {
 				const userWorkspaces = await getWorkspaces();
 				userWorkspace = userWorkspaces[0]._id;
@@ -23,9 +26,10 @@ export default function DashboardRedirect() {
 		} catch (error) {
 			console.log("Error - Not logged in yet");
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	return <div></div>
+	return <div></div>;
 }
 
 DashboardRedirect.requireAuth = true;