docs: refactoring documentation using sonarlint for better code

gabriel-logan · Oct 25, 2024 · 39349e2 · 39349e2
1 parent 69bc9c9
commit 39349e2
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 79 deletions.
diff --git a/docs/src/actions/index.ts b/docs/src/actions/index.ts
@@ -55,9 +55,9 @@ export async function makeTranslation(prevState: any, formData: FormData) {
 		};
 	}
 
-	const key = process.env.AZURE_API_KEY || ""; // REPLACE WITH YOUR OWN KEY HERE
-	const endpoint = process.env.AZURE_ENDPOINT || "";
-	const location = process.env.AZURE_LOCATION || "";
+	const key = process.env.AZURE_API_KEY ?? ""; // REPLACE WITH YOUR OWN KEY HERE
+	const endpoint = process.env.AZURE_ENDPOINT ?? "";
+	const location = process.env.AZURE_LOCATION ?? "";
 	const fromLang = data.fromLang;
 	const toLang = data.toLang;
 
@@ -94,9 +94,9 @@ export async function makeTranslationMultilang(
 ) {
 	const scopedT = await getScopedI18n("Actions");
 
-	const key = process.env.AZURE_API_KEY || "";
-	const endpoint = process.env.AZURE_ENDPOINT || "";
-	const location = process.env.AZURE_LOCATION || "";
+	const key = process.env.AZURE_API_KEY ?? "";
+	const endpoint = process.env.AZURE_ENDPOINT ?? "";
+	const location = process.env.AZURE_LOCATION ?? "";
 
 	const toTranslate = formData.get("toTranslate") as string;
 
@@ -224,9 +224,9 @@ export async function makeLiveTranslation(prevState: any, formData: FormData) {
 		};
 	}
 
-	const key = process.env.AZURE_API_KEY || ""; // REPLACE WITH YOUR OWN KEY HERE
-	const endpoint = process.env.AZURE_ENDPOINT || "";
-	const location = process.env.AZURE_LOCATION || "";
+	const key = process.env.AZURE_API_KEY ?? ""; // REPLACE WITH YOUR OWN KEY HERE
+	const endpoint = process.env.AZURE_ENDPOINT ?? "";
+	const location = process.env.AZURE_LOCATION ?? "";
 	const fromLang = data.fromLang;
 	const toLang = data.toLang;
 	const text = data.text;
@@ -235,7 +235,7 @@ export async function makeLiveTranslation(prevState: any, formData: FormData) {
 
 	try {
 		const pega = await fetch(
-			`${endpoint}/translate?api-version=3.0&from=${fromLang}&to=${toLang}`,
+			`${endpoint}/translate?api-version=3.0&from=${String(fromLang)}&to=${String(toLang)}`,
 			{
 				method: "POST",
 				headers: {

diff --git a/docs/src/app/[locale]/layout.tsx b/docs/src/app/[locale]/layout.tsx
@@ -15,7 +15,7 @@ export async function generateMetadata(): Promise<Metadata> {
 	const scopedT = await getScopedI18n("HomeLayout");
 	return {
 		metadataBase: new URL(
-			process.env.NEXT_PUBLIC_WEBSITE_URL ||
+			process.env.NEXT_PUBLIC_WEBSITE_URL ??
 				"https://azuretranslatorcode.vercel.app",
 		),
 

diff --git a/docs/src/app/[locale]/live/page.tsx b/docs/src/app/[locale]/live/page.tsx
@@ -6,7 +6,7 @@ import { LocaleParams } from "@/types/params";
 
 export default async function LiveTranslator({
 	params: { locale },
-}: LocaleParams) {
+}: Readonly<LocaleParams>) {
 	const scopedT = await getScopedI18n("HomePage");
 	return (
 		<main className="flex min-h-screen flex-col bg-gray-100 p-2 sm:p-6 md:p-10">

diff --git a/docs/src/app/not-found.tsx b/docs/src/app/not-found.tsx
@@ -7,7 +7,8 @@ export const dynamic = "force-dynamic";
 export default async function NotFound() {
 	const scopedT = await getScopedI18n("NotFoundPage");
 	return (
-		<html>
+		// eslint-disable-next-line prettier/prettier
+		<html> {/* nosonar */}
 			<body>
 				<main className="min-h-screen">
 					<div className="mx-auto mt-32 max-w-md rounded bg-white p-5 text-center shadow-md">

diff --git a/docs/src/components/ButtonCopy/index.tsx b/docs/src/components/ButtonCopy/index.tsx
@@ -7,66 +7,58 @@ import { useScopedI18n } from "@/locales/client";
 
 export default function ButtonCopy({
 	state,
-}: {
-	state: { message: string | unknown };
-}) {
+}: Readonly<{
+	state: { message: unknown };
+}>) {
 	const scopedT = useScopedI18n("FormComponent");
 
 	const [isCopied, setIsCopied] = useState(false);
 
 	return (
-		<>
-			<div
-				className={`flex flex-col items-end ltr:float-right`}
-				onClick={() => {
-					navigator.clipboard.writeText(
-						typeof state.message === "string"
-							? state.message
-							: JSON.stringify(state.message, null, 2),
-					);
-					setIsCopied(true);
-					setTimeout(() => {
-						setIsCopied(false);
-					}, 1000);
-				}}
-			>
-				<FaRegCopy
-					className="cursor-pointer text-black transition-colors duration-75 active:text-gray-300"
-					size={22}
-				/>
-				<span className="text-gray-500">
-					{isCopied ? scopedT("Copied") : ""}
-				</span>
-			</div>
-		</>
+		<button
+			className="flex flex-col items-end ltr:float-right"
+			onClick={() => {
+				navigator.clipboard.writeText(
+					typeof state.message === "string"
+						? state.message
+						: JSON.stringify(state.message, null, 2),
+				);
+				setIsCopied(true);
+				setTimeout(() => {
+					setIsCopied(false);
+				}, 1000);
+			}}
+		>
+			<FaRegCopy
+				className="cursor-pointer text-black transition-colors duration-75 active:text-gray-300"
+				size={22}
+			/>
+			<span className="text-gray-500">{isCopied ? scopedT("Copied") : ""}</span>
+		</button>
 	);
 }
 
-export function ButtonCopyUnicText({ text }: { text: string }) {
+export function ButtonCopyUnicText({ text }: Readonly<{ text: string }>) {
 	const scopedT = useScopedI18n("FormComponent");
 
 	const [isCopied, setIsCopied] = useState(false);
 
 	return (
-		<>
-			<div
-				className="flex items-center justify-center"
-				onClick={() => {
-					navigator.clipboard.writeText(text);
-					setIsCopied(true);
-					setTimeout(() => {
-						setIsCopied(false);
-					}, 1000);
-				}}
-			>
-				<FaRegCopy
-					className="cursor-pointer text-black transition-colors duration-75 active:text-gray-300"
-					size={18}
-				/>
-				<span className="text-gray-500">
-					{isCopied ? scopedT("Copied") : ""}
-				</span>
-			</div>
-		</>
+		<button
+			className="flex items-center justify-center"
+			onClick={() => {
+				navigator.clipboard.writeText(text);
+				setIsCopied(true);
+				setTimeout(() => {
+					setIsCopied(false);
+				}, 1000);
+			}}
+		>
+			<FaRegCopy
+				className="cursor-pointer text-black transition-colors duration-75 active:text-gray-300"
+				size={18}
+			/>
+			<span className="text-gray-500">{isCopied ? scopedT("Copied") : ""}</span>
+		</button>
 	);
 }
diff --git a/docs/src/components/FormTransLiveText/InputResult.tsx b/docs/src/components/FormTransLiveText/InputResult.tsx
@@ -9,10 +9,10 @@ import { useScopedI18n } from "@/locales/client";
 export default function InputResult({
 	typing,
 	response,
-}: {
+}: Readonly<{
 	typing: boolean;
-	response: { message: string | unknown };
-}) {
+	response: { message: unknown };
+}>) {
 	const scopedT = useScopedI18n("FormComponent");
 	const [isCopied, setIsCopied] = useState(false);
 
@@ -32,7 +32,7 @@ export default function InputResult({
 				style={{ maxHeight: "80%", minHeight: "80%" }}
 			/>
 			{!typing && !pending && (
-				<div
+				<button
 					className="absolute bottom-2 right-3 text-black"
 					onClick={() => {
 						navigator.clipboard.writeText(response.message as string);
@@ -49,7 +49,7 @@ export default function InputResult({
 					<span className="text-gray-500">
 						{isCopied ? scopedT("Copied") : ""}
 					</span>
-				</div>
+				</button>
 			)}
 		</>
 	);

diff --git a/docs/src/components/FormTransLiveText/index.tsx b/docs/src/components/FormTransLiveText/index.tsx
@@ -9,7 +9,7 @@ import { Locale } from "@/types/locales";
 
 import InputResult from "./InputResult";
 
-export default function FormTransLiveText({ locale }: Locale) {
+export default function FormTransLiveText({ locale }: Readonly<Locale>) {
 	const scopedT = useScopedI18n("FormComponent");
 
 	const [textToTranslate, setTextToTranslate] = useState("");
@@ -18,7 +18,7 @@ export default function FormTransLiveText({ locale }: Locale) {
 	const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
 
 	const initialState: {
-		message: string | unknown;
+		message: unknown;
 	} = {
 		message: scopedT("Translation"),
 	};
@@ -65,9 +65,9 @@ export default function FormTransLiveText({ locale }: Locale) {
 					className="h-1/4 w-full cursor-pointer bg-gray-700 p-3 text-white sm:h-1/5"
 					defaultValue={locale}
 				>
-					{languages.map((lang, index) => {
+					{languages.map((lang) => {
 						return (
-							<option key={index} value={lang.id}>
+							<option key={lang.id} value={lang.id}>
 								{lang.name}
 							</option>
 						);
@@ -76,6 +76,7 @@ export default function FormTransLiveText({ locale }: Locale) {
 				<textarea
 					className="h-85% w-full resize-none p-2 text-black outline-none sm:h-4/5"
 					value={textToTranslate}
+					placeholder="Type here..."
 					name="textToTranslate"
 					onChange={(e) => {
 						setTyping(true);
@@ -116,7 +117,7 @@ export default function FormTransLiveText({ locale }: Locale) {
 				>
 					{languages.map((lang, index) => {
 						return (
-							<option key={index} value={lang.id}>
+							<option key={lang.id} value={lang.id}>
 								{lang.name}
 							</option>
 						);

diff --git a/docs/src/components/FormTransMultiText/index.tsx b/docs/src/components/FormTransMultiText/index.tsx
@@ -10,11 +10,11 @@ import { Locale } from "@/types/locales";
 import { ButtonCopyUnicText } from "../ButtonCopy";
 import ButtonSubmit from "../ButtonSubmit";
 
-export default function FormTransMultiText({ locale }: Locale) {
+export default function FormTransMultiText({ locale }: Readonly<Locale>) {
 	const scopedT = useScopedI18n("FormComponent");
 
 	const initialState: {
-		message: string | unknown;
+		message: unknown;
 	} = {
 		message: scopedT("No result yet"),
 	};
@@ -70,9 +70,9 @@ export default function FormTransMultiText({ locale }: Locale) {
 						className="w-full cursor-pointer rounded bg-gray-700 p-3 text-white"
 						defaultValue={locale}
 					>
-						{languages.map((lang, index) => {
+						{languages.map((lang) => {
 							return (
-								<option key={index} value={lang.id}>
+								<option key={lang.id} value={lang.id}>
 									{lang.name}
 								</option>
 							);
@@ -140,7 +140,10 @@ export default function FormTransMultiText({ locale }: Locale) {
 						{response.message.map((msg: any, index: any) => {
 							const language = languages.find((lang) => lang.id === msg.to);
 							return (
-								<div key={index} className="relative mb-3 rounded border p-1">
+								<div
+									key={language?.id ?? index}
+									className="relative mb-3 rounded border p-1"
+								>
 									<p className="text-lg text-black">
 										<span className="font-bold">
 											{language ? language.name : msg.to}

diff --git a/docs/src/components/FormTransUnicJson/ResultDiv.tsx b/docs/src/components/FormTransUnicJson/ResultDiv.tsx
@@ -8,11 +8,11 @@ import { useScopedI18n } from "@/locales/client";
 
 export default function ResultDiv({
 	state,
-}: {
+}: Readonly<{
 	state: {
-		message: string | unknown;
+		message: unknown;
 	};
-}) {
+}>) {
 	const scopedT = useScopedI18n("FormComponent");
 
 	const { pending } = useFormStatus();