ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-11 08:55:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

groups: lint contact-card.js

Browse Source
This commit is contained in:
Matilde Park 2020-04-21 14:57:26 -04:00
parent 68961c484c
commit fa35038c2b
1 changed files with 166 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
pkg/interface/groups/src/js/components/lib/contact-card.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Sigil } from './icons/sigil'; import { Sigil } from './icons/sigil';
import { api } from '/api'; import { api } from '/api';
import { Route, Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { EditElement } from '/components/lib/edit-element'; import { EditElement } from '/components/lib/edit-element';
import { Spinner } from './icons/icon-spinner'; import { Spinner } from './icons/icon-spinner';
import { uxToHex } from '/lib/util'; import { uxToHex } from '/lib/util';
@ -19,7 +19,7 @@ export class ContactCard extends Component {
websiteToSet: null, websiteToSet: null,
notesToSet: null, notesToSet: null,
awaiting: false, awaiting: false,
type: "Saving to group" type: 'Saving to group'
}; };
this.editToggle = this.editToggle.bind(this); this.editToggle = this.editToggle.bind(this);
this.sigilColorSet = this.sigilColorSet.bind(this); this.sigilColorSet = this.sigilColorSet.bind(this);
@ -50,10 +50,9 @@ export class ContactCard extends Component {
} }
editToggle() { editToggle() {
const { props } = this;
let editSwitch = this.state.edit; let editSwitch = this.state.edit;
editSwitch = !editSwitch; editSwitch = !editSwitch;
this.setState({edit: editSwitch}); this.setState({ edit: editSwitch });
} }
emailToSet(value) { emailToSet(value) {
@ -82,172 +81,169 @@ export class ContactCard extends Component {
shipParser(ship) { shipParser(ship) {
switch (ship.length) { switch (ship.length) {
case 3: return "Galaxy"; case 3: return 'Galaxy';
case 6: return "Star"; case 6: return 'Star';
case 13: return "Planet"; case 13: return 'Planet';
case 56: return "Comet"; case 56: return 'Comet';
default: return "Unknown"; default: return 'Unknown';
} }
} }
setField(field) { setField(field) {
const { props, state } = this; const { props, state } = this;
let ship = "~" + props.ship; const ship = '~' + props.ship;
let emailTest = new RegExp('' const emailTest = new RegExp(String(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*/.source)
+ /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*/.source
+ /@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.source + /@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.source
); );
let phoneTest = new RegExp('' const phoneTest = new RegExp(String(/^\s*(?:\+?(\d{1,3}))?/.source)
+ /^\s*(?:\+?(\d{1,3}))?/.source
+ /([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/.source + /([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/.source
); );
let websiteTest = new RegExp('' const websiteTest = new RegExp(String(/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}/.source)
+ /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}/.source
+ /\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.source + /\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.source
); );
switch (field) { switch (field) {
case "color": { case 'color': {
let currentColor = (props.contact.color) ? props.contact.color : "000000"; let currentColor = (props.contact.color) ? props.contact.color : '000000';
currentColor = uxToHex(currentColor); currentColor = uxToHex(currentColor);
let hexExp = /([0-9A-Fa-f]{6})/ const hexExp = /([0-9A-Fa-f]{6})/;
let hexTest = hexExp.exec(this.state.colorToSet); const hexTest = hexExp.exec(this.state.colorToSet);
if (hexTest && (hexTest[1] !== currentColor) && !props.share) { if (hexTest && (hexTest[1] !== currentColor) && !props.share) {
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, `~${props.ship}`, { color: hexTest[1] }).then(() => { api.contactEdit(props.path, `~${props.ship}`, { color: hexTest[1] }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
} }
break; break;
} }
case "email": { case 'email': {
if ( if (
(state.emailToSet === "") || (state.emailToSet === '') ||
(state.emailToSet === props.contact.email) (state.emailToSet === props.contact.email)
) { ) {
return false; return false;
} }
let emailTestResult = emailTest.exec(state.emailToSet); const emailTestResult = emailTest.exec(state.emailToSet);
if (emailTestResult) { if (emailTestResult) {
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, ship, { email: state.emailToSet }).then(() => { api.contactEdit(props.path, ship, { email: state.emailToSet }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})) }));
} }
break; break;
} }
case "nickname": { case 'nickname': {
if ( if (
(state.nickNameToSet === "") || (state.nickNameToSet === '') ||
(state.nickNameToSet === props.contact.nickname) (state.nickNameToSet === props.contact.nickname)
) { ) {
return false; return false;
} }
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, ship, { nickname: state.nickNameToSet }).then(() => { api.contactEdit(props.path, ship, { nickname: state.nickNameToSet }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
break; break;
} }
case "notes": { case 'notes': {
if ( if (
(state.notesToSet === "") || (state.notesToSet === '') ||
(state.notesToSet === props.contact.notes) (state.notesToSet === props.contact.notes)
) { ) {
return false; return false;
} }
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, ship, { notes: state.notesToSet }).then(() => { api.contactEdit(props.path, ship, { notes: state.notesToSet }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
break; break;
} }
case "phone": { case 'phone': {
if ( if (
(state.phoneToSet === "") || (state.phoneToSet === '') ||
(state.phoneToSet === props.contact.phone) (state.phoneToSet === props.contact.phone)
) { ) {
return false; return false;
} }
let phoneTestResult = phoneTest.exec(state.phoneToSet); const phoneTestResult = phoneTest.exec(state.phoneToSet);
if (phoneTestResult) { if (phoneTestResult) {
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, ship, { phone: state.phoneToSet }).then(() => { api.contactEdit(props.path, ship, { phone: state.phoneToSet }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
} }
break; break;
} }
case "website": { case 'website': {
if ( if (
(state.websiteToSet === "") || (state.websiteToSet === '') ||
(state.websiteToSet === props.contact.website) (state.websiteToSet === props.contact.website)
) { ) {
return false; return false;
} }
let websiteTestResult = websiteTest.exec(state.websiteToSet); const websiteTestResult = websiteTest.exec(state.websiteToSet);
if (websiteTestResult) { if (websiteTestResult) {
this.setState({ awaiting: true, type: "Saving to group" }, (() => { this.setState({ awaiting: true, type: 'Saving to group' }, (() => {
api.contactEdit(props.path, ship, { website: state.websiteToSet }).then(() => { api.contactEdit(props.path, ship, { website: state.websiteToSet }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
} }
break; break;
} }
case "removeAvatar": { case 'removeAvatar': {
this.setState({ awaiting: true, type: "Removing from group" }, (() => { this.setState({ awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { avatar: null }).then(() => { api.contactEdit(props.path, ship, { avatar: null }).then(() => {
this.setState({ awaiting: false }); this.setState({ awaiting: false });
}); });
})) }));
break; break;
} }
case "removeEmail": { case 'removeEmail': {
this.setState({ emailToSet: "", awaiting: true, type: "Removing from group" }, (() => { this.setState({ emailToSet: '', awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { email: "" }).then(() => { api.contactEdit(props.path, ship, { email: '' }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})); }));
break; break;
} }
case "removeNickname": { case 'removeNickname': {
this.setState({ nicknameToSet: "", awaiting: true, type: "Removing from group" }, (() => { this.setState({ nicknameToSet: '', awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { nickname: "" }).then(() => { api.contactEdit(props.path, ship, { nickname: '' }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})); }));
break; break;
} }
case "removePhone": { case 'removePhone': {
this.setState({ phoneToSet: "", awaiting: true, type: "Removing from group" }, (() => { this.setState({ phoneToSet: '', awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { phone: "" }).then(() => { api.contactEdit(props.path, ship, { phone: '' }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})); }));
break; break;
} }
case "removeWebsite": { case 'removeWebsite': {
this.setState({ websiteToSet: "", awaiting: true, type: "Removing from group" }, (() => { this.setState({ websiteToSet: '', awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { website: "" }).then(() => { api.contactEdit(props.path, ship, { website: '' }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})); }));
break; break;
} }
case "removeNotes": { case 'removeNotes': {
this.setState({ notesToSet: "", awaiting: true, type: "Removing from group" }, (() => { this.setState({ notesToSet: '', awaiting: true, type: 'Removing from group' }, (() => {
api.contactEdit(props.path, ship, { notes: "" }).then(() => { api.contactEdit(props.path, ship, { notes: '' }).then(() => {
this.setState({awaiting: false}); this.setState({ awaiting: false });
}); });
})); }));
break; break;
@ -264,7 +260,7 @@ export class ContactCard extends Component {
shareWithGroup() { shareWithGroup() {
const { props, state } = this; const { props, state } = this;
let defaultVal = props.share ? { const defaultVal = props.share ? {
nickname: props.rootIdentity.nickname, nickname: props.rootIdentity.nickname,
email: props.rootIdentity.email, email: props.rootIdentity.email,
phone: props.rootIdentity.phone, phone: props.rootIdentity.phone,
@ -280,7 +276,7 @@ export class ContactCard extends Component {
color: props.contact.color color: props.contact.color
}; };
let contact = { const contact = {
nickname: this.pickFunction(state.nickNameToSet, defaultVal.nickname), nickname: this.pickFunction(state.nickNameToSet, defaultVal.nickname),
email: this.pickFunction(state.emailToSet, defaultVal.email), email: this.pickFunction(state.emailToSet, defaultVal.email),
phone: this.pickFunction(state.phoneToSet, defaultVal.phone), phone: this.pickFunction(state.phoneToSet, defaultVal.phone),
@ -289,26 +285,26 @@ export class ContactCard extends Component {
color: this.pickFunction(state.colorToSet, defaultVal.color), color: this.pickFunction(state.colorToSet, defaultVal.color),
avatar: null avatar: null
}; };
this.setState({awaiting: true, type: "Sharing with group"}, (() => { this.setState({ awaiting: true, type: 'Sharing with group' }, (() => {
api.contactView.share( api.contactView.share(
`~${props.ship}`, props.path, `~${window.ship}`, contact `~${props.ship}`, props.path, `~${window.ship}`, contact
).then(() => { ).then(() => {
props.history.push(`/~groups/view${props.path}/${window.ship}`) props.history.push(`/~groups/view${props.path}/${window.ship}`);
}); });
})) }));
} }
removeFromGroup() { removeFromGroup() {
const { props } = this; const { props } = this;
// share empty contact so that we can remove ourselves from group // share empty contact so that we can remove ourselves from group
// if we haven't shared yet // if we haven't shared yet
let contact = { const contact = {
nickname: "", nickname: '',
email: "", email: '',
phone: "", phone: '',
website: "", website: '',
notes: "", notes: '',
color: "000000", color: '000000',
avatar: null avatar: null
}; };
@ -316,20 +312,20 @@ export class ContactCard extends Component {
`~${props.ship}`, props.path, `~${window.ship}`, contact `~${props.ship}`, props.path, `~${window.ship}`, contact
); );
this.setState({awaiting: true, type: "Removing from group"}, (() => { this.setState({ awaiting: true, type: 'Removing from group' }, (() => {
api.contactHook.remove(props.path, `~${props.ship}`).then(() => { api.contactHook.remove(props.path, `~${props.ship}`).then(() => {
let destination = (props.ship === window.ship) const destination = (props.ship === window.ship)
? "" : props.path; ? '' : props.path;
this.setState({awaiting: false}); this.setState({ awaiting: false });
props.history.push(`/~groups${destination}`); props.history.push(`/~groups${destination}`);
}); });
})) }));
} }
renderEditCard() { renderEditCard() {
const { props, state } = this; const { props, state } = this;
// if this is our first edit in a new group, propagate from root identity // if this is our first edit in a new group, propagate from root identity
let defaultValue = props.share ? { const defaultValue = props.share ? {
nickname: props.rootIdentity.nickname, nickname: props.rootIdentity.nickname,
email: props.rootIdentity.email, email: props.rootIdentity.email,
phone: props.rootIdentity.phone, phone: props.rootIdentity.phone,
@ -345,58 +341,62 @@ export class ContactCard extends Component {
color: props.contact.color color: props.contact.color
}; };
let shipType = this.shipParser(props.ship); const shipType = this.shipParser(props.ship);
let defaultColor = !!defaultValue.color ? defaultValue.color : "000000"; let defaultColor = defaultValue.color ? defaultValue.color : '000000';
defaultColor = uxToHex(defaultColor); defaultColor = uxToHex(defaultColor);
let currentColor = !!state.colorToSet ? state.colorToSet : defaultColor; let currentColor = state.colorToSet ? state.colorToSet : defaultColor;
currentColor = uxToHex(currentColor); currentColor = uxToHex(currentColor);
let sigilColor = ""; let sigilColor = '';
let hasAvatar = const hasAvatar =
'avatar' in props.contact && props.contact.avatar !== "TODO"; 'avatar' in props.contact && props.contact.avatar !== 'TODO';
if (!hasAvatar) { if (!hasAvatar) {
sigilColor = ( sigilColor = (
<div className="tl mt4 mb4 w-auto ml-auto mr-auto" <div className="tl mt4 mb4 w-auto ml-auto mr-auto"
style={{ width: "fit-content" }}> style={{ width: 'fit-content' }}
>
<p className="f9 gray2 lh-copy">Sigil Color</p> <p className="f9 gray2 lh-copy">Sigil Color</p>
<textarea <textarea
className={"b--gray4 b--gray2-d black white-d bg-gray0-d f7 ba db pl2 " + className={'b--gray4 b--gray2-d black white-d bg-gray0-d f7 ba db pl2 ' +
"focus-b--black focus-b--white-d"} 'focus-b--black focus-b--white-d'}
onChange={this.sigilColorSet} onChange={this.sigilColorSet}
defaultValue={defaultColor} defaultValue={defaultColor}
key={"default" + defaultColor} key={'default' + defaultColor}
onKeyPress={ e => !e.key.match(/[0-9a-f]/i) ? e.preventDefault() : null} onKeyPress={ e => !e.key.match(/[0-9a-f]/i) ? e.preventDefault() : null}
onBlur={(() => this.setField("color"))} onBlur={(() => this.setField('color'))}
maxLength={6} maxLength={6}
style={{ style={{
resize: "none", resize: 'none',
height: 40, height: 40,
paddingTop: 10, paddingTop: 10,
width: 114 width: 114
}}> }}
>
</textarea> </textarea>
</div> </div>
); );
} }
let removeImage = hasAvatar ? ( const removeImage = hasAvatar ? (
<div> <div>
<button className="f9 black pointer db" <button className="f9 black pointer db"
onClick={() => this.setField("removeAvatar")}> onClick={() => this.setField('removeAvatar')}
>
Remove photo Remove photo
</button> </button>
</div> </div>
) : ""; ) : '';
let avatar = (hasAvatar) const avatar = (hasAvatar)
? <img className="dib h-auto" width={128} src={props.contact.avatar} /> ? <img className="dib h-auto" width={128} src={props.contact.avatar} />
: <Sigil : <Sigil
ship={props.ship} ship={props.ship}
size={128} size={128}
color={"#" + currentColor} color={'#' + currentColor}
key={"avatar" + currentColor} />; key={'avatar' + currentColor}
/>;
return ( return (
<div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl pb8"> <div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl pb8">
@ -414,38 +414,43 @@ export class ContactCard extends Component {
title="Nickname" title="Nickname"
defaultValue={defaultValue.nickname} defaultValue={defaultValue.nickname}
onChange={this.nickNameToSet} onChange={this.nickNameToSet}
onDeleteClick={() => this.setField("removeNickname")} onDeleteClick={() => this.setField('removeNickname')}
onSaveClick={() => this.setField("nickname")} onSaveClick={() => this.setField('nickname')}
showButtons={!props.share} /> showButtons={!props.share}
/>
<EditElement <EditElement
title="Email" title="Email"
defaultValue={defaultValue.email} defaultValue={defaultValue.email}
onChange={this.emailToSet} onChange={this.emailToSet}
onDeleteClick={() => this.setField("removeEmail")} onDeleteClick={() => this.setField('removeEmail')}
onSaveClick={() => this.setField("email")} onSaveClick={() => this.setField('email')}
showButtons={!props.share} /> showButtons={!props.share}
/>
<EditElement <EditElement
title="Phone" title="Phone"
defaultValue={defaultValue.phone} defaultValue={defaultValue.phone}
onChange={this.phoneToSet} onChange={this.phoneToSet}
onDeleteClick={() => this.setField("removePhone")} onDeleteClick={() => this.setField('removePhone')}
onSaveClick={() => this.setField("phone")} onSaveClick={() => this.setField('phone')}
showButtons={!props.share} /> showButtons={!props.share}
/>
<EditElement <EditElement
title="Website" title="Website"
defaultValue={defaultValue.website} defaultValue={defaultValue.website}
onChange={this.websiteToSet} onChange={this.websiteToSet}
onDeleteClick={() => this.setField("removeWebsite")} onDeleteClick={() => this.setField('removeWebsite')}
onSaveClick={() => this.setField("website")} onSaveClick={() => this.setField('website')}
showButtons={!props.share} /> showButtons={!props.share}
/>
<EditElement <EditElement
title="Notes" title="Notes"
defaultValue={defaultValue.notes} defaultValue={defaultValue.notes}
onChange={this.notesToSet} onChange={this.notesToSet}
onDeleteClick={() => this.setField("removeNotes")} onDeleteClick={() => this.setField('removeNotes')}
onSaveClick={() => this.setField("notes")} onSaveClick={() => this.setField('notes')}
resizable={true} resizable={true}
showButtons={!props.share} /> showButtons={!props.share}
/>
</div> </div>
</div> </div>
</div> </div>
@ -454,22 +459,23 @@ export class ContactCard extends Component {
renderCard() { renderCard() {
const { props } = this; const { props } = this;
let shipType = this.shipParser(props.ship); const shipType = this.shipParser(props.ship);
let currentColor = props.contact.color ? props.contact.color : "0x0"; const currentColor = props.contact.color ? props.contact.color : '0x0';
let hexColor = uxToHex(currentColor); const hexColor = uxToHex(currentColor);
let avatar = const avatar =
('avatar' in props.contact && props.contact.avatar !== "TODO") ? ('avatar' in props.contact && props.contact.avatar !== 'TODO') ?
<img className="dib h-auto" width={128} src={props.contact.avatar} /> : <img className="dib h-auto" width={128} src={props.contact.avatar} /> :
<Sigil <Sigil
ship={props.ship} ship={props.ship}
size={128} size={128}
color={"#" + hexColor} color={'#' + hexColor}
key={hexColor} />; key={hexColor}
/>;
let websiteHref = const websiteHref =
(props.contact.website && props.contact.website.includes("://")) ? (props.contact.website && props.contact.website.includes('://')) ?
props.contact.website : "http://" + props.contact.website; props.contact.website : 'http://' + props.contact.website;
return ( return (
<div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl"> <div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl">
@ -482,39 +488,41 @@ export class ContactCard extends Component {
<p className="f8">{shipType}</p> <p className="f8">{shipType}</p>
<hr className="mv8 gray4 b--gray4 bb-0 b--solid" /> <hr className="mv8 gray4 b--gray4 bb-0 b--solid" />
<div> <div>
{ !!props.contact.nickname ? ( { props.contact.nickname ? (
<div> <div>
<p className="f9 gray2">Nickname</p> <p className="f9 gray2">Nickname</p>
<p className="f8">{props.contact.nickname}</p> <p className="f8">{props.contact.nickname}</p>
</div> </div>
) : null ) : null
} }
{ !!props.contact.email ? ( { props.contact.email ? (
<div> <div>
<p className="f9 mt6 gray2">Email</p> <p className="f9 mt6 gray2">Email</p>
<p className="f8">{props.contact.email}</p> <p className="f8">{props.contact.email}</p>
</div> </div>
) : null ) : null
} }
{ !!props.contact.phone ? ( { props.contact.phone ? (
<div> <div>
<p className="f9 mt6 gray2">Phone</p> <p className="f9 mt6 gray2">Phone</p>
<p className="f8">{props.contact.phone}</p> <p className="f8">{props.contact.phone}</p>
</div> </div>
) : null ) : null
} }
{ !!props.contact.website ? ( { props.contact.website ? (
<div> <div>
<p className="f9 mt6 gray2">website</p> <p className="f9 mt6 gray2">website</p>
<a target="_blank" <a target="_blank"
rel="noopener noreferrer"
className="bb b--black f8" className="bb b--black f8"
href={websiteHref}> href={websiteHref}
>
{props.contact.website} {props.contact.website}
</a> </a>
</div> </div>
) : null ) : null
} }
{ !!props.contact.notes ? ( { props.contact.notes ? (
<div> <div>
<p className="f9 mt6 gray2">notes</p> <p className="f9 mt6 gray2">notes</p>
<p className="f8">{props.contact.notes}</p> <p className="f8">{props.contact.notes}</p>
@ -532,32 +540,33 @@ export class ContactCard extends Component {
const { props, state } = this; const { props, state } = this;
let editInfoText = let editInfoText =
state.edit ? "Finish" : "Edit"; state.edit ? 'Finish' : 'Edit';
if (props.share && state.edit) { if (props.share && state.edit) {
editInfoText = "Share"; editInfoText = 'Share';
} }
let ourOpt = (props.ship === window.ship) ? "dib" : "dn"; const ourOpt = (props.ship === window.ship) ? 'dib' : 'dn';
let adminOpt = const adminOpt =
((props.path.includes(`~${window.ship}/`)) || ((props.ship === window.ship) && ((props.path.includes(`~${window.ship}/`)) || ((props.ship === window.ship) &&
!(props.path.includes('/~/default')))) !(props.path.includes('/~/default'))))
? "dib" : "dn"; ? 'dib' : 'dn';
let meLink = (props.path === "/~/default") const meLink = (props.path === '/~/default')
? `/~groups` : `/~groups/detail${props.path}`; ? '/~groups' : `/~groups/detail${props.path}`;
let card = state.edit ? this.renderEditCard() : this.renderCard(); const card = state.edit ? this.renderEditCard() : this.renderCard();
return ( return (
<div className="w-100 h-100 overflow-hidden"> <div className="w-100 h-100 overflow-hidden">
<div <div
className={ className={
"flex justify-between w-100 bg-white bg-gray0-d " + 'flex justify-between w-100 bg-white bg-gray0-d ' +
"bb b--gray4 b--gray1-d " 'bb b--gray4 b--gray1-d '
}> }
>
<div className="f9 mv4 mh3 pt1 dib w-100"> <div className="f9 mv4 mh3 pt1 dib w-100">
<Link to={meLink}> <Link to={meLink}>
{"⟵"} {'⟵'}
</Link> </Link>
</div> </div>
<div className="flex"> <div className="flex">
@ -570,20 +579,22 @@ export class ContactCard extends Component {
} }
}} }}
className={ className={
`white-d bg-gray0-d mv4 mh3 f9 pa1 pointer flex-shrink-0 ` + 'white-d bg-gray0-d mv4 mh3 f9 pa1 pointer flex-shrink-0 ' +
ourOpt ourOpt
}> }
>
{editInfoText} {editInfoText}
</button> </button>
</div> </div>
<button <button
className={ className={
`bg-gray0-d mv4 mh3 pa1 f9 red2 pointer flex-shrink-0 ` + adminOpt 'bg-gray0-d mv4 mh3 pa1 f9 red2 pointer flex-shrink-0 ' + adminOpt
} }
onClick={this.removeFromGroup}> onClick={this.removeFromGroup}
>
{props.ship === window.ship {props.ship === window.ship
? "Leave Group" ? 'Leave Group'
: "Remove from Group"} : 'Remove from Group'}
</button> </button>
</div> </div>
<div className="h-100 w-100 overflow-x-hidden pb8 white-d">{card}</div> <div className="h-100 w-100 overflow-x-hidden pb8 white-d">{card}</div>