Import old photos and link to members

webclient/src/Home.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { requester } from './utils.js';
+import { staticUrl, requester } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 
 function DetailsForm(props) {
@@ -89,7 +89,10 @@ function MemberInfo(props) {
 		<div>
 			<Grid stackable>
 				<Grid.Column width={6}>
-					<Image src='https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' size='small' />
+					<img
+						className='photo-medium'
+						src={member.photo_medium ? staticUrl + '/' + member.photo_medium : 'nophoto.png'} size='small'
+					/>
 				</Grid.Column>
 
 				<Grid.Column width={10}>
@@ -182,7 +185,7 @@ export function Home(props) {
 				</Grid.Column>
 				<Grid.Column>
 					<Segment>
-						<Header size='medium'>Portal</Header>
+						<Header size='medium'>Home</Header>
 						<p>Welcome to the Protospace member portal! Here you can view member info, join classes, and manage your membership.</p>
 
 						<Header size='medium'>Quick Links</Header>

webclient/src/Members.js

@@ -1,20 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { requester } from './utils.js';
+import { staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
 export function Members(props) {
 	const [members, setMembers] = useState(false);
-	const [search, setSearch] = useState({seq: 0, q: ''});
+	const searchDefault = {seq: 0, q: ''};
+	const [search, setSearch] = useState(searchDefault);
 	const { token } = props;
 
 	useEffect(() => {
 		requester('/search/', 'POST', token, search)
 		.then(res => {
-			if (!members || res.seq > members.seq) {
+			if (!search.seq || res.seq > members.seq) {
 				setMembers(res);
 			}
 		})
@@ -29,19 +30,28 @@ export function Members(props) {
 
 			<Input autoFocus focus icon='search'
 				placeholder='Search...'
-				value={search.v}
+				value={search.q}
 				onChange={(e, v) => setSearch({seq: e.timeStamp, q: v.value})}
 				aria-label='search products'
+				style={{ marginRight: '0.5rem' }}
 			/>
 
+			{search.q.length ?
+				<Button
+					content='Clear'
+					onClick={() => setSearch(searchDefault)}
+				/> : ''
+			}
+
 			<Header size='medium'>
-				{search.q.length ? 'Search Results' : 'Recently Vetted'}
+				{search.q.length ? 'Search Results' : 'Newest Vetted Members'}
 			</Header>
 
 			{members ?
 				<Table basic='very'>
 					<Table.Header>
 						<Table.Row>
+							<Table.HeaderCell></Table.HeaderCell>
 							<Table.HeaderCell>Name</Table.HeaderCell>
 							<Table.HeaderCell>Status</Table.HeaderCell>
 							<Table.HeaderCell>Member Since</Table.HeaderCell>
@@ -52,6 +62,12 @@ export function Members(props) {
 						{members.results.length ?
 							members.results.map((x, i) =>
 								<Table.Row key={i}>
+									<Table.Cell>
+										<img
+											className='photo-small'
+											src={x.photo_small ? staticUrl + '/' + x.photo_small : 'nophoto.png'}
+										/>
+									</Table.Cell>
 									<Table.Cell>{x.preferred_name} {x.last_name}</Table.Cell>
 									<Table.Cell>{x.status}</Table.Cell>
 									<Table.Cell>{x.current_start_date}</Table.Cell>

webclient/src/light.css

@@ -29,3 +29,13 @@ body {
 .topPadding {
 	padding-top: 1rem;
 }
+
+.photo-small {
+	max-width: 80px;
+	max-height: 80px;
+}
+
+.photo-medium {
+	max-width: 150px;
+	max-height: 1500px;
+}

webclient/src/utils.js

@@ -1,13 +1,17 @@
-var siteUrl, apiUrl;
+var siteUrl, apiUrl, staticUrl;
 
 if (process.env.NODE_ENV !== 'production') {
 	siteUrl = 'http://spaceport.dns.t0.vc';
 	apiUrl = 'http://spaceport-api.dns.t0.vc';
+	staticUrl = 'http://spaceport-static.dns.t0.vc';
 } else {
 	siteUrl = 'https://' + window.location.hostname;
 	apiUrl = 'https://api.' + window.location.hostname;
+	staticUrl = 'https://static.' + window.location.hostname;
 }
 
+export { siteUrl, apiUrl, staticUrl };
+
 export const requester = (route, method, token, data) => {
 	let options = {headers: {}};