Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev to merge, add Favourite Candidate page and modify Favourite District Page #127

Merged
merged 7 commits into from
Nov 20, 2019
Merged

Dev to merge, add Favourite Candidate page and modify Favourite District Page #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b9778da
minor update on fav-district
dasaitamago Nov 16, 2019
7484b34
Merge branch 'dev' of https://github.com/cswbrian/district-councils-d…
dasaitamago Nov 16, 2019
0e24832
modified the fav-district page and functions
dasaitamago Nov 19, 2019
fed3e16
Merge branch 'dev' of https://github.com/cswbrian/district-councils-d…
dasaitamago Nov 19, 2019
101e8f4
add page favourite candidate
dasaitamago Nov 19, 2019
041e32d
add page favourite candidate
dasaitamago Nov 19, 2019
5a0f9e9
Delete redundant
dasaitamago Nov 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions web/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const FavDistrictListPage = loadable(() =>
import(/* webpackPrefetch: true */ 'components/pages/fav-district')
)

const FavCandidateListPage = loadable(() =>
import(/* webpackPrefetch: true */ 'components/pages/fav-candidate')
)

const NotfoundPage = loadable(() =>
import(/* webpackPrefetch: true */ 'components/pages/notfound')
)
Expand Down Expand Up @@ -144,6 +148,10 @@ const LangSwitch = props => {
path={`${path}/SelectedDistrict`}
component={withTracker(FavDistrictListPage)}
/>
<Route
path={`${path}/SelectedCandidate`}
component={withTracker(FavCandidateListPage)}
/>
<Route path={`${path}/about-dc`} component={withTracker(AboutDCPage)} />
<Route path="/about-us" component={withTracker(SupportUsPage)} />
<Route component={withTracker(NotfoundPage)} />
Expand Down Expand Up @@ -212,6 +220,10 @@ const App = props => {
path="/SelectedDistrict"
component={withTracker(FavDistrictListPage)}
/>
<Route
path="/SelectedCandidate"
component={withTracker(FavCandidateListPage)}
/>
<Route component={withTracker(NotfoundPage)} />
</Switch>
</main>
Expand Down
11 changes: 11 additions & 0 deletions web/src/components/organisms/SearchMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,17 @@ const SearchMenu = props => {
</Typography>
</LeftMargin>

<LeftMargin>
<Typography
variant="h5"
color="secondary"
onClick={() => goToPage(`/${currentLanguage}/SelectedCandidate`)}
>
{/* 己關注候選人 */}
{t('searchMenu.text5')}
</Typography>
</LeftMargin>

<LeftMargin>
<Typography
variant="h5"
Expand Down
132 changes: 132 additions & 0 deletions web/src/components/pages/fav-candidate/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React, { Component } from 'react'
import { Query } from 'react-apollo'
import { QUERY_GET_CANDIDATES_BY_IDS } from 'queries/gql'
import ConstituencyTableContent from 'components/molecules/constituency/ConstituencyTableContent'
import CampSelector from 'components/atoms/CampSelector'
import { Loading } from 'components/atoms/Loading'
import { withTranslation } from 'react-i18next'
import localforage from 'localforage'
import { Container, Typography } from '@material-ui/core'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableHead from '@material-ui/core/TableHead'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
import { HtmlTooltip } from 'components/atoms/Tooltip'
import styled from 'styled-components'

const StyledTableCell = styled(TableCell)`
&& {
padding: 6px 0px 6px 16px;
:last-child {
padding: 6px 0px 6px 16px;
}
line-height: 1rem;
}
`

class FavCandidateListPage extends Component {
constructor(props) {
super(props)
this.state = {
candidateArr: [],
checked: {
democracy: true,
establishment: true,
others: true,
blank: true,
},
}

localforage.getItem('candidate').then(value => {
this.setState({ candidateArr: value === null ? [] : value })
})
}

handleChange(democracy, establishment, others, blank) {
const checked = { democracy, establishment, others, blank }
this.setState({ ...this.state, checked: checked })
}

render() {
const { t } = this.props

return (
<Query
query={QUERY_GET_CANDIDATES_BY_IDS}
variables={{ person_id: this.state.candidateArr, year: 2019 }}
>
{({ loading, error, data }) => {
if (loading) return <Loading />
if (error) return `Error! ${error}`

const constituencies = data.dcd_constituencies
const { democracy, establishment, others, blank } = this.state.checked
return (
<div>
<CampSelector onChange={this.handleChange.bind(this)} />
<Container>
<Typography variant="h4">
{`${data.dcd_constituencies.length}`}
{t('no_of_districts')}
</Typography>
</Container>
<Table id="favConstituencyTable" size="small">
<TableHead>
<TableRow>
<StyledTableCell>
{/* 候選人 */}
{t('candidates')}
</StyledTableCell>
<StyledTableCell>
{/* 相關組織{' '} */}
{t('relatedOrganizations')}{' '}
<HtmlTooltip
disableFocusListener
disableTouchListener
// text="候選人或議員的所屬政黨或社區組織，來源綜合媒體報道"
text={t('relatedOrganizations.tips')}
placement="bottom"
size={20}
/>
</StyledTableCell>
<StyledTableCell>
{/* 報稱政治聯繫{' '} */}
{t('reportedPoliticalAffiliation')}{' '}
<HtmlTooltip
disableFocusListener
disableTouchListener
// text="根據候選人提名表格上所填報的政治聯繫"
text={t('reportedPoliticalAffiliation.tips')}
placement="bottom"
size={20}
/>
</StyledTableCell>
{/* <TableCell>得票</TableCell> */}
</TableRow>
</TableHead>
<TableBody>
{constituencies.map(constituency => {
return (
<ConstituencyTableContent
key={constituency.id}
constituency={constituency}
year={2019}
showEstablishment={establishment}
showDemocracy={democracy}
showBlank={blank}
showOthers={others}
/>
)
})}
</TableBody>
</Table>
</div>
)
}}
</Query>
)
}
}

export default withTranslation()(FavCandidateListPage)
97 changes: 82 additions & 15 deletions web/src/components/pages/fav-district/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
import React, { Component } from 'react'
import styled from 'styled-components'
import { Query } from 'react-apollo'
import { QUERY_GET_CONSTITUENCIES_BY_DISTRICT_CODES } from 'queries/gql'
import ConstituencyCard from 'components/organisms/ConstituencyCard'
import { Typography } from '@material-ui/core'
import Paper from '@material-ui/core/Paper'
import ConstituencyTableContent from 'components/molecules/constituency/ConstituencyTableContent'
import CampSelector from 'components/atoms/CampSelector'
import { Loading } from 'components/atoms/Loading'
import { withTranslation } from 'react-i18next'
import localforage from 'localforage'
import { Container, Typography } from '@material-ui/core'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableHead from '@material-ui/core/TableHead'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
import { HtmlTooltip } from 'components/atoms/Tooltip'
import styled from 'styled-components'

const Container = styled(Paper)`
const StyledTableCell = styled(TableCell)`
&& {
width: 100%;
padding: 16px;
box-shadow: none;
padding: 6px 0px 6px 16px;
:last-child {
padding: 6px 0px 6px 16px;
}
line-height: 1rem;
}
`

Expand All @@ -22,13 +30,24 @@ class FavDistrictListPage extends Component {
super(props)
this.state = {
battlegroundArr: [],
checked: {
democracy: true,
establishment: true,
others: true,
blank: true,
},
}

localforage.getItem('battleground').then(value => {
this.setState({ battlegroundArr: value === null ? [] : value })
})
}

handleChange(democracy, establishment, others, blank) {
const checked = { democracy, establishment, others, blank }
this.setState({ ...this.state, checked: checked })
}

render() {
const { t } = this.props

Expand All @@ -41,20 +60,68 @@ class FavDistrictListPage extends Component {
if (loading) return <Loading />
if (error) return `Error! ${error}`

const constituencies = data.dcd_constituencies
const { democracy, establishment, others, blank } = this.state.checked
return (
<>
<div>
<CampSelector onChange={this.handleChange.bind(this)} />
<Container>
<Typography variant="h4">
{`${data.dcd_constituencies.length}`}
{t('no_of_districts')}
</Typography>
</Container>
<Container>
{data.dcd_constituencies.map(c => (
<ConstituencyCard key={c.id} year={2019} constituency={c} />
))}
</Container>
</>
<Table id="favConstituencyTable" size="small">
<TableHead>
<TableRow>
<StyledTableCell>
{/* 候選人 */}
{t('candidates')}
</StyledTableCell>
<StyledTableCell>
{/* 相關組織{' '} */}
{t('relatedOrganizations')}{' '}
<HtmlTooltip
disableFocusListener
disableTouchListener
// text="候選人或議員的所屬政黨或社區組織，來源綜合媒體報道"
text={t('relatedOrganizations.tips')}
placement="bottom"
size={20}
/>
</StyledTableCell>
<StyledTableCell>
{/* 報稱政治聯繫{' '} */}
{t('reportedPoliticalAffiliation')}{' '}
<HtmlTooltip
disableFocusListener
disableTouchListener
// text="根據候選人提名表格上所填報的政治聯繫"
text={t('reportedPoliticalAffiliation.tips')}
placement="bottom"
size={20}
/>
</StyledTableCell>
{/* <TableCell>得票</TableCell> */}
</TableRow>
</TableHead>
<TableBody>
{constituencies.map(constituency => {
return (
<ConstituencyTableContent
key={constituency.id}
constituency={constituency}
year={2019}
showEstablishment={establishment}
showDemocracy={democracy}
showBlank={blank}
showOthers={others}
/>
)
})}
</TableBody>
</Table>
</div>
)
}}
</Query>
Expand Down
Loading