refactor(ui): changed frontend to normal i18n without SSR

frontend/src/components/dashboard/CommentField.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'next-i18next';
+import { useTranslation } from 'react-i18next';
 
 /**
  * This is the text field where people can add comments to particular secrets.
@@ -16,9 +16,9 @@ const CommentField = ({
 
   return (
     <div className="relative mt-4 px-4 pt-6">
-      <p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
+      <p className="pl-0.5 text-sm text-bunker-300">{t('dashboard.sidebar.comments')}</p>
       <textarea
-        className="placeholder:text-bunker-400 dark:[color-scheme:dark] h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+        className="h-32 w-full rounded-md border border-mineshaft-500 bg-bunker-800 px-2 py-1.5 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2 dark:[color-scheme:dark]"
         value={comment}
         onChange={(e) => modifyComment(e.target.value, id)}
         placeholder="Leave any comments here..."

frontend/src/components/dashboard/DropZone.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { type ChangeEvent, type DragEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Image from 'next/image';
-import { useTranslation } from 'next-i18next';
 import { faUpload } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { parseDocument, Scalar, YAMLMap } from 'yaml';
@@ -148,7 +148,7 @@ const DropZone = ({
         setData(newData);
         setButtonReady(true);
       } catch (error) {
-        console.log("Error while dropping the file: ", error)
+        console.log('Error while dropping the file: ', error);
       }
     };
 
@@ -181,12 +181,12 @@ const DropZone = ({
   };
 
   return loading ? (
-    <div className="flex items-center justify-center pt-16 mb-16">
+    <div className="mb-16 flex items-center justify-center pt-16">
       <Image src="/images/loading/loading.gif" height={70} width={120} alt="google logo" />
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-4 mx-auto mt-1 py-8 px-2"
+      className="relative mx-auto mb-4 mt-1 flex w-full max-w-[calc(100%-1rem)] flex-col items-center justify-center rounded-md bg-mineshaft-900 py-8 px-2 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -195,14 +195,14 @@ const DropZone = ({
       <input
         id="fileSelect"
         type="file"
-        className="opacity-0 absolute w-full h-full"
+        className="absolute h-full w-full opacity-0"
         accept=""
         onChange={handleFileSelect}
       />
       {errorDragAndDrop ? <div className="my-3 max-w-xl opacity-80" /> : <div className="" />}
       <div className="flex flex-row">
-        <FontAwesomeIcon icon={faUpload} className="text-bunker-300 text-3xl mr-6" />
-        <p className="text-bunker-300 mt-1">{t('common:drop-zone-keys')}</p>
+        <FontAwesomeIcon icon={faUpload} className="mr-6 text-3xl text-bunker-300" />
+        <p className="mt-1 text-bunker-300">{t('common.drop-zone-keys')}</p>
       </div>
       {errorDragAndDrop && (
         <div className="mt-8 max-w-xl opacity-80">
@@ -212,30 +212,30 @@ const DropZone = ({
     </div>
   ) : (
     <div
-      className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
+      className="relative mb-16 flex w-full max-w-2xl flex-col items-center justify-center rounded-md bg-bunker px-4 pt-16 opacity-80 outline-dashed outline-2 outline-gray-700 duration-200 hover:opacity-100"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
-      <p className="">{t('common:drop-zone')}</p>
+      <FontAwesomeIcon icon={faUpload} className="mb-8 text-7xl" />
+      <p className="">{t('common.drop-zone')}</p>
       <input
         id="fileSelect"
         type="file"
-        className="opacity-0 absolute w-full h-full"
+        className="absolute h-full w-full opacity-0"
         accept=".txt,.env,.yml"
         onChange={handleFileSelect}
       />
-      <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
-        <div className="border-t border-gray-700 w-1/5" />
-        <p className="text-gray-400 text-xs mx-4">OR</p>
-        <div className="border-t border-gray-700 w-1/5" />
+      <div className="mb-6 mt-5 flex w-full flex-row items-center justify-center">
+        <div className="w-1/5 border-t border-gray-700" />
+        <p className="mx-4 text-xs text-gray-400">OR</p>
+        <div className="w-1/5 border-t border-gray-700" />
       </div>
       <div className="z-10 mb-6">
         <Button
           color="mineshaft"
-          text={String(t('dashboard:add-secret'))}
+          text={String(t('dashboard.add-secret'))}
           onButtonPressed={createNewFile}
           size="md"
         />

frontend/src/components/dashboard/GenerateSecretMenu.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { useTranslation } from 'next-i18next';
+import { useTranslation } from 'react-i18next';
 import { faShuffle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
@@ -21,8 +21,8 @@ const GenerateSecretMenu = ({
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-          <div className="py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500">
+        <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+          <div className="rounded-md bg-bunker-800 py-1 px-2 hover:bg-bunker-500">
             <FontAwesomeIcon icon={faShuffle} className="text-bunker-300" />
           </div>
         </Menu.Button>
@@ -36,7 +36,7 @@ const GenerateSecretMenu = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1">
+        <Menu.Items className="absolute right-0 z-50 mt-0.5 w-[20rem] origin-top-right rounded-md border border-mineshaft-500 bg-bunker px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
           <div
             onKeyDown={() => null}
             role="button"
@@ -55,20 +55,20 @@ const GenerateSecretMenu = ({
                 );
               }
             }}
-            className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
+            className="relative flex w-full cursor-pointer select-none flex-row items-center justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/10 hover:text-gray-200"
           >
-            <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faShuffle} />
-            <div className="text-sm justify-between flex flex-row w-full">
-              <p>{t('dashboard:sidebar.generate-random-hex')}</p>
-              <p>{t('dashboard:sidebar.digits')}</p>
+            <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faShuffle} />
+            <div className="flex w-full flex-row justify-between text-sm">
+              <p>{t('dashboard.sidebar.generate-random-hex')}</p>
+              <p>{t('dashboard.sidebar.digits')}</p>
             </div>
           </div>
-          <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
+          <div className="absolute bottom-[0.4rem] right-[3.3rem] flex w-16 flex-row rounded-md border border-chicago-700 bg-bunker-800 text-bunker-200 ">
             <div
               onKeyDown={() => null}
               role="button"
               tabIndex={0}
-              className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
+              className="m-0.5 cursor-pointer rounded-md px-1 hover:bg-chicago-700"
               onClick={() => {
                 if (randomStringLength > 1) {
                   setRandomStringLength(randomStringLength - 1);
@@ -80,14 +80,14 @@ const GenerateSecretMenu = ({
             <input
               onChange={(e) => setRandomStringLength(parseInt(e.target.value, 10))}
               value={randomStringLength}
-              className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
+              className="peer z-20 w-full bg-transparent text-center text-sm outline-none"
               spellCheck="false"
             />
             <div
               onKeyDown={() => null}
               role="button"
               tabIndex={0}
-              className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
+              className="m-0.5 cursor-pointer rounded-md px-1 pb-0.5 hover:bg-chicago-700"
               onClick={() => {
                 if (randomStringLength < 32) {
                   setRandomStringLength(randomStringLength + 1);

frontend/src/components/dashboard/SideBar.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Image from 'next/image';
-import { useTranslation } from 'next-i18next';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -80,9 +80,9 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-full min-w-sm max-w-sm sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
+    <div className="min-w-sm absolute sticky top-0 right-0 z-[70] flex h-full w-full max-w-sm flex-col justify-between border-l border-mineshaft-500 bg-bunker shadow-xl">
       {isLoading ? (
-        <div className="flex items-center justify-center h-full w-full">
+        <div className="flex h-full w-full items-center justify-center">
           <Image
             src="/images/loading/loading.gif"
             height={60}
@@ -91,9 +91,9 @@ const SideBar = ({
           />
         </div>
       ) : (
-        <div className="h-min overflow-y-auto w-full">
-          <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
-            <p className="font-semibold text-lg text-bunker-200">{t('dashboard:sidebar.secret')}</p>
+        <div className="h-min w-full overflow-y-auto">
+          <div className="flex flex-row items-center justify-between border-b border-mineshaft-500 px-4 py-3">
+            <p className="text-lg font-semibold text-bunker-200">{t('dashboard.sidebar.secret')}</p>
             <div
               onKeyDown={() => null}
               role="button"
@@ -101,12 +101,12 @@ const SideBar = ({
               className="p-1"
               onClick={() => toggleSidebar('None')}
             >
-              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="h-4 w-4 cursor-pointer text-bunker-300" />
             </div>
           </div>
-          <div className="mt-4 px-4 pointer-events-none">
-            <p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
-            <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+          <div className="pointer-events-none mt-4 px-4">
+            <p className="text-sm text-bunker-300">{t('dashboard.sidebar.key')}</p>
+            <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
               <DashboardInputField
                 onChangeHandler={modifyKey}
                 type="varName"
@@ -117,14 +117,14 @@ const SideBar = ({
               />
             </div>
           </div>
-          {(data[0]?.value || data[0]?.value === "") ? (
+          {data[0]?.value || data[0]?.value === '' ? (
             <div
               className={`relative mt-2 px-4 ${
-                overrideEnabled && 'opacity-40 pointer-events-none'
+                overrideEnabled && 'pointer-events-none opacity-40'
               } duration-200`}
             >
-              <p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
-              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+              <p className="text-sm text-bunker-300">{t('dashboard.sidebar.value')}</p>
+              <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
                 <DashboardInputField
                   onChangeHandler={modifyValue}
                   type="value"
@@ -134,22 +134,22 @@ const SideBar = ({
                   blurred
                 />
               </div>
-              <div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
+              <div className="absolute right-[1.07rem] top-[1.6rem] z-50 bg-bunker-800">
                 <GenerateSecretMenu modifyValue={modifyValue} id={data[0]?.id} />
               </div>
             </div>
           ) : (
-            <div className="px-4 text-sm text-bunker-300 pt-4">
-              <span className="py-0.5 px-1 rounded-md bg-primary-200/10 mr-1">
-                {t('common:note')}:
+            <div className="px-4 pt-4 text-sm text-bunker-300">
+              <span className="mr-1 rounded-md bg-primary-200/10 py-0.5 px-1">
+                {t('common.note')}:
               </span>
-              {t('dashboard:sidebar.personal-explanation')}
+              {t('dashboard.sidebar.personal-explanation')}
             </div>
           )}
           <div className="mt-4 px-4">
-            {(data[0]?.value || data[0]?.value === "") && (
-              <div className="flex flex-row items-center justify-between my-2 pl-1 pr-2">
-                <p className="text-sm text-bunker-300">{t('dashboard:sidebar.override')}</p>
+            {(data[0]?.value || data[0]?.value === '') && (
+              <div className="my-2 flex flex-row items-center justify-between pl-1 pr-2">
+                <p className="text-sm text-bunker-300">{t('dashboard.sidebar.override')}</p>
                 <Toggle
                   enabled={overrideEnabled}
                   setEnabled={setOverrideEnabled}
@@ -160,10 +160,10 @@ const SideBar = ({
             )}
             <div
               className={`relative ${
-                !overrideEnabled && 'opacity-40 pointer-events-none'
+                !overrideEnabled && 'pointer-events-none opacity-40'
               } duration-200`}
             >
-              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+              <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
                 <DashboardInputField
                   onChangeHandler={modifyValueOverride}
                   type="value"
@@ -179,14 +179,10 @@ const SideBar = ({
             </div>
           </div>
           <SecretVersionList secretId={data[0]?.id} />
-          <CommentField
-            comment={data[0]?.comment}
-            modifyComment={modifyComment}
-            id={data[0]?.id}
-          />
+          <CommentField comment={data[0]?.comment} modifyComment={modifyComment} id={data[0]?.id} />
         </div>
       )}
-      <div className="mt-full w-96 mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
+      <div className="mt-full mt-4 mb-4 flex w-96 max-w-sm flex-col justify-start space-y-2 px-4">
         <div>
           <Button
             text="Compare secret across environments"
@@ -205,7 +201,7 @@ const SideBar = ({
         </div>
         <div className="flex">
           <Button
-            text={String(t('common:save-changes'))}
+            text={String(t('common.save-changes'))}
             onButtonPressed={savePush}
             color="primary"
             size="md"