add slider api i18next

2022-01-17 11:58:51 +05:00 · 2022-01-17 11:58:51 +05:00 · 56aad98944
parent 411123ab7e
commit 56aad98944
7 changed files with 281 additions and 90 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,9 +12,11 @@
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
+        "i18next": "^21.6.6",
        "node-sass": "^6.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
+        "react-i18next": "^11.15.3",
        "react-redux": "^7.2.6",
        "react-router-dom": "^5.3.0",
        "react-scripts": "^4.0.3",
@ -9407,6 +9409,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/html-webpack-plugin": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@ -9696,6 +9706,14 @@
        "node": ">=8.12.0"
      }
    },
+    "node_modules/i18next": {
+      "version": "21.6.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.6.tgz",
+      "integrity": "sha512-K1Pw8K+nHVco56PO6UrqNq4K/ZVbb2eqBQwPqmzYDm4tGQYXBjdz8jrnvuNvV5STaE8oGpWKQMxHOvh2zhVE7Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -15197,6 +15215,28 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "node_modules/react-i18next": {
+      "version": "11.15.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
+      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -19311,6 +19351,14 @@
      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -28271,6 +28319,14 @@
        "terser": "^4.6.3"
      }
    },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
    "html-webpack-plugin": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@ -28502,6 +28558,14 @@
      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
    },
+    "i18next": {
+      "version": "21.6.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.6.tgz",
+      "integrity": "sha512-K1Pw8K+nHVco56PO6UrqNq4K/ZVbb2eqBQwPqmzYDm4tGQYXBjdz8jrnvuNvV5STaE8oGpWKQMxHOvh2zhVE7Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -32791,6 +32855,16 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "react-i18next": {
+      "version": "11.15.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
+      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -36021,6 +36095,11 @@
      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
    },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
    "w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -6,9 +6,11 @@
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
+    "i18next": "^21.6.6",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-i18next": "^11.15.3",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
@ -45,6 +47,5 @@
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "author": "",
-  "license": "ISC",
-  "devDependencies": {}
+  "license": "ISC"
 }
--- a/src/components/Global/Nav.js
+++ b/src/components/Global/Nav.js
@ -1,6 +1,7 @@
 // IMPORT MODULES
 import React, { useRef } from "react";
 import { Link } from "react-router-dom";
+import i18n from '../../i18n';

 // IMPORT IMAGES
 import MainLogo from "../../svg/mainLogo.svg";
@ -10,7 +11,11 @@ import flagOfRussia from "../../svg/flagOfRussia.svg";
 import flagOfUK from "../../svg/flagOfUK.svg";
 import flagOfTkm from "../../svg/flagOfTkm.svg";

-const Nav = () => {
+function  Nav  ({ t })  {
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng);
+    console.log(lng);
+  }
  // REF
  const navBtn = useRef();
  const mobileNavExpanded = useRef();
@ -32,7 +37,7 @@ const Nav = () => {
          <div className="nav-right">
            <ul className="nav-link">
              <li className="nav-link">
-                <Link to="/news">Новости</Link>
+                <Link to="/news">Новос</Link>
              </li>
              <li className="nav-link">
                <Link to="/etalons">Эталоны</Link>
@ -113,19 +118,19 @@ const Nav = () => {
              <li className="nav-link nav-select nav-lang">
                <div className="nav-dropdown nav-dropdown-shifted">
                  <ul className="nav-dropdown-content">
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('ru')}>
                      <h4>Русский</h4>
                      <div className="flag-wrapper">
                        <img src={flagOfRussia} alt="RUSSIAN" />
                      </div>
                    </li>
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('tm')}>
                      <h4>Türkmençe</h4>
                      <div className="flag-wrapper">
                        <img src={flagOfTkm} alt="TURKMEN" />
                      </div>
                    </li>
-                    <li className="dropdown-content">
+                    <li className="dropdown-content" onClick={() => changeLanguage('en')}>
                      <h4>English</h4>
                      <div className="flag-wrapper">
                        <img src={flagOfUK} alt="ENGLISH" />
--- a/src/i18n.js
+++ b/src/i18n.js
@ -0,0 +1,33 @@
+import i18n from "i18next";
+import { initReactI18next} from "react-i18next";
+
+
+import translationEN from "./locales/en/translationEN.json"; 
+import translationRU from "./locales/ru/translationRU.json";
+
+
+
+const resources = {
+    en: {
+        translation: translationEN
+    },
+    ru: {
+        translation: translationRU
+    }
+};
+
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'ru', 
+
+    keySeparator: false,
+
+    interpolation: {
+        escapeValue: false
+    }
+});
+
+export default i18n;
+
+
--- a/src/locales/en/translationEN.json
+++ b/src/locales/en/translationEN.json
@ -0,0 +1,3 @@
+{
+    "test":"test_en"
+}
--- a/src/locales/ru/translationRU.json
+++ b/src/locales/ru/translationRU.json
@ -0,0 +1,3 @@
+{
+    "test":"test_ru"
+}
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@ -1,5 +1,6 @@
 // IMPORT MODULES
-import React, { useEffect } from "react";
+import React from "react";
+import { withTranslation } from 'react-i18next';

 // IMPORT COMPONENTS
 import NewsTab from "../components/Main/NewsTab";
@ -14,91 +15,157 @@ import { Navigation, Pagination, A11y, Autoplay } from "swiper";
 import "swiper/swiper.scss";

 // IMPORT SLIDER IMAGES
-import SliderIMG from "../img/sliderImg.jpg";
+// import SliderIMG from "../img/sliderImg.jpg";
 import SliderIMG_2 from "../img/secondSliderImg.jpg";

-const Main = () => {
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-  return (
-    <section className="main">
-      <div className="slider">
-        <Swiper
-          // install Swiper modules
-          modules={[Navigation, Pagination, A11y, Autoplay]}
-          autoplay={({ delay: 3000 }, { disableOnInteraction: false })}
-          spaceBetween={0}
-          slidesPerView={1}
-          navigation
-          pagination={{ clickable: true }}
-          loop={true}
-        >
-          <SwiperSlide>
-            <div className="slider-img">
-              <img src={SliderIMG} alt="ETALON" />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="slider-img">
-              <img src={SliderIMG} alt="ETALON" />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="slider-img">
-              <img src={SliderIMG} alt="ETALON" />
-            </div>
-          </SwiperSlide>
-        </Swiper>
-      </div>
-      <div className="container">
-        <div className="main-inner">
-          <NewsTab />
-          <div className="second-slider">
-            <div className="tab-header">
-              <h4 className="tab-header-text" id="tab-header-text">
-                Объявления
-              </h4>
-              <div className="tab-header-line"></div>
-            </div>
-            <div className="slider">
-              <Swiper
-                // install Swiper modules
-                modules={[Navigation, Pagination, A11y, Autoplay]}
-                autoplay={({ delay: 3000 }, { disableOnInteraction: false })}
-                spaceBetween={0}
-                slidesPerView={1}
-                navigation
-                pagination={{ clickable: true }}
-                loop={true}
-              >
-                <SwiperSlide className="swipe-slide">
-                  <h2>Государственный эталонный центр</h2>
-                  <div className="slider-img">
-                    <img src={SliderIMG_2} alt="ETALON" />
-                  </div>
-                </SwiperSlide>
-                <SwiperSlide className="swipe-slide">
-                  <h2>Государственный эталонный центр</h2>
-                  <div className="slider-img">
-                    <img src={SliderIMG_2} alt="ETALON" />
-                  </div>
-                </SwiperSlide>
-                <SwiperSlide className="swipe-slide">
-                  <h2>Государственный эталонный центр</h2>
-                  <div className="slider-img">
-                    <img src={SliderIMG_2} alt="ETALON" />
-                  </div>
-                </SwiperSlide>
-              </Swiper>
+// const Main = () => {
+//   useEffect(() => {
+//     window.scrollTo(0, 0);
+//   }, []);
+
+class Main extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [],
+      DataisLoaded: false,
+      error: null
+  };
+  }
+
+  componentDidMount() {
+    this._mounted = true
+    this.makeRemoteRequest();
+  }
+
+ 
+
+  componentWillUnmount() {
+    this._mounted = false
+  }
+
+  makeRemoteRequest = () => {
+
+    const url = `http://217.174.238.204:8888/api/v1/slider`
+  
+    if (this._mounted) {
+      this.setState({ DataisLoaded: true });
+    }
+    setTimeout(() => {
+  
+      fetch(url, {
+        method: 'GET',
+       
+      })
+  
+        .then(res => res.json())
+        .then(res => {
+          if (this._mounted) {
+            this.setState({
+              items: res.data,
+              error: res.message || null,
+              DataisLoaded: true,
+            })
+            console.log(res.data)
+          }
+         
+        })
+        .catch(error => {
+          if (this._mounted) {
+            this.setState({ error, DataisLoaded: false});
+          }
+        });
+    }, 1500);
+  };
+
+
+  render() {
+    const { t } = this.props;
+
+    var {DataisLoaded, items} = this.state;
+    if(!DataisLoaded){
+      return <div>Loading ....</div>
+    }else{
+
+      return (
+        <section className="main">
+          <div className="slider">
+            <Swiper
+              // install Swiper modules
+              modules={[Navigation, Pagination, A11y, Autoplay]}
+              autoplay={({ delay: 3000 }, { disableOnInteraction: false })}
+              spaceBetween={0}
+              slidesPerView={1}
+              navigation
+              pagination={{ clickable: true }}
+              loop={true}
+            >
+
+
+            {items.map(item=>(
+              <SwiperSlide key={item.id} >
+                <div className="slider-img" >
+                  <img src={item.image.path} alt="ETALON" />
+                </div>
+              </SwiperSlide>
+             ))}
+
+            </Swiper>
+          </div>
+          <div className="container">
+            <div className="main-inner">
+              <NewsTab />
+              <div className="second-slider">
+                <div className="tab-header">
+                  <h4 className="tab-header-text" id="tab-header-text">
+                    {/* Объявления */}
+                    {t('test')}
+                  </h4>
+                  <div className="tab-header-line"></div>
+                </div>
+                <div className="slider">
+                  <Swiper
+                    // install Swiper modules
+                    modules={[Navigation, Pagination, A11y, Autoplay]}
+                    autoplay={({ delay: 3000 }, { disableOnInteraction: false })}
+                    spaceBetween={0}
+                    slidesPerView={1}
+                    navigation
+                    pagination={{ clickable: true }}
+                    loop={true}
+                  >
+                    <SwiperSlide className="swipe-slide">
+                      <h2>Государственный эталонный центр</h2>
+                      <div className="slider-img">
+                        <img src={SliderIMG_2} alt="ETALON" />
+                      </div>
+                    </SwiperSlide>
+                    <SwiperSlide className="swipe-slide">
+                      <h2>Государственный эталонный центр</h2>
+                      <div className="slider-img">
+                        <img src={SliderIMG_2} alt="ETALON" />
+                      </div>
+                    </SwiperSlide>
+                    <SwiperSlide className="swipe-slide">
+                      <h2>Государственный эталонный центр</h2>
+                      <div className="slider-img">
+                        <img src={SliderIMG_2} alt="ETALON" />
+                      </div>
+                    </SwiperSlide>
+                  </Swiper>
+                </div>
+              </div>
+              <DepartmentsTab />
+              <SitesTab />
            </div>
          </div>
-          <DepartmentsTab />
-          <SitesTab />
-        </div>
-      </div>
-    </section>
-  );
+        </section>
+      );
+    }
+  }
 };

-export default Main;
+// export default Main;
+export default withTranslation()(Main);