Make shelf buttons clickable and add to Home

webclient/src/Home.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams, useHistory } from 'react-router-dom';
 import moment from 'moment-timezone';
 import QRCode from 'react-qr-code';
 import './light.css';
-import { Container, Divider, Grid, Header, Icon, Image, Message, Popup, Segment, Table } from 'semantic-ui-react';
+import { Button, Container, Divider, Grid, Header, Icon, Image, Message, Popup, Segment, Table } from 'semantic-ui-react';
 import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
@@ -13,6 +13,7 @@ import { PayPalSubscribeDeal } from './PayPal.js';
 function MemberInfo(props) {
 	const user = props.user;
 	const member = user.member;
+	const history = useHistory();
 
 	const lastTrans = user.transactions?.slice(0,3);
 	const lastTrain = user.training?.sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).slice(0,3);
@@ -20,6 +21,11 @@ function MemberInfo(props) {
 
 	const unpaidTraining = user.training?.filter(x => x.attendance_status === 'Waiting for payment');
 
+	const handleStorageButton = (e, id) => {
+		e.preventDefault();
+		history.push('/storage/' + id);
+	};
+
 	return (
 		<div>
 			{member.protocoin < 0 && <Message error>
@@ -57,6 +63,24 @@ function MemberInfo(props) {
 								<Table.Cell>Protocoin:</Table.Cell>
 								<Table.Cell>₱&thinsp;{member.protocoin.toFixed(2)} <Link to='/paymaster'>[buy]</Link></Table.Cell>
 							</Table.Row>
+							<Table.Row>
+								<Table.Cell>Shelf:</Table.Cell>
+								<Table.Cell>
+									{user.storage.length ?
+										user.storage.map((x, i) =>
+											<Button
+												className='storage-button'
+												onClick={(e) => handleStorageButton(e, x.id)}
+												size='tiny'
+											>
+												{x.shelf_id}
+											</Button>
+										)
+									:
+										'None'
+									}
+								</Table.Cell>
+							</Table.Row>
 							<Table.Row>
 								<Table.Cell>Expiry:</Table.Cell>
 								<Table.Cell>{member.expire_date ? moment(member.expire_date).format('ll') : 'Unknown'}</Table.Cell>

webclient/src/Members.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams, useHistory } from 'react-router-dom';
 import './light.css';
 import { Button, Container, Dropdown, Grid, Header, Icon, Image, Input, Item, Segment, Table } from 'semantic-ui-react';
 import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } from './utils.js';
@@ -99,6 +99,7 @@ export function Members(props) {
 	const [search, setSearch] = useState(searchCache);
 	const [controller, setController] = useState(false);
 	const { token, user } = props;
+	const history = useHistory();
 
 	const makeRequest = ({loadPage, q, sort_key}) => {
 		let pageNum = 0;
@@ -165,6 +166,11 @@ export function Members(props) {
 		doSearch(q);
 	};
 
+	const handleStorageButton = (e, id) => {
+		e.preventDefault();
+		history.push('/storage/' + id);
+	};
+
 	useEffect(() => {
 		if (!responseCache) {
 			doSort('recently_vetted');
@@ -243,7 +249,7 @@ export function Members(props) {
 														x.member.storage.map((x, i) =>
 															<Button
 																className='storage-button'
-																onClick={(e) => e.preventDefault()}
+																onClick={(e) => handleStorageButton(e, x.id)}
 																size='tiny'
 															>
 																{x.shelf_id}

webclient/src/Storage.js

@@ -95,19 +95,19 @@ function EditStorage(props) {
 
 	return (
 		<div>
-			<Header size='medium'>Edit Storage</Header>
+			<Header size='medium'>Edit Storage {storage.shelf_id}</Header>
 
 			<Form onSubmit={handleSubmit}>
+				<Form.Button floated='right' onClick={saveAndNext} loading={loading} error={error.non_field_errors}>
+					Save and edit next
+				</Form.Button>
+
 				<StorageEditor token={token} input={input} setInput={setInput} error={error} />
 
 				<Form.Group widths='equal'>
 					<Form.Button loading={loading} error={error.non_field_errors}>
 						Save
 					</Form.Button>
-
-					<Form.Button floated='right' onClick={saveAndNext} loading={loading} error={error.non_field_errors}>
-						Save and edit next
-					</Form.Button>
 				</Form.Group>
 				{success && <div>Success!</div>}
 			</Form>

webclient/src/light.css

@@ -170,6 +170,7 @@ body {
 .ui.button.storage-button {
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
+	margin-top: 0.25rem;
 }
 
 .ui.tag.label {