use SSR for rendering graph + transition demo to PhaseConnect

- I like Phase Connect

5 files changed, 37 insertions, 66 deletions

diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx
index a82fa26..9fbc5fe 100644
--- a/src/components/DataChart/DataChart.tsx
+++ b/src/components/DataChart/DataChart.tsx
@@ -1,5 +1,4 @@
-"use client";
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -24,55 +23,13 @@ ChartJS.register(
 );
 
 
-
-
-
-interface Dataset {
-  label: string;
-  data: number[];
-  borderColor: string;
-  backgroundColor: string;
-}
-
-interface DataChartResponseProps {
-  labels: string[];
-  datasets: Dataset[];
-}
-
 interface DataChartProps {
-  channel_name: string;
-  requestUrl?: string;
+  channel_name?: string;
+  chartData?: any;
   graphTitle?: string;
 }
 
-const DataChart: React.FC<DataChartProps> = ({ channel_name, requestUrl, graphTitle }) => {
-  const [data, setData] = useState<DataChartResponseProps | null>();
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch(requestUrl || `${apiUrl}/api/subscribers/${channel_name}`);
-        const json = await response.json();
-        setData({
-          labels: json.labels,
-          datasets: [
-            {
-              label: 'Subscriber Count',
-              data: json.datasets,
-              borderColor: 'rgb(255, 99, 132)',
-              backgroundColor: 'rgba(255, 99, 132, 0.5)',
-            },
-          ],
-        });
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    fetchData();
-  }, [apiUrl, channel_name, requestUrl]);
-
+const DataChart: React.FC<DataChartProps> = ({ channel_name, chartData, graphTitle }) => {
   const options = {
     responsive: true,
     plugins: {
@@ -97,10 +54,19 @@ const DataChart: React.FC<DataChartProps> = ({ channel_name, requestUrl, graphTi
     }
   };
 
-  if (!data) {
-    return <div>Loading...</div>;
+  const data = {
+    labels: chartData.labels,
+    datasets: [
+      {
+        label: 'Subscriber Count',
+        data: chartData.datasets,
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgba(255, 99, 132, 0.5)',
+      },
+    ],
   }
 
+
   return <Line options={options} data={data} />;
 };
 
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 6585e52..7fb8303 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -4,16 +4,16 @@ import React from 'react';
 const Footer = () => {
   return (
     <footer>
-      <div className="text-center">
-        <p className="text-bold">
+      <div className="text-center mt-4">
+        <p className="font-bold">
             Information
         </p>
         <p className="text-m">
-            Information is collected once per hour. Data collection will stop once a liver has graduated.
+            Information is collected once per hour. Data collection will stop upon graduation
             <br/>
-            This page is in now way affiliated with ANYCOLOR or with any of the channels listed here.
+            This page is in now way affiliated with Phase Connect or with any of the channels listed here.
             <br/>
-            Date Started: 2023-03-26
+            Date Started: 2023-04-01
         </p>
         <p className="p-4">
             <a className="hover:underline text-bold" href="https://github.com/pinapelz/Nijitrack">Source Code</a><br/>
diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx
index 8094e21..31ca24f 100644
--- a/src/components/SubscriberTable/SubscriberTable.tsx
+++ b/src/components/SubscriberTable/SubscriberTable.tsx
@@ -28,7 +28,7 @@ return (
         </div>
         <div className="px-2 sm:px-48 py-4 sm:py-8 relative shadow-md rounded-l text-left overflow-auto">
             <table className="w-full text-m sm:text-xl text-black bg-white">
-                <thead className="text-m sm:text-lg text-white" style={{ backgroundColor: '#2D4B71' }}>
+                <thead className="text-m sm:text-lg text-white rounded-md" style={{ backgroundColor: 'black' }}>
                     <tr>
                         <th scope="col" className="py-1 px-1 sm:px-3 hidden sm:table-cell">
                             RANK
diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index 85fbfbd..05a0e5d 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -1,25 +1,29 @@
 import React from 'react';
+import '../TitleBar/TitleBarStyle.css'
 
 interface TitleBarProps {
     title: string;
     redirectUrl?: string;
     showHomeButton?: boolean;
+    backgroundColor?: string;
 }
 
-const TitleBar: React.FC<TitleBarProps> = ({ title, redirectUrl, showHomeButton }) => {
+const TitleBar: React.FC<TitleBarProps> = ({ title, redirectUrl, showHomeButton, backgroundColor }) => {
     return (
-        <div className="title-bar p-5 shadow-md" style={{ backgroundColor: '#2D4B71' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <a href={redirectUrl}>
-                    <span className="text-white text-4xl font-bold">{title}</span>
-                </a>
-                {showHomeButton && (
-                    <a href="/">
-                        <button className="bg-white text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded-full">Home</button>
+        <>
+            <div className="title-bar p-5 shadow-md" style={{ backgroundColor: backgroundColor || '#2D4B71' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <a href={redirectUrl}>
+                        <span className="text-white text-4xl font-bold" style={{ fontFamily: 'Quantico, sans-serif' }}>{title}</span>
                     </a>
-                )}
+                    {showHomeButton && (
+                        <a href="/">
+                            <button className="bg-white text-black font-bold py-2 px-4 rounded-lg">Home</button>
+                        </a>
+                    )}
+                </div>
             </div>
-        </div>
+        </>
     );
 };
 
diff --git a/src/components/TitleBar/TitleBarStyle.css b/src/components/TitleBar/TitleBarStyle.css
new file mode 100644
index 0000000..703f01d
--- /dev/null
+++ b/src/components/TitleBar/TitleBarStyle.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&amp;display=swap');