diff --git a/app/src/frontend/building/data-components/verification.tsx b/app/src/frontend/building/data-components/verification.tsx index 9b735096..009a95f1 100644 --- a/app/src/frontend/building/data-components/verification.tsx +++ b/app/src/frontend/building/data-components/verification.tsx @@ -1,63 +1,75 @@ -import React, { Fragment } from 'react'; +import React, { Component, Fragment } from 'react'; import { VerifyIcon } from '../../components/icons'; import './verification.css'; interface VerificationProps { slug: string; - onVerify: (slug: string, verify: boolean) => void; + onVerify: (slug: string, verify: boolean, x: number, y: number) => void; user_verified: boolean; user_verified_as: string; verified_count: number; allow_verify: boolean; } -const Verification: React.FunctionComponent = (props) => { - let user_verified_as = props.user_verified_as; - if (typeof user_verified_as === 'boolean') { - user_verified_as = user_verified_as? 'Yes': 'No'; + +class Verification extends Component { + constructor(props) { + super(props); + this.handleClick = this.handleClick.bind(this) } - return ( -
- - - {props.verified_count || 0} - - { - props.user_verified? - - Verified as - "{user_verified_as}" - - - : - - - + + handleClick(verify) { + return (e) => { + e.preventDefault(); + const x = e.clientX / document.body.clientWidth; + const y = e.clientY / document.body.clientHeight; + this.props.onVerify(this.props.slug, verify, x, y); } -
- ); + } + + render() { + const props = this.props; + let user_verified_as = props.user_verified_as; + if (typeof user_verified_as === 'boolean') { + user_verified_as = user_verified_as? 'Yes': 'No'; + } + return ( +
+ + + {props.verified_count || 0} + + { + props.user_verified? + + Verified as + "{user_verified_as}" + + + : + + + + } +
+ ); + } } export default Verification; \ No newline at end of file diff --git a/app/src/frontend/building/data-components/year-data-entry.tsx b/app/src/frontend/building/data-components/year-data-entry.tsx index 6795c26a..54ad3f48 100644 --- a/app/src/frontend/building/data-components/year-data-entry.tsx +++ b/app/src/frontend/building/data-components/year-data-entry.tsx @@ -14,7 +14,7 @@ interface YearDataEntryProps { mode?: 'view' | 'edit' | 'multi-edit'; onChange?: (key: string, value: any) => void; - onVerify: (slug: string, verify: boolean) => void; + onVerify: (slug: string, verify: boolean, x: number, y: number) => void; user_verified: boolean; user_verified_as: string; verified_count: number; diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx index 711b12f6..4aedd69d 100644 --- a/app/src/frontend/building/data-container.tsx +++ b/app/src/frontend/building/data-container.tsx @@ -202,7 +202,7 @@ const withCopyEdit = (WrappedComponent: React.ComponentType) } } - async handleVerify(slug: string, verify: boolean) { + async handleVerify(slug: string, verify: boolean, x: number, y: number) { const verifyPatch = {}; if (verify) { verifyPatch[slug] = this.props.building[slug]; @@ -220,7 +220,12 @@ const withCopyEdit = (WrappedComponent: React.ComponentType) this.setState({error: data.error}); } else { if (verify) { - Confetti({zIndex: 2000}); + Confetti({ + angle: 60, + disableForReducedMotion: true, + origin: {x, y}, + zIndex: 2000 + }); } this.props.selectBuilding(this.props.building); } diff --git a/app/src/frontend/building/data-containers/category-view-props.ts b/app/src/frontend/building/data-containers/category-view-props.ts index d95f589c..38a4e88c 100644 --- a/app/src/frontend/building/data-containers/category-view-props.ts +++ b/app/src/frontend/building/data-containers/category-view-props.ts @@ -14,7 +14,7 @@ interface CategoryViewProps { copy: CopyProps; onChange: (key: string, value: any) => void; onLike: (like: boolean) => void; - onVerify: (slug: string, verify: boolean) => void; + onVerify: (slug: string, verify: boolean, x: number, y: number) => void; user_verified: any; user?: any; }