ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-21 23:47:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

contact-js: code styling and defensiveness

Browse Source
This commit is contained in:
Logan Allen 2019-12-16 17:27:13 -08:00
parent ed0ddfb97e
commit 41c05dac6e
3 changed files with 123 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/contacts/js/index.js
View File

File diff suppressed because one or more lines are too long

84
pkg/interface/contacts/src/js/components/contacts.js
View File

@ -6,53 +6,49 @@ export class Contacts extends Component {
render() {
const { props } = this;
let contactProp = ((props.contacts === undefined) || (props.contacts === null))
? {}
: props.contacts;
let contactProp = !!props.contacts ? props.contacts : {};
let responsiveClasses =
this.props.activeDrawer === "contacts" ? "db" : "dn db-ns";
props.activeDrawer === "contacts" ? "db" : "dn db-ns";
let contactItems = (Object.keys(contactProp))
.map((contact) => {
let path = props.path + "/" + contact;
let obj = props.contacts[contact];
let selected = (path === props.selectedContact);
return(
<ContactItem
key={contact}
ship={contact}
nickname={obj.nickname}
color={obj.color}
path={path}
selected={selected}
/>
)
})
let contactItems =
Object.keys(contactProp)
.map((contact) => {
let path = props.path + "/" + contact;
let obj = props.contacts[contact];
return (
<ContactItem
key={contact}
ship={contact}
nickname={obj.nickname}
color={obj.color}
path={path}
selected={path === props.selectedContact} />
);
});
//TODO if your contact in this group is completely empty, show prompt to "share details selectively", using your root identity as template
return (
<div className={`bn br-m br-l br-xl b--black lh-copy h-100 flex-shrink-0
flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative
overflow-hidden ` + responsiveClasses}>
<div className="pt3 pb6 pl3 f8 db dn-m dn-l dn-xl">
<Link to="/~contacts/">{"⟵ All Groups"}</Link>
</div>
<div className="overflow-y-scroll h-100">
<h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
{contactItems}
</div>
<div
className={"bg-white z2 bt b--gray4 absolute w-100 " +
((this.props.path.includes(window.ship))
? "dt"
: "dn")}
style={{ bottom: 0, height: 48 }}>
<Link to={"/~contacts/add" + props.path} className="dtc v-mid">
<p className="f9 pl4 black bn">Add New Member to Group</p>
</Link>
</div>
</div>
)
return (
<div className={`bn br-m br-l br-xl b--black lh-copy h-100 flex-shrink-0
flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative
overflow-hidden ` + responsiveClasses}>
<div className="pt3 pb6 pl3 f8 db dn-m dn-l dn-xl">
<Link to="/~contacts/">{"⟵ All Groups"}</Link>
</div>
<div className="overflow-y-scroll h-100">
<h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
{contactItems}
</div>
<div
className={"bg-white z2 bt b--gray4 absolute w-100 " +
((this.props.path.includes(window.ship))
? "dt"
: "dn")}
style={{ bottom: 0, height: 48 }}>
<Link to={"/~contacts/add" + props.path} className="dtc v-mid">
<p className="f9 pl4 black bn">Add New Member to Group</p>
</Link>
</div>
</div>
);
}
}

181
pkg/interface/contacts/src/js/components/root.js
View File

@ -23,21 +23,21 @@ export class Root extends Component {
}
setSpinner(spinner) {
this.setState({
spinner
});
this.setState({ spinner });
}
render() {
const { props, state } = this;
let contacts = !!state.contacts ? state.contacts : {};
return (
<BrowserRouter>
<div className="h-100 w-100">
<Route exact path="/~contacts"
render={ (props) => {
return (
<Skeleton activeDrawer="groups" contacts={state.contacts}>
<Skeleton activeDrawer="groups" contacts={contacts}>
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns"></div>
</Skeleton>
);
@ -47,158 +47,141 @@ export class Root extends Component {
return (
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
contacts={contacts}
activeDrawer="rightPanel">
<NewScreen
setSpinner={this.setSpinner}
api={api}
/>
<NewScreen setSpinner={this.setSpinner} api={api} />
</Skeleton>
);
}} />
<Route exact path="/~contacts/:ship/:group"
render={ (props) => {
let groupPath = `/${props.match.params.ship}/${props.match.params.group}`;
let groupPath =
`/${props.match.params.ship}/${props.match.params.group}`;
let groupContacts = contacts[groupPath] || {};
let contactList = state.contacts[groupPath];
return(
return (
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
contacts={contacts}
activeDrawer="contacts"
selected={groupPath}>
<Contacts
contacts={contactList}
activeDrawer="contacts"
path={groupPath} />
contacts={groupContacts}
activeDrawer="contacts"
path={groupPath} />
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns"></div>
</Skeleton>
)
);
}}
/>
<Route exact path="/~contacts/add/:ship/:group"
render={(props) => {
let groupPath = `/${props.match.params.ship}/${props.match.params.group}`;
let contactList = state.contacts[groupPath];
let groupPath =
`/${props.match.params.ship}/${props.match.params.group}`;
let groupContacts = contacts[groupPath] || {};
return (
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
contacts={contacts}
activeDrawer="rightPanel"
selected={groupPath}>
<Contacts
contacts={contactList}
contacts={groupContacts}
activeDrawer="rightPanel"
path={groupPath} />
<AddScreen
path={groupPath}
contacts={contactList}
contacts={groupContacts}
/>
</Skeleton>
)
}}
/>
<Route exact path="/~contacts/:ship/:group/:contact"
);
}} />
<Route exact path="/~contacts/:ship/:group/:contact"
render={ (props) => {
let groupPath = `/${props.match.params.ship}/${props.match.params.group}`;
let thisContactPath = `/${props.match.params.ship}/${props.match.params.group}/${props.match.params.contact}`
let contactList = state.contacts;
contactList = (contactList !== undefined)
? state.contacts[groupPath]
: {};
let contact = (contactList !== undefined)
? contactList[props.match.params.contact]
: {};
let groupPath =
`/${props.match.params.ship}/${props.match.params.group}`;
let shipPath =
`${groupPath}/${props.match.params.contact}`;
return(
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
activeDrawer="rightPanel"
selected={groupPath}>
<Contacts
activeDrawer="rightPanel"
contacts={contactList}
path={groupPath}
selectedContact={thisContactPath} />
<ContactCard
contact={contact}
path={groupPath}
ship={props.match.params.contact}
/>
</Skeleton>
)
}}
/>
<Route exact path="/~contacts/share/:ship/:group"
render={(props) => {
let groupPath = `/${props.match.params.ship}/${props.match.params.group}`;
let thisContactPath = `/${props.match.params.ship}/${props.match.params.group}/${window.ship}`
let contactList = state.contacts;
contactList = (contactList !== undefined)
? state.contacts[groupPath]
: {};
let contact = (contactList !== undefined)
? contactList[window.ship]
: {};
let defaultList = (contactList !== undefined)
? contactList["/~/default"]
: {};
let rootIdentity = (contactList !== undefined)
? defaultList[window.ship]
: {};
let groupContacts = contacts[groupPath] || {};
let contact =
(props.match.params.contact in groupContacts) ?
groupContacts[props.match.params.contact] : {};
return (
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
contacts={contacts}
activeDrawer="rightPanel"
selected={groupPath}>
<Contacts
activeDrawer="rightPanel"
contacts={groupContacts}
path={groupPath}
selectedContact={shipPath} />
<ContactCard
contact={contact}
path={groupPath}
ship={props.match.params.contact} />
</Skeleton>
);
}} />
<Route exact path="/~contacts/share/:ship/:group"
render={(props) => {
let groupPath =
`/${props.match.params.ship}/${props.match.params.group}`;
let shipPath = `${groupPath}/${window.ship}`;
let defaultContacts = contacts["/~/default"] || {};
let rootIdentity = defaultContacts[window.ship] || {};
let groupContacts = contacts[groupPath] || {};
let contact =
(window.ship in groupContacts) ?
groupContacts[window.ship] : {};
return (
<Skeleton
spinner={state.spinner}
contacts={contacts}
activeDrawer="rightPanel"
selected={groupPath}>
<Contacts
activeDrawer="rightPanel"
contacts={contactList}
contacts={groupContacts}
path={groupPath}
selectedContact={thisContactPath} />
selectedContact={shipPath} />
<ContactCard
contact={contact}
path={groupPath}
ship={window.ship}
share={true}
rootIdentity={rootIdentity}
/>
rootIdentity={rootIdentity} />
</Skeleton>
)
}}
/>
<Route exact path="/~contacts/me"
);
}} />
<Route exact path="/~contacts/me"
render={ (props) => {
let contactList = state.contacts["/~/default"];
let me = (contactList !== undefined)
? contactList[window.ship]
: {};
return(
let defaultContacts = contacts["/~/default"] || {};
let me = defaultContacts[window.ship] || {};
return (
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
contacts={contacts}
activeDrawer="rightPanel"
selected="me">
<ContactCard
<ContactCard
path="/~/default"
contact={me}
ship={window.ship}
/>
</Skeleton>
)
}}
/>
ship={window.ship} />
</Skeleton>
);
}} />
</div>
</BrowserRouter>
)
);
}
}