Skip to content

N60 #859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Chinchuluun1029 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

N60 #859

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb87196
Handling success and error on Manage Sponsors *gracefully* (N-60)
Chinchuluun1029 Sep 29, 2021
b002e2e
Remove duplicate word
Chinchuluun1029 Sep 29, 2021
006862b
Rollback
Chinchuluun1029 Sep 29, 2021
bd2d1cd
Resolving lint error
Chinchuluun1029 Oct 5, 2021
ee0f255
Changing return type bc im dummy
Chinchuluun1029 Oct 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 82 additions & 78 deletions src/client/routes/manage/CreateSponsor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import styled from 'styled-components';
import * as EmailValidator from 'email-validator';
import { toast } from 'react-toastify';
import { Button } from '../../components/Buttons/Button';
import { SearchBox } from '../../components/Input/SearchBox';
import FloatingPopup from '../../components/Containers/FloatingPopup';
import { SmallCenteredText } from '../../components/Text/SmallCenteredText';
import { FlexRow } from '../../components/Containers/FlexContainers';
import {
useCreateSponsorMutation,
Expand All @@ -16,7 +16,6 @@ import {
TiersDocument,
} from '../../generated/graphql';
import { Spinner } from '../../components/Loading/Spinner';
import STRINGS from '../../assets/strings.json';

const StyledSelect = styled.select`
margin: 0.25rem 1rem 0.25rem 0rem;
Expand All @@ -40,10 +39,64 @@ const StyledOption = styled.option`
min-width: 10rem;
`;

const showToast = (message: string, isError: boolean = false) => {
toast.dismiss();
(isError ? toast.error : toast.success)(<p><em className="toast-emphasize">{message}</em></p>, {
position: 'bottom-right',
})
}

const CreateTier: React.FC = () => {
const [tierName, setTierName] = useState('');
const [permissions, setPermissions] = useState(['']);

const [createTier] = useCreateTierMutation({
variables: { input: { name: tierName, permissions } },
refetchQueries: [{ query: TiersDocument }],
awaitRefetchQueries: true,
});

const onCreateTier = async (): Promise<void> => {
try {
Comment thread
Chinchuluun1029 marked this conversation as resolved.
createTier()
.then(() => showToast(`Tier ${tierName} created successfully!`))
.catch(res => showToast(`Sorry. ${res.graphQLErrors[0].message} Please try again :)`, true))
.finally(() => {
setTierName("");
setPermissions([""]);
});
} catch (err) {
console.error(err);
}
};

return (
<>
<FlexRow justifyContent="flex-start">
<SearchBox
width="100%"
value={tierName}
placeholder="Tier Name"
onChange={e => setTierName(e.target.value)}
minWidth="15em"
/>
<SearchBox
width="100%"
value={permissions}
placeholder="Tier Permissions (nfc, hackertable, resume)"
onChange={e => setPermissions(e.target.value.split(','))}
minWidth="15em"
/>
<Button onClick={onCreateTier}>Create Tier</Button>
</FlexRow>
</>
);
};

const CreateCompany: React.FunctionComponent = (): JSX.Element => {
const [companyName, setCompanyName] = useState('');
const [tierId, setTierId] = useState('');
const [createCompanyMsg, setCreateCompanyMsg] = useState('');
const selectTierRef = useRef<HTMLSelectElement>(null);

const [createCompany] = useCreateCompanyMutation({
variables: { input: { name: companyName, tierId } },
Expand All @@ -56,12 +109,17 @@ const CreateCompany: React.FunctionComponent = (): JSX.Element => {

const onCreateCompany = async (): Promise<void> => {
try {
createCompany().catch(res => {
setCreateCompanyMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
});
Comment thread
Chinchuluun1029 marked this conversation as resolved.
createCompany()
.then(() => showToast(`Company ${companyName} created successfully!`))
.catch(res => showToast(`Sorry. ${res.graphQLErrors[0].message} Please try again :)`, true))
.finally(() => {
setCompanyName("");
if (selectTierRef && selectTierRef.current) {
selectTierRef.current.value = "";
}
})
} catch (err) {
console.error(err);
setCreateCompanyMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
}
};

Expand All @@ -78,7 +136,7 @@ const CreateCompany: React.FunctionComponent = (): JSX.Element => {
{loading || !data ? (
<Spinner />
) : (
<StyledSelect onChange={e => setTierId(e.target.value)}>
<StyledSelect onChange={e => setTierId(e.target.value)} ref={selectTierRef}>
<StyledOption value="" disabled selected>
Select Tier
</StyledOption>
Expand All @@ -89,59 +147,8 @@ const CreateCompany: React.FunctionComponent = (): JSX.Element => {
))}
</StyledSelect>
)}
<Button onClick={onCreateCompany}>Create</Button>
<Button onClick={onCreateCompany}>Create Company</Button>
</FlexRow>
<SmallCenteredText color={STRINGS.DARK_TEXT_COLOR} fontSize="1rem" margin="0.8em">
<span style={{ fontWeight: 'lighter' }}>{createCompanyMsg}</span>
</SmallCenteredText>
</>
);
};

const CreateTier: React.FC = () => {
const [tierName, setTierName] = useState('');
const [permissions, setPermissions] = useState(['']);
const [createTierMsg, setCreateTierMsg] = useState('');

const [createTier] = useCreateTierMutation({
variables: { input: { name: tierName, permissions } },
refetchQueries: [{ query: TiersDocument }],
awaitRefetchQueries: true,
});

const onCreateTier = async (): Promise<void> => {
try {
createTier().catch(res => {
setCreateTierMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
});
} catch (err) {
console.error(err);
setCreateTierMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
}
};

return (
<>
<FlexRow justifyContent="flex-start">
<SearchBox
width="100%"
value={tierName}
placeholder="Tier Name"
onChange={e => setTierName(e.target.value)}
minWidth="15em"
/>
<SearchBox
width="100%"
value={permissions}
placeholder="Tier Permissions (nfc, hackertable, resume)"
onChange={e => setPermissions(e.target.value.split(','))}
minWidth="15em"
/>
<Button onClick={onCreateTier}>Create</Button>
</FlexRow>
<SmallCenteredText color="#3F3356" fontSize="1rem" margin="0.8em">
<span style={{ fontWeight: 'lighter' }}>{createTierMsg}</span>
</SmallCenteredText>
</>
);
};
Expand All @@ -150,31 +157,31 @@ const CreateSponsor: React.FunctionComponent = (): JSX.Element => {
const [sponsorEmail, setSponsorEmail] = useState('');
const [sponsorName, setSponsorName] = useState('');
const [companyId, setCompanyId] = useState('');
const [createSponsorMsg, setCreateSponsorMsg] = useState('');
const { loading, data } = useCompaniesQuery();
const selectCompanyRef = useRef<HTMLSelectElement>(null);

const [createSponsor] = useCreateSponsorMutation({
variables: { input: { companyId, email: sponsorEmail, name: sponsorName } },
});

const onCreateSponsorEmail = async (): Promise<void> => {
// validate the email entered

if (EmailValidator.validate(sponsorEmail)) {
try {
console.log(sponsorEmail);
console.log(sponsorName);
createSponsor().catch(res => {
setCreateSponsorMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
});
// create sponsor in the database
// already created or not
createSponsor()
.then(() => showToast(`Email ${sponsorEmail} for sponsor ${sponsorName} created successfully!`))
.catch(res => showToast(`Sorry. ${res.graphQLErrors[0].message} Please try again :)`, true))
.finally(() => {
setSponsorEmail("");
setSponsorName("");
if (selectCompanyRef && selectCompanyRef.current) {
selectCompanyRef.current.value = "";
}
})
} catch (err) {
console.error(err);
setCreateSponsorMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
}
} else {
setCreateSponsorMsg(`Email '${sponsorEmail}' is not valid when creating sponsor`);
showToast(`Email ${sponsorEmail} is not valid for creating a sponsor`, true);
}
};

Expand All @@ -198,7 +205,7 @@ const CreateSponsor: React.FunctionComponent = (): JSX.Element => {
{loading || !data ? (
<Spinner />
) : (
<StyledSelect onChange={e => setCompanyId(e.target.value)}>
<StyledSelect onChange={e => setCompanyId(e.target.value)} ref={selectCompanyRef}>
<StyledOption value="" disabled selected>
Select Company
</StyledOption>
Expand All @@ -209,11 +216,8 @@ const CreateSponsor: React.FunctionComponent = (): JSX.Element => {
))}
</StyledSelect>
)}
<Button onClick={onCreateSponsorEmail}>Create</Button>
<Button onClick={onCreateSponsorEmail}>Create Sponsor Email</Button>
</FlexRow>
<SmallCenteredText color="#3F3356" fontSize="1rem" margin="0.8em">
<span style={{ fontWeight: 'lighter' }}>{createSponsorMsg}</span>
</SmallCenteredText>
</>
);
};
Expand Down