From 518cbfe5de219a20801f9204e1f0f3da2cc642be Mon Sep 17 00:00:00 2001 From: Tero Tikkanen Date: Fri, 29 Nov 2024 00:13:26 +0200 Subject: [PATCH] Use paths node summery on category page header --- components/paths/CategoryCard.tsx | 96 +----------------- components/paths/PathsNodeSummary.tsx | 99 +++++++++++++++++++ .../contentblocks/CategoryPageHeaderBlock.tsx | 19 ++-- 3 files changed, 113 insertions(+), 101 deletions(-) create mode 100644 components/paths/PathsNodeSummary.tsx diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx index d16d598a..10f3ca5e 100644 --- a/components/paths/CategoryCard.tsx +++ b/components/paths/CategoryCard.tsx @@ -9,18 +9,10 @@ import { InstanceType } from 'common/__generated__/paths/graphql'; import { Link } from 'common/links'; import { readableColor, transparentize } from 'polished'; -import ContentLoader from 'react-content-loader'; -import styled, { useTheme } from 'styled-components'; - -import { activeGoalVar } from '@/context/paths/cache'; -import { GET_NODE_CONTENT } from '@/queries/paths/get-paths-node'; -import { getHttpHeaders } from '@/utils/paths/paths.utils'; - -import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client'; +import styled from 'styled-components'; import IndicatorSparkline from './graphs/IndicatorSparkline'; -import InventoryNodeSummary from './InventoryNodeSummary'; -import ActionNodeSummary from './ActionNodeSummary'; +import PathsNodeSummary from './PathsNodeSummary'; const GroupIdentifierHeader = styled.div<{ $color?: string | null | undefined; @@ -86,88 +78,6 @@ const CardGoalBlock = styled.div` } `; -const PathsContentLoader = (props) => { - const theme = useTheme(); - return ( - - - - - - - ); -}; - -type PathsNodeContentProps = { - categoryId: string; - node: string; - pathsInstance: InstanceType; - onLoaded: (id: string, impact: number) => void; -}; - -const PathsNodeContent = React.memo((props: PathsNodeContentProps) => { - const { categoryId, node, pathsInstance, onLoaded } = props; - const pathsInstanceId = pathsInstance.id; - const activeGoal = useReactiveVar(activeGoalVar); - const displayAllGoals = true; - const displayGoals = displayAllGoals - ? pathsInstance.goals - : activeGoal - ? [activeGoal] - : undefined; - - const { data, loading, error, networkStatus } = useQuery(GET_NODE_CONTENT, { - fetchPolicy: 'no-cache', - variables: { node: node, goal: activeGoal?.id }, - notifyOnNetworkStatusChange: true, - context: { - uri: '/api/graphql-paths', - headers: getHttpHeaders({ instanceIdentifier: pathsInstanceId }), - }, - }); - - const refetching = networkStatus === NetworkStatus.refetch; - - if (loading && !refetching) { - return ; - } - if (error) { - return
Error: {error.message}
; // Handle error appropriately - } - if (data) { - if (data.node.__typename === 'ActionNode') { - return ( - - ); - } else if (data.node.__typename && displayGoals) { - return ( - - ); - } - return null; - } -}); - -PathsNodeContent.displayName = 'PathsNodeContent'; - type CategoryCardProps = { category: Category; group?: CategoryFragmentFragment; @@ -217,7 +127,7 @@ const CategoryCard = (props: CategoryCardProps) => { {category.kausalPathsNodeUuid && pathsInstance?.id && ( - { + const theme = useTheme(); + return ( + + + + + + + ); +}; + +type PathsNodeContentProps = { + categoryId: string; + node: string; + pathsInstance: InstanceType; + onLoaded?: (id: string, impact: number) => void; +}; + +const PathsNodeSummary = React.memo((props: PathsNodeContentProps) => { + const { categoryId, node, pathsInstance, onLoaded } = props; + const pathsInstanceId = pathsInstance.id; + const activeGoal = useReactiveVar(activeGoalVar); + const displayAllGoals = true; + const displayGoals = displayAllGoals + ? pathsInstance.goals + : activeGoal + ? [activeGoal] + : undefined; + + const { data, loading, error, networkStatus } = useQuery(GET_NODE_CONTENT, { + fetchPolicy: 'no-cache', + variables: { node: node, goal: activeGoal?.id }, + notifyOnNetworkStatusChange: true, + context: { + uri: '/api/graphql-paths', + headers: getHttpHeaders({ instanceIdentifier: pathsInstanceId }), + }, + }); + + const refetching = networkStatus === NetworkStatus.refetch; + + if (loading && !refetching) { + return ; + } + if (error) { + return
Error: {error.message}
; // Handle error appropriately + } + if (data) { + if (data.node.__typename === 'ActionNode') { + return ( + void 0} + refetching={refetching} + /> + ); + } else if (data.node.__typename && displayGoals) { + return ( + void 0} + displayGoals={displayGoals} + /> + ); + } + return null; + } +}); + +PathsNodeSummary.displayName = 'PathsNodeSummary'; + +export default PathsNodeSummary; diff --git a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx index 8f3a5fa2..a4ce2269 100644 --- a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx +++ b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx @@ -22,6 +22,8 @@ import { gql, NetworkStatus, useQuery, useReactiveVar } from '@apollo/client'; import HighlightValue from '../HighlightValue'; import { useTranslations } from 'next-intl'; +import InventoryNodeSummary from '../InventoryNodeSummary'; +import PathsNodeSummary from '../PathsNodeSummary'; export const GET_CATEGORY_ATTRIBUTE_TYPES = gql` query GetCategoryAttributeTypes($plan: ID!) { @@ -218,8 +220,7 @@ const PathsActionNodeContent = (props: PathsActionNodeContentProps) => { }; const PathsNodeContent = (props) => { - const { categoryId, node, paths } = props; - console.log('getting paths node content'); + const { categoryId, node, pathsInstance } = props; const activeGoal = useReactiveVar(activeGoalVar); const { data, loading, error, networkStatus } = useQuery(GET_NODE_CONTENT, { @@ -228,7 +229,7 @@ const PathsNodeContent = (props) => { notifyOnNetworkStatusChange: true, context: { uri: '/api/graphql-paths', - headers: getHttpHeaders({ instanceIdentifier: paths }), + headers: getHttpHeaders({ instanceIdentifier: pathsInstance.id }), }, }); const refetching = networkStatus === NetworkStatus.refetch; @@ -246,11 +247,12 @@ const PathsNodeContent = (props) => { ); } else if (data.node.__typename) { return ( - ); } @@ -270,6 +272,7 @@ interface Props { function CategoryPageHeaderBlock(props: Props) { const { title, identifier, lead, pathsNodeId, page } = props; const paths = usePaths(); + const pathsInstance = paths?.instance; const headerImage = page.category?.image || page.category?.parent?.image; const breadcrumbs = page.category?.parent @@ -315,11 +318,11 @@ function CategoryPageHeaderBlock(props: Props) { {identifier && {identifier}.} {title} {lead &&

{lead}

} - {pathsNodeId && paths && ( - )}