@chakra-ui/core#useToast JavaScript Examples
The following examples show how to use
@chakra-ui/core#useToast.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Email.js From CubeMail with MIT License | 4 votes |
|
Email = () => {
const { message } = useContext(EmailContext);
const headers = message ? message.payload.headers : [];
const toast = useToast();
React.useEffect(() => {
if (message) {
addToFrame(message);
}
// eslint-disable-next-line
}, [message]);
const formatReplayData = (headers) => {
const replayTo =
getHeader(headers, "Reply-to") !== undefined
? getHeader(headers, "Reply-to")
: getHeader(headers, "From");
const replaySubject = getHeader(headers, "Subject");
const replayMsgId = getHeader(headers, "Message-ID");
return {
to: `${replayTo}`,
subject: `Re: ${replaySubject}`,
msgId: `${replayMsgId}`,
};
};
const handleTrashBtn = (userId, messageId) => {
return window.gapi.client.gmail.users.messages
.trash({
userId: userId,
id: messageId,
})
.then((resp) => {
if (resp.status === 200) {
toast({
title: "Message Deleted",
status: "error",
duration: 3000,
isClosable: true,
});
}
})
.catch((error) => {
console.log("error: ", error);
toast({
title: "An error occurred.",
description: "Unable to Delete Message.",
status: "warning",
duration: 3000,
isClosable: true,
});
});
};
const handleArchiveBtn = (ids, labelIds) => {
return window.gapi.client.gmail.users.messages
.batchModify({
userId: "me",
resource: {
ids: ids,
removeLabelIds: labelIds,
},
})
.then((resp) => {
if (resp.status === 204) {
toast({
title: "Message Archived",
description: "The Message is now in archive category.",
status: "success",
duration: 3000,
isClosable: true,
});
}
})
.catch((error) => {
console.log("error: ", error);
toast({
title: "An error occurred.",
description: "Unable to Archive Message.",
status: "error",
duration: 3000,
isClosable: true,
});
});
};
const addToFrame = (message) => {
let ifrm = document.getElementById("iframe").contentWindow.document;
ifrm.body.innerHTML = getMessageBody(message.payload);
};
const getMessageBody = (message) => {
const encodedBody =
typeof message.parts === "undefined"
? message.body.data
: getHTMLPart(message.parts);
return Base64.decode(encodedBody);
};
const getHTMLPart = (arr) => {
for (var x = 0; x <= arr.length; x++) {
if (typeof arr[x].parts === "undefined") {
if (arr[x].mimeType === "text/html") {
return arr[x].body.data;
}
} else {
return getHTMLPart(arr[x].parts);
}
}
return "";
};
return (
<Flex
direction='column'
wrap='no-wrap'
w='58%'
h='100%'
p='0.6rem 1rem'
bg='white'
color='black'
border='1px'
borderColor='gray.200'
borderTopRightRadius='md'
borderBottomRightRadius='md'
>
{!message ? (
<EmptyMail />
) : (
<Fragment>
{/* Header Buttons */}
<Flex justify='space-around' wrap='no-wrap' mb={2}>
<ReplyModel replayData={formatReplayData(headers)} />
<ForwardModel
forwardData={message}
getMessageBody={getMessageBody}
/>
<Button
rightIcon={MdArchive}
variantColor='blue'
variant='outline'
onClick={() => handleArchiveBtn([message.id], ["INBOX"])}
>
Archive
</Button>
<Button
rightIcon='delete'
variantColor='blue'
variant='outline'
onClick={() => handleTrashBtn("me", message.id)}
>
Delete
</Button>
</Flex>
{/* Mail Container */}
<Flex
className='mailContainer'
flexGrow='2'
direction='column'
wrap='no-wrap'
p={2}
>
<Box className='mailHeader' mb={2}>
<Text fontSize='lg' fontWeight='bold' color='gray.700' mb={1}>
{getHeader(headers, "Subject")}
</Text>
<Flex wrap='no-wrap' justify='flex-start'>
<Avatar
name={removeQuote(getHeader(headers, "From").split("<")[0])}
src='https://bit.ly/tioluwani-kolawole'
mr={4}
/>
<Box w='80%'>
<Text fontSize='md' color='gray.700'>
{getHeader(headers, "From")}
</Text>
<Text fontSize='sm' color='gray.500'>
{formatDate(getHeader(headers, "Date"))}
</Text>
</Box>
</Flex>
<Text fontSize='sm' color='gray.700' mt={1}>
{`To: ${getHeader(headers, "To")}`}
</Text>
</Box>
<Box className='mailBody' flexGrow='2'>
<AspectRatioBox ratio={16 / 9} h='100%'>
<Box as='iframe' id='iframe' title='messageBody'>
<p>Your browser does not support iframes.</p>
</Box>
</AspectRatioBox>
</Box>
</Flex>
</Fragment>
)}
</Flex>
);
}
Example #2
| Source File: ForwardModel.js From CubeMail with MIT License | 4 votes |
|
ForwardModel = ({ forwardData, getMessageBody }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const forwardTo = form.elements["emailTo"].value;
handleForwardMsg(
forwardTo,
forwardData.payload.headers,
getMessageBody(forwardData.payload)
);
onClose();
};
const handleForwardMsg = (forwardTo, headers, body) => {
let email = "";
email += `From: ${getHeader(headers, "From")} \r\n`;
email += `Date: ${getHeader(headers, "Date")} \r\n`;
email += `Subject: ${getHeader(headers, "Subject")} \r\n`;
email += `To: ${forwardTo} \r\n`;
email += `Content-Type: text/html; charset=UTF-8 \r\n`;
email += `\r\n ${body}`;
sendMessage("me", email, displayToast);
};
const sendMessage = (userId, email, callback) => {
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: userId,
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Email forwarded Successfully.",
status: "success",
duration: 3000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your mail.",
status: "error",
duration: 3000,
isClosable: true,
});
}
};
const getForwardHead = (headers) => {
let msg = "";
msg += "From: " + getHeader(headers, "From") + "\r\n";
msg += "Date: " + getHeader(headers, "Date") + "\r\n";
msg += "Subject: " + getHeader(headers, "Subject") + "\r\n";
msg += "To: " + getHeader(headers, "To") + "\r\n";
return msg;
};
return (
<Fragment>
<Button
rightIcon={MdArrowForward}
variantColor='blue'
variant='outline'
onClick={onOpen}
>
Forward
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Forward </ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
value={getHeader(forwardData.payload.headers, "Subject")}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
value={
"------Forward Message------\r\n" +
getForwardHead(forwardData.payload.headers)
}
readOnly
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
Example #3
| Source File: ReplyModel.js From CubeMail with MIT License | 4 votes |
|
ReplyModel = ({ replayData }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const emailTo = form.elements["emailTo"].value;
const subject = form.elements["subject"].value;
const replayMsgId = form.elements["reply-message-id"].value;
const message = form.elements["message"].value;
// Send Replay
sendMessage(
{
To: emailTo,
Subject: subject,
"In-Reply-To": replayMsgId,
},
message,
displayToast
);
onClose();
};
const sendMessage = (headers_obj, message, callback) => {
let email = "";
for (let header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: "me",
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Message Sent.",
status: "success",
duration: 3000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your replay.",
status: "error",
duration: 3000,
isClosable: true,
});
}
};
return (
<Fragment>
<Button
rightIcon={MdReplay}
variantColor='blue'
variant='outline'
onClick={onOpen}
>
Replay
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Replay </ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<Input
type='hidden'
id='reply-message-id'
value={replayData.msgId}
readOnly
/>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
value={replayData.to}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
value={replayData.subject}
readOnly
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
Example #4
| Source File: SendModel.js From CubeMail with MIT License | 4 votes |
|
SendModel = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const emailTo = form.elements["emailTo"].value;
const subject = form.elements["subject"].value;
const message = form.elements["message"].value;
// Send Simple Mail && Display Toast
sendMessage(
{
To: emailTo,
Subject: subject,
},
message,
displayToast
);
onClose();
};
const sendMessage = (headers_obj, message, callback) => {
let email = "";
for (var header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
const base64EncodedEmail = Base64.encodeURI(email);
const request = window.gapi.client.gmail.users.messages.send({
userId: "me",
resource: {
raw: base64EncodedEmail,
},
});
request.execute(callback);
};
const displayToast = ({ result }) => {
if (result.labelIds.indexOf("SENT") !== -1) {
toast({
title: "Message Sent.",
description: "We've Sent your email.",
status: "success",
duration: 9000,
isClosable: true,
});
} else {
toast({
title: "An error occurred.",
description: "Unable to sent your email.",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
return (
<Fragment>
<Button
w='100%'
h='48px'
leftIcon={BsPlusCircle}
borderRadius='20px'
variant='solid'
variantColor='blue'
onClick={onOpen}
>
New Message
</Button>
<Modal
isOpen={isOpen}
size='xl'
onClose={onClose}
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>New Message</ModalHeader>
<ModalCloseButton />
<form id='form' onSubmit={handleSubmit}>
<ModalBody>
<FormControl isRequired>
<Input
type='email'
id='emailTo'
placeholder='To'
aria-describedby='email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Input
type='text'
id='subject'
placeholder='Subject'
aria-describedby='subject-email-helper-text'
/>
</FormControl>
<FormControl isRequired>
<Textarea
id='message'
minH='280px'
size='xl'
resize='vertical'
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button type='reset' variantColor='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button type='submit' variantColor='green'>
Send
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
</Fragment>
);
}
