feat(networks): centralize hooks in context

Author: ahonestla

client/src/pages/networks/components/clusters/analytics.tsx

@@ -2,20 +2,20 @@ import { Container, Row, Col, Accordion } from "@dataesr/dsfr-plus"
 import AnalyticsSkeleton from "../../../../components/skeleton/analytics-skeleton"
 import { useIntl } from "react-intl"
 import AnalyticsGraph from "../../../../components/analytics-graph"
-import useSearchData from "../../hooks/useSearchData"
 import getHorizontalBarChartOptions from "../charts/hbar"
 import getYearsChartOptions from "../charts/years"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import useIntegration from "../../hooks/useIntegration"
 import useOptions from "../../hooks/useOptions"
 import ClustersButton from "./button"
+import { useNetworkContext } from "../../context"
 
 export default function NetworkAnalytics() {
   const intl = useIntl()
   const { screen } = useScreenSize()
   const { integrationOptions } = useIntegration()
   const { currentSource, currentModel, parameters } = useOptions()
-  const { search } = useSearchData()
+  const { search } = useNetworkContext()
   const clusters = search.data?.network?.clusters
 
   if (Boolean(search.error) || !parameters.clusters || integrationOptions.showClustersAnalytics === false)
@@ -63,15 +63,15 @@ export default function NetworkAnalytics() {
               tab: intl.formatMessage({
                 id: `networks.model.of.${currentModel}`,
               }),
-            }
+            },
           )}
           description={intl.formatMessage(
             { id: "networks.analytics.clusters.size.description" },
             {
               tab: intl.formatMessage({
                 id: `networks.model.of.${currentModel}`,
               }),
-            }
+            },
           )}
           options={sizeChartOptions}
         />
@@ -119,7 +119,7 @@ export default function NetworkAnalytics() {
         </Col>
       )}
     </Row>
-  );
+  )
 
   if (["xs", "sm"].includes(screen)) {
     return (

client/src/pages/networks/components/clusters/button.tsx

@@ -1,12 +1,12 @@
 import { useIntl } from "react-intl"
 import { Button, ButtonGroup } from "@dataesr/dsfr-plus"
-import useSearchData from "../../hooks/useSearchData"
 import useOptions from "../../hooks/useOptions"
+import { useNetworkContext } from "../../context"
 
 export default function ClustersButton() {
   const intl = useIntl()
   const { parameters, handleParameterChange } = useOptions()
-  const { search } = useSearchData()
+  const { search } = useNetworkContext()
 
   return (
     <ButtonGroup size="md">

client/src/pages/networks/components/clusters/index.tsx

@@ -27,15 +27,9 @@ export default function NetworkClusters() {
           ))}
         </Container>
         <Container className="clusters-tabs__content">
-          <div className={cn("clusters-tabs__pane", clustersTab === "items" && "clusters-tabs__pane--active")}>
-            <NetworkClustersItems />
-          </div>
-          <div className={cn("clusters-tabs__pane", clustersTab === "analytics" && "clusters-tabs__pane--active")}>
-            <NetworkAnalytics />
-          </div>
-          <div className={cn("clusters-tabs__pane", clustersTab === "quadrants" && "clusters-tabs__pane--active")}>
-            <NetworkQuadrants />
-          </div>
+          {clustersTab === "items" && <NetworkClustersItems />}
+          {clustersTab === "analytics" && <NetworkAnalytics />}
+          {clustersTab === "quadrants" && <NetworkQuadrants />}
         </Container>
       </Container>
     </Container>

client/src/pages/networks/components/clusters/items.tsx

@@ -2,7 +2,6 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 import { Container, Row, Button, Link, Text, Modal, ModalContent, ModalTitle, ButtonGroup, Tag } from "@dataesr/dsfr-plus"
 import { NetworkCommunity, NetworkData } from "../../../../types/network"
-import useSearchData from "../../hooks/useSearchData"
 import useOptions from "../../hooks/useOptions"
 import BaseSkeleton from "../../../../components/skeleton/base-skeleton"
 import Separator from "../../../../components/separator"
@@ -22,10 +21,11 @@ interface ClusterItemArgs {
 function ClusterItem({ currentModel, community, isFetching }: ClusterItemArgs) {
   const intl = useIntl()
   const currentYear = new Date().getFullYear()
-  const { currentSource } = useOptions()
+  const {
+    options: { currentSource, setFocusItem },
+  } = useNetworkContext()
   const [showNodesModal, setShowNodesModal] = useState(false)
   const [showDocumentsModal, setShowDocumentsModal] = useState(false)
-  const { setFocusItem } = useNetworkContext()
   const metadata = community.metadata
 
   const oaColor = (percent: number) =>
@@ -79,7 +79,7 @@ function ClusterItem({ currentModel, community, isFetching }: ClusterItemArgs) {
                 <Text as="span" size="sm">
                   {`${intl.formatMessage(
                     { id: "networks.section.clusters.citations" },
-                    { count: metadata.citationsRecent }
+                    { count: metadata.citationsRecent },
                   )} (${currentYear - 1}-${currentYear})`}
                 </Text>
               </div>
@@ -182,11 +182,9 @@ function ClusterItem({ currentModel, community, isFetching }: ClusterItemArgs) {
 export default function NetworkClustersItems() {
   const intl = useIntl()
   const { currentModel, parameters } = useOptions()
-  const { search } = useSearchData()
+  const { search } = useNetworkContext()
   const [seeMore, setSeeMore] = useState(false)
 
-  console.log("search", search)
-
   const network = search?.data?.network as NetworkData
   const communities = network?.clusters
 
@@ -231,7 +229,7 @@ export default function NetworkClustersItems() {
                   })
                 : intl.formatMessage(
                     { id: "networks.section.clusters.see-more" },
-                    { count: communities?.length - SEE_MORE_AFTER }
+                    { count: communities?.length - SEE_MORE_AFTER },
                   )}
             </Button>
           </Separator>

client/src/pages/networks/components/clusters/quadrants.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react"
 import getQuadrantChartsOptions from "../charts/quadran"
-import useSearchData from "../../hooks/useSearchData"
 import AnalyticsGraph from "../../../../components/analytics-graph"
 import { Container, Select, SelectOption, Text, Link } from "@dataesr/dsfr-plus"
 import { NetworkCommunities, NetworkItems } from "../../../../types/network"
 import { isInProduction } from "../../../../utils/helpers"
 import useOptions from "../../hooks/useOptions"
 import BaseSkeleton from "../../../../components/skeleton/base-skeleton"
 import { useIntl } from "react-intl"
+import { useNetworkContext } from "../../context"
 
 function NetworkNodesQuadrants({ nodes }: { nodes: NetworkItems }) {
   const [selectedCentrality, setSelectedCentrality] = useState("degreeCentrality")
@@ -105,7 +105,7 @@ function NetworkClustersQuadrants({ clusters }: { clusters: NetworkCommunities }
   )
 }
 export default function NetworkQuadrants() {
-  const { search } = useSearchData()
+  const { search } = useNetworkContext()
   const intl = useIntl()
 
   if (!search?.data && search?.isFetching) return <BaseSkeleton width="100%" height="30rem" className="fr-my-1v" />

client/src/pages/networks/components/clusters/styles.scss

@@ -51,15 +51,6 @@
     padding-right: 1rem;
     overflow-y: auto;
   }
-
-  &__pane {
-    display: none;
-
-    &--active {
-      display: block;
-      animation: fadeIn 0.4s ease-out;
-    }
-  }
 }
 
 @keyframes fadeIn {

client/src/pages/networks/components/exports/button.tsx

@@ -1,15 +1,16 @@
 import { MenuButton, MenuItem } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
-import useSearchData from "../../hooks/useSearchData"
 import useExportData from "../../hooks/useExportData"
-import useIntegration from "../../hooks/useIntegration"
 import useScreenSize from "../../../../hooks/useScreenSize"
+import { useNetworkContext } from "../../context"
 
 export default function NetworkExportsButton() {
   const intl = useIntl()
   const { screen } = useScreenSize()
-  const { integrationOptions } = useIntegration()
-  const { search } = useSearchData()
+  const {
+    search,
+    integration: { integrationOptions },
+  } = useNetworkContext()
   const { isExporting, exportFile } = useExportData()
 
   if (integrationOptions?.showExports === false) return null
@@ -26,8 +27,8 @@ export default function NetworkExportsButton() {
         ["xs", "sm", "mg", "lg"].includes(screen)
           ? ""
           : isExporting
-          ? intl.formatMessage({ id: "networks.exports.is-exporting" })
-          : intl.formatMessage({ id: "networks.exports.title" })
+            ? intl.formatMessage({ id: "networks.exports.is-exporting" })
+            : intl.formatMessage({ id: "networks.exports.title" })
       }
       className="fr-mt-1w"
       size="md"

client/src/pages/networks/components/exports/index.tsx

@@ -1,13 +1,15 @@
 import { Row, Title, MenuButton, MenuItem } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
-import useSearchData from "../../hooks/useSearchData"
 import useExportData from "../../hooks/useExportData"
-import useIntegration from "../../hooks/useIntegration"
+import { useNetworkContext } from "../../context"
 
 export default function NetworkExports() {
   const intl = useIntl()
-  const { integrationOptions } = useIntegration()
-  const { search, currentQuery } = useSearchData()
+  const {
+    search,
+    currentQuery,
+    integration: { integrationOptions },
+  } = useNetworkContext()
   const { isExporting, exportFile } = useExportData()
 
   if (integrationOptions?.showExports === false) return null

client/src/pages/networks/components/filters/button.tsx

@@ -1,14 +1,15 @@
 import { useIntl } from "react-intl"
 import { Badge, Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
-import useUrl from "../../../search/hooks/useUrl"
-import useIntegration from "../../hooks/useIntegration"
+import { useNetworkContext } from "../../context"
 
 export default function NetworkFiltersButton() {
   const intl = useIntl()
   const { screen } = useScreenSize()
-  const { integrationOptions } = useIntegration()
-  const { currentFilters } = useUrl()
+  const {
+    filters,
+    integration: { integrationOptions },
+  } = useNetworkContext()
 
   if (integrationOptions.showFilters === false) return null
 
@@ -24,7 +25,7 @@ export default function NetworkFiltersButton() {
     >
       {["xs", "sm", "mg"].includes(screen) ? null : intl.formatMessage({ id: "networks.filters.button.label" })}
       <Badge className="fr-ml-1w" size="md" color="blue-ecume">
-        {`${Object.keys(currentFilters)?.length}`}
+        {`${Object.keys(filters)?.length}`}
       </Badge>
     </Button>
   )

client/src/pages/networks/components/filters/modal.tsx

@@ -1,4 +1,4 @@
-import useOptions from "../../hooks/useOptions"
+import { useNetworkContext } from "../../context"
 import NetworkFiltersPatentsModal from "./patents"
 import NetworkFiltersProjectsModal from "./projects"
 import NetworkFiltersPublicationsModal from "./publications"
@@ -10,7 +10,9 @@ const SOURCES_MAPPING = {
 }
 
 export default function NetworkFiltersModal() {
-  const { currentSource } = useOptions()
+  const {
+    options: { currentSource },
+  } = useNetworkContext()
 
   return SOURCES_MAPPING[currentSource]
 }