import React, { useState, useEffect } from 'react'; import { Link, useParams, useHistory } from 'react-router-dom'; import './light.css'; import { MembersDropdown } from './Members.js'; import { isAdmin, BasicTable, requester } from './utils.js'; import { Button, Container, Form, Grid, Header, Message, Segment, Table } from 'semantic-ui-react'; export function StorageEditor(props) { const { token, input, setInput, error } = props; const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleChange = (e) => handleValues(e, e.currentTarget); const makeProps = (name) => ({ name: name, onChange: handleChange, value: input[name] || '', error: error[name], }); return (
); }; function EditStorage(props) { const { storage, setStorage, token, refreshUser } = props; const [input, setInput] = useState(storage); const [error, setError] = useState(false); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const { id } = useParams(); const history = useHistory(); const handleSubmit = (e) => { if (loading) return; setLoading(true); setSuccess(false); const data = { ...input }; return requester('/storage/'+id+'/', 'PUT', token, data) .then(res => { setLoading(false); setSuccess(true); setError(false); setInput(res); setStorage(res); }) .catch(err => { setLoading(false); console.log(err); setError(err.data); }); }; const saveAndNext = (e) => { e.preventDefault(); handleSubmit(e) .then(res => { setStorage(false); history.push('/storage/' + (parseInt(id) + 1)); }); }; return (
Edit Storage {storage.shelf_id}
Save and edit next Save {success &&
Success!
}
); }; function StorageTable(props) { const { storage, user } = props; const locations = { member_shelves: 'Member Shelves', lockers: 'Lockers', large_project_storage: 'Large Project Storage', }; return ( Shelf ID: {storage.shelf_id} Owner: {storage.member_id ? {storage.member_name} : None } Location: {locations[storage.location]}

Aisle {storage.shelf_id[0]}
Column {storage.shelf_id[1]}
Row {storage.shelf_id[2]}

Memo: {storage.memo || 'None'}
); } export function StorageDetail(props) { const { token, user } = props; const [storage, setStorage] = useState(false); const [error, setError] = useState(false); const { id } = useParams(); useEffect(() => { requester('/storage/' + id + '/', 'GET', token) .then(res => { setStorage(res); setError(false); }) .catch(err => { console.log(err); setError(true); }); }, [id]); return ( {!error ? storage ?
Storage Location
{isAdmin(user) ? :
Report Storage

If there's anything wrong with this storage location please email the Protospace Directors:

directors@protospace.ca

Please include a link to this storage location and any relevant details.

}
:

Loading...

:

Error loading.

}
); }; export function StorageList(props) { const { token } = props; const [storageList, setStorageList] = useState(false); const [error, setError] = useState(false); useEffect(() => { requester('/storage/', 'GET', token) .then(res => { setStorageList(res.results); setError(false); }) .catch(err => { console.log(err); setError(true); }); }, []); return (
{!error ? storageList ? storageList.map(x =>

{x.shelf_id} - {!!x.member_id && {x.member_name} }

) :

Loading...

:

Error loading.

}
); }; export function ClaimShelfForm(props) { const { token, user, refreshUser } = props; const member = user.member; const [input, setInput] = useState({}); const [error, setError] = useState({}); const [loading, setLoading] = useState(false); const history = useHistory(); const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleChange = (e) => handleValues(e, e.currentTarget); const handleSubmit = (e) => { if (loading) return; setLoading(true); requester('/storage/claim/', 'POST', token, input) .then(res => { setError({}); refreshUser(); history.push('/'); }) .catch(err => { setLoading(false); console.log(err); setError(err.data); }); }; const makeProps = (name) => ({ name: name, onChange: handleChange, value: input[name] || '', error: error[name], }); return (

{user.username}

Submit ); }; export function ClaimShelf(props) { const { token, user } = props; const [error, setError] = useState(false); return (
Claim Member Shelf

Use this form to claim a member shelf.

Please make sure your name and contact info are visible on the shelf.

Use the Shelf ID visible on the corner label (A1A, A2B, etc.)

); };