Throw confetti from verify button location.

app/src/frontend/building/data-components/verification.tsx

@@ -1,18 +1,35 @@
-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<VerificationProps> = (props) => {
+
+class Verification extends Component<VerificationProps, any> {
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this)
+    }
+
+    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';
@@ -35,10 +52,7 @@ const Verification: React.FunctionComponent<VerificationProps> = (props) => {
                             className="btn btn-danger"
                             title="Remove my verification"
                             disabled={!props.allow_verify}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            props.onVerify(props.slug, false)
-                        }}>
+                            onClick={this.handleClick(false)}>
                             Remove
                         </button>
                     </Fragment>
@@ -48,16 +62,14 @@ const Verification: React.FunctionComponent<VerificationProps> = (props) => {
                             className="btn btn-success"
                             title="Confirm that the current value is correct"
                             disabled={!props.allow_verify}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            props.onVerify(props.slug, true)
-                        }}>
+                            onClick={this.handleClick(true)}>
                             Verify
                         </button>
                     </Fragment>
             }
         </div>
         );
+    }
 }
 
 export default Verification;

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;

app/src/frontend/building/data-container.tsx

@@ -202,7 +202,7 @@ const withCopyEdit = (WrappedComponent: React.ComponentType<CategoryViewProps>)
             }
         }
 
-        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<CategoryViewProps>)
                     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);
                 }

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;
 }