chart reworked

src/components/ChartTable.jsx

@@ -15,13 +15,12 @@ const ChartTable = ({ activeRow, setActiveRow, tabIndex }) => {
   useEffect(() => {
     // Table data fetch
     const TableApi = new Api(
-      // `http://tmex.gov.tm:8765/api/categories/${tabIndex}/tradings`,
-      `http://tmex.gov.tm:8765/api/categories/8/tradings`,
+      `http://tmex.gov.tm:8765/api/categories/${tabIndex}/tradings`,
+      // `http://tmex.gov.tm:8765/api/categories/8/tradings`,
       dataTable,
       setDataTable,
-    );
-    TableApi.get();
-  }, []);
+    ).get();
+  }, [tabIndex]);
 
   return (
     <div className="table">

src/components/DataChart.jsx

@@ -20,8 +20,11 @@ const DataChart = ({ lang }) => {
     });
   }, [lang]);
 
-  // console.log(tabIndex);
-  // setTabIndex(tabData.data[0].id);
+  // Functions
+  const tabDataFetch = (id, index) => {
+    setTabIndex(id);
+    setActiveTab(index);
+  };
 
   return (
     <section className="chart">
@@ -33,10 +36,9 @@ const DataChart = ({ lang }) => {
                   return index <= 2 ? (
                     <div
                       key={tab.id}
-                      className={`${activeTab === index ? 'active' : ''} tab`}
+                      className={`${tabIndex === tab.id ? 'active' : ''} tab`}
                       onClick={() => {
-                        setActiveTab(index);
-                        // setTabIndex(tab.id);
+                        tabDataFetch(tab.id, index);
                       }}>
                       <span>{tab.title}</span>
                     </div>
@@ -45,9 +47,9 @@ const DataChart = ({ lang }) => {
               : null}
           </div>
           <div className="chart-data">
-            <ChartTable activeRow={activeRow} setActiveRow={setActiveRow} activeTab={activeTab} />
+            <ChartTable activeRow={activeRow} setActiveRow={setActiveRow} tabIndex={tabIndex} />
             <div className="line-chart-wrapper">
-              <LineChart activeRow={activeRow} />
+              <LineChart activeRow={activeRow} tabIndex={tabIndex} />
             </div>
           </div>
         </div>

src/components/LineChart.jsx

@@ -13,17 +13,16 @@ import { useState, useEffect } from 'react';
 
 ChartJS.register(LineElement, PointElement, LinearScale, Tooltip, CategoryScale);
 
-const LineChart = ({ activeRow }) => {
+const LineChart = ({ activeRow, tabIndex }) => {
   const [dataLineChart, setDataLineChart] = useState();
   useEffect(() => {
     // Table data fetch
     const LineChartData = new Api(
-      'http://tmex.gov.tm:8765/api/categories/8/tradings',
+      `http://tmex.gov.tm:8765/api/categories/${tabIndex}/tradings`,
       dataLineChart,
       setDataLineChart,
-    );
-    LineChartData.get();
-  }, []);
+    ).get();
+  }, [tabIndex]);
 
   let delayed;
 

src/pages/Home.jsx

@@ -20,7 +20,7 @@ const Home = ({ lang, setPostId }) => {
 
   useEffect(() => {
     // Video fetch
-    const VideoApi = new Api('http://tmex.gov.tm:8765/api/video', videoData, setVideoData).get();
+    // const VideoApi = new Api('http://tmex.gov.tm:8765/api/video', videoData, setVideoData).get();
 
     // News fetch
     const NewsApi = new Api('http://tmex.gov.tm:8765/api/news', newsData, setNewsData).get({
@@ -42,17 +42,14 @@ const Home = ({ lang, setPostId }) => {
         <div className="container">
           <div className="about-wrapper">
             <div className="about-left">
-              <SectionTitle title="услуги биржы" />
+              <SectionTitle title="О бирже" />
               <div className="about-text-wrapper">
                 <p className="about-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu nisl, rhoncus aenean
-                  dignissim velit vestibulum cras ultrices etiam. Iaculis vitae imperdiet eget
-                  fringilla a egestas purus. Iaculis vitae imperdiet eget fringilla a egestas purus.
-                </p>
-                <p className="about-text">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu nisl, rhoncus aenean
-                  dignissim velit vestibulum cras ultrices etiam. Iaculis vitae imperdiet eget
-                  fringilla a egestas purus. Iaculis vitae imperdiet eget fringilla a egestas purus.
+                  Государственная товарно-сырьевая биржа Туркменистана была создана Указом
+                  Президента Туркменистана от 29 июля 1994 года и является важнейшим экономическим
+                  институтом страны. Биржа выполняет функцию главного органа государственного
+                  регулирования экспортно-импортных операций. Отлаженный механизм функционирования
+                  позволяет ей успешно интегрироваться в международную экономическую систему.
                 </p>
               </div>
               <div className="about-link-wrapper">
@@ -77,7 +74,8 @@ const Home = ({ lang, setPostId }) => {
               </div>
             </div>
             <div className="about-right">
-              {videoData ? <VideoPlayer videoUrl={videoData.data.video} /> : null}
+              {/* {videoData ? <VideoPlayer videoUrl={videoData.data.video} /> : null} */}
+              <VideoPlayer videoUrl={'https://www.exchange.gov.tm/page/normative-base?lang=ru'} />
             </div>
           </div>
         </div>