fix console errors

- no "==" operator
- no javascript in href
- no "div" tags nested in "p"
- replace "value" prop with "checked" for Form.Checkbox component

webclient/src/Admin.js

@@ -171,7 +171,7 @@ export function AdminHistory(props) {
 									<React.Fragment key={x.id}>
 										<Table.Row>
 											<Table.Cell>
-												<a href='javascript:;' onClick={() => setFocus(x.id)}>
+												<a onClick={() => setFocus(x.id)}>
 													{moment.utc(x.history_date).tz('America/Edmonton').format('YYYY-MM-DD')}
 												</a>
 											</Table.Cell>

webclient/src/AdminMembers.js

@@ -330,7 +330,7 @@ export function AdminMemberPause(props) {
 		<div>
 			<Header size='medium'>Pause / Unpause Membership</Header>
 
-			<p>
+			<div>
 				{result.member.paused_date ?
 					result.member.vetted_date && moment().diff(moment(result.member.paused_date), 'days') > 370 ?
 						<>
@@ -338,16 +338,16 @@ export function AdminMemberPause(props) {
 								{result.member.preferred_name} has been away for more than a year and will need to be re-vetted according to our
 								<a href='https://wiki.protospace.ca/Approved_policies/Membership' target='_blank' rel='noopener noreferrer'> policy</a>.
 							</p>
-							<p>
+							<div>
 								<Form.Checkbox
 									name='told1'
-									value={told1}
+									checked={told1}
 									label='Told member to get re-vetted'
 									required
 									onChange={(e, v) => setTold1(v.checked)}
 								/>
-							</p>
-							<p>
+							</div>
+							<div>
 								<Form.Checkbox
 									name='told2'
 									value={told2}
@@ -355,36 +355,36 @@ export function AdminMemberPause(props) {
 									required
 									onChange={(e, v) => setTold2(v.checked)}
 								/>
-							</p>
+							</div>
 
 							<Button onClick={handleUnpause} loading={loading} disabled={!told1 || !told2}>
 								Unpause
 							</Button>
 						</>
 					:
-						result.member.status == 'Expired Member' ?
+						result.member.status === 'Expired Member' ?
 							<>
 								<p>
 									{result.member.preferred_name} has expired due to lapse of payment.
 								</p>
-								<p>
+								<div>
 									<Form.Checkbox
 										name='told1'
-										value={told1}
+										checked={told1}
 										label='Member has paid any back-dues owed'
 										required
 										onChange={(e, v) => setTold1(v.checked)}
 									/>
-								</p>
-								<p>
+								</div>
+								<div>
 									<Form.Checkbox
 										name='told2'
-										value={told2}
+										checked={told2}
 										label='Recorded payment transaction on portal'
 										required
 										onChange={(e, v) => setTold2(v.checked)}
 									/>
-								</p>
+								</div>
 
 								<Button onClick={handleUnpause} loading={loading} disabled={!told1 || !told2}>
 									Unpause
@@ -398,31 +398,31 @@ export function AdminMemberPause(props) {
 					<>
 						<p>Pause members who are inactive, former, or on vacation.</p>
 
-						<p>
+						<div>
 							<Form.Checkbox
 								name='told1'
-								value={told1}
+								checked={told1}
 								label='Told member to stop any PayPal subscriptions'
 								required
 								onChange={(e, v) => setTold1(v.checked)}
 							/>
-						</p>
-						<p>
+						</div>
+						<div>
 							<Form.Checkbox
 								name='told2'
-								value={told2}
+								checked={told2}
 								label='Told member to clear any shelves'
 								required
 								onChange={(e, v) => setTold2(v.checked)}
 							/>
-						</p>
+						</div>
 
 						<Button onClick={handlePause} loading={loading} disabled={!told1 || !told2}>
 							Pause
 						</Button>
 					</>
 				}
-			</p>
+			</div>
 
 			{success && <div>Success!</div>}
 			{error && <p>Error, something went wrong.</p>}

webclient/src/Classes.js

@@ -354,7 +354,7 @@ export function Classes(props) {
 				</>
 			}
 
-			<p>
+			<div>
 				<Button
 					onClick={() => {
 						setSortByCourse(true);
@@ -389,7 +389,7 @@ export function Classes(props) {
 						onClick={() => setSearch('')}
 					/>
 				}
-			</p>
+			</div>
 
 			<p>Filter by tag:</p>
 

webclient/src/Home.js

@@ -63,7 +63,7 @@ function MemberInfo(props) {
 								<Table.Cell>Shelf:</Table.Cell>
 								<Table.Cell>
 									{user.storage.length ?
-										user.storage.sort((a, b) => a.location == 'member_shelves' ? -1 : 1).map((x, i) =>
+										user.storage.sort((a, b) => a.location === 'member_shelves' ? -1 : 1).map((x, i) =>
 											<StorageButton storage={x} />
 										)
 									:

webclient/src/Members.js

@@ -201,7 +201,7 @@ export function Members(props) {
 				Sort by{' '}
 				{Object.entries(memberSorts).map((x, i) =>
 					<React.Fragment key={x[0]}>
-						<a href='javascript:void(0)' onClick={() => doSort(x[0])}>{x[1]}</a>
+						<a onClick={() => doSort(x[0])}>{x[1]}</a>
 						{i < Object.keys(memberSorts).length - 1 && ', '}
 					</React.Fragment>
 				)}.

webclient/src/Paymaster.js

@@ -114,7 +114,6 @@ export function SendProtocoin(props) {
 
 export function Paymaster(props) {
 	const { token, user, refreshUser } = props;
-	const [pop, setPop] = useState('20.00');
 	const [locker, setLocker] = useState('5.00');
 	const [consumables, setConsumables] = useState('');
 	const [buyProtocoin, setBuyProtocoin] = useState('10.00');
@@ -214,14 +213,14 @@ export function Paymaster(props) {
 						/>
 					</div>
 
-					<p>
+					<div>
 						Please explain what you bought:<br/>
 						<Input
 							value={consumablesMemo}
 							maxLength={50}
 							onChange={(e, v) => setConsumablesMemo(v.value)}
 						/>
-					</p>
+					</div>
 
 					<PayPalPayNow
 						amount={consumables}
@@ -229,8 +228,6 @@ export function Paymaster(props) {
 						custom={JSON.stringify({ category: 'Consumables', member: user.member.id, memo: consumablesMemo })}
 					/>
 
-					<p/>
-
 					<PayWithProtocoin
 						token={token} user={user} refreshUser={refreshUser}
 						amount={consumables}
@@ -255,14 +252,14 @@ export function Paymaster(props) {
 						/>
 					</div>
 
-					<p>
+					<div>
 						Optional memo:<br/>
 						<Input
 							value={memo}
 							maxLength={50}
 							onChange={(e, v) => setMemo(v.value)}
 						/>
-					</p>
+					</div>
 
 					<PayPalPayNow
 						amount={donate}
@@ -308,4 +305,4 @@ export function Paymaster(props) {
 			</Grid>
 		</Container>
 	);
-};
+};

webclient/src/light.css

@@ -17,6 +17,10 @@ body {
 	margin: 0;
 }
 
+a {
+	cursor: pointer;
+}
+
 .hero {
 	padding-top: 1.5rem;
 	margin-bottom: 1.5rem;