From f6182746a16be0194a60a2475dadb579f3f0dc95 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Fri, 10 Mar 2023 20:13:03 +0100 Subject: [PATCH 01/11] Add useLazyLoadQuery to OwnerSettingsRenderer --- src/scenes/Owner/OwnerSettingsRenderer.tsx | 66 ++++++++++------------ 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/src/scenes/Owner/OwnerSettingsRenderer.tsx b/src/scenes/Owner/OwnerSettingsRenderer.tsx index f89225111..ff604e1cb 100644 --- a/src/scenes/Owner/OwnerSettingsRenderer.tsx +++ b/src/scenes/Owner/OwnerSettingsRenderer.tsx @@ -1,10 +1,8 @@ import React from 'react'; -import { QueryRenderer } from 'react-relay'; +import { useLazyLoadQuery } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import environment from '../../createRelayEnvironment'; -import CirrusLinearProgress from '../../components/common/CirrusLinearProgress'; import OwnerSettings from '../../components/settings/OwnerSettings'; import { OwnerSettingsRendererQuery } from './__generated__/OwnerSettingsRendererQuery.graphql'; import { useParams } from 'react-router-dom'; @@ -13,41 +11,35 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; export default function OwnerSettingsRenderer(): JSX.Element { let { platform, name } = useParams(); - return ( - - environment={environment} - variables={{ platform, name }} - query={graphql` - query OwnerSettingsRendererQuery($platform: String!, $name: String!) { - ownerInfoByName(platform: $platform, name: $name) { - ...OwnerSettings_info - ...AppBreadcrumbs_info - } - viewer { - ...AppBreadcrumbs_viewer - } + + const response = useLazyLoadQuery( + graphql` + query OwnerSettingsRendererQuery($platform: String!, $name: String!) { + ownerInfoByName(platform: $platform, name: $name) { + ...OwnerSettings_info + ...AppBreadcrumbs_info } - `} - render={({ error, props }) => { - if (!props) { - return ; + viewer { + ...AppBreadcrumbs_viewer } - return ( - <> - - - - ); - }} - /> + } + `, + { platform, name }, + ); + + return ( + <> + + + ); } From 3a11071e2a8d872b60f7ced4072026968eb103bf Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Fri, 10 Mar 2023 20:14:31 +0100 Subject: [PATCH 02/11] Add useFragment to OwnerSettings --- src/components/settings/OwnerSettings.tsx | 56 +++++++++++------------ 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/settings/OwnerSettings.tsx b/src/components/settings/OwnerSettings.tsx index 8c2961542..d8e9b02b2 100644 --- a/src/components/settings/OwnerSettings.tsx +++ b/src/components/settings/OwnerSettings.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { createFragmentContainer } from 'react-relay'; +import { useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import Paper from '@mui/material/Paper'; import { makeStyles } from '@mui/styles'; @@ -10,7 +10,7 @@ import WebHookSettings from '../webhooks/WebHookSettings'; import OwnerApiSettings from './OwnerApiSettings'; import OwnerSecuredVariables from './OwnerSecuredVariables'; import OwnerPersistentWorkerPools from './OwnerPersistentWorkerPools'; -import { OwnerSettings_info } from './__generated__/OwnerSettings_info.graphql'; +import { OwnerSettings_info$key } from './__generated__/OwnerSettings_info.graphql'; import MarkdownTypography from '../common/MarkdownTypography'; import CardHeader from '@mui/material/CardHeader'; import { Card, CardActions, CardContent } from '@mui/material'; @@ -28,11 +28,34 @@ const useStyles = makeStyles(theme => { }); interface Props { - info: OwnerSettings_info; + info: OwnerSettings_info$key; } -function OwnerSettings(props: Props) { - let { info } = props; +export default function OwnerSettings(props: Props) { + let info = useFragment( + graphql` + fragment OwnerSettings_info on OwnerInfo { + platform + uid + name + viewerPermission + description { + message + actions { + title + link + } + } + ...OwnerComputeCredits_info + ...OwnerApiSettings_info + ...OwnerSecuredVariables_info + ...OwnerPersistentWorkerPools_info + ...WebHookSettings_info + } + `, + props.info, + ); + let classes = useStyles(); if (!info) { @@ -90,26 +113,3 @@ function OwnerSettings(props: Props) { ); } - -export default createFragmentContainer(OwnerSettings, { - info: graphql` - fragment OwnerSettings_info on OwnerInfo { - platform - uid - name - viewerPermission - description { - message - actions { - title - link - } - } - ...OwnerComputeCredits_info - ...OwnerApiSettings_info - ...OwnerSecuredVariables_info - ...OwnerPersistentWorkerPools_info - ...WebHookSettings_info - } - `, -}); From 5e1d6d70997f32764d34d36cb1574be53fad9315 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Fri, 10 Mar 2023 23:57:20 +0100 Subject: [PATCH 03/11] Error occurs --- src/components/compute-credits/OwnerComputeCredits.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/compute-credits/OwnerComputeCredits.tsx b/src/components/compute-credits/OwnerComputeCredits.tsx index 2c5fec4a2..8ba3acefa 100644 --- a/src/components/compute-credits/OwnerComputeCredits.tsx +++ b/src/components/compute-credits/OwnerComputeCredits.tsx @@ -28,7 +28,8 @@ export default createPaginationContainer( { info: graphql` fragment OwnerComputeCredits_info on OwnerInfo - @argumentDefinitions(count: { type: "Int", defaultValue: 50 }, cursor: { type: "String" }) { + @argumentDefinitions(count: { type: "Int", defaultValue: 50 }, cursor: { type: "String" }) + @refetchable(queryName: "") { uid name balanceInCredits From 879b879bf19e35b635e9cc6399de591169d5ac85 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Sat, 11 Mar 2023 23:18:09 +0100 Subject: [PATCH 04/11] Add useFragment to OwnerComputeCredits --- .../compute-credits/OwnerComputeCredits.tsx | 76 ++++++------------- 1 file changed, 22 insertions(+), 54 deletions(-) diff --git a/src/components/compute-credits/OwnerComputeCredits.tsx b/src/components/compute-credits/OwnerComputeCredits.tsx index 8ba3acefa..3dfd9168c 100644 --- a/src/components/compute-credits/OwnerComputeCredits.tsx +++ b/src/components/compute-credits/OwnerComputeCredits.tsx @@ -1,40 +1,23 @@ import { graphql } from 'babel-plugin-relay/macro'; import React from 'react'; -import { createPaginationContainer, RelayPaginationProp } from 'react-relay'; +import { useFragment } from 'react-relay'; import ComputeCreditsBase from './ComputeCreditsBase'; -import { OwnerComputeCredits_info } from './__generated__/OwnerComputeCredits_info.graphql'; +import { OwnerComputeCredits_info$key } from './__generated__/OwnerComputeCredits_info.graphql'; import ComputeCreditsTransactionsList from './ComputeCreditsTransactionsList'; interface Props { - relay: RelayPaginationProp; - info: OwnerComputeCredits_info; + info: OwnerComputeCredits_info$key; } -let OwnerComputeCredits = (props: Props) => { - return ( - edge.node)} /> - } - /> - ); -}; - -export default createPaginationContainer( - OwnerComputeCredits, - { - info: graphql` - fragment OwnerComputeCredits_info on OwnerInfo - @argumentDefinitions(count: { type: "Int", defaultValue: 50 }, cursor: { type: "String" }) - @refetchable(queryName: "") { +export default function OwnerComputeCredits(props: Props) { + let info = useFragment( + graphql` + fragment OwnerComputeCredits_info on OwnerInfo { uid name balanceInCredits ...ComputeCreditsBase_info - transactions(last: $count, after: $cursor) @connection(key: "OwnerComputeCredits_transactions") { + transactions(last: 50) { edges { node { taskId @@ -44,33 +27,18 @@ export default createPaginationContainer( } } `, - }, - { - direction: 'forward', - getConnectionFromProps(props) { - return props.info && props.info.transactions; - }, - // This is also the default implementation of `getFragmentVariables` if it isn't provided. - getFragmentVariables(prevVars, totalCount) { - return { - ...prevVars, - count: totalCount, - }; - }, - getVariables(props: any, { count, cursor }, fragmentVariables) { - return { - count: count, - cursor: cursor, - platform: props.info.platform, - uid: props.info.uid, - }; - }, - query: graphql` - query OwnerComputeCreditsQuery($platform: String!, $uid: ID!, $count: Int!, $cursor: String) { - ownerInfo(platform: $platform, uid: $uid) { - ...OwnerComputeCredits_info @arguments(count: $count, cursor: $cursor) - } + + props.info, + ); + + return ( + edge.node)} /> } - `, - }, -); + /> + ); +} From 69ac0f76c91a794f6140add3a434175770fb9105 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Sat, 11 Mar 2023 23:20:35 +0100 Subject: [PATCH 05/11] Add useFragment to ComputeCreditsBase --- .../compute-credits/ComputeCreditsBase.tsx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/compute-credits/ComputeCreditsBase.tsx b/src/components/compute-credits/ComputeCreditsBase.tsx index 1e68d12a3..dd7da84e8 100644 --- a/src/components/compute-credits/ComputeCreditsBase.tsx +++ b/src/components/compute-credits/ComputeCreditsBase.tsx @@ -13,9 +13,9 @@ import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import React, { useState } from 'react'; import BillingSettingsButton from './BillingSettingsButton'; -import { createFragmentContainer } from 'react-relay'; +import { useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { ComputeCreditsBase_info } from './__generated__/ComputeCreditsBase_info.graphql'; +import { ComputeCreditsBase_info$key } from './__generated__/ComputeCreditsBase_info.graphql'; import { Helmet as Head } from 'react-helmet'; import ComputeCreditsStripeDialog from './ComputeCreditsStripeDialog'; import { Link } from '@mui/material'; @@ -58,12 +58,21 @@ const useStyles = makeStyles(theme => { interface Props { transactionsComponent: JSX.Element; - info?: ComputeCreditsBase_info; + info?: ComputeCreditsBase_info$key; balanceInCredits?: string; ownerUid: string; } -function ComputeCreditsBase(props: Props) { +export default function ComputeCreditsBase(props: Props) { + let info = useFragment( + graphql` + fragment ComputeCreditsBase_info on OwnerInfo { + ...BillingSettingsButton_info + } + `, + props.info, + ); + let [expanded, setExpanded] = useState(false); let [openBuyCredits, setOpenBuyCredits] = useState(false); let classes = useStyles(); @@ -102,7 +111,7 @@ function ComputeCreditsBase(props: Props) { Add More Credits - + ); } - -export default createFragmentContainer(ComputeCreditsBase, { - info: graphql` - fragment ComputeCreditsBase_info on OwnerInfo { - ...BillingSettingsButton_info - } - `, -}); From d0a34a98bfaefa05af1f96b9eac4dfe3980fee1f Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Sat, 11 Mar 2023 23:22:05 +0100 Subject: [PATCH 06/11] Add useFragment to BillingSettingsButton --- .../compute-credits/BillingSettingsButton.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/compute-credits/BillingSettingsButton.tsx b/src/components/compute-credits/BillingSettingsButton.tsx index cf73b71bc..4fe138362 100644 --- a/src/components/compute-credits/BillingSettingsButton.tsx +++ b/src/components/compute-credits/BillingSettingsButton.tsx @@ -1,20 +1,31 @@ import React, { useState } from 'react'; -import { createFragmentContainer } from 'react-relay'; +import { useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import AlarmOffIcon from '@mui/icons-material/AlarmOff'; import AlarmOnIcon from '@mui/icons-material/AlarmOn'; import Button from '@mui/material/Button'; import BillingSettingsDialog from './BillingSettingsDialog'; -import { BillingSettingsButton_info } from './__generated__/BillingSettingsButton_info.graphql'; +import { BillingSettingsButton_info$key } from './__generated__/BillingSettingsButton_info.graphql'; interface Props { - info: BillingSettingsButton_info; + info: BillingSettingsButton_info$key; className?: string; } -function BillingSettingsButton(props: Props) { +export default function BillingSettingsButton(props: Props) { + let info = useFragment( + graphql` + fragment BillingSettingsButton_info on OwnerInfo { + billingSettings { + enabled + ...BillingSettingsDialog_billingSettings + } + } + `, + props.info, + ); let [openDialog, setOpenDialog] = useState(false); - let { info, className } = props; + let { className } = props; if (!info) return null; let { billingSettings } = info; @@ -37,14 +48,3 @@ function BillingSettingsButton(props: Props) { ); } - -export default createFragmentContainer(BillingSettingsButton, { - info: graphql` - fragment BillingSettingsButton_info on OwnerInfo { - billingSettings { - enabled - ...BillingSettingsDialog_billingSettings - } - } - `, -}); From cfd27c8916fde4061dbee29136162eabb8eab3ad Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Sat, 11 Mar 2023 23:32:11 +0100 Subject: [PATCH 07/11] Add useFragment to BillingSettingsDialog --- .../compute-credits/BillingSettingsDialog.tsx | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/compute-credits/BillingSettingsDialog.tsx b/src/components/compute-credits/BillingSettingsDialog.tsx index 3a59e8dfe..6d687bd25 100644 --- a/src/components/compute-credits/BillingSettingsDialog.tsx +++ b/src/components/compute-credits/BillingSettingsDialog.tsx @@ -13,13 +13,13 @@ import Switch from '@mui/material/Switch'; import Typography from '@mui/material/Typography'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import { commitMutation, useFragment } from 'react-relay'; import environment from '../../createRelayEnvironment'; import { BillingSettingsDialogMutationResponse, BillingSettingsDialogMutationVariables, } from './__generated__/BillingSettingsDialogMutation.graphql'; -import { BillingSettingsDialog_billingSettings } from './__generated__/BillingSettingsDialog_billingSettings.graphql'; +import { BillingSettingsDialog_billingSettings$key } from './__generated__/BillingSettingsDialog_billingSettings.graphql'; import { Link } from '@mui/material'; const useStyles = makeStyles(theme => { @@ -48,16 +48,27 @@ const saveBillingSettingsMutation = graphql` `; interface Props { - billingSettings: BillingSettingsDialog_billingSettings; + billingSettings: BillingSettingsDialog_billingSettings$key; onClose(...args: any[]): void; open: boolean; } -function BillingSettingsDialog(props: Props) { +export default function BillingSettingsDialog(props: Props) { + let billingSettings = useFragment( + graphql` + fragment BillingSettingsDialog_billingSettings on BillingSettings { + ownerUid + enabled + billingCreditsLimit + billingEmailAddress + invoiceTemplate + } + `, + props.billingSettings, + ); let classes = useStyles(); - const { billingSettings, ...other } = props; let [enabled, setEnabled] = useState(billingSettings.enabled); let [billingEmailAddress, setBillingEmailAddress] = useState(billingSettings.billingEmailAddress); let [invoiceTemplate, setInvoiceTemplate] = useState(billingSettings.invoiceTemplate); @@ -70,8 +81,8 @@ function BillingSettingsDialog(props: Props) { function updateSettings() { const variables: BillingSettingsDialogMutationVariables = { input: { - clientMutationId: 'save-billing-settings-' + props.billingSettings.ownerUid, - ownerUid: props.billingSettings.ownerUid, + clientMutationId: 'save-billing-settings-' + billingSettings.ownerUid, + ownerUid: billingSettings.ownerUid, enabled: enabled, billingEmailAddress: billingEmailAddress, invoiceTemplate: invoiceTemplate, @@ -95,7 +106,7 @@ function BillingSettingsDialog(props: Props) { } return ( - + Compute Credits Auto Pay @@ -147,15 +158,3 @@ function BillingSettingsDialog(props: Props) { ); } - -export default createFragmentContainer(BillingSettingsDialog, { - billingSettings: graphql` - fragment BillingSettingsDialog_billingSettings on BillingSettings { - ownerUid - enabled - billingCreditsLimit - billingEmailAddress - invoiceTemplate - } - `, -}); From fe8f7a2118123edee4d92ae8a1b739a0a42def98 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Sat, 11 Mar 2023 23:35:10 +0100 Subject: [PATCH 08/11] Add useMutation to BillingSettingsDialog --- .../compute-credits/BillingSettingsDialog.tsx | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/compute-credits/BillingSettingsDialog.tsx b/src/components/compute-credits/BillingSettingsDialog.tsx index 6d687bd25..1cce1a1c1 100644 --- a/src/components/compute-credits/BillingSettingsDialog.tsx +++ b/src/components/compute-credits/BillingSettingsDialog.tsx @@ -13,9 +13,9 @@ import Switch from '@mui/material/Switch'; import Typography from '@mui/material/Typography'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; -import { commitMutation, useFragment } from 'react-relay'; -import environment from '../../createRelayEnvironment'; +import { useMutation, useFragment } from 'react-relay'; import { + BillingSettingsDialogMutation, BillingSettingsDialogMutationResponse, BillingSettingsDialogMutationVariables, } from './__generated__/BillingSettingsDialogMutation.graphql'; @@ -33,20 +33,6 @@ const useStyles = makeStyles(theme => { }; }); -const saveBillingSettingsMutation = graphql` - mutation BillingSettingsDialogMutation($input: BillingSettingsInput!) { - saveBillingSettings(input: $input) { - settings { - ownerUid - enabled - billingCreditsLimit - billingEmailAddress - invoiceTemplate - } - } - } -`; - interface Props { billingSettings: BillingSettingsDialog_billingSettings$key; @@ -78,6 +64,19 @@ export default function BillingSettingsDialog(props: Props) { billingSettings.billingEmailAddress === billingEmailAddress && billingSettings.invoiceTemplate === invoiceTemplate; + const [commitSaveBillingSettingsMutation] = useMutation(graphql` + mutation BillingSettingsDialogMutation($input: BillingSettingsInput!) { + saveBillingSettings(input: $input) { + settings { + ownerUid + enabled + billingCreditsLimit + billingEmailAddress + invoiceTemplate + } + } + } + `); function updateSettings() { const variables: BillingSettingsDialogMutationVariables = { input: { @@ -88,8 +87,7 @@ export default function BillingSettingsDialog(props: Props) { invoiceTemplate: invoiceTemplate, }, }; - commitMutation(environment, { - mutation: saveBillingSettingsMutation, + commitSaveBillingSettingsMutation({ variables: variables, onCompleted: (response: BillingSettingsDialogMutationResponse, errors) => { if (errors) { From 62dfeb5e0ce65bfb04fa374c4d0be5460f4d4e59 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 14:18:27 +0100 Subject: [PATCH 09/11] Add useMutation to ComputeCreditsStripeDialog --- .../ComputeCreditsStripeDialog.tsx | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/compute-credits/ComputeCreditsStripeDialog.tsx b/src/components/compute-credits/ComputeCreditsStripeDialog.tsx index d5755eb93..9efb8472c 100644 --- a/src/components/compute-credits/ComputeCreditsStripeDialog.tsx +++ b/src/components/compute-credits/ComputeCreditsStripeDialog.tsx @@ -5,11 +5,11 @@ import DialogContent from '@mui/material/DialogContent'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Input from '@mui/material/Input'; -import { commitMutation } from 'react-relay'; +import { useMutation } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import environment from '../../createRelayEnvironment'; import { UnspecifiedCallbackFunction } from '../../utils/utility-types'; import { + ComputeCreditsStripeDialogMutation, ComputeCreditsStripeDialogMutationResponse, ComputeCreditsStripeDialogMutationVariables, } from './__generated__/ComputeCreditsStripeDialogMutation.graphql'; @@ -19,19 +19,6 @@ import DialogActions from '@mui/material/DialogActions'; import { StripeCardElementOptions, Token } from '@stripe/stripe-js'; import { FormHelperText } from '@mui/material'; -const computeCreditsBuyMutation = graphql` - mutation ComputeCreditsStripeDialogMutation($input: BuyComputeCreditsInput!) { - buyComputeCredits(input: $input) { - error - info { - uid - balanceInCredits - balanceInCredits - } - } - } -`; - const CARD_ELEMENT_OPTIONS: StripeCardElementOptions = { hidePostalCode: true, style: { @@ -98,6 +85,18 @@ function ComputeCreditsStripeDialog(props: Props) { } }; + const [commitComputeCreditsBuyMutation] = useMutation(graphql` + mutation ComputeCreditsStripeDialogMutation($input: BuyComputeCreditsInput!) { + buyComputeCredits(input: $input) { + error + info { + uid + balanceInCredits + balanceInCredits + } + } + } + `); const stripeTokenHandler = (token: Token) => { const variables: ComputeCreditsStripeDialogMutationVariables = { input: { @@ -110,8 +109,7 @@ function ComputeCreditsStripeDialog(props: Props) { }, }; - commitMutation(environment, { - mutation: computeCreditsBuyMutation, + commitComputeCreditsBuyMutation({ variables: variables, onCompleted: (response: ComputeCreditsStripeDialogMutationResponse, errors) => { if (errors) { From d9eb8c7f520bf6802f35a25a0020bd5a482663d3 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 14:21:06 +0100 Subject: [PATCH 10/11] Add useFragment to TaskDurationChip --- src/components/chips/TaskDurationChip.tsx | 47 ++++++++++++----------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/components/chips/TaskDurationChip.tsx b/src/components/chips/TaskDurationChip.tsx index c45714d7c..b878b3d72 100644 --- a/src/components/chips/TaskDurationChip.tsx +++ b/src/components/chips/TaskDurationChip.tsx @@ -3,12 +3,12 @@ import Chip from '@mui/material/Chip'; import Icon from '@mui/material/Icon'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useEffect } from 'react'; -import { createFragmentContainer, requestSubscription } from 'react-relay'; +import { useFragment, requestSubscription } from 'react-relay'; import environment from '../../createRelayEnvironment'; import { useTaskStatusColor } from '../../utils/colors'; import { isTaskFinalStatus, isTaskInProgressStatus, taskStatusIconName } from '../../utils/status'; import { formatDuration } from '../../utils/time'; -import { TaskDurationChip_task } from './__generated__/TaskDurationChip_task.graphql'; +import { TaskDurationChip_task$key } from './__generated__/TaskDurationChip_task.graphql'; import { useTheme } from '@mui/material'; const taskSubscription = graphql` @@ -20,19 +20,33 @@ const taskSubscription = graphql` `; interface Props { - task: TaskDurationChip_task; + task: TaskDurationChip_task$key; className?: string; } -function TaskDurationChip(props: Props) { +export default function TaskDurationChip(props: Props) { + let task = useFragment( + graphql` + fragment TaskDurationChip_task on Task { + id + status + creationTimestamp + scheduledTimestamp + executingTimestamp + durationInSeconds + } + `, + props.task, + ); + let theme = useTheme(); useEffect(() => { - if (isTaskFinalStatus(props.task.status)) { + if (isTaskFinalStatus(task.status)) { return; } - let variables = { taskID: props.task.id }; + let variables = { taskID: task.id }; const subscription = requestSubscription(environment, { subscription: taskSubscription, @@ -41,21 +55,21 @@ function TaskDurationChip(props: Props) { return () => { subscription.dispose(); }; - }, [props.task.id, props.task.status]); + }, [task.id, task.status]); const [now, setNow] = React.useState(Date.now()); useEffect(() => { - if (isTaskFinalStatus(props.task.status)) { + if (isTaskFinalStatus(task.status)) { return; } const timeoutId = setInterval(() => { setNow(Date.now()); }, 1_000); return () => clearInterval(timeoutId); - }, [now, props.task.status]); + }, [now, task.status]); - let { task, className } = props; + let { className } = props; let durationInSeconds = task.durationInSeconds; if (!isTaskInProgressStatus(task.status) && !isTaskFinalStatus(task.status)) { @@ -77,16 +91,3 @@ function TaskDurationChip(props: Props) { /> ); } - -export default createFragmentContainer(TaskDurationChip, { - task: graphql` - fragment TaskDurationChip_task on Task { - id - status - creationTimestamp - scheduledTimestamp - executingTimestamp - durationInSeconds - } - `, -}); From 010369f848bdfdd39ce514e144cd99883398f85d Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 14:28:17 +0100 Subject: [PATCH 11/11] Memorized isFinalStatus value --- src/components/chips/TaskDurationChip.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/chips/TaskDurationChip.tsx b/src/components/chips/TaskDurationChip.tsx index b878b3d72..47df9ba04 100644 --- a/src/components/chips/TaskDurationChip.tsx +++ b/src/components/chips/TaskDurationChip.tsx @@ -2,7 +2,7 @@ import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import Icon from '@mui/material/Icon'; import { graphql } from 'babel-plugin-relay/macro'; -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useFragment, requestSubscription } from 'react-relay'; import environment from '../../createRelayEnvironment'; import { useTaskStatusColor } from '../../utils/colors'; @@ -41,8 +41,9 @@ export default function TaskDurationChip(props: Props) { let theme = useTheme(); + const isFinalStatus = useMemo(() => isTaskFinalStatus(task.status), [task.status]); useEffect(() => { - if (isTaskFinalStatus(task.status)) { + if (isFinalStatus) { return; } @@ -55,26 +56,26 @@ export default function TaskDurationChip(props: Props) { return () => { subscription.dispose(); }; - }, [task.id, task.status]); + }, [task.id, isFinalStatus]); const [now, setNow] = React.useState(Date.now()); useEffect(() => { - if (isTaskFinalStatus(task.status)) { + if (isFinalStatus) { return; } const timeoutId = setInterval(() => { setNow(Date.now()); }, 1_000); return () => clearInterval(timeoutId); - }, [now, task.status]); + }, [now, isFinalStatus]); let { className } = props; let durationInSeconds = task.durationInSeconds; - if (!isTaskInProgressStatus(task.status) && !isTaskFinalStatus(task.status)) { + if (!isTaskInProgressStatus(task.status) && !isFinalStatus) { durationInSeconds = 0; - } else if (!isTaskFinalStatus(task.status)) { + } else if (!isFinalStatus) { let timestamp = Math.max(task.creationTimestamp, task.scheduledTimestamp, task.executingTimestamp); durationInSeconds = (Date.now() - timestamp) / 1000; }