From 1283f1600bc529ecba64e1dc76ae40461eb8adf0 Mon Sep 17 00:00:00 2001
From: Alexander Chabin <nibach@ya.ru>
Date: Sun, 25 Jun 2023 19:14:32 +0500
Subject: [PATCH] Add `TrafficJamsCounter` and `A11yTransportCounters`

---
 client/api/main-page/main-page.ts             | 38 ++++++++++++++-----
 client/api/main-page/main-page.types.ts       |  6 +++
 client/components/MainPage/MainPage.tsx       | 13 ++-----
 client/components/MainPage/MainPage.types.tsx |  9 ++++-
 client/pages/index.tsx                        |  9 +++--
 5 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/client/api/main-page/main-page.ts b/client/api/main-page/main-page.ts
index e0117ad1..8fe2913e 100644
--- a/client/api/main-page/main-page.ts
+++ b/client/api/main-page/main-page.ts
@@ -1,22 +1,42 @@
+import { Unit } from 'transport-common/types/masstrans';
 import { fetchApi } from 'api/utils/fetch';
 
 export const MainPageApi = {
-    getCards: () => {
-        return fetchApi(
+    getCards: async () => {
+        return await fetchApi(
             'https://transport-cms.ekaterinburg.io/api/cards/?populate=backgroundImage',
             { dataField: 'data' },
         );
     },
 
-    getMarqueeItems: () => {
-        return fetchApi('https://transport-cms.ekaterinburg.io/api/marquees', {
-            dataField: 'data',
-        });
+    getTrafficJamsCounter: async () => {
+        return await fetchApi(
+            'https://ekb-probki.vercel.app/api',
+            { dataField: 'score' },
+        );
     },
 
-    getNotifications: () => {
-        return fetchApi('https://transport-cms.ekaterinburg.io/api/notifications', {
+    getA11yTransportCounters: async () => {
+        const countA11yUnits = async (type) => {
+            const units = <Unit[]>await fetchApi(
+                `https://transport.ekaterinburg.city/api/masstrans/${type}`,
+                { dataField: 'data' }
+            );
+            return units
+                .filter(({ accessibility }) => accessibility)
+                .length;
+        }
+
+        return {
+            buses: await countA11yUnits('bus'),
+            trolls: await countA11yUnits('troll'),
+            trams: await countA11yUnits('tram')
+        }
+    },
+
+    getMarqueeItems: async () => {
+        return await fetchApi('https://transport-cms.ekaterinburg.io/api/marquees', {
             dataField: 'data',
         });
-    },
+    }
 };
diff --git a/client/api/main-page/main-page.types.ts b/client/api/main-page/main-page.types.ts
index a81f695c..01944247 100644
--- a/client/api/main-page/main-page.types.ts
+++ b/client/api/main-page/main-page.types.ts
@@ -44,6 +44,12 @@ export interface Card {
     };
 }
 
+export interface AccessibilityTransportCounters {
+    buses: number,
+    trolls: number,
+    trams: number
+}
+
 interface Thumbnail {
     ext: string;
     url: string;
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
index a0aa7aa0..de0c346e 100644
--- a/client/components/MainPage/MainPage.tsx
+++ b/client/components/MainPage/MainPage.tsx
@@ -12,7 +12,10 @@ import { Marquee } from './Marquee/Marquee';
 
 const cn = classNames.bind(styles);
 
-export function MainPage({ cards, marqueeItems, notifications }: MainPageTypes) {
+export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeItems }: MainPageTypes) {
+    // TODO Output data to dynamic cards
+    console.log({ trafficJams, a11yTransportCounters });
+
     return (
         <div className={cn(styles.MainPage)}>
             <div className={cn(styles.MainPageInner)}>
@@ -20,14 +23,6 @@ export function MainPage({ cards, marqueeItems, notifications }: MainPageTypes)
                     <Logo />
                     <h1 className={cn(styles.MainPageTitle)}>Транспорт Екатеринбурга</h1>
                 </div>
-                {/* {notifications.map(({ id, attributes }) => (
-                    <Notification
-                        text={attributes.text}
-                        title={attributes.title}
-                        image={attributes.image}
-                        key={id}
-                    />
-                ))} */}
 
                 <div className={styles.MainPageCardGrid}>
                     {cards
diff --git a/client/components/MainPage/MainPage.types.tsx b/client/components/MainPage/MainPage.types.tsx
index 9b24771c..51644b16 100644
--- a/client/components/MainPage/MainPage.types.tsx
+++ b/client/components/MainPage/MainPage.types.tsx
@@ -1,7 +1,14 @@
-import type { Card, Marquee, Notification } from 'api/main-page/main-page.types';
+import type {
+    Card,
+    AccessibilityTransportCounters,
+    Marquee,
+    Notification
+} from 'api/main-page/main-page.types';
 
 export type MainPageTypes = {
     cards: Card[];
+    trafficJams: number;
+    a11yTransportCounters: AccessibilityTransportCounters,
     notifications: Notification[];
     marqueeItems: Marquee[];
 };
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 5e8cc99d..99978ff8 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -18,10 +18,11 @@ export default function Home(props) {
 export async function getStaticProps() {
     return {
         props: {
-            cards: (await MainPageApi.getCards()) || [],
-            marqueeItems: (await MainPageApi.getMarqueeItems()) || [],
-            notifications: (await MainPageApi.getNotifications()) || [],
+            cards: await MainPageApi.getCards() || [],
+            trafficJams: await MainPageApi.getTrafficJamsCounter() || null,
+            a11yTransportCounters: await MainPageApi.getA11yTransportCounters() || {},
+            marqueeItems: await MainPageApi.getMarqueeItems() || [],
         },
-        revalidate: 15,
+        revalidate: 60,
     };
 }