import { Typography } from '@material-ui/core' ; import clsx from 'clsx' ; import groupBy from 'lodash/groupBy' ; import omit from 'lodash/omit' ; import take from 'lodash/take' ; import React , { ReactNode } from 'react' ; import useFetch from '../../hooks/useFetch' ; import { pipe } from '../../utils' ; import { Bill } from '../IssueBill' ; import CandidateCompareNoInfo from './CandidateCompareNoInfo' ; interface Props { name : string ; constituency : string ; } interface CandidateFB { name : string ; fbPage : string ; } interface CandidateCompareIssueProp { list : Bill [ ] ; type : 'person' | 'party' ; } type KeyValue = { [ key ] : Bill [ ] ; } ; const areCandidateCompareIssueEquals = ( prevProps , nextProps ) => { return prevProps . list . length === nextProps . list . length ; } ; const CandidateCompareIssue = ( { list , type } ) => { if ( list . length === 0 ) { return null ; } const issueCategories = pipe ( list , ( _ ) => groupBy ( _ , 'category' ) , ( _ ) => omit ( _ , [ '其他' ] ) , ( _ ) => { const sortList = Object . keys ( _ ) ; sortList . sort ( ( a , b ) => _ [ b ] . length - _ [ a ] . length ) ; return sortList . map ( ( key ) => { return ( < div key = { key } > { key } { _ [ key ] . length } 項 < /div>); } ) ; } , ( _ ) => take ( _ , 8 ) ) ; const label = type === 'person' ? ( < span > { list . length } 項提案包含 ： < /span>) : (<span>所屬黨團提案 {list.length} 項包含：</span > ) ; return ( < div className = "candidate-compare-issue-bill-list" > { label } { issueCategories } < /div>); } ; const CandidateCompareIssueMemo = React . memo ( CandidateCompareIssue , areCandidateCompareIssueEquals ) ; export default function CandidateCompareCardIssueBill ( { name , constituency } ) { const { isLoading , responseData } = useFetch < Bill [ ] | null > ( `/api/bills/${ constituency }/${ name }` , [ ] , [ name ] ) ; let child = null ; if ( ! isLoading ) { if ( Array . isArray ( responseData ) ) { const groupObj = groupBy < Bill > ( responseData , 'proposerType' ) ; const personIssues = groupObj [ '立委提案' ] || [ ] ; const partyIssues = groupObj [ '黨團提案' ] || [ ] ; const candidateUrl = `/candidate/${ constituency }/${ name }` ; child = ( < > < Typography variant = "h5" > < CandidateCompareIssueMemo list = { personIssues } type = "person" / > < CandidateCompareIssueMemo list = { partyIssues } type = "party" / > < /Typography> < a href = { candidateUrl } className = "btn btn-rounded btn-link" > 詳細議題法案 < /a> < />); } else { child = ( < CandidateCompareNoInfo title = "沒有提案資料" content = "可能是新立委挑戰者或是沒有提案過" / > ) ; } } const elClass = clsx ( 'candidate-compare-col candidate-compare-issue-bill loading style-flex' , { 'is-show' : isLoading } ) ; return ( < div className = { elClass } > < div className = "h4 mb-2" > 提案 < /div> { child } < /div>); }