Add table of all storage locations

webclient/src/Home.js

@@ -8,6 +8,7 @@ import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
 import { SignForm } from './Sign.js';
+import { StorageButton } from './Storage.js';
 import { PayPalSubscribeDeal } from './PayPal.js';
 
 function MemberInfo(props) {
@@ -21,11 +22,6 @@ 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>
@@ -67,14 +63,8 @@ function MemberInfo(props) {
 								<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>
+										user.storage.sort((a, b) => a.location == 'member_shelves' ? -1 : 1).map((x, i) =>
+											<StorageButton storage={x} />
 										)
 									:
 										<>None <Link to='/claimshelf'>[claim]</Link></>