Merge pull request sinamics#468 from sinamics/refactor-organization-menu

Refactor organization settings menu
tinola · Aug 3, 2024 · 231e479 · 231e479
2 parents 6b06596 + b4a9a9f
commit 231e479
Show file tree

Hide file tree

Showing 23 changed files with 956 additions and 684 deletions.
diff --git a/src/components/elements/inputField.tsx b/src/components/elements/inputField.tsx
@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useMemo } from "react";
 import { useState, useRef, useEffect } from "react";
 import Input from "~/components/elements/input";
 import cn from "classnames";
@@ -82,21 +82,33 @@ const InputField = ({
 	const inputRef = useRef<HTMLInputElement>(null);
 	const selectRef = useRef<HTMLSelectElement>(null);
 
+	// Extract primitive values from fields
+	const fieldsDependency = useMemo(() => {
+		return fields
+			.map((field) => `${field.name}:${field.type}:${field.value}:${field.initialValue}`)
+			.join("|");
+	}, [fields]);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <extracting fieldsDependency to get the primitive types used for useEffect.>
 	useEffect(() => {
 		setFormValues(
-			fields.reduce((acc, field) => {
-				let value;
-				if (field.type === "checkbox") {
-					value = !!field.value || !!field.initialValue;
-				} else {
-					value = field.value || field.initialValue || "";
-				}
-				acc[field.name] = value;
-				return acc;
-			}, {}),
+			fields.reduce(
+				(acc, field) => {
+					let value;
+					if (field.type === "checkbox") {
+						value = !!field.value || !!field.initialValue;
+					} else {
+						value = field.value || field.initialValue || "";
+					}
+					acc[field.name] = value;
+					return acc;
+				},
+				{} as Record<string, string | boolean | string[]>,
+			),
 		);
-	}, [fields]);
+	}, [fieldsDependency]);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <extracting fieldsDependency to get the primitive types used for useEffect.>
 	useEffect(() => {
 		// When showInputs is true, focus the appropriate field based on its type
 		if (showInputs) {
@@ -106,7 +118,7 @@ const InputField = ({
 				inputRef.current?.focus();
 			}
 		}
-	}, [showInputs, fields]);
+	}, [showInputs, fieldsDependency]);
 
 	const handleEditClick = () => !disabled && setShowInputs(!showInputs);
 
@@ -116,7 +128,6 @@ const InputField = ({
 			| { target: { name: string; value: string[] } },
 	) => {
 		const { name, value } = "target" in e ? e.target : e;
-
 		setFormValues((prevValues) => ({
 			...prevValues,
 			[name]: value,

diff --git a/src/components/networkByIdPage/organization/listOrganizations.tsx b/src/components/networkByIdPage/organization/listOrganizations.tsx
@@ -1,7 +1,6 @@
 import { useTranslations } from "next-intl";
 import React from "react";
 import DeleteOrganizationModal from "~/components/organization/deleteOrganizationModal";
-// import EditOrganizationModal from "~/components/organization/editOrgModal";
 // import { OrganizationUserTable } from "~/components/organization/userTable";
 import { api } from "~/utils/api";
 import { useModalStore } from "~/utils/store";

diff --git a/src/components/organization/editOrgModal.tsx b/src/components/organization/editOrgModal.tsx
diff --git a/src/components/organization/inviteByMail.tsx b/src/components/organization/inviteByMail.tsx
@@ -33,9 +33,9 @@ const InviteByMail = ({ organizationId }: Iprops) => {
 
 	return (
 		<div>
-			<p className="text-xl">{t("invitation.inviteByEmail.title")}</p>
-			<p className="text-sm text-gray-400 ">
-				{t("invitation.inviteByEmail.description")}
+			<p className="font-medium">{t("settings.invitation.inviteByEmail.title")}</p>
+			<p className="text-sm text-gray-500">
+				{t("settings.invitation.inviteByEmail.description")}
 			</p>
 			<InputField
 				isLoading={inviteLoading}
@@ -55,15 +55,15 @@ const InviteByMail = ({ organizationId }: Iprops) => {
 					{
 						name: "email",
 						type: "text",
-						description: t("invitation.inviteByEmail.emailDescription"),
-						placeholder: t("invitation.inviteByEmail.emailPlaceholder"),
+						description: t("settings.invitation.inviteByEmail.emailDescription"),
+						placeholder: t("settings.invitation.inviteByEmail.emailPlaceholder"),
 						// value: options?.smtpPort,
 					},
 					{
 						name: "role",
 						elementType: "select",
 						placeholder: "user role",
-						description: t("invitation.inviteByEmail.selectRoleDescription"),
+						description: t("settings.invitation.inviteByEmail.selectRoleDescription"),
 						initialValue: "READ_ONLY",
 						selectOptions: UserRolesList,
 					},

diff --git a/src/components/organization/inviteByUser.tsx b/src/components/organization/inviteByUser.tsx
@@ -50,22 +50,22 @@ const InviteByUsers = () => {
 		<div className="space-y-5">
 			<div className="form-control w-full space-y-5">
 				<div>
-					<h2 className="text-xl">{t("invitation.inviteSiteUser.title")}</h2>
-					<p className="text-sm text-gray-400">
-						{t("invitation.inviteSiteUser.description")}
+					<h2 className="font-medium">{t("settings.invitation.inviteSiteUser.title")}</h2>
+					<p className="text-sm text-gray-500">
+						{t("settings.invitation.inviteSiteUser.description")}
 					</p>
 				</div>
 				<div>
 					<p className="text-sm text-gray-500">
-						{t("invitation.inviteSiteUser.inputFields.searchUser.title")}
+						{t("settings.invitation.inviteSiteUser.inputFields.searchUser.title")}
 					</p>
 					<ScrollableDropdown
 						items={allUsers}
 						displayField="name"
 						inputClassName="w-full"
 						idField="id"
 						placeholder={t(
-							"invitation.inviteSiteUser.inputFields.searchUser.placeholder",
+							"settings.invitation.inviteSiteUser.inputFields.searchUser.placeholder",
 						)}
 						onOptionSelect={(selectedItem) => {
 							setState({
@@ -80,7 +80,7 @@ const InviteByUsers = () => {
 			<div className="form-control space-y-8">
 				<div className="form-control w-full">
 					<p className="text-sm text-gray-500">
-						{t("invitation.inviteSiteUser.inputFields.userRole.title")}
+						{t("settings.invitation.inviteSiteUser.inputFields.userRole.title")}
 					</p>
 					<select
 						value={state?.role}