Skip to content

Commit

Permalink
Use paths node summery on category page header
Browse files Browse the repository at this point in the history
  • Loading branch information
@terotik
terotik committed Nov 28, 2024
1 parent b50f587 commit 518cbfe
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 101 deletions.
96 changes: 3 additions & 93 deletions components/paths/CategoryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -86,88 +78,6 @@ const CardGoalBlock = styled.div`
}
`;

const PathsContentLoader = (props) => {
const theme = useTheme();
return (
<ContentLoader
speed={1}
width={330}
height={80}
viewBox="0 0 330 80"
backgroundColor={theme.graphColors.grey010}
foregroundColor={theme.graphColors.grey030}
{...props}
>
<rect x="5" y="1" rx="3" ry="3" width="166" height="16" />
<rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
<rect x="6" y="24" rx="3" ry="3" width="130" height="27" />
<rect x="4" y="61" rx="3" ry="3" width="166" height="16" />
</ContentLoader>
);
};

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 <PathsContentLoader />;
}
if (error) {
return <div>Error: {error.message}</div>; // Handle error appropriately
}
if (data) {
if (data.node.__typename === 'ActionNode') {
return (
<ActionNodeSummary
categoryId={categoryId}
node={data.node}
onLoaded={onLoaded}
refetching={refetching}
/>
);
} else if (data.node.__typename && displayGoals) {
return (
<InventoryNodeSummary
categoryId={categoryId}
node={data.node}
onLoaded={onLoaded}
displayGoals={displayGoals}
/>
);
}
return null;
}
});

PathsNodeContent.displayName = 'PathsNodeContent';

type CategoryCardProps = {
category: Category;
group?: CategoryFragmentFragment;
Expand Down Expand Up @@ -217,7 +127,7 @@ const CategoryCard = (props: CategoryCardProps) => {
</CardHeaderBlock>
<CardDataBlock>
{category.kausalPathsNodeUuid && pathsInstance?.id && (
<PathsNodeContent
<PathsNodeSummary
categoryId={category.id}
node={category.kausalPathsNodeUuid}
pathsInstance={pathsInstance}
Expand Down
99 changes: 99 additions & 0 deletions components/paths/PathsNodeSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React from 'react';

import { InstanceType } from 'common/__generated__/paths/graphql';

import ContentLoader from 'react-content-loader';
import { 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 InventoryNodeSummary from './InventoryNodeSummary';
import ActionNodeSummary from './ActionNodeSummary';

const PathsContentLoader = (props) => {
const theme = useTheme();
return (
<ContentLoader
speed={1}
width={330}
height={80}
viewBox="0 0 330 80"
backgroundColor={theme.graphColors.grey010}
foregroundColor={theme.graphColors.grey030}
{...props}
>
<rect x="5" y="1" rx="3" ry="3" width="166" height="16" />
<rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
<rect x="6" y="24" rx="3" ry="3" width="130" height="27" />
<rect x="4" y="61" rx="3" ry="3" width="166" height="16" />
</ContentLoader>
);
};

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 <PathsContentLoader />;
}
if (error) {
return <div>Error: {error.message}</div>; // Handle error appropriately
}
if (data) {
if (data.node.__typename === 'ActionNode') {
return (
<ActionNodeSummary
categoryId={categoryId}
node={data.node}
onLoaded={onLoaded ? onLoaded : () => void 0}
refetching={refetching}
/>
);
} else if (data.node.__typename && displayGoals) {
return (
<InventoryNodeSummary
categoryId={categoryId}
node={data.node}
onLoaded={onLoaded ? onLoaded : () => void 0}
displayGoals={displayGoals}
/>
);
}
return null;
}
});

PathsNodeSummary.displayName = 'PathsNodeSummary';

export default PathsNodeSummary;
19 changes: 11 additions & 8 deletions components/paths/contentblocks/CategoryPageHeaderBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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!) {
Expand Down Expand Up @@ -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, {
Expand All @@ -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;
Expand All @@ -246,11 +247,12 @@ const PathsNodeContent = (props) => {
);
} else if (data.node.__typename) {
return (
<PathsBasicNodeContent
<InventoryNodeSummary
categoryId={categoryId}
node={data.node}
pathsInstance={paths}
pathsInstance={pathsInstance}
refetching={refetching}
displayGoals={false}
/>
);
}
Expand All @@ -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
Expand Down Expand Up @@ -315,11 +318,11 @@ function CategoryPageHeaderBlock(props: Props) {
{identifier && <Identifier>{identifier}.</Identifier>} {title}
</h1>
{lead && <p>{lead}</p>}
{pathsNodeId && paths && (
<PathsNodeContent
{pathsNodeId && pathsInstance?.id && (
<PathsNodeSummary
categoryId={identifier}
node={pathsNodeId}
paths={paths.instance.id}
pathsInstance={pathsInstance}
/>
)}
</CategoryHeader>
Expand Down

0 comments on commit 518cbfe

Please sign in to comment.