231316e · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

Remove inputs once invites successful

231316eFang7 years ago

src/bridge/views/InvitesSend.js+90−65

compare with master

unifiedsplit

@@ -338,19 +338,26 @@ class InvitesSend extends React.Component {

338 }

339

340 render() {

341+

342+ const dif = (this.state.status === STATUS.DONE)

343+ ? this.state.targets.length

344+ : null;

345+

341 const invitesAvailable = this.state.invitesAvailable.matchWith({

346 const invitesAvailable = this.state.invitesAvailable.matchWith({

342 Nothing: () => 'Loading...',

347 Nothing: () => 'Loading...',

343 Just: (invites) => {

348 Just: (invites) => {

349+ const dia = dif ? `(-${dif})` : '';

344− return `You currently have ${invites.value} invitations left.`;

350+ return `You currently have ${invites.value}${dia} invitations left.`;

345 }

351 }

346 });

352 });

347

353

348 const invitesSent = this.state.invited.matchWith({

354 const invitesSent = this.state.invited.matchWith({

349 Nothing: () => (<>{'Loading...'}</>),

355 Nothing: () => (<>{'Loading...'}</>),

350 Just: (invited) => {

356 Just: (invited) => {

357+ const dit = dif ? `(+${dif})` : '';

351 return (<>

358 return (<>

352 {'Out of the '}

359 {'Out of the '}

353− {invited.value.total}

360+ {invited.value.total + dit}

354 {' invites you sent, '}

361 {' invites you sent, '}

355 {invited.value.accepted}

362 {invited.value.accepted}

356 {' have been accepted.'}

363 {' have been accepted.'}

@@ -373,31 +380,88 @@ class InvitesSend extends React.Component {

373 Just: msg => (<Warning className={'mt-8'}>{msg.value}</Warning>)

380 Just: msg => (<Warning className={'mt-8'}>{msg.value}</Warning>)

374 });

381 });

375

382

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 {

377

388

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+ );

379

401

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+

380− let targetInputs = [];

419+ let targetInputs = [];

381− for (let i = 0; i < this.state.targets.length; i++) {

420+ for (let i = 0; i < this.state.targets.length; i++) {

382− const target = this.state.targets[i];

421+ const target = this.state.targets[i];

383− let progress = target.status.matchWith({

422+ let progress = target.status.matchWith({

384− Nothing: () => '',

423+ Nothing: () => '',

385− Just: status => status.value

424+ Just: status => status.value

386− });

425+ });

387− targetInputs.push(<>

426+ targetInputs.push(<>

388− <Input

427+ <Input

389− value={ target.email }

428+ value={ target.email }

390− onChange={ (value) => { this.handleEmailInput(i, value); } }

429+ onChange={ (value) => { this.handleEmailInput(i, value); } }

391− placeholder={'Email address'}

430+ placeholder={'Email address'}

392− disabled={ inputDisabled }>

431+ disabled={ inputDisabled }>

393− </Input>

432+ </Input>

394− {

433+ {

395− target.hasReceived.matchWith({

434+ target.hasReceived.matchWith({

396− Nothing: () => null,

435+ Nothing: () => null,

397− Just: (has) => has.value ? <span>{'×'}</span> : <span>{'°'}</span>

436+ Just: (has) => has.value ? <span>{'×'}</span> : <span>{'°'}</span>

398− })

437+ })

399− }

438+ }

400− { progress }

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 }

401 </>);

465 </>);

402 }

466 }

403

467

@@ -415,46 +479,7 @@ class InvitesSend extends React.Component {

415

479

416 { fundingMessage }

480 { fundingMessage }

417

481

418− <Button

482+ { inputs }

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>

458

483

459 </Col>

484 </Col>

460 </Row>

485 </Row>