martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling status label

Browse Source
This commit is contained in:
Roland Osborne 2022-08-18 14:54:08 -07:00
parent e95474d304
commit d83892db9e
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
net/web/src/session/contact/Contact.jsx
View File

@ -62,14 +62,14 @@ export function Contact({ close, guid, listing }) {
</div> </div>
)} )}
{ state.status === 'requested' && ( { state.status === 'request received' && (
<div class="controls"> <div class="controls">
<div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Accept Connection</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Accept Connection</div>
<div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Ignore Request</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Ignore Request</div>
</div> </div>
)} )}
{ state.status === 'connecting' && ( { state.status === 'request sent' && (
<div class="controls"> <div class="controls">
<div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Cancel Request</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Cancel Request</div>
<div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
@ -130,7 +130,7 @@ export function Contact({ close, guid, listing }) {
{ Image } { Image }
{ Details } { Details }
<div class="footer"> <div class="footer">
<div class="status">Status: { state.status }</div> <div>contact { state.status }</div>
</div> </div>
</div> </div>
)} )}

1
net/web/src/session/contact/Contact.styled.js
View File

@ -210,6 +210,7 @@ export const ContactWrapper = styled.div`
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
padding-bottom: 16px; padding-bottom: 16px;
color: ${Colors.grey};
} }
` `

15
net/web/src/session/contact/useContact.hook.js
View File

@ -30,6 +30,19 @@ export function useContact(guid, listing, close) {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
} }
const statusMap = (status) => {
if (status === 'confirmed') {
return 'saved';
}
if (status === 'requested') {
return 'request received';
}
if (status === 'connecting') {
return 'request sent';
}
return status;
}
useEffect(() => { useEffect(() => {
let logo, name, location, description, handle, node, status, cardId; let logo, name, location, description, handle, node, status, cardId;
let contact = card.actions.getCardByGuid(guid); let contact = card.actions.getCardByGuid(guid);
@ -43,7 +56,7 @@ export function useContact(guid, listing, close) {
name = cardProfile.name; name = cardProfile.name;
location = cardProfile.location; location = cardProfile.location;
description = cardProfile.description; description = cardProfile.description;
status = cardDetail.status === 'confirmed' ? 'saved' : cardDetail.status; status = statusMap(cardDetail.status);
} }
else if (listing) { else if (listing) {
handle = listing.handle; handle = listing.handle;