adding contact status label

This commit is contained in:
Roland Osborne 2022-08-18 12:57:54 -07:00
parent 6d9b9fbc15
commit e95474d304
4 changed files with 20 additions and 5 deletions

View File

@ -4,7 +4,7 @@ import { CommentOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
export function BottomNav({ state, actions }) { export function BottomNav({ state, actions }) {
const tab = () => { const tab = () => {
if (state.profile) { if (state.profile || state.account) {
return 'profile'; return 'profile';
} }
if (state.cards || state.contact) { if (state.cards || state.contact) {

View File

@ -76,14 +76,14 @@ export function Contact({ close, guid, listing }) {
</div> </div>
)} )}
{ state.status === 'confirmed' && ( { state.status === 'saved' && (
<div class="controls"> <div class="controls">
<div class={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Request Connection</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Request Connection</div>
<div class={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Delete Contact</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Delete Contact</div>
</div> </div>
)} )}
{ state.status === 'disconnected' && ( { state.status === 'unsaved' && (
<div class="controls"> <div class="controls">
<div class={ state.buttonStatus } onClick={() => updateContact(actions.saveContact)}>Save Contact</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveContact)}>Save Contact</div>
<div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Save and Request</div> <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Save and Request</div>
@ -108,6 +108,10 @@ export function Contact({ close, guid, listing }) {
{ Image } { Image }
{ Details } { Details }
</div> </div>
<div class="footer">
<div class="status">Status: { state.status }</div>
</div>
</> </>
)} )}
{ state.init && state.display !== 'xlarge' && ( { state.init && state.display !== 'xlarge' && (
@ -125,6 +129,9 @@ export function Contact({ close, guid, listing }) {
</div> </div>
{ Image } { Image }
{ Details } { Details }
<div class="footer">
<div class="status">Status: { state.status }</div>
</div>
</div> </div>
)} )}
</ContactWrapper> </ContactWrapper>

View File

@ -203,5 +203,13 @@ export const ContactWrapper = styled.div`
opacity: 0.5; opacity: 0.5;
} }
} }
.footer {
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 16px;
}
` `

View File

@ -43,7 +43,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; status = cardDetail.status === 'confirmed' ? 'saved' : cardDetail.status;
} }
else if (listing) { else if (listing) {
handle = listing.handle; handle = listing.handle;
@ -53,7 +53,7 @@ export function useContact(guid, listing, close) {
name = listing.name; name = listing.name;
location = listing.location; location = listing.location;
description = listing.description; description = listing.description;
status = 'disconnected'; status = 'unsaved';
} }
else { else {
updateState({ removed: true }); updateState({ removed: true });