-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refact: refact modal component (#15)
- Loading branch information
Showing
5 changed files
with
137 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { Box, IconButton, makeStyles, Snackbar, Typography } from "@material-ui/core"; | ||
| import { AxiosError } from "axios"; | ||
| import { useModal } from "contexts"; | ||
| import dayjs from "dayjs"; | ||
| import relativeTime from "dayjs/plugin/relativeTime"; | ||
| import React, { useState } from "react"; | ||
| import CopyToClipboard from "react-copy-to-clipboard"; | ||
| import deleteSecret from "services/deleteSecret"; | ||
| import LinkIcon from "@material-ui/icons/Link"; | ||
| import { ModalType } from "utils/enums/modal"; | ||
| import Button from "./Button"; | ||
| import Alert, { Color } from "@material-ui/lab/Alert"; | ||
| import { generateSecretLink } from "utils/utils"; | ||
| import Modal from "./Modal"; | ||
| dayjs.extend(relativeTime); | ||
|
|
||
| const useStyles = makeStyles(() => ({ | ||
| ellipsis: { | ||
| whiteSpace: "nowrap", | ||
| textOverflow: "ellipsis", | ||
| display: "block", | ||
| overflow: "scroll", | ||
| scrollbarWidth: "none", | ||
| msOverflowStyle: "none", | ||
| "&::-webkit-scrollbar": { | ||
| display: "none" | ||
| } | ||
| } | ||
| })); | ||
|
|
||
| const CreateSecretModal: React.FC = () => { | ||
| const classes = useStyles(); | ||
| const { state, dispatch } = useModal(); | ||
| const [alert, setAlert] = useState<{ open: boolean; severity?: Color; message?: string }>({ | ||
| open: false, | ||
| severity: "success", | ||
| message: "" | ||
| }); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const secretLink = typeof state.modalProps?.token === "string" ? generateSecretLink(state.modalProps?.token) : ""; | ||
| const handleCopy = () => setAlert({ open: true, message: "Secret link copied" }); | ||
| const handleAlertClose = () => setAlert({ open: false }); | ||
|
|
||
| const handleDeleteSecret = async () => { | ||
| if (window.confirm("Do you really want to remove the secret message ?")) { | ||
| if (state.modalProps?.token) { | ||
| setIsLoading(true); | ||
| deleteSecret(state.modalProps?.token).then( | ||
| () => { | ||
| setIsLoading(false); | ||
| setAlert({ open: true, message: "Secret message destroyed" }); | ||
| dispatch({ type: ModalType.HIDE_MODAL }); | ||
| }, | ||
| (error: AxiosError) => { | ||
| setIsLoading(false); | ||
| setAlert({ open: true, message: error.message, severity: "error" }); | ||
| } | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal> | ||
| <Box> | ||
| <Typography variant="h5" align="center" gutterBottom> | ||
| Secret created successfully | ||
| </Typography> | ||
| <Typography align="center" gutterBottom> | ||
| You can find your secret on this link below | ||
| </Typography> | ||
| <Typography align="center" gutterBottom> | ||
| It expires{" "} | ||
| <span style={{ color: "red", fontWeight: "bold" }}>{dayjs(state.modalProps?.expires).fromNow()}</span> | ||
| </Typography> | ||
| </Box> | ||
|
|
||
| <Box | ||
| display="flex" | ||
| alignItems="center" | ||
| paddingLeft="15px" | ||
| justifyContent="space-between" | ||
| bgcolor="#f1f3f4" | ||
| borderRadius=".2rem" | ||
| > | ||
| <div className={classes.ellipsis}> | ||
| <Typography>{secretLink}</Typography> | ||
| </div> | ||
| <div> | ||
| <CopyToClipboard text={secretLink} onCopy={handleCopy}> | ||
| <IconButton aria-label="copy" size="medium" title="Copy this link"> | ||
| <LinkIcon /> | ||
| </IconButton> | ||
| </CopyToClipboard> | ||
| </div> | ||
| </Box> | ||
|
|
||
| <Box display="flex" gridGap="2rem" justifyContent="space-around"> | ||
| <Button | ||
| isLoading={isLoading} | ||
| label="Destroy this secret" | ||
| onClick={handleDeleteSecret} | ||
| color="secondary" | ||
| variant="contained" | ||
| disabled={isLoading} | ||
| style={{ minWidth: "200px" }} | ||
| /> | ||
| </Box> | ||
| <Snackbar open={alert.open} autoHideDuration={5000} onClose={handleAlertClose}> | ||
| <Alert onClose={handleAlertClose} severity={alert.severity}> | ||
| {alert.message} | ||
| </Alert> | ||
| </Snackbar> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateSecretModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters