open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Memoize recommended contracts widget

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-20 21:51:53 -07:00
parent 732656049b
commit 024f03af6d
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/pages/[username]/[contractSlug].tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react' import React, { memo, useEffect, useMemo, useState } from 'react'
import { ArrowLeftIcon } from '@heroicons/react/outline' import { ArrowLeftIcon } from '@heroicons/react/outline'
import { useContractWithPreload } from 'web/hooks/use-contract' import { useContractWithPreload } from 'web/hooks/use-contract'
@ -269,26 +269,28 @@ export function ContractPageContent(
) )
} }
function RecommendedContractsWidget(props: { contract: Contract }) { const RecommendedContractsWidget = memo(
const { contract } = props function RecommendedContractsWidget(props: { contract: Contract }) {
const user = useUser() const { contract } = props
const [recommendations, setRecommendations] = useState<Contract[]>([]) const user = useUser()
useEffect(() => { const [recommendations, setRecommendations] = useState<Contract[]>([])
if (user) { useEffect(() => {
getRecommendedContracts(contract, user.id, 6).then(setRecommendations) if (user) {
getRecommendedContracts(contract, user.id, 6).then(setRecommendations)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contract.id, user?.id])
if (recommendations.length === 0) {
return null
} }
// eslint-disable-next-line react-hooks/exhaustive-deps return (
}, [contract.id, user?.id]) <Col className="mt-2 gap-2 px-2 sm:px-0">
if (recommendations.length === 0) { <Title className="text-gray-700" text="Recommended" />
return null <ContractsGrid
contracts={recommendations}
trackingPostfix=" recommended"
/>
</Col>
)
} }
return ( )
<Col className="mt-2 gap-2 px-2 sm:px-0">
<Title className="text-gray-700" text="Recommended" />
<ContractsGrid
contracts={recommendations}
trackingPostfix=" recommended"
/>
</Col>
)
}