Add lokalisation (#3104)

* applied eslint

* add locales and lint the project

* removed error boundary

* updated locales

* fix min files

* fix locales

* fix erorrs

* fix errors

frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx

@@ -70,7 +70,7 @@ function AssistSessionsModal(props: ConnectProps) {
     <div className="bg-gray-lightest box-shadow h-screen p-4">
       <div className="flex flex-col my-2 w-full gap-2 ">
         <div className="flex items-center gap-2 w-full">
-          <Tooltip title="Refresh" placement="top" delay={200}>
+          <Tooltip title={t('Refresh')} placement="top" delay={200}>
             <Button
               loading={loading}
               className="mr-2"

frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx

@@ -2,17 +2,19 @@ import React from 'react';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import ReloadButton from '../ReloadButton';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   onClick: () => void;
 }
 
 function LiveSessionReloadButton(props: Props) {
+  const { t } = useTranslation();
   const { sessionStore } = useStore();
   const { onClick } = props;
   const loading = sessionStore.loadingLiveSessions;
   return (
-    <ReloadButton label={'Refresh'} buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" />
+    <ReloadButton label={t('Refresh')} buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" />
   );
 }
 

frontend/app/components/shared/ReloadButton/ReloadButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Tooltip } from 'antd';
 import { SyncOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   loading?: boolean;
@@ -10,9 +11,10 @@ interface Props {
   label?: string
 }
 export default function ReloadButton(props: Props) {
+  const { t } = useTranslation();
   const { loading, onClick, iconSize = 18, buttonSize } = props;
   return (
-    <Tooltip title="Refresh" placement="right">
+    <Tooltip title={t('Refresh')} placement="right">
       <Button
         type="default"
         size={buttonSize}

frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx

@@ -66,7 +66,7 @@ function SessionSort() {
     <SortDropdown
       defaultOption={defaultOption}
       onSort={onSort}
-      sortOptions={sortOptions}
+      sortOptions={sortOptions(t)}
       current={sortOptionsMap(t)[defaultOption]}
     />
   );

frontend/app/layout/SideMenu.tsx

@@ -49,7 +49,7 @@ function SideMenu(props: Props) {
   const { isEnterprise } = userStore;
   const { siteId } = projectsStore;
   const { isMobile } = projectsStore;
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const menu: any[] = React.useMemo(() => {
     const sourceMenu = isPreferencesActive ? preferences(t) : main_menu(t);
@@ -116,7 +116,7 @@ function SideMenu(props: Props) {
           hidden: allItemsHidden,
         };
       });
-  }, [isAdmin, isEnterprise, isPreferencesActive, modules, spotOnly, siteId]);
+  }, [isAdmin, isEnterprise, isPreferencesActive, modules, spotOnly, siteId, i18n.language]);
 
   const menuRoutes: any = {
     [MENU.EXIT]: () =>