@@ -338,19 +338,26 @@ class InvitesSend extends React.Component {
338338 }
339339
340340 render() {
341+
342+ const dif = (this.state.status === STATUS.DONE)
343+ ? this.state.targets.length
344+ : null;
345+
341346 const invitesAvailable = this.state.invitesAvailable.matchWith({
342347 Nothing: () => 'Loading...',
343348 Just: (invites) => {
344− return `You currently have ${invites.value} invitations left.`;
349+ const dia = dif ? `(-${dif})` : '';
350+ return `You currently have ${invites.value}${dia} invitations left.`;
345351 }
346352 });
347353
348354 const invitesSent = this.state.invited.matchWith({
349355 Nothing: () => (<>{'Loading...'}</>),
350356 Just: (invited) => {
357+ const dit = dif ? `(+${dif})` : '';
351358 return (<>
352359 {'Out of the '}
353− {invited.value.total}
360+ {invited.value.total + dit}
354361 {' invites you sent, '}
355362 {invited.value.accepted}
356363 {' have been accepted.'}
@@ -373,31 +380,88 @@ class InvitesSend extends React.Component {
373380 Just: msg => (<Warning className={'mt-8'}>{msg.value}</Warning>)
374381 });
375382
376− //TODO don't render inputs at all if STATUS.DONE
383+ let inputs;
384+ if (this.state.status === STATUS.DONE) {
385+ //TODO proper clickable router thing
386+ inputs = '<- Back to Home';
387+ } else {
377388
378− const inputDisabled = (this.state.status !== STATUS.INPUT);
389+ const inputDisabled = (this.state.status !== STATUS.INPUT);
390+
391+ const lessButton = (
392+ <Button
393+ prop-size={'s narrow'}
394+ className={'mt-8'}
395+ disabled={inputDisabled || this.state.targets.length === 1}
396+ onClick={this.removeTarget}
397+ >
398+ { '-' }
399+ </Button>
400+ );
379401
380− let targetInputs = [];
381− for (let i = 0; i < this.state.targets.length; i++) {
382− const target = this.state.targets[i];
383− let progress = target.status.matchWith({
384− Nothing: () => '',
385− Just: status => status.value
386− });
387− targetInputs.push(<>
388− <Input
389− value={ target.email }
390− onChange={ (value) => { this.handleEmailInput(i, value); } }
391− placeholder={'Email address'}
392− disabled={ inputDisabled }>
393− </Input>
394− {
395− target.hasReceived.matchWith({
396− Nothing: () => null,
397− Just: (has) => has.value ? <span>{'×'}</span> : <span>{'°'}</span>
398− })
399− }
400− { progress }
402+ const moreButton = (
403+ <Button
404+ prop-size={'s narrow'}
405+ className={'mt-8'}
406+ disabled={
407+ inputDisabled ||
408+ this.state.invitesAvailable.matchWith({
409+ Nothing: () => true,
410+ Just: (inv) => (inv.value <= this.state.targets.length)
411+ })
412+ }
413+ onClick={this.addTarget}
414+ >
415+ { '+' }
416+ </Button>
417+ );
418+
419+ let targetInputs = [];
420+ for (let i = 0; i < this.state.targets.length; i++) {
421+ const target = this.state.targets[i];
422+ let progress = target.status.matchWith({
423+ Nothing: () => '',
424+ Just: status => status.value
425+ });
426+ targetInputs.push(<>
427+ <Input
428+ value={ target.email }
429+ onChange={ (value) => { this.handleEmailInput(i, value); } }
430+ placeholder={'Email address'}
431+ disabled={ inputDisabled }>
432+ </Input>
433+ {
434+ target.hasReceived.matchWith({
435+ Nothing: () => null,
436+ Just: (has) => has.value ? <span>{'×'}</span> : <span>{'°'}</span>
437+ })
438+ }
439+ { progress }
440+ </>);
441+ }
442+
443+ const submitButton = (
444+ <Button
445+ prop-size={'xl wide'}
446+ className={'mt-8'}
447+ disabled={ (inputDisabled && (this.state.status !== STATUS.CAN_SEND))
448+ || !this.canSend() }
449+ onClick={ () => {
450+ if (this.state.status === STATUS.INPUT)
451+ this.generateInvites();
452+ if (this.state.status === STATUS.CAN_SEND)
453+ this.sendInvites();
454+ }}
455+ >
456+ { this.state.status }
457+ </Button>
458+ );
459+
460+ inputs = (<>
461+ { lessButton }
462+ { moreButton }
463+ { targetInputs }
464+ { submitButton }
401465 </>);
402466 }
403467
@@ -415,46 +479,7 @@ class InvitesSend extends React.Component {
415479
416480 { fundingMessage }
417481
418− <Button
419− prop-size={'s narrow'}
420− className={'mt-8'}
421− disabled={inputDisabled || this.state.targets.length === 1}
422− onClick={this.removeTarget}
423− >
424− { '-' }
425− </Button>
426−
427− <Button
428− prop-size={'s narrow'}
429− className={'mt-8'}
430− disabled={
431− inputDisabled ||
432− this.state.invitesAvailable.matchWith({
433− Nothing: () => true,
434− Just: (inv) => (inv.value <= this.state.targets.length)
435− })
436− }
437− onClick={this.addTarget}
438− >
439− { '+' }
440− </Button>
441−
442− { targetInputs }
443−
444− <Button
445− prop-size={'xl wide'}
446− className={'mt-8'}
447− disabled={ (inputDisabled && (this.state.status !== STATUS.CAN_SEND))
448− || !this.canSend() }
449− onClick={ () => {
450− if (this.state.status === STATUS.INPUT)
451− this.generateInvites();
452− if (this.state.status === STATUS.CAN_SEND)
453− this.sendInvites();
454− }}
455− >
456− { this.state.status }
457− </Button>
482+ { inputs }
458483
459484 </Col>
460485 </Row>