a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Throw confetti from verify button location.

Browse Source
This commit is contained in:
Tom Russell 2020-08-07 14:48:45 +01:00
parent 54a1033eeb
commit ea9bbc81a6
4 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
app/src/frontend/building/data-components/verification.tsx
View File

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

2
app/src/frontend/building/data-components/year-data-entry.tsx
View File

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

9
app/src/frontend/building/data-container.tsx
View File

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

2
app/src/frontend/building/data-containers/category-view-props.ts
View File

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