fix(search): correct dataset count on database card

Author: elainefan331

src/components/SearchPage/DatabaseCard.tsx

@@ -8,8 +8,12 @@ import {
   Avatar,
 } from "@mui/material";
 import { Colors } from "design/theme";
+import { useAppDispatch } from "hooks/useAppDispatch";
+import { useAppSelector } from "hooks/useAppSelector";
 import React from "react";
+import { useEffect } from "react";
 import { Link } from "react-router-dom";
+import { fetchDbInfo } from "redux/neurojson/neurojson.action";
 import RoutesEnum from "types/routes.enum";
 import { modalityValueToEnumLabel } from "utils/SearchPageFunctions/modalityLabels";
 
@@ -32,6 +36,10 @@ const DatabaseCard: React.FC<Props> = ({
   keyword,
   onChipClick,
 }) => {
+  const dispatch = useAppDispatch();
+  const { loading, error, data, limit } = useAppSelector(
+    (state) => state.neurojson
+  );
   const databaseLink = `${RoutesEnum.DATABASES}/${dbId}`;
   // keyword hightlight functional component
   const highlightKeyword = (text: string, keyword?: string) => {
@@ -42,6 +50,12 @@ const DatabaseCard: React.FC<Props> = ({
     const regex = new RegExp(`(${keyword})`, "gi"); // for case-insensitive and global
     const parts = text.split(regex);
 
+    useEffect(() => {
+      if (dbId) {
+        dispatch(fetchDbInfo(dbId.toLowerCase()));
+      }
+    }, [dbId, dispatch]);
+
     return (
       <>
         {parts.map((part, i) =>
@@ -181,7 +195,8 @@ const DatabaseCard: React.FC<Props> = ({
 
               <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                 <Typography variant="body2" mt={1}>
-                  <strong>Datasets:</strong> {datasets ?? "N/A"}
+                  {/* <strong>Datasets:</strong> {datasets ?? "N/A"} */}
+                  <strong>Datasets:</strong> {limit ?? "N/A"}
                 </Typography>
               </Stack>
             </Stack>