footer fix

Reviewed-on: Transparency/kgroad-frontend2#5

README.md

@@ -1,3 +1,12 @@
+## TL;DR
+
+```
+git pull
+yarn install
+yarn build
+yarn start
+```
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started

messages/en.json

@@ -23,6 +23,7 @@
     "navigation": "Navigation",
     "contacts": "Contacts",
     "download_our_app": "Download our app",
+    "socials": "Stay Connected",
     "back": "Back",
     "save": "Save",
     "saving": "Saving",
@@ -73,15 +74,11 @@
     "read_more": "Read More"
   },
   "about_us": {
-    "name": "Transparency International-Kyrgyzstan",
+    "name": "About us KGROAD",
-    "description": "Branch of the international organization Transparency International in the Kyrgyz Republic.",
+    "description1": "Transparency International is a global independent organization that studies and fights against corruption both internationally and within individual countries, one of the goals of which is to achieve greater transparency and accountability of government.",
-    "mission": "Promoting effective public policy and good governance to prevent corruption and strengthen democracy in the country.",
+    "description2": "The team of Transparency International Kyrgyzstan has developed a platform for monitoring road construction and repair, containing an interactive map to provide access to information on roads and streets repaired in recent years, including cost of works, contractor details, warranty periods, links to procurement documents and other information on works, as well as generalized statistics on road works (e.g. road works performed by the same contractor). ",
-    "goals_and_priorities": {
+    "description3": "The platform will also provide users with the opportunity to promptly report defects on roads and the need to fix them, vote on the priority of road repairs and provide feedback in a convenient format that will allow citizens to independently analyze and monitor the use of execution of state road contracts. Information on road construction and repairs is collected from public data from the state procurement portal and the Ministry of Justice.",
-      "anti-corruption_education": "Anti-corruption education of the population, raising public awareness of the importance and significance of the fight against corruption in Kyrgyzstan;",
+    "description4":"In addition to the web platform, there are two mobile applications for iOS and Android platforms with functions similar to the website." 
-      "study_of_corruption_practices": "Organization of the study of the practice and theory of combating corruption and the participation of civil society structures in Kyrgyzstan and other countries;",
-      "supporting_citizens_and_organizations": "Assistance to citizens and organizations in the implementation of their constitutional rights and freedoms;",
-      "international_experience": "Preferential orientation to international experience in reducing corruption, mastering its technologies and resources, as well as involving civil society structures in the international dialogue on combating corruption."
-    }
   },
   "volunteers": {
     "activists": "Activists",

messages/kg.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Байланыш",
     "download_our_app": "Биздин колдонмону жүктөңүз",
+    "socials": "Социалдык тармактар",
     "back": "Артка",
     "save": "Сактоо",
     "saving": "Сакталат",
@@ -53,6 +54,13 @@
     "profile": "Профиль",
     "login": "Кирүү"
   },
+  "about_us": {
+    "name": "Биз жөнүндө",
+    "description1": "Transparency International  ̶  это глобальная независимая организация по изучению и борьбе с коррупцией как в международном масштабе, так и в масштабе отдельных стран, одна из целей которой добиться большей прозрачности и подотчетности власти.",
+    "description2": "Команда Трансперенси Интернешнл Кыргызстан разработала платформу для мониторинга строительства и ремонта дорог, содержащая интерактивную карту по обеспечению доступа к информации о дорогах и улицах, отремонтированных за последние годы, включая стоимость работ, данные организации-подрядчика, гарантийные сроки, ссылки на закупочную документацию и другую информация о работах, а также обобщенная статистика по дорожным работам (например, дорожные работы, выполненные одним и тем же подрядчиком). ",
+    "description3": "Платформа также предоставит пользователям возможность оперативно сообщать о дефектах на дорогах и необходимости их устранения, голосовать за приоритетность ремонта дорог и предоставлять обратную связь в удобном формате, которые позволят гражданам самостоятельно анализировать и контролировать использование исполнения государственных дорожных контрактов. Информация по дорожным строительствам и ремонтам собирается из открытых данных портала госзакупок и Минюста.",
+    "description4":"Помимо веб-платформы имеются два мобильных приложения для платформ iOS и Android с функциями, аналогичными веб-сайту." 
+  },
   "home": {
     "title": "Кыргызстандын жолдору",
     "subtitle": "Жолдорду коопсуз кылалы!",

messages/ru.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Контакты",
     "download_our_app": "Скачивай наше приложение",
+    "socials": "Социальные сети",
     "back": "Назад",
     "save": "Сохранить",
     "saving": "Сохранение",
@@ -73,15 +74,11 @@
     "read_more": "Читать"
   },
   "about_us": {
-    "name": "Transparency International-Кыргызстан",
+    "name": "О нас",
-    "description": "Филиал международной организации Transparency International в Кыргызской Республике.",
+    "description1": "Transparency International  ̶  это глобальная независимая организация по изучению и борьбе с коррупцией как в международном масштабе, так и в масштабе отдельных стран, одна из целей которой добиться большей прозрачности и подотчетности власти.",
-    "mission": "Продвижение эффективной общественной политики и надлежащего управления в целях предотвращения коррупции и усиления демократии в стране.",
+    "description2": "Команда Трансперенси Интернешнл Кыргызстан разработала платформу для мониторинга строительства и ремонта дорог, содержащая интерактивную карту по обеспечению доступа к информации о дорогах и улицах, отремонтированных за последние годы, включая стоимость работ, данные организации-подрядчика, гарантийные сроки, ссылки на закупочную документацию и другую информация о работах, а также обобщенная статистика по дорожным работам (например, дорожные работы, выполненные одним и тем же подрядчиком). ",
-    "goals_and_priorities": {
+    "description3": "Платформа также предоставит пользователям возможность оперативно сообщать о дефектах на дорогах и необходимости их устранения, голосовать за приоритетность ремонта дорог и предоставлять обратную связь в удобном формате, которые позволят гражданам самостоятельно анализировать и контролировать использование исполнения государственных дорожных контрактов. Информация по дорожным строительствам и ремонтам собирается из открытых данных портала госзакупок и Минюста.",
-      "anti-corruption_education": "Антикоррупционное просвещение населения, повышение общественного осознания значимости и важности борьбы с коррупцией в Кыргызстане;",
+    "description4":"Помимо веб-платформы имеются два мобильных приложения для платформ iOS и Android с функциями, аналогичными веб-сайту." 
-      "study_of_corruption_practices": "Организация изучения практики и теории борьбы с коррупцией и участия в ней структур гражданского общества в Кыргызстане и других странах;",
-      "supporting_citizens_and_organizations": "Содействие гражданам и организациям в реализации их конституционных прав и свобод;",
-      "international_experience": "Преимущественная ориентация на международный опыт уменьшения коррупции, освоение его технологий, ресурсов, а также включение структур гражданского общества в международный диалог борьбы с коррупцией."
-    }
   },
   "volunteers": {
     "activists": "Активисты",

package.json

@@ -12,6 +12,7 @@
     "@next/third-parties": "^14.1.0",
     "axios": "^1.6.5",
     "dotenv": "^16.4.1",
+    "html-react-parser": "^5.1.15",
     "leaflet": "^1.9.4",
     "next": "^14.1.0",
     "next-auth": "^4.24.5",

src/app/[locale]/App.scss

@@ -1,9 +1,9 @@
-.app {
+// .app {
-  padding-top: 78px;
+//   padding-top: 78px;
-}
+// }
 
-@media screen and (max-width: 768px) {
+// @media screen and (max-width: 768px) {
-  .app {
+//   .app {
-    padding-top: 72px;
+//     padding-top: 72px;
-  }
+//   }
-}
+// }

src/app/[locale]/about-us/page.tsx

@@ -4,7 +4,7 @@ import { Metadata } from "next";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import { apiInstance } from "@/shared/config/apiConfig";
 import { IMetatag } from "@/shared/types/metatag-type";
-
+import { useTranslations } from "next-intl";
 export async function generateMetadata(): Promise<Metadata> {
   const data = await apiInstance
     .get<IMetatag[]>("/metatags/")
@@ -50,51 +50,20 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const AboutUs = () => {
+  const t = useTranslations("about_us");
   return (
     <div className="about-us page-padding">
       <BreadCrumbs homeRequired />
-      <Typography element="h2">О нас</Typography>
+      <Typography element="h2">{t("name")}</Typography>
 
       <div className="about-us__descriptions">
         <h3>
-          Transparency International-Кыргызстан - филиал международной
+          {t("description1")}
-          организации Transparency International в Кыргызской
-          Республике.
         </h3>
-        <h3>Миссия ТИ-Кыргызстан</h3>
+        <h3>{t("description2")}
-        <p>
+          {t("description3")}</h3>
-          Продвижение эффективной общественной политики и надлежащего
+        <h3>{t("description4")}</h3>
-          управления в целях предотвращения коррупции и усиления
-          демократии в стране.{" "}
-        </p>
-        <h3>Цели и приоритеты ТИ-Кыргызстан:</h3>
-        <ul>
-          <li>
-            - антикоррупционное просвещение населения, повышение
-            общественного осознания значимости и важности борьбы с
-            коррупцией в Кыргызстане;
-          </li>
-          <li>
-            - организация изучения практики и теории борьбы с
-            коррупцией и участия в ней структур гражданского общества
-            в Кыргызстане и других странах;
-          </li>
-          <li>
-            - содействие гражданам и организациям в реализации их
-            конституционных прав и свобод;
-          </li>
-          <li>
-            - преимущественная ориентация на международный опыт
-            уменьшения коррупции, освоение его технологий, ресурсов, а
-            также включение структур гражданского общества в
-            международный диалог борьбы с коррупцией.
-          </li>
-        </ul>
       </div>
-      <p className="about-us__author">
-        Photo By Mzximvs VdB from Brussels, belgium - Road to
-        Issyk-Kul (south shore), CC BY-SA 2.0
-      </p>
     </div>
   );
 };

src/app/[locale]/news/[id]/page.tsx

@@ -8,15 +8,14 @@ import calendar from "./icons/calendar.svg";
 import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import { Metadata } from "next";
+import parse from "html-react-parser";
 
 export async function generateMetadata({
   params,
 }: {
   params: { id: string };
 }): Promise<Metadata> {
-  const response = await apiInstance.get<INews>(
+  const response = await apiInstance.get<INews>(`/news/${params.id}/`);
-    `/news/${params.id}/`
-  );
 
   return {
     title: response.data.title,
@@ -28,6 +27,17 @@ export async function generateMetadata({
     },
   };
 }
+function convertLinksToHtml(text: string) {
+  const urlPattern =
+    /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[-A-Z0-9+&@#\/%=~_|$])[\s.,;]?/gi;
+  return text.replace(urlPattern, (url) => {
+    const href = url.trim();
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${href}</a>`;
+  });
+}
+const formatDescription = (text: string) => {
+  return text.replace(/(\r\n|\n|\r)/g, "<br />");
+};
 
 const NewsDetails = async ({
   params,
@@ -35,9 +45,7 @@ const NewsDetails = async ({
   params: { id: string; новость: string };
 }) => {
   const getNewsById = async () => {
-    const response = await apiInstance.get<INews>(
+    const response = await apiInstance.get<INews>(`/news/${params.id}/`);
-      `/news/${params.id}/`
-    );
 
     return response.data;
   };
@@ -58,7 +66,8 @@ const NewsDetails = async ({
     "11": "Ноябрь",
     "12": "Декабрь",
   };
-
+  const htmlContentWithLinks = convertLinksToHtml(data.description);
+  const formattedHtmlContent = formatDescription(htmlContentWithLinks);
   return (
     <div className="news-details page-padding">
       <BreadCrumbs />
@@ -71,9 +80,9 @@ const NewsDetails = async ({
             <Image src={calendar} alt="Calendar Icon" />
             <p>
               {months[data.created_at.slice(5, 7)]}{" "}
-              {data.created_at.slice(5, 7).slice(0, 1) === "0"
+              {data.created_at.slice(8, 10) === "0"
-                ? data.created_at.slice(6, 7)
+                ? data.created_at.slice(9, 10)
-                : data.created_at.slice(5, 7)}
+                : data.created_at.slice(8, 10)}
               , {data.created_at.slice(0, 4)}
             </p>
           </div>
@@ -87,7 +96,9 @@ const NewsDetails = async ({
 
       <div className="news-details__text">
         <h3>{data.title}</h3>
-        <p>{data.description}</p>
+        <div className="news-details__description">
+          {parse(formattedHtmlContent)}
+        </div>
       </div>
 
       <ReviewSection endpoint="news" id={data.id} />

src/entities/NewsCard/NewsCard.tsx

@@ -29,10 +29,7 @@ const NewsCard: React.FC<INewsCard> = ({
     return title;
   };
   const sliceDate = (date: string) => {
-    return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(
+    return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(0, 4)}`;
-      0,
-      4
-    )}`;
   };
 
   const sliceDescription = (description: string) => {

src/features/SearchForm/SearchForm.scss

@@ -25,6 +25,7 @@
 
     img {
       width: 50px;
+      height: auto;
     }
 
     input {

src/shared/variables/links_footer.ts

@@ -5,13 +5,26 @@ export const LINKS = () => {
 
   const LINKS = [
     { id: 1, pagename: t("home"), pathname: "/" },
-    { id: 2, pagename: t("about_us"), pathname: "/about-us" },
+    // { id: 2, pagename: t("about_us"), pathname: "/about-us" },
-    { id: 3, pagename: t("privacy"), pathname: "/privacy" },
+    // { id: 3, pagename: t("privacy"), pathname: "/privacy" },
-    { id: 3, pagename: t("support"), pathname: "/support" },
+    // { id: 4, pagename: t("support"), pathname: "/support" },
-    { id: 4, pagename: t("statistics"), pathname: "/statistics" },
+    { id: 5, pagename: t("statistics"), pathname: "/statistics" },
-    { id: 5, pagename: t("news"), pathname: "/news" },
+    { id: 6, pagename: t("news"), pathname: "/news" },
-    { id: 6, pagename: t("volunteers"), pathname: "/volunteers" },
+    { id: 7, pagename: t("volunteers"), pathname: "/volunteers" },
   ];
 
   return LINKS;
 };
+
+export const LINKS2 = () => {
+  const t = useTranslations("navigation");
+
+  const LINKS = [
+    
+    { id: 2, pagename: t("about_us"), pathname: "/about-us" },
+    { id: 3, pagename: t("privacy"), pathname: "/privacy" },
+    { id: 4, pagename: t("support"), pathname: "/support" },
+  ];
+
+  return LINKS;
+};

src/widgets/Footer/Footer.scss

@@ -1,7 +1,7 @@
 .footer {
   padding: 48px 80px;
-  display: grid;
+  // display: flex;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  // grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 30px;
   background-color: rgb(15, 23, 42);
 
@@ -16,7 +16,19 @@
       font-size: 16px;
     }
   }
-
+  &__copyright {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+  }
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  // gap: 30px;
+}
+.bottom-div {
+  margin-top: 10px;
+}
   a,
   li,
   h4 {

src/widgets/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import "./Footer.scss";
 import logo from "../../shared/assets/logo.svg";
 import Image from "next/image";
-import { LINKS } from "@/shared/variables/links_footer";
+import { LINKS, LINKS2 } from "@/shared/variables/links_footer";
 import youtube from "./icons/youtube.svg";
 import facebook from "./icons/facebook.svg";
 import instagram from "./icons/instagram.svg";
@@ -9,7 +9,8 @@ import app_store_btn from "./icons/app-store-btn.svg";
 import play_market_btn from "./icons/play-market-btn.svg";
 import { Link } from "@/shared/config/navigation";
 import { useTranslations } from "next-intl";
-import NetKgTracker from "@/widgets/NetKgTracker/NetKgTracker";
+//import NetKgTracker from "@/widgets/NetKgTracker/NetKgTracker";
+//import GoogleAnalyticsWidget from "@/widgets/GoogleAnalyticsWidget/GoogleAnalyticsWidget";
 
 const Footer = () => {
   const t = useTranslations("general");
@@ -17,25 +18,35 @@ const Footer = () => {
   const tRights = useTranslations("rights");
   return (
     <footer className="footer">
+      <div className="top-row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div> 
+        <div></div>
+        <div></div>
       <div className="footer__logo">
         {/* <Link href="/">
           <Image src={logo} alt="Logo" />
         </Link> */}
-        <p>© {tRights("text")}</p>
+        {/* <p>© {tRights("text")}</p>
-        <p>{tDisclaimer("text")}</p>
+        <p>{tDisclaimer("text")}</p> */}
       </div>
       <div className="footer__links">
         <h4>{t("navigation")}</h4>
         <ul>
           {LINKS().map((link) => (
             <li key={link.id}>
-              <Link href={link.pathname} key={link.id}>
+              <Link href={link.pathname}>{link.pagename}</Link>
-                {link.pagename}
-              </Link>
             </li>
           ))}
         </ul>
-        <NetKgTracker />
+        {/* Only for production
+        <NetKgTracker />*/}
+        <div className="footer__logo">
+          {/* <GoogleAnalyticsWidget /> */} {/* hide total amount*/}
+        </div>
+        *
       </div>
 
       <div className="footer__contacts">
@@ -43,29 +54,59 @@ const Footer = () => {
         <ul>
           <li>admin@kgroad.org</li>
           <li>+9960312394038</li>
-
+          {LINKS2().map((link) => (
-          <li>
+            <li key={link.id}>
-            {[youtube, facebook, instagram].map((net, i) => (
+              <Link href={link.pathname}>{link.pagename}</Link>
-              <Link key={i} href="#">
+            </li>
-                <Image src={net} alt="Net Icon" key={net} />
+          ))}
-              </Link>
-            ))}
-          </li>
-          <li>Photo By ThomasG, CC BY-SA 3.0</li>
         </ul>
       </div>
 
       <div className="footer__apps">
+        <h4>{t("socials")}</h4>
+          <li>
+            {[
+              { src: youtube, url: "https://www.youtube.com/@TransparencyKyrgyzstan" },
+              { src: facebook, url: "https://www.facebook.com/tikyrgyzstan" },
+              { src: instagram, url: "https://www.instagram.com/transparencyinternational_kg?igsh=cTc2MHEwOW5vNDh2" }
+            ].map((net, i) => (
+              <Link key={i} href={net.url} target="_blank" rel="noopener noreferrer">
+                <Image src={net.src} alt="Net Icon" />
+              </Link>
+            ))}
+          </li>
         <h4>{t("download_our_app")}</h4>
+        
         <div className="footer__apps-btns">
-          {[app_store_btn, play_market_btn].map((app, i) => (
+          {[
-            <Link key={i} href="#">
+            { src: app_store_btn, url: "https://apps.apple.com/us/app/kg-road/id6484317991" },
-              <Image src={app} alt="App Button" key={app} />
+            { src: play_market_btn, url: "https://play.google.com/store/apps/details?id=kg.transparency.kgroad" }
+          ].map((app, i) => (
+            <Link key={i} href={app.url} target="_blank" rel="noopener noreferrer">
+              <Image src={app.src} alt="App Button" />
             </Link>
           ))}
         </div>
+        </div>
       </div>
+      
+      <div className="bottom-div">
+        <div className="footer__copyright">
+          <hr style={{ margin: "0", color: "white" }} />
+          <p className="text" style={{ margin: "0", color: "white" }}>
+            {"© Copyright " +
+              new Date().getFullYear() +
+              " - " +
+              tRights("text")}
+            <br />
+            <br />
+            {tDisclaimer("text")}
+          </p>
+        </div>
+      </div>
+
     </footer>
+    
   );
 };
 

src/widgets/GoogleAnalyticsWidget/GoogleAnalyticsWidget.tsx

@@ -0,0 +1,44 @@
+'use client'
+import React, { useEffect, useState, useCallback } from 'react';
+import { apiInstance } from "@/shared/config/apiConfig";
+import { AxiosError } from "axios";
+
+const GoogleAnalyticsWidget = () => {
+
+  const [visitors, setVisitors] = useState<string>("");
+
+   /* const getAnalytics = async () => {
+        try {
+          const response = await apiInstance.get("/report/google_analytics/");
+          return response.data;
+        } catch (error: unknown) {
+          if (error instanceof AxiosError) console.log(error.message);
+        }
+      };*/
+    
+    //const data = await getAnalytics();
+
+    const fetchMyAPI = useCallback(async () => {
+      const getAnalytics = async () => {
+        try {
+          const response = await apiInstance.get("/report/google_analytics/");
+          return response.data;
+        } catch (error: unknown) {
+          if (error instanceof AxiosError) console.log(error.message);
+        }
+      };
+      const data = await getAnalytics();
+      setVisitors(data.visitors);
+    }, [visitors])
+
+    useEffect(() => {
+      fetchMyAPI();
+    }, []);
+
+  return (
+    <div><p>Total cummulative visitors: {visitors}</p></div>
+)
+
+};
+
+export default GoogleAnalyticsWidget;

src/widgets/Navbar/NavLanguage/NavLanguage.scss

@@ -10,6 +10,7 @@
     min-width: 130px;
     position: absolute;
     top: 120%;
+    z-index: 9;
   }
 
   &__option,

src/widgets/Navbar/Navbar.scss

@@ -2,17 +2,12 @@
 
 .navbar {
   padding: 15px 90px;
-  // padding: 15px;
   width: 100%;
-  // height: 78px;
-  position: fixed;
-  z-index: 10005;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #fff;
   box-shadow: 0 4px 6px #0000001a;
-  margin-bottom: 40px;
 
   &__logo {
     display: flex;