documents on nomative added

src/assets/styles/_subPageStyles.scss

@@ -99,6 +99,12 @@
   padding-left: 2.4rem;
 }
 
+.sub-page-file-title {
+  font-weight: 500;
+  color: $base-blue;
+  font-size: 1.8rem;
+}
+
 .sub-page-list-item-list-item {
   font-size: 1.8rem;
   color: $base-black;

src/components/DocumentSection.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import DocumentLink from '../components/DocumentLink';
+import { Api } from '../helpers/api';
+
+const DocumentSection = ({ lang, id, title }) => {
+  const [docsFileData, setDocsFileData] = useState();
+
+  useEffect(() => {
+    // Documents fetch
+    const DocumentsFileApi = new Api(
+      `http://tmex.gov.tm:8765/api/documents?category=${id}`,
+      docsFileData,
+      setDocsFileData,
+    ).get({ 'X-Localization': lang });
+
+    // Scroll to top
+    window.scrollTo(0, 0);
+  }, [lang]);
+
+  return (
+    <div className="documents-wrapper">
+      <h2 className="sub-page-file-title">{title}</h2>
+      <div className="documents-links-wrapper">
+        {
+          docsFileData
+            ? docsFileData.data.map((doc) => {
+                return doc.page === 'Нормативная база' && doc.title != '-' ? (
+                  <DocumentLink key={uuidv4()} title={doc.title} link={doc.file} />
+                ) : null;
+              })
+            : '' //loader
+        }
+      </div>
+    </div>
+  );
+};
+
+export default DocumentSection;

src/pages/Normative.jsx

@@ -1,20 +1,22 @@
 // Modules
 import { useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
 // Functions
 import { Api } from '../helpers/api';
 // Components
 import SectionTitle from '../components/SectionTitle';
-import DocumentLink from '../components/DocumentLink';
+import DocumentSection from '../components/DocumentSection';
 
 export const Normative = ({ lang }) => {
-  const [docsData, setDocsData] = useState();
+  const [docsCategoryData, setDocsCategoryData] = useState();
 
   useEffect(() => {
     // Documents fetch
-    const DocumentsApi = new Api(
-      'http://tmex.gov.tm:8765/api/documents',
-      docsData,
-      setDocsData,
+    const DocumentsCategotyApi = new Api(
+      'http://tmex.gov.tm:8765/api/document/categories',
+      docsCategoryData,
+      setDocsCategoryData,
     ).get({ 'X-Localization': lang });
 
     // Scroll to top
@@ -248,19 +250,18 @@ export const Normative = ({ lang }) => {
                 ? 'Documents for download'
                 : null}
             </h2>
-            <div className="documents-wrapper">
-              <div className="documents-links-wrapper">
-                {
-                  docsData
-                    ? docsData.data.map((doc) => {
-                        return doc.page === 'Нормативная база' && doc.title != '-' ? (
-                          <DocumentLink key={doc.id} title={doc.title} link={doc.file} />
-                        ) : null;
-                      })
-                    : '' //loader
-                }
-              </div>
-            </div>
+            {docsCategoryData
+              ? docsCategoryData.data.map((category) => {
+                  return (
+                    <DocumentSection
+                      key={uuidv4()}
+                      id={category.id}
+                      lang={lang}
+                      title={category.title}
+                    />
+                  );
+                })
+              : null}
           </div>
         </div>
       </div>