added i18next language lib and some style fixes

src/App.tsx

@@ -10,14 +10,12 @@ import { PlayerComponent } from "./components/playerComponent/playerComponent";
 import { useAppDispatch, useAppSelector } from "./hooks/redux";
 import { fetchCards } from "./store/reducers/ActionCreator";
 import { cardSlice } from "./store/reducers/cardSlice";
+import { languageSlice } from "./store/reducers/languageSlice";
 import { ICards } from "./models/ICards";
-import textRU from "./utils/textRU";
-import textEN from "./utils/textEN";
+import { useTranslation } from "react-i18next";
+import cookies from "js-cookie";
 
-
-function App() {
-  const [language, setLanguage] = useState<string>("");
-  const [text, setText] = useState(textRU);
+const App: React.FC<any> = () => {
   const [visible, setVisible] = useState({
     popup1: true,
     popup2: false,
@@ -26,11 +24,12 @@ function App() {
   const dispatch = useAppDispatch();
   const history = useHistory();
   const { handleCurrentCard } = cardSlice.actions;
+  const { handleChangeLanguage } = languageSlice.actions;
   const { cards } = useAppSelector((state) => state.cardReducer);
-  const savedLanguage = localStorage.getItem("savedLang");
 
   useEffect(() => {
     dispatch(fetchCards());
+    dispatch(handleChangeLanguage(cookies.get("i18next")));
   }, []);
 
   const handleCards = (card: ICards) => {
@@ -42,61 +41,14 @@ function App() {
     history.push("/");
   };
 
-  useEffect(() => {
-    if (savedLanguage !== null) {
-      setSavedLanguage();
-    } else {
-      setInitialLanguage();
-    }
-  }, []);
-
-  function setSavedLanguage() {
-    if (savedLanguage === "RU") {
-      setLanguage("RU");
-      localStorage.setItem("lang", "RU");
-      setText(textRU);
-    } else if (savedLanguage === "EN") {
-      setLanguage("EN");
-      localStorage.setItem("lang", "EN");
-      setText(textEN);
-    }
-  }
-
-  function setInitialLanguage() {
-    if (window.navigator.language === "ru") {
-      setLanguage("RU");
-      localStorage.setItem("lang", "RU");
-      setText(textRU);
-    } else {
-      setLanguage("EN");
-      setText(textEN);
-    }
-  }
-
-  function changeLanguage(language: string) {
-    if (language === "RU") {
-      setLanguage(language);
-      setText(textRU);
-      localStorage.setItem("savedLang", "RU");
-      localStorage.setItem("lang", "RU");
-    } else {
-      setLanguage("EN");
-      localStorage.setItem("lang", "EN");
-      localStorage.setItem("savedLang", "EN");
-      setText(textEN);
-    }
-  }
+  const { t } = useTranslation();
 
   return (
     <Switch>
       <Route exact path="/">
-        <Header
-          text={text.footer}
-          language={language}
-          changeLanguage={changeLanguage}
-        ></Header>
+        <Header></Header>
         <div className="main">
-          <h3 className="demos__tittle">{text.demos.title}</h3>
+          <h3 className="demos__tittle">{t("demo-title")}</h3>
           <div className="demo__container">
             {cards.map((i: any) => (
               <Demos
@@ -111,17 +63,9 @@ function App() {
       <Route path="/connect-page">
         <div className="background">
           <div className="blur">
-            <Header
-              text={text.footer}
-              language={language}
-              changeLanguage={changeLanguage}
-            ></Header>
+            <Header></Header>
             <div className="content__container">
-              <Main
-                visible={visible}
-                setVisible={setVisible}
-                text={text}
-              ></Main>
+              <Main visible={visible} setVisible={setVisible}></Main>
             </div>
           </div>
         </div>
@@ -134,6 +78,6 @@ function App() {
       </Route>
     </Switch>
   );
-}
+};
 
 export default App;