Add UI for pausing and unpausing members

webclient/src/Admin.js

@@ -170,13 +170,19 @@ function AdminCardDetail(props) {
 export function AdminMemberCards(props) {
 	const { token, result, refreshResult } = props;
 	const cards = result.cards;
-	const [dimmed, setDimmed] = useState(result.member.paused_date && cards.length);
+	const startDimmed = Boolean(result.member.paused_date && cards.length);
+	const [dimmed, setDimmed] = useState(startDimmed);
 	const [input, setInput] = useState({ active_status: 'card_active' });
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [success, setSuccess] = useState(false);
 	const { id } = useParams();
 
+	useEffect(() => {
+		const startDimmed = Boolean(result.member.paused_date && cards.length);
+		setDimmed(startDimmed);
+	}, [result.member]);
+
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
@@ -271,6 +277,77 @@ export function AdminMemberCards(props) {
 	);
 };
 
+export function AdminMemberPause(props) {
+	const { token, result, refreshResult } = props;
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const [yousure, setYousure] = useState(false);
+	const { id } = useParams();
+
+	useEffect(() => {
+		setLoading(false);
+	}, [result.member]);
+
+	const handlePause = (e) => {
+		if (yousure) {
+			setLoading(true);
+			setSuccess(false);
+			requester('/members/' + id + '/pause/', 'GET', token)
+			.then(res => {
+				setYousure(false);
+				setSuccess(true);
+				setError(false);
+				refreshResult();
+			})
+			.catch(err => {
+				setLoading(false);
+				console.log(err);
+				setError(true);
+			});
+		} else {
+			setYousure(true);
+		}
+	};
+
+	const handleUnpause = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		requester('/members/' + id + '/unpause/', 'GET', token)
+		.then(res => {
+			setSuccess(true);
+			setError(false);
+			refreshResult();
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(true);
+		});
+	};
+
+	return (
+		<div>
+			<Header size='medium'>Pause / Unpause Membership</Header>
+
+			<p>Pause members who are inactive, former, or on vacation.</p>
+
+			{success && <p>Success!</p>}
+			{error && <p>Error, something went wrong.</p>}
+
+			{result.member.paused_date ?
+				<Button onClick={handleUnpause} loading={loading}>
+					Unpause
+				</Button>
+			:
+				<Button onClick={handlePause} loading={loading}>
+					{yousure ? 'You Sure?' : 'Pause'}
+				</Button>
+			}
+		</div>
+	);
+};
+
 export function AdminMemberForm(props) {
 	const { token, result, refreshResult } = props;
 	const [input, setInput] = useState(result.member);
@@ -279,6 +356,10 @@ export function AdminMemberForm(props) {
 	const [success, setSuccess] = useState(false);
 	const { id } = useParams();
 
+	useEffect(() => {
+		setInput(result.member);
+	}, [result.member]);
+
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);

webclient/src/Members.js

@@ -4,7 +4,7 @@ import './light.css';
 import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
-import { AdminMemberInfo, AdminMemberForm, AdminMemberCards, AdminTransactions } from './Admin.js';
+import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminTransactions } from './Admin.js';
 
 export function Members(props) {
 	const [response, setResponse] = useState(false);
@@ -127,6 +127,10 @@ export function MemberDetail(props) {
 								{isAdmin(user) && <Segment padded>
 									<AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
 								</Segment>}
+
+								{isAdmin(user) && <Segment padded>
+									<AdminMemberPause result={result} refreshResult={refreshResult} {...props} />
+								</Segment>}
 							</Grid.Column>
 						</Grid>