refactor: improve news and email handling, style, folder structure (#16)

components/tiles/Tiles.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { NewsTileType } from '@utils/validationSchemas';
+import { usePathname } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import Tile from './components/Tile';
+
+interface TilesProps {
+  children: React.ReactNode;
+}
+
+export default function Tiles({ children }: TilesProps) {
+  const pathname = usePathname();
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0
+  });
+  const [news, setNews] = useState<NewsTileType[]>();
+
+  useEffect(() => {
+    async function getNews() {
+      const news: NewsTileType[] = await fetch('/api/news').then(res =>
+        res.json()
+      );
+
+      setNews(news);
+    }
+
+    if (!news) {
+      getNews();
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [news]);
+
+  const renderTile = useCallback(
+    (key: number) => {
+      if (!news) return <div key={key}></div>;
+
+      const randomA = Math.floor(Math.random() * news?.length);
+      const randomB = Math.floor(
+        Math.random() * news?.filter((_, index) => index !== randomA)?.length
+      );
+
+      return (
+        <div key={key} className={`m-1 h-40 w-40`}>
+          <Tile newsA={news[randomA]} newsB={news[randomB]} />
+        </div>
+      );
+    },
+    [news]
+  );
+
+  const renderRow = useCallback(
+    (columns: number, key: number) => {
+      return (
+        <div key={key} className='flex justify-between'>
+          {Array.from({ length: columns }).map((_, index) => renderTile(index))}
+        </div>
+      );
+    },
+    [renderTile]
+  );
+
+  const renderGrid = useCallback(() => {
+    const columns = Math.ceil(windowSize.width / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 4));
+
+    return (
+      <div>
+        <div className='-ml-12 -mt-10 flex flex-col justify-between'>
+          {Array.from({ length: rows }).map((_, index) =>
+            renderRow(columns, index)
+          )}
+        </div>
+        <div className='absolute inset-0 flex items-center justify-center'>
+          {children}
+        </div>
+      </div>
+    );
+  }, [children, renderRow, windowSize]);
+
+  if (pathname === '/maintenance') return <div>{children}</div>;
+
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
+}

components/tiles/components/Tile.tsx

@@ -0,0 +1,68 @@
+import { getRandomGrey } from '@utils/getRandomGrey';
+import { NewsTileType } from '@utils/validationSchemas';
+import { useEffect, useState } from 'react';
+import TileContent from './TileContent';
+
+interface CardProps {
+  newsA?: NewsTileType;
+  newsB?: NewsTileType;
+}
+
+const TEN_SECONDS = 10000;
+const HALF_SECOND = 500;
+
+export default function Tile({ newsA, newsB }: CardProps) {
+  const [switched, setSwitched] = useState(false);
+  const [active, setActive] = useState(false);
+  const [delayed, setDelayed] = useState(true);
+  const [colorA, setColorA] = useState(getRandomGrey());
+  const [colorB, setColorB] = useState(getRandomGrey());
+
+  useEffect(() => {
+    const randomDelay = Math.floor(Math.random() * TEN_SECONDS);
+
+    const interval = setInterval(
+      () => {
+        setSwitched(true);
+
+        window.setTimeout(function () {
+          setActive(!active);
+          setColorA(getRandomGrey());
+          setColorB(getRandomGrey());
+        }, HALF_SECOND / 2);
+
+        window.setTimeout(function () {
+          setSwitched(false);
+          setDelayed(false);
+        }, HALF_SECOND);
+      },
+      delayed ? randomDelay : randomDelay + TEN_SECONDS
+    );
+
+    return () => clearInterval(interval);
+  }, [active, delayed]);
+
+  if (!newsA || !newsB) return <div></div>;
+
+  return (
+    <div className={`transform ${switched ? 'animate-rotate' : ''}`}>
+      <div className='transform-gpu'>
+        <div className={`absolute left-0 top-0 w-full ${''}`}>
+          {active
+            ? TileContent({
+                story: newsA,
+                side: true,
+                firstColor: colorA,
+                secondColor: colorB
+              })
+            : TileContent({
+                story: newsB,
+                side: false,
+                firstColor: colorB,
+                secondColor: colorA
+              })}
+        </div>
+      </div>
+    </div>
+  );
+}

components/tiles/components/TileContent.tsx

@@ -0,0 +1,41 @@
+import { NewsTileType } from '@utils/validationSchemas';
+
+interface CardContentProps {
+  story: NewsTileType;
+  side: boolean;
+  firstColor: string;
+  secondColor: string;
+}
+
+export default function TileContent({
+  story,
+  side,
+  firstColor,
+  secondColor
+}: CardContentProps) {
+  const color = side ? firstColor : secondColor;
+
+  return (
+    <div
+      className={`h-40 w-40 overflow-hidden rounded-lg p-6 shadow-sm`}
+      style={{
+        backgroundColor: `${color}`,
+        color: '#808080'
+      }}
+    >
+      <h4 className='overflow-auto'>{story.title}</h4>
+      <p className='overflow-auto italic'>by {story.by}</p>
+      <div
+        className='rounded-lg'
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '33.33%',
+          background: `linear-gradient(to bottom, transparent, ${color})`
+        }}
+      ></div>
+    </div>
+  );
+}