feat(frontend): update translate library

frontend/components/basic/Layout.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-unexpected-multiline */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
+import { useTranslation } from "next-i18next";
 import {
   faBookOpen,
   faGear,
@@ -130,31 +130,34 @@ export default function Layout({ children }: LayoutProps) {
     }
   }
 
-  const menuItems = [
-    {
-      href:
-        "/dashboard/" +
-        workspaceMapping[workspaceSelected as any] +
-        "?Development",
-      title: t("nav:menu.secrets"),
-      emoji: <FontAwesomeIcon icon={faKey} />,
-    },
-    {
-      href: "/users/" + workspaceMapping[workspaceSelected as any],
-      title: t("nav:menu.members"),
-      emoji: <FontAwesomeIcon icon={faUser} />,
-    },
-    {
-      href: "/integrations/" + workspaceMapping[workspaceSelected as any],
-      title: t("nav:menu.integrations"),
-      emoji: <FontAwesomeIcon icon={faPlug} />,
-    },
-    {
-      href: "/settings/project/" + workspaceMapping[workspaceSelected as any],
-      title: t("nav:menu.project-settings"),
-      emoji: <FontAwesomeIcon icon={faGear} />,
-    },
-  ];
+  const menuItems = useMemo(
+    () => [
+      {
+        href:
+          "/dashboard/" +
+          workspaceMapping[workspaceSelected as any] +
+          "?Development",
+        title: t("nav:menu.secrets"),
+        emoji: <FontAwesomeIcon icon={faKey} />,
+      },
+      {
+        href: "/users/" + workspaceMapping[workspaceSelected as any],
+        title: t("nav:menu.members"),
+        emoji: <FontAwesomeIcon icon={faUser} />,
+      },
+      {
+        href: "/integrations/" + workspaceMapping[workspaceSelected as any],
+        title: t("nav:menu.integrations"),
+        emoji: <FontAwesomeIcon icon={faPlug} />,
+      },
+      {
+        href: "/settings/project/" + workspaceMapping[workspaceSelected as any],
+        title: t("nav:menu.project-settings"),
+        emoji: <FontAwesomeIcon icon={faGear} />,
+      },
+    ],
+    [t]
+  );
 
   useEffect(() => {
     // Put a user in a workspace if they're not in one yet

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -1,7 +1,7 @@
 import { Fragment, useState } from "react";
 import { useRouter } from "next/router";
 import Trans from "next-translate/Trans";
-import useTranslation from "next-translate/useTranslation";
+import { useTranslation } from "next-i18next";
 import { Dialog, Transition } from "@headlessui/react";
 
 import Button from "../buttons/Button";

frontend/components/dashboard/DropZone.tsx

@@ -1,6 +1,6 @@
 import { type ChangeEvent, type DragEvent, useState } from "react";
 import Image from "next/image";
-import useTranslation from "next-translate/useTranslation";
+import { useTranslation } from "next-i18next";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 

frontend/components/navigation/NavBarDashboard.tsx

@@ -2,7 +2,7 @@
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
+import { TFunction, useTranslation } from "next-i18next";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import {
@@ -17,15 +17,16 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
 
+import logout from "~/pages/api/auth/Logout";
+
 import getOrganization from "../../pages/api/organization/GetOrg";
 import getOrganizations from "../../pages/api/organization/getOrgs";
 import getUser from "../../pages/api/user/getUser";
 import guidGenerator from "../utilities/randomId";
-import logout from "~/pages/api/auth/Logout";
 /**
  * @param {(key: string) => string} t
  */
-const supportOptions = (t) => [
+const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
     t("nav:support.slack"),
@@ -69,7 +70,7 @@ export default function Navbar() {
   const [orgs, setOrgs] = useState([]);
   const [currentOrg, setCurrentOrg] = useState<ICurrentOrg | undefined>();
 
-  const { t } = useTranslation("");
+  const { t } = useTranslation();
 
   const supportOptionsList = useMemo(() => supportOptions(t), [t]);
 
@@ -128,7 +129,7 @@ export default function Navbar() {
                 <a
                   key={guidGenerator()}
                   target="_blank"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                   href={String(url)}
                   className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
                 >

frontend/components/utilities/withTranslateProps.ts

@@ -0,0 +1,52 @@
+import { GetServerSideProps, GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+const DefaultNamespaces = ["common", "nav"];
+
+type GetTranslatedStaticProps = (
+  namespaces: string[],
+  getStaticProps?: GetStaticProps<any>
+) => GetStaticProps;
+
+type GetTranslatedServerSideProps = (
+  namespaces: string[],
+  getStaticProps?: GetServerSideProps<any>
+) => GetServerSideProps;
+
+export const getTranslatedStaticProps: GetTranslatedStaticProps =
+  (namespaces, getStaticProps) =>
+  async ({ locale, ...context }) => {
+    let staticProps = { props: {} };
+    if (typeof getStaticProps === "function") {
+      staticProps = (await getStaticProps(context)) as any;
+    }
+    return {
+      ...staticProps,
+      props: {
+        ...(await serverSideTranslations(locale ?? "en", [
+          ...DefaultNamespaces,
+          ...namespaces,
+        ])),
+        ...staticProps.props,
+      },
+    };
+  };
+
+export const getTranslatedServerSideProps: GetTranslatedServerSideProps =
+  (namespaces, getServerSideProps) =>
+  async ({ locale, ...context }) => {
+    let staticProps = { props: {} };
+    if (typeof getServerSideProps === "function") {
+      staticProps = (await getServerSideProps(context)) as any;
+    }
+    return {
+      ...staticProps,
+      props: {
+        ...(await serverSideTranslations(locale ?? "en", [
+          ...DefaultNamespaces,
+          ...namespaces,
+        ])),
+        ...staticProps.props,
+      },
+    };
+  };