updated footer section

shampsdev · Oct 15, 2024 · 54543eb · 54543eb
1 parent 523aa84
commit 54543eb
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 34 deletions.
diff --git a/app/components/news-ticker.tsx b/app/components/news-ticker.tsx
@@ -1,5 +1,5 @@
-import { News } from "@/types/news.interface";
-import Marquee from "react-fast-marquee";
+import { News } from '@/types/news.interface';
+import Marquee from 'react-fast-marquee';
 
 interface NewsTickerProps {
   newsTop: News[];
@@ -15,14 +15,20 @@ export const NewsTicker = ({ newsTop, newsBottom }: NewsTickerProps) => {
         className='flex justify-around py-4 gap-2'
       >
         {newsTop.map((x, index) => (
-          <div key={`${index}_${x.title}}`} className='pr-10 flex items-center gap-5'>
+          <div
+            key={`${index}_${x.title}}`}
+            className='pr-10 flex items-center gap-5'
+          >
             {x.icon} <span className='text-xl'>{x.title}</span>
           </div>
         ))}
       </Marquee>
       <Marquee autoFill className='flex justify-around py-4 gap-2'>
         {newsBottom.map((x, index) => (
-          <div key={`${index}_${x.title}}`} className='pr-10 flex items-center gap-5'>
+          <div
+            key={`${index}_${x.title}}`}
+            className='pr-10 flex items-center gap-5'
+          >
             {x.icon} <span className='text-xl'>{x.title}</span>
           </div>
         ))}

diff --git a/app/instances/ghql.instance.ts b/app/instances/ghql.instance.ts
@@ -3,9 +3,12 @@ import { WebSocketLink } from '@apollo/client/link/ws';
 import { SubscriptionClient } from 'subscriptions-transport-ws';
 
 const wsLink = new WebSocketLink(
-  new SubscriptionClient(`wss://api.shamps.dev/graphql`, {
-    reconnect: true,
-  })
+  new SubscriptionClient(
+    process.env.BACKEND_URL ?? 'wss://api.shamps.dev/graphql',
+    {
+      reconnect: true,
+    }
+  )
 );
 
 export const client = new ApolloClient({

diff --git a/app/modules/footer.section.tsx b/app/modules/footer.section.tsx
@@ -6,26 +6,13 @@ import { NewsTicker } from '@/components/news-ticker';
 import { News } from '@/types/news.interface';
 import { useEffect, useState } from 'react';
 
-const telegram_stats: News[] = [
-  {
-    icon: <Icons.dino />,
-    title: '128 подписчиков в телеграм канале',
-  },
-  {
-    icon: <Icons.time />,
-    title: 'Вика присоеденилась в телегам канал',
-  },
-  {
-    icon: <Icons.coffee />,
-    title:
-      'Макар прокоментировал "жесть история кайфовая… такие вы милашики, я не могу."',
-  },
-];
-
 const iconMapping: Record<string, JSX.Element> = {
   coffee_cups: <Icons.coffee />,
   sleepless_nights: <Icons.time />,
-  commits: <Icons.dino />,
+  github_commit_count: <Icons.dino />,
+  telegram_channel_count: <Icons.coffee />,
+  telegram_channel_commented: <Icons.time />,
+  telegram_channel_joined: <Icons.dino />,
 };
 
 export const FooterSection = () => {
@@ -35,26 +22,64 @@ export const FooterSection = () => {
   useEffect(() => {
     const fetchInitialStats = async () => {
       const response = await getStats();
-      const statsWithIcons = response?.data.stats.map((stat) => ({
-        icon: iconMapping[stat.stat_id] || <>?</>,
-        title: `${stat.count} ${stat.name}`,
-      }));
-      if (statsWithIcons) setInitialStats(statsWithIcons);
+
+      if (!response || !response.data || !response.data.stats) return;
+
+      const stats = response.data.stats;
+
+      const statsWithIcons = Object.keys(iconMapping).reduce<News[]>(
+        (acc, key) => {
+          const matchingStat = stats.find(
+            (stat: { stat_id: string }) => stat.stat_id === key
+          );
+
+          if (matchingStat) {
+            acc.push({
+              icon: iconMapping[key],
+              title: `${matchingStat.count !== 0 ? matchingStat.count : ''} ${
+                matchingStat.name
+              }`,
+            });
+          }
+
+          return acc;
+        },
+        []
+      );
+
+      console.log(statsWithIcons);
+
+      if (statsWithIcons.length > 0) setInitialStats(statsWithIcons);
     };
 
     fetchInitialStats();
   }, []);
 
   const statsWithIcons: News[] = data?.statCreated
-    ? data.statCreated.map((stat) => ({
-        icon: iconMapping[stat.stat_id] || <>?</>,
-        title: `${stat.count} ${stat.name}`,
-      }))
+    ? Object.keys(iconMapping).reduce<News[]>((acc, key) => {
+        const matchingStat = data.statCreated.find(
+          (stat: { stat_id: string }) => stat.stat_id === key
+        );
+
+        if (matchingStat) {
+          acc.push({
+            icon: iconMapping[key],
+            title: `${matchingStat.count !== 0 ? matchingStat.count : ''} ${
+              matchingStat.name
+            }`,
+          });
+        }
+
+        return acc;
+      }, [])
     : initialStats;
 
   return (
     <div className='pt-24'>
-      <NewsTicker newsTop={statsWithIcons} newsBottom={telegram_stats} />
+      <NewsTicker
+        newsTop={statsWithIcons.slice(0, 3)}
+        newsBottom={statsWithIcons.slice(3, 6)}
+      />
       <Footer />
     </div>
   );