partial #115

enable members to vouch for each other
enable admin to view vouching info on all users

webclient/src/Account.js

@@ -6,7 +6,9 @@ import 'react-image-crop/dist/ReactCrop.css';
 import './light.css';
 import { MembersDropdown } from './Members.js';
 import { Button, Container, Form, Grid, Header, Message, Segment } from 'semantic-ui-react';
+import './components/MembersList'
 import { requester, randomString } from './utils.js';
+import { MembersList } from './components/MembersList';
 
 function LogoutEverywhere(props) {
 	const { token } = props;
@@ -335,6 +337,19 @@ export function AccountForm(props) {
 	);
 };
 
+export function Sponsorship(props) {
+	const { user: { member } } = props;
+
+	return (
+		<div>
+			<Header size='medium'>My sponsors:</Header>
+			<MembersList list={ member.sponsored_by }/>
+			<Header size='medium'>I am sponsoring:</Header>
+			<MembersList list={ member.sponsorship }/>
+		</div>
+	);
+};
+
 export function BioNotesForm(props) {
 	const { token, user, refreshUser } = props;
 	const member = user.member;
@@ -401,6 +416,7 @@ export function Account(props) {
 			<Grid stackable columns={2}>
 				<Grid.Column>
 					<Segment padded><AccountForm {...props} /></Segment>
+					<Segment padded><Sponsorship {...props} /></Segment>
 				</Grid.Column>
 				<Grid.Column>
 					<Segment padded><BioNotesForm {...props} /></Segment>
@@ -410,4 +426,4 @@ export function Account(props) {
 			</Grid>
 		</Container>
 	);
-};
+};

webclient/src/AdminMembers.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Button, Checkbox, Dimmer, Form, Message, Header, Icon, Image, Segment, Table } from 'semantic-ui-react';
+import { Button, Checkbox, Dimmer, Form, Message, Header, Icon, Image, Segment, Table, List, ListItem } from 'semantic-ui-react';
 import moment from 'moment-timezone';
 import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { TrainingList } from './Training.js';
+import { MembersList } from './components/MembersList';
 
 function AdminCardDetail(props) {
 	const { token, result, card } = props;
@@ -615,6 +616,18 @@ export function AdminMemberInfo(props) {
 						</Table.Cell>
 					</Table.Row>
 
+					<Table.Row>
+						<Table.Cell>Vouched by:</Table.Cell>
+						<Table.Cell>
+							<MembersList list={ member.sponsored_by }/>
+						</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Vouches for:</Table.Cell>
+						<Table.Cell>
+							<MembersList list={ member.sponsorship }/>
+						</Table.Cell>
+					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Public Bio:</Table.Cell>
 					</Table.Row>
@@ -788,4 +801,4 @@ export function AdminMemberCertifications(props) {
 
 		</div>
 	);
-};
+};

webclient/src/App.js

@@ -334,7 +334,7 @@ function App() {
 									</Route>
 
 									<Route path='/members/:id'>
-										<MemberDetail token={token} user={user} />
+										<MemberDetail token={token} user={user} setUser={setUserCache}/>
 									</Route>
 									<Route path='/members'>
 										<Members token={token} user={user} />
@@ -374,4 +374,4 @@ function App() {
 	)
 };
 
-export default App;
+export default App;

webclient/src/Members.js

@@ -282,11 +282,16 @@ export function Members(props) {
 let resultCache = {};
 
 export function MemberDetail(props) {
-	const { id } = useParams();
+	const id = parseInt(useParams().id)
 	const [result, setResult] = useState(resultCache[id] || false);
 	const [refreshCount, refreshResult] = useReducer(x => x + 1, 0);
 	const [error, setError] = useState(false);
 	const { token, user } = props;
+	const member = result.member || false;
+	const memberFullName = [member.preferred_name, member.last_name].join(' ')
+	const isSponsoring = user.member.sponsorship?.find(m => m.id === id)
+	const isMe = user.member.id === id
+	const photo = member?.photo_large || member?.photo_small || false;
 
 	useEffect(() => {
 		requester('/search/'+id+'/', 'GET', token)
@@ -300,8 +305,23 @@ export function MemberDetail(props) {
 		});
 	}, [refreshCount]);
 
-	const member = result.member || false;
-	const photo = member?.photo_large || member?.photo_small || false;
+
+	function sponsorMember (value) {
+		return () => {
+			requester(`/sponsorship/${id}/offer/`, 'POST', token, { value })
+				.then(res => {
+					const _user = { ...user }
+					const sponsorship = _user.member.sponsorship
+					if (value) sponsorship.push({ id })
+					else sponsorship.splice(sponsorship.findIndex(m => m.id === id), 1)
+					props.setUser(_user)
+				})
+				.catch(err => {
+					console.log(err);
+					setError(true);
+				});
+		}
+	}
 
 	return (
 		<Container>
@@ -342,6 +362,8 @@ export function MemberDetail(props) {
 										<p className='bio-paragraph'>
 											{member.public_bio || 'None yet.'}
 										</p>
+										{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> }
+										{ !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
 									</React.Fragment>
 								}
 							</Grid.Column>
@@ -385,5 +407,4 @@ export function MemberDetail(props) {
 			}
 		</Container>
 	);
-};
-
+};

webclient/src/components/MembersList.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { List, ListItem } from 'semantic-ui-react';
+
+export function MembersList (p) {
+  const list = p.list
+
+  return (
+    <List>
+      { list.map(_member => (
+        <ListItem key={'member' + _member.id}>
+          <Link to={'/members/' + _member.id + '/'}>
+            {_member.preferred_name} {_member.last_name}
+          </Link>
+        </ListItem>
+      ))}
+    </List>
+  )
+}