From a087610f857105a5da1e15d86a86323296f88cd1 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Mon, 17 Jan 2022 22:04:47 +0300
Subject: [PATCH] Web: Files: create new banner

---
 .../components/Article/Body/Banner/Banner.js  | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 products/ASC.Files/Client/src/components/Article/Body/Banner/Banner.js

diff --git a/products/ASC.Files/Client/src/components/Article/Body/Banner/Banner.js b/products/ASC.Files/Client/src/components/Article/Body/Banner/Banner.js
new file mode 100644
index 0000000000..987b869cac
--- /dev/null
+++ b/products/ASC.Files/Client/src/components/Article/Body/Banner/Banner.js
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from "react";
+import CampaignsBanner from "@appserver/components/campaigns-banner";
+import { DBConfig } from "./DBConfig";
+import { ADS_TIMEOUT } from "../../../../helpers/constants";
+import { LANGUAGE } from "@appserver/common/constants";
+import { getLanguage } from "@appserver/common/utils";
+import { initDB, useIndexedDB } from "react-indexed-db";
+
+initDB(DBConfig);
+
+const Banner = () => {
+  const { add, getByIndex, getAll } = useIndexedDB("ads");
+  const [campaign, setCampaign] = useState();
+
+  const campaigns = (localStorage.getItem("campaigns") || "")
+    .split(",")
+    .filter((campaign) => campaign.length > 0);
+
+  const lng = localStorage.getItem(LANGUAGE) || "en";
+  const language = getLanguage(lng instanceof Array ? lng[0] : lng);
+
+  const fetchBanners = async () => {
+    if (!campaigns) return;
+    const campaignsDB = await getAll();
+
+    campaigns.map(async (campaign) => {
+      if (campaignsDB.some((el) => el.campaign === campaign)) return;
+
+      const t = await getTranslation(campaign, language);
+      const i = await getImage(campaign);
+
+      add({ campaign: campaign, image: i, translate: t }).then(
+        (event) => {
+          console.log("ID Generated: ", event);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    });
+  };
+
+  const getTranslation = async (campaign, lng) => {
+    const translationUrl = await window.firebaseHelper.getCampaignsTranslations(
+      campaign,
+      lng
+    );
+
+    console.log(translationUrl);
+
+    let obj = await (await fetch(translationUrl)).json();
+    console.log(obj);
+
+    return obj;
+  };
+
+  const getImage = async (campaign) => {
+    const imageUrl = await window.firebaseHelper.getCampaignsImages(
+      campaign.toLowerCase()
+    );
+
+    console.log(imageUrl);
+    return imageUrl;
+  };
+
+  const getBanner = () => {
+    console.log("getBanner");
+    let index = Number(localStorage.getItem("bannerIndex") || 0);
+    const currentCampaign = campaigns[index];
+    if (campaigns.length < 1 || index + 1 >= campaigns.length) {
+      index = 0;
+    } else {
+      index++;
+    }
+
+    getByIndex("campaign", currentCampaign).then((campaignFromDB) => {
+      setCampaign(campaignFromDB);
+    });
+
+    localStorage.setItem("bannerIndex", index);
+  };
+
+  useEffect(() => {
+    fetchBanners();
+    getBanner();
+    setInterval(getBanner, 5000);
+  }, []);
+
+  return (
+    <>
+      {campaign && (
+        <CampaignsBanner
+          headerLabel={campaign.translate.Header}
+          subHeaderLabel={campaign.translate.SubHeader}
+          img={campaign.image}
+          btnLabel={campaign.translate.ButtonLabel}
+          link={campaign.translate.Link}
+        />
+      )}
+    </>
+  );
+};
+
+export default Banner;