From ea9bbc81a65fbaf21e5e889329bfb2b8477a2b3f Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Fri, 7 Aug 2020 14:48:45 +0100
Subject: [PATCH] Throw confetti from verify button location.

---
 .../building/data-components/verification.tsx | 104 ++++++++++--------
 .../data-components/year-data-entry.tsx       |   2 +-
 app/src/frontend/building/data-container.tsx  |   9 +-
 .../data-containers/category-view-props.ts    |   2 +-
 4 files changed, 67 insertions(+), 50 deletions(-)

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<VerificationProps> = (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<VerificationProps, any> {
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this)
     }
-    return (
-    <div className="verification-container">
-        <span
-            className="verification-status"
-            title={`Verified by ${props.verified_count} ${(props.verified_count == 1)? "person": "people"}`}
-            >
-            <VerifyIcon />
-            {props.verified_count || 0}
-        </span>
-        {
-            props.user_verified?
-                <Fragment>
-                    Verified as
-                    "<span>{user_verified_as}</span>"
-                    <button
-                        className="btn btn-danger"
-                        title="Remove my verification"
-                        disabled={!props.allow_verify}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            props.onVerify(props.slug, false)
-                        }}>
-                        Remove
-                    </button>
-                </Fragment>
-            :
-                <Fragment>
-                    <button
-                        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)
-                        }}>
-                        Verify
-                    </button>
-                </Fragment>
+
+    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);
         }
-    </div>
-    );
+    }
+
+    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 (
+        <div className="verification-container">
+            <span
+                className="verification-status"
+                title={`Verified by ${props.verified_count} ${(props.verified_count == 1)? "person": "people"}`}
+                >
+                <VerifyIcon />
+                {props.verified_count || 0}
+            </span>
+            {
+                props.user_verified?
+                    <Fragment>
+                        Verified as
+                        "<span>{user_verified_as}</span>"
+                        <button
+                            className="btn btn-danger"
+                            title="Remove my verification"
+                            disabled={!props.allow_verify}
+                            onClick={this.handleClick(false)}>
+                            Remove
+                        </button>
+                    </Fragment>
+                :
+                    <Fragment>
+                        <button
+                            className="btn btn-success"
+                            title="Confirm that the current value is correct"
+                            disabled={!props.allow_verify}
+                            onClick={this.handleClick(true)}>
+                            Verify
+                        </button>
+                    </Fragment>
+            }
+        </div>
+        );
+    }
 }
 
 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<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);
                 }
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;
 }