11026473598

Committed 25 Sep 2024 04:46AM UTC coverage: 31.81% (-0.08%) from 31.89%

Build # 11026473598

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9789 from ForumMagnum/master

Merge master into LW

Run Details

5073 of 41439 branches covered (12.24%)

Branch coverage included in aggregate %.

49 of 89 new or added lines in 14 files covered. (55.06%)

2 existing lines in 1 file now uncovered.

29478 of 67179 relevant lines covered (43.88%)

184.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

14.67

/packages/lesswrong/components/seasonal/petrovDay/OptIntoPetrovButton.tsx

import { useCreate } from '@/lib/crud/withCreate';
import { useMulti } from '@/lib/crud/withMulti';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import React, { useState } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { useCurrentUser } from '../../common/withUser';
import { useUpdateCurrentUser } from '../../hooks/useUpdateCurrentUser';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    ...theme.typography.commentStyle,
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: theme.palette.grey[100],
    paddingTop: theme.spacing.unit*2,
    paddingLeft: theme.spacing.unit*3,
    paddingRight: theme.spacing.unit*3,
    paddingBottom: theme.spacing.unit*2,
    borderRadius: "120px",
    marginBottom: 50,
    boxShadow: `0 0 10px ${theme.palette.grey[300]}`,
    [theme.breakpoints.up('md')]: {
      width: "calc(100% + 50px)",
      marginLeft: -25,
    },
  },
  karmaThreshold: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit*2,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  usersAboveThreshold: {
    marginTop: theme.spacing.unit*1.5,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    fontSize: "1.6rem"
  },
  yourKarma: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    fontSize: "1.6rem"
  },
  timer: {
    fontSize: '3rem',
    marginTop: 10
  },
  button: {
    height: 180,
    width: 180,
    '& img': {
      marginTop: 15,
      marginLeft: 15,
      width: 150,
      height: 150,
    },
    '&:hover': {
      '& $buttonHover': {
        display: "inline-block"
      },
      '& $buttonDefault': {
        display: "none"
      }
    }
  },
  buttonHover: {
    display: "none",
    cursor: "pointer",
  },
  buttonDefault: {
    cursor: "pointer"
  },
  launchButton: {
    width: 174,
  },
  inputSection: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    marginLeft: "auto",
    marginRight: "auto",
  },
  keyCode: {
    marginTop: theme.spacing.unit*2,
    marginBottom: theme.spacing.unit,
    border: theme.palette.border.faint,
    height: 50,
    width: "100%",
    borderRadius: 3,
    boxShadow: `0 0 10px ${theme.palette.grey[200]}`,
    padding: theme.spacing.unit*1.5
  },
  incorrectCode: {
    textAlign: "center",
    marginTop: theme.spacing.unit,
    fontSize: 12,
    color: theme.palette.grey[500]
  },
  info: {
    textAlign: "center",
    lineHeight: "1.1em",
    color: theme.palette.grey[600],
    fontSize: "1.1rem",
    marginTop: theme.spacing.unit*2,
    marginBottom: theme.spacing.unit*2,
    width: 300
  },
  optedIn: {
    marginLeft: "auto",
    marginRight: "auto",
  },
  title: {
    textAlign: "center",
    lineHeight: "2.8em",
    color: theme.palette.grey[600],
    fontSize: "2.5rem",
  },
  link: {
    marginTop: theme.spacing.unit*1.5,
    color: theme.palette.primary.main
  },
  error: {
    color: theme.palette.error.main,
    marginTop: theme.spacing.unit*2,
    textAlign: "center"
  }
})

const OptIntoPetrovButton = ({classes, refetch, alreadyLaunched }: {
  classes: ClassesType,
  refetch?: any,
  alreadyLaunched?: boolean,
}) => {
  const currentUser = useCurrentUser()
  const petrovPressedButtonDate = currentUser?.petrovPressedButtonDate
  const [pressed, setPressed] = useState(false) //petrovPressedButtonDate)
  const [confirmationCode, setConfirmationCode] = useState('')
  const [error, setError] = useState('')
  const [displayOptedIn, setDisplayOptedIn] = useState(false)

  const { results: petrovDayActions, refetch: refetchPetrovDayActions } = useMulti({
    collectionName: 'PetrovDayActions',
    fragmentName: 'PetrovDayActionInfo',
    terms: {
      view: 'getAction',
      userId: currentUser?._id,
      actionType: 'optIn',
      limit: 1
    },
    skip: !currentUser
  })
  const currentUserOptedIn = !!petrovDayActions?.length

  const optedIn = currentUserOptedIn || displayOptedIn
  
  const { LWTooltip, LoginPopupButton } = Components

  const updateCurrentUser = useUpdateCurrentUser();

  const { create: createPetrovDayAction } = useCreate({
    collectionName: 'PetrovDayActions',
    fragmentName: 'PetrovDayActionInfo'
  })
  
  const pressButton = () => {
    setPressed(true)
    void updateCurrentUser({
      petrovPressedButtonDate: new Date()
    });
  }

  const updateConfirmationCode = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    if (!alreadyLaunched) {
      setConfirmationCode(event.target.value)
    }
  }

  const updateOptIn = async () => {
    if (!currentUser) {
      setError('You must log in to opt in')
      return
    }
    if (confirmationCode === currentUser.displayName) {
      void createPetrovDayAction({  
        data: {
          userId: currentUser._id,
          actionType: 'optIn',
        }
      }) 
      setDisplayOptedIn(true)
      await refetchPetrovDayActions()
    } else {
      setError('Username does not match')
    }
  }

  const buttonPressedInLastWeek = (!!petrovPressedButtonDate && new Date().getTime() - new Date(petrovPressedButtonDate).getTime() < 7 * 24 * 60 * 60 * 1000)

  const renderButtonAsPressed = buttonPressedInLastWeek || pressed
    
  const beforePressMessage = <div className={classes.title}>Opt into Petrov Day</div>
  
  const afterPressMessage = <div>
    <p>Type your username and click "confirm" to register interest in the Petrov Day social deception game.</p>
    <p>A small number of people will be chosen as lead participants, the rest will be citizens.</p>
  </div>


  return <div className={classes.root}>
          {currentUser ? 
              <div className={classes.button}>
                {renderButtonAsPressed ? 
                  <LWTooltip title={<div><div>You have pressed the button.</div><div>You cannot un-press it.</div></div>} placement="right">
                    <img className={classes.buttonPressed} src={"../petrovButtonPressedDark.png"}/> 
                  </LWTooltip>
                  :
                  <LWTooltip title="Are you sure?" placement="right">
                    <div onClick={pressButton}>
                      <img className={classes.buttonDefault} src={"../petrovButtonUnpressedDefault.png"}/>
                      <img className={classes.buttonHover} src={"../petrovButtonUnpressedHover.png"}/>
                    </div>
                  </LWTooltip>
                }
              </div>
            :
            <div className={classes.button}>
              <LoginPopupButton title={"Log in if you'd like to push the button"}>
                <div>
                  <img className={classes.buttonDefault} src={"../petrovButtonUnpressedDefault.png"}/>
                  <img className={classes.buttonHover} src={"../petrovButtonUnpressedHover.png"}/>
                </div>
              </LoginPopupButton>
            </div>
          }
          {optedIn ? 
            <div className={classes.optedIn}>
              You have opted into Petrov Day
            </div> 
            : 
            <div className={classes.inputSection}>
              {renderButtonAsPressed && <TextField
                onChange={updateConfirmationCode}
                value={confirmationCode}
                placeholder={`Type your username`}
                margin="normal"
                variant="outlined"
              />}
              {!renderButtonAsPressed ? beforePressMessage : <div className={classes.info}>
                {afterPressMessage}
              </div>}
              {error && <div className={classes.error}>{error}</div>}
              {renderButtonAsPressed && <Button onClick={updateOptIn} className={classes.launchButton}>
                Confirm
              </Button>}
            </div>
          }
      </div>
}

const OptIntoPetrovButtonComponent = registerComponent('OptIntoPetrovButton', OptIntoPetrovButton, {styles});

declare global {
  interface ComponentTypes {
    OptIntoPetrovButton: typeof OptIntoPetrovButtonComponent
  }
}


1	import { useCreate } from '@/lib/crud/withCreate';	1✔
2	import { useMulti } from '@/lib/crud/withMulti';	1✔
3	import Button from '@material-ui/core/Button';	1✔
4	import TextField from '@material-ui/core/TextField';	1✔
5	import React, { useState } from 'react';	1✔
6	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
7	import { useCurrentUser } from '../../common/withUser';	1✔
8	import { useUpdateCurrentUser } from '../../hooks/useUpdateCurrentUser';	1✔
9
10	const styles = (theme: ThemeType): JssStyles => ({	1✔
11	root: {
12	...theme.typography.commentStyle,
13	width: "100%",
14	display: "flex",
15	alignItems: "center",
16	justifyContent: "space-between",
17	backgroundColor: theme.palette.grey[100],
18	paddingTop: theme.spacing.unit*2,
19	paddingLeft: theme.spacing.unit*3,
20	paddingRight: theme.spacing.unit*3,
21	paddingBottom: theme.spacing.unit*2,
22	borderRadius: "120px",
23	marginBottom: 50,
24	boxShadow: `0 0 10px ${theme.palette.grey[300]}`,
25	[theme.breakpoints.up('md')]: {
26	width: "calc(100% + 50px)",
27	marginLeft: -25,
28	},
29	},
30	karmaThreshold: {
31	marginTop: theme.spacing.unit,
32	marginBottom: theme.spacing.unit*2,
33	display: 'flex',
34	flexDirection: 'column',
35	alignItems: 'center'
36	},
37	usersAboveThreshold: {
38	marginTop: theme.spacing.unit*1.5,
39	display: 'flex',
40	flexDirection: 'column',
41	alignItems: 'center',
42	fontSize: "1.6rem"
43	},
44	yourKarma: {
45	display: 'flex',
46	flexDirection: 'column',
47	alignItems: 'center',
48	fontSize: "1.6rem"
49	},
50	timer: {
51	fontSize: '3rem',
52	marginTop: 10
53	},
54	button: {
55	height: 180,
56	width: 180,
57	'& img': {
58	marginTop: 15,
59	marginLeft: 15,
60	width: 150,
61	height: 150,
62	},
63	'&:hover': {
64	'& $buttonHover': {
65	display: "inline-block"
66	},
67	'& $buttonDefault': {
68	display: "none"
69	}
70	}
71	},
72	buttonHover: {
73	display: "none",
74	cursor: "pointer",
75	},
76	buttonDefault: {
77	cursor: "pointer"
78	},
79	launchButton: {
80	width: 174,
81	},
82	inputSection: {
83	display: "flex",
84	flexDirection: "column",
85	alignItems: "center",
86	marginLeft: "auto",
87	marginRight: "auto",
88	},
89	keyCode: {
90	marginTop: theme.spacing.unit*2,
91	marginBottom: theme.spacing.unit,
92	border: theme.palette.border.faint,
93	height: 50,
94	width: "100%",
95	borderRadius: 3,
96	boxShadow: `0 0 10px ${theme.palette.grey[200]}`,
97	padding: theme.spacing.unit*1.5
98	},
99	incorrectCode: {
100	textAlign: "center",
101	marginTop: theme.spacing.unit,
102	fontSize: 12,
103	color: theme.palette.grey[500]
104	},
105	info: {
106	textAlign: "center",
107	lineHeight: "1.1em",
108	color: theme.palette.grey[600],
109	fontSize: "1.1rem",
110	marginTop: theme.spacing.unit*2,
111	marginBottom: theme.spacing.unit*2,
112	width: 300
113	},
114	optedIn: {
115	marginLeft: "auto",
116	marginRight: "auto",
117	},
118	title: {
119	textAlign: "center",
120	lineHeight: "2.8em",
121	color: theme.palette.grey[600],
122	fontSize: "2.5rem",
123	},
124	link: {
125	marginTop: theme.spacing.unit*1.5,
126	color: theme.palette.primary.main
127	},
128	error: {
129	color: theme.palette.error.main,
130	marginTop: theme.spacing.unit*2,
131	textAlign: "center"
132	}
133	})
134
135	const OptIntoPetrovButton = ({classes, refetch, alreadyLaunched }: {	1✔
136	classes: ClassesType,
137	refetch?: any,
138	alreadyLaunched?: boolean,
139	}) => {
NEW 140	const currentUser = useCurrentUser()	×
NEW 141	const petrovPressedButtonDate = currentUser?.petrovPressedButtonDate	×
NEW 142	const [pressed, setPressed] = useState(false) //petrovPressedButtonDate)	×
NEW 143	const [confirmationCode, setConfirmationCode] = useState('')	×
NEW 144	const [error, setError] = useState('')	×
NEW 145	const [displayOptedIn, setDisplayOptedIn] = useState(false)	×
146
NEW 147	const { results: petrovDayActions, refetch: refetchPetrovDayActions } = useMulti({	×
148	collectionName: 'PetrovDayActions',
149	fragmentName: 'PetrovDayActionInfo',
150	terms: {
151	view: 'getAction',
152	userId: currentUser?._id,	×
153	actionType: 'optIn',
154	limit: 1
155	},
156	skip: !currentUser
157	})
NEW 158	const currentUserOptedIn = !!petrovDayActions?.length	×
159
NEW 160	const optedIn = currentUserOptedIn \|\| displayOptedIn	×
161
NEW 162	const { LWTooltip, LoginPopupButton } = Components	×
163
NEW 164	const updateCurrentUser = useUpdateCurrentUser();	×
165
NEW 166	const { create: createPetrovDayAction } = useCreate({	×
167	collectionName: 'PetrovDayActions',
168	fragmentName: 'PetrovDayActionInfo'
169	})
170
NEW 171	const pressButton = () => {	×
NEW 172	setPressed(true)	×
NEW 173	void updateCurrentUser({	×
174	petrovPressedButtonDate: new Date()
175	});
176	}
177
NEW 178	const updateConfirmationCode = (event: React.ChangeEvent<HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement>) => {	×
NEW 179	if (!alreadyLaunched) {	×
NEW 180	setConfirmationCode(event.target.value)	×
181	}
182	}
183
NEW 184	const updateOptIn = async () => {	×
NEW 185	if (!currentUser) {	×
NEW 186	setError('You must log in to opt in')	×
NEW 187	return	×
188	}
NEW 189	if (confirmationCode === currentUser.displayName) {	×
NEW 190	void createPetrovDayAction({	×
191	data: {
192	userId: currentUser._id,
193	actionType: 'optIn',
194	}
195	})
NEW 196	setDisplayOptedIn(true)	×
NEW 197	await refetchPetrovDayActions()	×
198	} else {
NEW 199	setError('Username does not match')	×
200	}
201	}
202
NEW 203	const buttonPressedInLastWeek = (!!petrovPressedButtonDate && new Date().getTime() - new Date(petrovPressedButtonDate).getTime() < 7 * 24 * 60 * 60 * 1000)	×
204
NEW 205	const renderButtonAsPressed = buttonPressedInLastWeek \|\| pressed	×
206
NEW 207	const beforePressMessage = <div className={classes.title}>Opt into Petrov Day</div>	×
208
NEW 209	const afterPressMessage = <div>	×
210	<p>Type your username and click "confirm" to register interest in the Petrov Day social deception game.</p>
211	<p>A small number of people will be chosen as lead participants, the rest will be citizens.</p>
212	</div>
213
214
NEW 215	return <div className={classes.root}>	×
216	{currentUser ?
217	<div className={classes.button}>	×
218	{renderButtonAsPressed ?
219	<LWTooltip title={<div><div>You have pressed the button.</div><div>You cannot un-press it.</div></div>} placement="right">	×
220	<img className={classes.buttonPressed} src={"../petrovButtonPressedDark.png"}/>
221	</LWTooltip>
222	:
223	<LWTooltip title="Are you sure?" placement="right">
224	<div onClick={pressButton}>
225	<img className={classes.buttonDefault} src={"../petrovButtonUnpressedDefault.png"}/>
226	<img className={classes.buttonHover} src={"../petrovButtonUnpressedHover.png"}/>
227	</div>
228	</LWTooltip>
229	}
230	</div>
231	:
232	<div className={classes.button}>
233	<LoginPopupButton title={"Log in if you'd like to push the button"}>
234	<div>
235	<img className={classes.buttonDefault} src={"../petrovButtonUnpressedDefault.png"}/>
236	<img className={classes.buttonHover} src={"../petrovButtonUnpressedHover.png"}/>
237	</div>
238	</LoginPopupButton>
239	</div>
240	}
241	{optedIn ?
242	<div className={classes.optedIn}>	×
243	You have opted into Petrov Day
244	</div>
245	:
246	<div className={classes.inputSection}>
247	{renderButtonAsPressed && <TextField	×
248	onChange={updateConfirmationCode}
249	value={confirmationCode}
250	placeholder={`Type your username`}
251	margin="normal"
252	variant="outlined"
253	/>}
254	{!renderButtonAsPressed ? beforePressMessage : <div className={classes.info}>	×
255	{afterPressMessage}
256	</div>}
257	{error && <div className={classes.error}>{error}</div>}	×
258	{renderButtonAsPressed && <Button onClick={updateOptIn} className={classes.launchButton}>	×
259	Confirm
260	</Button>}
261	</div>
262	}
263	</div>
264	}
265
266	const OptIntoPetrovButtonComponent = registerComponent('OptIntoPetrovButton', OptIntoPetrovButton, {styles});	1✔
267
268	declare global {
269	interface ComponentTypes {
270	OptIntoPetrovButton: typeof OptIntoPetrovButtonComponent
271	}
272	}
273

ForumMagnum / ForumMagnum / 11026473598

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous