Skip to content

Commit

Permalink
change share link button
Browse files Browse the repository at this point in the history
  • Loading branch information
@joannacheng21
joannacheng21 committed Mar 10, 2024
1 parent 14c5db9 commit 4cd960d
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 72 deletions.
59 changes: 30 additions & 29 deletions src/components/InvitationModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
faLink,
faXmark,
faPaperPlane,
faXmarkCircle,
faCircleCheck,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import axios, { AxiosError, AxiosResponse } from 'axios';
Expand Down Expand Up @@ -75,8 +77,7 @@ export function InvitationModalContent({
const [validMessage, setValidMessage] = useState('');
const [validClassName, setValidClassName] = useState('');
const [emailIcon, setEmailIcon] = useState('send');
const [linkMessage, setLinkMessage] = useState('');
const [linkMessageClassName, setLinkMessageClassName] = useState('');
const [linkButtonClassName, setLinkButtonClassName] = useState('');
const [linkLoading, setLinkLoading] = useState(false);
const [checkedSchedules, setCheckedSchedules] = useState([currentVersion]);
// const [invitationLink, setInvitationLink] = useState('');
Expand Down Expand Up @@ -222,24 +223,13 @@ export function InvitationModalContent({

const createLink = useCallback(async (): Promise<void> => {
setLinkLoading(true);
setLinkMessage('');
setLinkMessageClassName('');
setLinkButtonClassName('');
await getInvitationLink()
.then((response) => {
copy(response.data.link);
setLinkLoading(false);
setLinkMessage('');
setLinkMessageClassName('');
})
.catch((err) => {
const error = err as AxiosError;
setLinkMessageClassName('link-failure');
if (error.response) {
const apiError = error.response.data as ApiErrorResponse;
setLinkMessage(apiError.message);
return;
}
setLinkMessage('Error creating link. Please try again later.');
setLinkButtonClassName('link-failure');
softError(
new ErrorWithFields({
message: 'invite link creation failed',
Expand All @@ -252,6 +242,7 @@ export function InvitationModalContent({
},
})
);
throw err;
});
}, [
accountContext,
Expand Down Expand Up @@ -335,6 +326,7 @@ export function InvitationModalContent({

// show a fake loader when options change
useEffect(() => {
setLinkButtonClassName('');
setLinkLoading(true);
setTimeout(() => {
setLinkLoading(false);
Expand All @@ -344,7 +336,7 @@ export function InvitationModalContent({
return (
<div className={classes('invitation-modal-content', mobile && 'mobile')}>
<div className="top-block">
<h2>Share Schedule</h2>
<p className="modal-title">Share Schedule</p>
<p>
Enter an email associated with another user&apos;s GT-Scheduler
account & we&apos;ll send them an invite via email to import this
Expand Down Expand Up @@ -492,29 +484,42 @@ export function InvitationModalContent({
<button
type="button"
className={classes(
'copy-link-button',
linkLoading ? '' : 'link-generated',
'copy-link-button'
linkButtonClassName
)}
disabled={linkLoading}
onClick={(): void => {
createLink()
.then(() => {
setLinkMessage('Link copied!');
setLinkMessageClassName('link-success');
setLinkButtonClassName('link-success');
setLinkLoading(false);
})
.catch(() => {
setLinkMessage('Error copying link');
setLinkMessageClassName('link-failure');
setLinkButtonClassName('link-failure');
setLinkLoading(false);
});
}}
>
<div className="link-icon-container">
<div
className={classes('link-icon-container', linkButtonClassName)}
>
{linkLoading && <Spinner className="link-spinner" size="small" />}
{!linkLoading && (
<FontAwesomeIcon className="copy-link-icon" icon={faLink} />
{!linkLoading && linkButtonClassName === '' && (
<FontAwesomeIcon icon={faLink} />
)}
{!linkLoading && linkButtonClassName === 'link-success' && (
<FontAwesomeIcon icon={faCircleCheck} />
)}
{!linkLoading && linkButtonClassName === 'link-failure' && (
<FontAwesomeIcon icon={faXmarkCircle} />
)}
</div>
<text>Share with link</text>
<text className={linkButtonClassName}>
{linkButtonClassName === '' && 'Share with link'}
{linkButtonClassName === 'link-success' && 'Link copied!'}
{linkButtonClassName === 'link-failure' && 'Error occurred'}
</text>
</button>
<div className="expiration">
<div className="expiration-display">
Expand Down Expand Up @@ -544,7 +549,6 @@ export function InvitationModalContent({
className="expiration-option"
onClick={(): void => {
setSelectedExpiration(exp);
setLinkMessage('');
setExpirationDropdownVisible(false);
}}
>
Expand All @@ -554,9 +558,6 @@ export function InvitationModalContent({
</div>
</div>
</div>
<text className={classes('link-message', linkMessageClassName)}>
{linkMessage}
</text>
</div>
<RemoveInvitationModal
showRemove={removeInvitationOpen}
Expand Down
61 changes: 18 additions & 43 deletions src/components/InvitationModal/stylesheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,13 @@
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 15px 5px 15px;
padding: 10px 0px 5px 0px;

.modal-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}

p {
font-size: 0.9em;
Expand Down Expand Up @@ -153,8 +159,7 @@
flex-direction: row;
align-items: center;
gap: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding: 15px 0px 15px 2px;

.other-schedules-button {
display: flex;
Expand Down Expand Up @@ -233,6 +238,7 @@
@include card;
background-color: rgb(67, 67, 67);
padding: 4px 8px;
margin: 4px 8px 4px 0px;
height: 100%;
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -328,7 +334,7 @@
.modal-footer {
display: flex;
flex-direction: column;
padding-top: 18px;
padding-top: 24px;

.link-options {
display: flex;
Expand All @@ -355,21 +361,6 @@
margin-right: 5px;
}

@include dark {
color: $theme-light-background;
}

@include light {
color: $theme-dark-background;
}
}

.copy-link-button {
background: var(--theme-card-bg);
border-radius: 10px;
padding: 12px 15px;
border: none;

.copy-link-icon {
margin-right: 5px;
}
Expand All @@ -383,6 +374,14 @@
}
}

.link-success {
color: #22b531;
}

.link-failure {
color: #ff2121;
}

.expiration {
position: relative;

Expand Down Expand Up @@ -449,30 +448,6 @@
}
}
}

.link-message {
height: 18px;
}

.link-success {
align-self: flex-start;
text-align: start;
color: #22b531;
font-size: 12px;
font-weight: bold;
padding-top: 3px;
opacity: 1;
}

.link-failure {
align-self: flex-start;
text-align: start;
color: #ff2121;
font-size: 12px;
font-weight: bold;
padding-top: 3px;
opacity: 1;
}
}

.mobile.invitation-modal-content {
Expand Down

0 comments on commit 4cd960d

Please sign in to comment.