Added stats to manage modal

M4RC02U1F4A4 · Jan 24, 2024 · b6bc0b8 · b6bc0b8
1 parent 61afa7d
commit b6bc0b8
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 5 deletions.
diff --git a/frontend/public/main.css b/frontend/public/main.css
@@ -816,6 +816,11 @@ video {
   margin-bottom: calc((1.75rem - 1.25rem) / 2);
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -2578,6 +2583,15 @@ video {
   line-height: 1rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-\[0\.80rem\] {
+  font-size: 0.80rem;
+}
+
 .font-bold {
   font-weight: 700;
 }

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Input, Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure } from "@nextui-org/react";
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Divider, Input, Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure } from "@nextui-org/react";
 import { useDataContext } from '../context/Data';
 import Channel from './Channel';
 import config from '../config';
@@ -10,7 +10,7 @@ export default function NavBar({ activePage, handleNavLinkClick }) {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState([]);
-  const {channelsData} = useDataContext();
+  const {channelsData, statsData, fetchStatsData} = useDataContext();
 
   const handleSearch = async () => {
     try {
@@ -27,6 +27,26 @@ export default function NavBar({ activePage, handleNavLinkClick }) {
     }
   };
 
+  const handleForceUpdateChannels = async () => {
+    try {
+      const response = await fetch(`${config.API_BASE_URL}/update/channels`);
+      console.log(response)
+      fetchStatsData()
+    } catch (error) {
+      console.error('Errore nella richiesta:', error);
+    }
+  }
+
+  const handleForceUpdateVideos = async () => {
+    try {
+      const response = await fetch(`${config.API_BASE_URL}/update/videos`);
+      console.log(response)
+      fetchStatsData()
+    } catch (error) {
+      console.error('Errore nella richiesta:', error);
+    }
+  }
+
   const handleKeyPress = (event) => {
     if (event.key === 'Enter') {
       handleSearch();
@@ -59,7 +79,7 @@ export default function NavBar({ activePage, handleNavLinkClick }) {
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">Manage - Add new channel</ModalHeader>
+              <ModalHeader className="flex flex-col gap-1">Add new channel</ModalHeader>
               <ModalBody>
                 <div className="flex items-center">
                   <Input className="flex-1" type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} onKeyDown={(e) => handleKeyPress(e)} label="Query" />  
@@ -77,7 +97,55 @@ export default function NavBar({ activePage, handleNavLinkClick }) {
                       />
                   ))}
                 </div>
-
+                <Divider className="my-4" />
+                <div>
+                  <p className="font-semibold text-lg">Stats and info</p>
+                </div>
+                <div>
+                <Table hideHeader isStriped aria-label="Example static collection table">
+                  <TableHeader>
+                    <TableColumn>NAME</TableColumn>
+                    <TableColumn>VALUE</TableColumn>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow key="1">
+                      <TableCell>Last videos update</TableCell>
+                      <TableCell>{statsData.last_videos_update}</TableCell>
+                    </TableRow>
+                    <TableRow key="2">
+                      <TableCell>Last channels update</TableCell>
+                      <TableCell>{statsData.last_channels_update}</TableCell>
+                    </TableRow>
+                    <TableRow key="3">
+                      <TableCell>Number of channels</TableCell>
+                      <TableCell>{statsData.n_of_channels}</TableCell>
+                    </TableRow>
+                    <TableRow key="4">
+                      <TableCell>Number of videos</TableCell>
+                      <TableCell>{statsData.n_of_videos}</TableCell>
+                    </TableRow>
+                    <TableRow key="5">
+                      <TableCell>Videos to watch</TableCell>
+                      <TableCell>{statsData.n_of_videos_to_watch}</TableCell>
+                    </TableRow>
+                    <TableRow key="6">
+                      <TableCell>Duration of videos to watch</TableCell>
+                      <TableCell>{statsData.time_to_watch}</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+                </div>
+                <Divider className="my-4" />
+                <div>
+                  <p className="font-semibold text-lg">Danger Zone</p>
+                </div>
+                <div>
+                  <Button className="antialiased font-semibold" color="danger" variant="ghost" onClick={handleForceUpdateChannels}> Force channels update </Button>
+                  <Button className="antialiased font-semibold ml-4" color="danger" variant="ghost" onClick={handleForceUpdateVideos}> Force videos update </Button>
+                </div>
+                <div>
+                  <p className="text-[0.80rem] tracking-tight text-default-400 font-mono antialiased">If you refresh manually too frequently, you risk running out of the daily API call limit for YouTube Data API v3.</p>
+                </div>
               </ModalBody>
               <ModalFooter>
               </ModalFooter>

diff --git a/frontend/src/context/Data.jsx b/frontend/src/context/Data.jsx
@@ -8,6 +8,7 @@ export const useDataContext = () => useContext(DataContext);
 export const DataProvider = ({ children }) => {
     const [videosData, setVideosData] = useState({});
     const [channelsData, setChannelsData] = useState({});
+    const [statsData, setStatsData] = useState({});
 
     const fetchVideosData = async () => {
         try {
@@ -29,13 +30,24 @@ export const DataProvider = ({ children }) => {
         }
     };
 
+    const fetchStatsData = async () => {
+        try {
+            const response = await fetch(`${config.API_BASE_URL}/stats`); 
+            const statsData = await response.json();
+            setStatsData(statsData.data);
+        } catch (error) {
+            console.error('Errore nella richiesta API per i canali:', error);
+        }
+    };
+
     useEffect(() => {
         fetchVideosData(); 
         fetchChannelsData(); 
+        fetchStatsData();
     }, []);
 
     return (
-        <DataContext.Provider value={{ videosData, setVideosData, channelsData, setChannelsData, fetchVideosData, fetchChannelsData }}>
+        <DataContext.Provider value={{ videosData, setVideosData, channelsData, setChannelsData, fetchVideosData, fetchChannelsData, statsData, fetchStatsData }}>
             {children}
         </DataContext.Provider>
     );