Logs fetched only when clicking on a urlCard (#90)

Logs fetched only when clicking on a urlCard and used as props to LogsModal
WildCodeSchool · Aug 29, 2024 · bec80dc · bec80dc
1 parent 65dfdcd
commit bec80dc
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 50 deletions.
diff --git a/frontend/src/common/components/UrlCard/UrlCard.tsx b/frontend/src/common/components/UrlCard/UrlCard.tsx
@@ -214,7 +214,7 @@ function UrlCard({ urlData, onClick }: UrlCardProps) {
                   id="outlined-basic"
                   label="Fréquence (min)"
                   variant="outlined"
-                  color={parseInt(editedFrequency) >= 1 && parseInt(editedFrequency) <= 60 ? "secondary" : "warning"}
+                  color={editedFrequency >= 1 && editedFrequency <= 60 ? "secondary" : "warning"}
                   value={editedFrequency || ""}
                   onChange={(e) => setEditedFrequency(parseInt(e.target.value) || 0)}
               />

diff --git a/frontend/src/common/components/logsModal/LogsModal.tsx b/frontend/src/common/components/logsModal/LogsModal.tsx
@@ -1,46 +1,27 @@
 import "./LogsModal.scss"
-import { CircularProgress, Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { UrlData } from "@/common/components/UrlCard/UrlCard.tsx";
-import { useQuery } from "@apollo/client";
-import { GET_LOGS } from "@/common/graphql/queries.ts";
+import {Log} from "@/common/models/Log.ts";
 
 interface LogModalProps {
     open: boolean;
     handleClose: () => void;
     urlData: UrlData | null;
+    logs: Log[] | null;
 }
 
-interface Log {
-    _id: string;
-    date: string;
-    response_time: number;
-    status: number;
-    status_code: number;
-    status_message: string;
-}
-
-const LogsModal: React.FC<LogModalProps> = ({ open, handleClose, urlData }) => {
-
-    const { data, loading, error } = useQuery(GET_LOGS, {
-        variables: { savedQueryId: urlData?._id },
-        skip: !urlData?._id,
-    });
+const LogsModal: React.FC<LogModalProps> = ({ open, handleClose, urlData, logs }) => {
 
     if (!urlData) {
         return null;
     }
 
     return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-        >
+        <Dialog open={open} onClose={handleClose}>
             <DialogTitle id="customized-dialog-title">
                 {`Historique de la requête "${urlData?.name}"`}
             </DialogTitle>
             <DialogContent>
-                {loading && <CircularProgress />}
-                {error && <p>Error: {error.message}</p>}
                 <div className="logsmodal__wrapper">
                     <div className="logsmodal__header">
                         <span>Date</span>
@@ -49,27 +30,24 @@ const LogsModal: React.FC<LogModalProps> = ({ open, handleClose, urlData }) => {
                         <span>Code de retour</span>
                         <span>Message</span>
                     </div>
-                    {data && data.getLogsForSavedQuery && (
-                        data.getLogsForSavedQuery.map((log: Log) => {
-                            const localeDate = new Date(log.date);
-                            return (
-                                <div key={log._id} className={`logsmodal__item ${log.status === 2 ? "logsmodal__success" : log.status === 1 ? "logsmodal__warning" : "logsmodal__error"}`}>
-                                    <span>{localeDate.toLocaleDateString("fr-FR")}</span>
-                                    <span>
-                                        {localeDate.toLocaleTimeString("fr-FR", {
-                                            hour: '2-digit',
-                                            minute: '2-digit'
-                                        })}
-                                    </span>
-                                    <span>{log.response_time} ms</span>
-                                    <span>{log.status_code}</span>
-                                    <span>{log.status_message}</span>
-                                </div>
-                            );
-                        })
-                    )}
+                    {logs && logs.map((log: Log) => {
+                        const localeDate = new Date(log.date);
+                        return (
+                            <div key={log._id} className={`logsmodal__item ${log.status === 2 ? "logsmodal__success" : log.status === 1 ? "logsmodal__warning" : "logsmodal__error"}`}>
+                                <span>{localeDate.toLocaleDateString("fr-FR")}</span>
+                                <span>
+                                    {localeDate.toLocaleTimeString("fr-FR", {
+                                        hour: '2-digit',
+                                        minute: '2-digit'
+                                    })}
+                                </span>
+                                <span>{log.response_time} ms</span>
+                                <span>{log.status_code}</span>
+                                <span>{log.status_message}</span>
+                            </div>
+                        );
+                    })}
                 </div>
-
             </DialogContent>
         </Dialog>
     );

diff --git a/frontend/src/common/models/Log.ts b/frontend/src/common/models/Log.ts
@@ -0,0 +1,8 @@
+export interface Log {
+    _id: string;
+    date: string;
+    response_time: number;
+    status: number;
+    status_code: number;
+    status_message: string;
+}
diff --git a/frontend/src/common/models/UrlDataWithLogs.ts b/frontend/src/common/models/UrlDataWithLogs.ts
@@ -0,0 +1,4 @@
+import {UrlData} from "@/common/components/UrlCard/UrlCard.tsx";
+import {Log} from "@/common/models/Log.ts";
+
+export type UrlDataWithLogs = UrlData & { logs: Log[] };
diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -1,31 +1,37 @@
 import "./Dashboard.scss"
-import {GET_SAVED_QUERIES} from "@/common/graphql/queries.ts";
+import {GET_LOGS, GET_SAVED_QUERIES} from "@/common/graphql/queries.ts";
 import {useQuery} from "@apollo/client";
 import UrlCard, {UrlData} from "../../common/components/UrlCard/UrlCard.tsx";
 import {CircularProgress} from "@mui/material";
 import SaveQueryBarUrl from "@/common/components/saveQueryBarUrl/SaveQueryBarUrl.tsx";
 import {useState, useEffect} from "react";
 import LogsModal from "@/common/components/logsModal/LogsModal.tsx";
+import {UrlDataWithLogs} from "@/common/models/UrlDataWithLogs.ts";
 
 const Dashboard = () => {
 
     const [savedQueries, setSavedQueries] = useState<UrlData[]>([]);
-    const [selectedQuery, setSelectedQuery] = useState<UrlData | null>(null);
+    const [selectedQuery, setSelectedQuery] = useState<UrlDataWithLogs | null>(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const {data, loading, error} = useQuery(GET_SAVED_QUERIES, {
         pollInterval: 60000, // Refetch every 60 seconds
         fetchPolicy: "cache-and-network"
     });
 
+    const { refetch } = useQuery(GET_LOGS, {
+        skip: true,  // Don't fetch automatically, the logs will be fetched only when clicking on a card
+    });
+
     useEffect(() => {
         if (data) {
             setSavedQueries(data.getSavedQueries);
         }
     }, [data]);
 
-    const handleCardClick = (query: UrlData) => {
-        setSelectedQuery(query);
+    const handleCardClick = async (query: UrlData) => {
+        const { data } = await refetch({ savedQueryId: query._id });
+        setSelectedQuery({ ...query, logs: data?.getLogsForSavedQuery || [] });
         setIsModalOpen(true);
     };
 
@@ -56,7 +62,7 @@ const Dashboard = () => {
                 })}
             </div>
 
-            <LogsModal open={isModalOpen} handleClose={handleCloseModal} urlData={selectedQuery} />
+            <LogsModal open={isModalOpen} handleClose={handleCloseModal} urlData={selectedQuery} logs={selectedQuery?.logs || []} />
         </div>
     );
 };