Merge pull request #134 from mindfiredigital/dev

Fix blank package issue

Author: lakinmindfire

src/app/packages/page.tsx

@@ -35,7 +35,14 @@ const Stats = () => {
   const [count, setCount] = useState(0);
   const [selectedRange, setSelectedRange] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
+  const [selectedPackage, setSelectedPackage] = useState<Package>({
+    name: "fmdapi-node-weaver",
+    type: "npm",
+    day: 0,
+    week: 3,
+    year: 70,
+    total: 70,
+  });
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [packages, setPackages] = useState<Package[]>(statsList as Package[]);
 
@@ -47,19 +54,19 @@ const Stats = () => {
   useEffect(() => {
     if (selectedPackage) {
       setCount(
-        selectedPackage?.type === "npm"
+        selectedPackage.type === "npm"
           ? selectedPackage.total || 0
-          : selectedPackage?.last_month || 0
+          : selectedPackage.last_month || 0
       ); //update total count when npmPackage is updated
     }
   }, [selectedPackage]);
 
   function openModal() {
     setIsOpen(true);
     setCount(
-      selectedPackage?.type === "npm"
+      selectedPackage.type === "npm"
         ? selectedPackage.total || 0
-        : selectedPackage?.last_month || 0
+        : selectedPackage.last_month || 0
     );
   }
 
@@ -198,19 +205,22 @@ const Stats = () => {
       }
     }
   }
-
+  console.log("selecyed package 1", selectedPackage);
   const generateChart = async () => {
-    if (selectedPackage?.type === "npm") {
+    if (selectedPackage.type === "npm") {
       const stats = await fetchNpmStats(
         selectedPackage.name,
         `${startDate}:${endDate}`
       );
       setCount(calculateDownloads(stats));
     }
   };
+  console.log("selecyed package 2", selectedPackage);
 
   useEffect(() => {
-    if (selectedRange && selectedPackage?.type === "npm") {
+    console.log("selecyed package 3", selectedPackage);
+
+    if (selectedRange && selectedPackage.type === "npm") {
       generateChart();
     }
   }, [startDate, endDate, selectedRange, selectedPackage]);
@@ -378,15 +388,15 @@ const Stats = () => {
                       as='h1'
                       className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4 font-extrabold'
                     >
-                      {selectedPackage?.name.replaceAll("-", " ")}
+                      {selectedPackage.name.replaceAll("-", " ")}
                     </Dialog.Title>
                     <div className='border p-4 rounded bg-white flex flex-col justify-stretch'>
                       <div className='mb-4 flex justify-center items-center'>
                         <p className='text-mindfire-text-black text-xm font-bold mr-2'>
                           Select
                         </p>
                         <div className='relative inline-block w-32'>
-                          {selectedPackage?.type === "npm" ? (
+                          {selectedPackage.type === "npm" ? (
                             <select
                               id='range'
                               className='bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-1 appearance-none outline-none'
@@ -406,13 +416,13 @@ const Stats = () => {
                               className='bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-1 appearance-none outline-none'
                               onChange={handleChange}
                             >
-                              <option value={selectedPackage?.last_day}>
+                              <option value={selectedPackage.last_day}>
                                 Yesterday
                               </option>
-                              <option value={selectedPackage?.last_week}>
+                              <option value={selectedPackage.last_week}>
                                 Last week
                               </option>
-                              <option value={selectedPackage?.last_month}>
+                              <option value={selectedPackage.last_month}>
                                 Last month
                               </option>
                             </select>
@@ -437,7 +447,7 @@ const Stats = () => {
                       </div>
 
                       <div className='flex flex-col items-center'>
-                        {selectedRange && selectedPackage?.type === "npm" ? (
+                        {selectedRange && selectedPackage.type === "npm" ? (
                           <div className='container bg-white'>
                             <div className='flex ml-6 mb-4'>
                               <div className='mr-1'>

src/app/projects/assets/stats.json

@@ -1,23 +1,23 @@
 [
   {
     "name": "fmdapi-node-weaver",
-    "type":"npm",
+    "type": "npm",
     "day": 0,
     "week": 3,
     "year": 70,
     "total": 70
   },
   {
     "name": "react-canvas-editor",
-     "type":"npm",
+    "type": "npm",
     "day": 1,
     "week": 22,
     "year": 947,
     "total": 947
   },
   {
     "name": "canvas-editor",
-    "type":"npm",
+    "type": "npm",
     "day": 0,
     "week": 7,
     "year": 1063,

updateProject.mjs

@@ -244,9 +244,9 @@ async function getPypiStats(packageName) {
     if (!stats) return null;
 
     return {
-      last_day: stats.last_day,
-      last_week: stats.last_week,
-      last_month: stats.last_month,
+      last_day: stats.data.last_day,
+      last_week: stats.data.last_week,
+      last_month: stats.data.last_month,
     };
   } catch (error) {
     console.error(`Error fetching PyPI stats for ${packageName}:`, error);