Add TrafficJamsCounter and A11yTransportCounters

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',
         });
-    },
+    }
 };

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;

client/components/MainPage/MainPage.tsx

@@ -12,22 +12,17 @@ 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)}>
                 <div className={cn(styles.MainPageLogo)}>
                     <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

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[];
 };

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,
     };
 }