wip: use ssr for more components

api/backend/app.py

@@ -30,7 +30,6 @@ from api.backend.models import (
     GetStatistics,
     SubmitScrapeJob,
     DeleteScrapeJobs,
-    RetrieveScrapeJobs,
     UpdateJobs,
 )
 from api.backend.auth.auth_router import auth_router
@@ -173,8 +172,6 @@ async def delete(delete_scrape_jobs: DeleteScrapeJobs):
     )
 
 
-
-
 @app.get("/api/initial_logs")
 async def get_initial_logs():
     container_id = "scraperr_api"
@@ -182,11 +179,11 @@ async def get_initial_logs():
     try:
         container = client.containers.get(container_id)
         log_stream = container.logs(stream=False).decode("utf-8")
-        logs = log_stream.split('\n') 
+        return JSONResponse(content={"logs": log_stream})
-        return JSONResponse(content={"logs": logs})
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Unexpected error: {e}")
 
+
 @app.get("/api/logs")
 async def get_own_logs():
     container_id = "scraperr_api"
@@ -207,12 +204,12 @@ async def get_own_logs():
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@app.post("/api/statistics/get-average-element-per-link")
+@app.get("/api/statistics/get-average-element-per-link")
-async def get_average_element_per_link(get_statistics: GetStatistics):
+async def get_average_element_per_link(user: User = Depends(get_current_user)):
-    return await average_elements_per_link(get_statistics.user)
+    return await average_elements_per_link(user.email)
 
 
-@app.post("/api/statistics/get-average-jobs-per-day")
+@app.get("/api/statistics/get-average-jobs-per-day")
-async def average_jobs_per_day(get_statistics: GetStatistics):
+async def average_jobs_per_day(user: User = Depends(get_current_user)):
-    data = await get_jobs_per_day(get_statistics.user)
+    data = await get_jobs_per_day(user.email)
     return data

src/pages/logs.tsx

@@ -3,10 +3,15 @@ import { ArrowUpward, ArrowDownward } from "@mui/icons-material";
 import { useEffect, useRef, useState } from "react";
 import { Constants } from "../lib";
 
+interface logs {
+  logs: string;
+}
+
 export async function getStaticProps() {
   try {
     const response = await fetch(`http://scraperr_api:8000/api/initial_logs`);
-    const initialLogs = await response.json();
+    const logJson: logs = await response.json();
+    const initialLogs = logJson.logs;
 
     return {
       props: {
@@ -34,6 +39,8 @@ const Logs = ({ initialLogs }: LogProps) => {
   useEffect(() => {
     const eventSource = new EventSource(`${Constants.DOMAIN}/api/logs`);
 
+    setLogs("");
+
     eventSource.onmessage = (event) => {
       setLogs((prevLogs) => prevLogs + event.data + "\n");
       if (logsContainerRef.current) {

src/pages/statistics.tsx

@@ -3,32 +3,122 @@ import { Chart, registerables } from "chart.js";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useAuth } from "../contexts/AuthContext";
 import { Constants } from "../lib";
+import { parseCookies } from "nookies";
+import { GetServerSideProps } from "next/types";
+import Cookies from "js-cookie";
 
 Chart.register(...registerables);
 
-const Statistics: React.FC = () => {
+type averageElement = {
+  date: string;
+  average_elements: number;
+  count: number;
+};
+
+type averageJob = {
+  date: string;
+  job_count: number;
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { req } = context;
+  const cookies = parseCookies({ req });
+  const token = cookies.token;
+  let averageElement: averageElement[] = [];
+  let averageJob: averageJob[] = [];
+
+  if (token) {
+    try {
+      const averageElementResponse = await fetch(
+        `http://scraperr_api:8000/api/statistics/get-average-element-per-link`,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+
+      averageElement = await averageElementResponse.json();
+
+      const averageJobResponse = await fetch(
+        `http://scraperr_api:8000/api/statistics/get-average-jobs-per-day`,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+
+      averageJob = await averageJobResponse.json();
+    } catch (error) {
+      console.error("Error fetching statistics:", error);
+    }
+  }
+
+  return {
+    props: { averageElement, averageJob },
+  };
+};
+
+interface StatProps {
+  averageElement: averageElement[];
+  averageJob: averageJob[];
+}
+
+const Statistics: React.FC<StatProps> = ({ averageElement, averageJob }) => {
   const theme = useTheme();
   const elementsChartRef = useRef<HTMLCanvasElement>(null);
   const jobsChartRef = useRef<HTMLCanvasElement>(null);
   const [elementsChart, setElementsChart] = useState<Chart | null>(null);
   const [jobsChart, setJobsChart] = useState<Chart | null>(null);
+  const [elementsData, setElementsData] =
+    useState<averageElement[]>(averageElement);
+  const [jobsData, setJobsData] = useState<averageJob[]>(averageJob);
   const { user } = useAuth();
+  const token = Cookies.get("token");
 
-  useEffect(() => {
   const fetchElementsData = async () => {
     try {
       const response = await fetch(
         `${Constants.DOMAIN}/api/statistics/get-average-element-per-link`,
         {
-            method: "POST",
+          headers: {
-            headers: { "Content-Type": "application/json" },
+            "Content-Type": "application/json",
-            body: JSON.stringify({ user: user.email }),
+            Authorization: `Bearer ${token}`,
+          },
         }
       );
       const data = await response.json();
+      setElementsData(data);
+    } catch (error) {
+      console.error("Error fetching elements data:", error);
+    }
+  };
 
-        const dates = data.map((item: any) => item.date);
+  const fetchJobsData = async () => {
-        const averages = data.map((item: any) => item.average_elements);
+    try {
+      const response = await fetch(
+        `${Constants.DOMAIN}/api/statistics/get-average-jobs-per-day`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      const data = await response.json();
+      setJobsData(data);
+    } catch (error) {
+      console.error("Error fetching jobs data:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (user) {
+      fetchElementsData();
+      fetchJobsData();
+    }
+  }, [theme.palette.mode, user]);
+
+  useEffect(() => {
+    const dates = elementsData.map((item) => item.date);
+    const averages = elementsData.map((item) => item.average_elements);
 
     if (elementsChartRef.current) {
       const ctx = elementsChartRef.current.getContext("2d");
@@ -80,29 +170,11 @@ const Statistics: React.FC = () => {
         setElementsChart(newChart);
       }
     }
-      } catch (error) {
+  }, [elementsData, theme.palette.mode]);
-        console.error("Error fetching elements data:", error);
-      }
-    };
-
-    fetchElementsData();
-  }, [elementsChartRef, theme.palette.mode]);
 
   useEffect(() => {
-    const fetchJobsData = async () => {
+    const dates = jobsData.map((item) => item.date);
-      try {
+    const jobCounts = jobsData.map((item) => item.job_count);
-        const response = await fetch(
-          `${Constants.DOMAIN}/api/statistics/get-average-jobs-per-day`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ user: user.email }),
-          }
-        );
-        const data = await response.json();
-
-        const dates = data.map((item: any) => item.date);
-        const jobCounts = data.map((item: any) => item.job_count);
 
     if (jobsChartRef.current) {
       const ctx = jobsChartRef.current.getContext("2d");
@@ -154,13 +226,7 @@ const Statistics: React.FC = () => {
         setJobsChart(newChart);
       }
     }
-      } catch (error) {
+  }, [jobsData, theme.palette.mode]);
-        console.error("Error fetching jobs data:", error);
-      }
-    };
-
-    fetchJobsData();
-  }, [jobsChartRef, theme.palette.mode]);
 
   return (
     <>