feat(frontend): Add popup "Data in the rankings are collected from 19.08.2024"

packages/frontend/package.json

@@ -18,6 +18,7 @@
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
+    "react-cookie": "^7.2.2",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.5",

packages/frontend/src/App.tsx

@@ -27,7 +27,6 @@ import { TrainLogs } from "./pages/logs/TrainLogs.tsx";
 import { StationLogs } from "./pages/logs/StationLogs.tsx";
 import { Profile } from "./pages/profile/Profile.tsx";
 import { Log } from "./pages/log/Log.tsx";
-
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
 import useColorMode from "./hooks/useColorMode.tsx";
@@ -49,6 +48,7 @@ function App()
         setTimeout(() => setLoading(false), 400);
     }, []);
 
+
     return <HelmetProvider>
 
 
@@ -57,7 +57,7 @@ function App()
         ) : (
                 <>
                     <ToastContainer
-                            position="bottom-right"
+                            position="top-center"
                             autoClose={ 1500 }
                             hideProgressBar={ false }
                             newestOnTop={ false }

packages/frontend/src/i18n/languages/en.json

@@ -1,6 +1,9 @@
 {
   "_": {
-    "title": "Simrail Stats"
+    "title": "Simrail Stats",
+    "popup": {
+      "ranking": "Data in the rankings are collected from 19.08.2024"
+    }
   },
   "preview": {
     "title": "Preview version!",

packages/frontend/src/i18n/languages/pl.json

@@ -1,6 +1,9 @@
 {
   "_": {
-    "title": "Simrail Stats"
+    "title": "Simrail Stats",
+    "popup": {
+      "ranking": "Dane w rankingach zbierane są od 19.08.2024"
+    }
   },
   "preview": {
     "title": "Wersja preview!",

packages/frontend/src/layout/DefaultLayout.tsx

@@ -14,14 +14,35 @@
  * See LICENSE for more.
  */
 
-import React, { useState, ReactNode } from "react";
+import React, { useState, ReactNode, useEffect } from "react";
 import { Header } from "../components/mini/header/Header";
 import { Sidebar } from "../components/mini/sidebar/Sidebar";
+import { useCookies } from 'react-cookie';
+import { toast } from "react-toastify";
+import { useTranslation } from 'react-i18next';
+
 
 export const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) =>
 {
     const [ sidebarOpen, setSidebarOpen ] = useState(false);
 
+    const { t } = useTranslation();
+
+    const [cookies, setCookie, _removeCookie] = useCookies(['info1'], { doNotParse: true, doNotUpdate: true });
+
+    useEffect(() =>
+    {
+        if (!cookies['info1']) {
+            setCookie('info1', true, {
+                maxAge: 259_200
+            });
+            toast.info(t("_.popup.ranking"), {
+                autoClose: 15_000,
+            });
+        }
+    }, []);
+
+
     return (
             <div className="dark:bg-boxdark-2 dark:text-bodydark">
                 <div className="flex h-screen overflow-hidden">

packages/frontend/src/pages/Home.tsx

@@ -45,6 +45,7 @@ export const Home: React.FC = () =>
         });
     }, []);
 
+
     return (
             <>
                 <div className="flex pb-5">