- run eslint --fix across project

This commit is contained in:
Amruth Pillai
2020-07-09 00:14:13 +05:30
parent a1931f5e36
commit 9045e2983d
72 changed files with 1392 additions and 868 deletions

View File

@ -1,14 +1,14 @@
import React, { useContext } from "react";
import { Helmet } from "react-helmet";
import { useSelector } from "../../../contexts/ResumeContext";
import TemplateContext from "../../../contexts/TemplateContext";
import Onyx from "../../../templates/Onyx";
import styles from "./Artboard.module.css";
import React, { useContext } from 'react';
import { Helmet } from 'react-helmet';
import { useSelector } from '../../../contexts/ResumeContext';
import TemplateContext from '../../../contexts/TemplateContext';
import Onyx from '../../../templates/Onyx';
import styles from './Artboard.module.css';
const Artboard = () => {
const { blocks, colors } = useContext(TemplateContext);
const state = useSelector((state) => state),
{ id, name } = state;
const state = useSelector((s) => s);
const { id, name } = state;
return (
<div>

View File

@ -1,31 +1,29 @@
import { Link } from "gatsby";
import React from "react";
import sections from "../../../data/leftSections";
import Avatar from "../../shared/Avatar";
import Logo from "../../shared/Logo";
import SectionIcon from "../../shared/SectionIcon";
import styles from "./LeftNavbar.module.css";
import { Link } from 'gatsby';
import React from 'react';
import sections from '../../../data/leftSections';
import Avatar from '../../shared/Avatar';
import Logo from '../../shared/Logo';
import SectionIcon from '../../shared/SectionIcon';
import styles from './LeftNavbar.module.css';
const LeftNavbar = () => {
return (
<div className={styles.container}>
<Link to="/app/dashboard">
<Logo size="40px" />
</Link>
const LeftNavbar = () => (
<div className={styles.container}>
<Link to="/app/dashboard">
<Logo size="40px" />
</Link>
<hr className="my-6" />
<hr className="my-6" />
<div className="grid grid-cols-1 gap-8">
{sections.map((x) => (
<SectionIcon key={x.id} section={x} />
))}
</div>
<hr className="mt-auto my-6" />
<Avatar />
<div className="grid grid-cols-1 gap-8">
{sections.map((x) => (
<SectionIcon key={x.id} section={x} />
))}
</div>
);
};
<hr className="mt-auto my-6" />
<Avatar />
</div>
);
export default LeftNavbar;

View File

@ -1,23 +1,21 @@
import React, { Fragment } from "react";
import sections from "../../../data/leftSections";
import LeftNavbar from "./LeftNavbar";
import styles from "./LeftSidebar.module.css";
import React, { Fragment } from 'react';
import sections from '../../../data/leftSections';
import LeftNavbar from './LeftNavbar';
import styles from './LeftSidebar.module.css';
const LeftSidebar = () => {
return (
<div className="flex">
<LeftNavbar />
const LeftSidebar = () => (
<div className="flex">
<LeftNavbar />
<div className={styles.container}>
{sections.map(({ id, name, event, component: Component }) => (
<Fragment key={id}>
<Component id={id} name={name} event={event} />
<hr />
</Fragment>
))}
</div>
<div className={styles.container}>
{sections.map(({ id, name, event, component: Component }) => (
<Fragment key={id}>
<Component id={id} name={name} event={event} />
<hr />
</Fragment>
))}
</div>
);
};
</div>
);
export default LeftSidebar;

View File

@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
const EmptyList = () => (
<div className="py-6 opacity-75 text-center">This list is empty.</div>

View File

@ -1,13 +1,13 @@
import { get, isEmpty } from "lodash";
import moment from "moment";
import React, { useContext } from "react";
import { MdAdd } from "react-icons/md";
import ModalContext from "../../../contexts/ModalContext";
import { useSelector } from "../../../contexts/ResumeContext";
import Button from "../../shared/Button";
import EmptyList from "./EmptyList";
import styles from "./List.module.css";
import ListItem from "./ListItem";
import { get, isEmpty } from 'lodash';
import moment from 'moment';
import React, { useContext } from 'react';
import { MdAdd } from 'react-icons/md';
import ModalContext from '../../../contexts/ModalContext';
import { useSelector } from '../../../contexts/ResumeContext';
import Button from '../../shared/Button';
import EmptyList from './EmptyList';
import styles from './List.module.css';
import ListItem from './ListItem';
const List = ({
path,
@ -27,10 +27,10 @@ const List = ({
const handleEdit = (data) => emitter.emit(event, data);
const formatDateRange = (x) =>
`${moment(x.startDate).format("MMMM Y")}${
`${moment(x.startDate).format('MMMM Y')}${
moment(x.endDate).isValid()
? moment(x.endDate).format("MMMM Y")
: "Present"
? moment(x.endDate).format('MMMM Y')
: 'Present'
}`;
return (
@ -44,11 +44,11 @@ const List = ({
key={x.id}
data={x}
path={path}
title={title || get(x, titlePath, "")}
title={title || get(x, titlePath, '')}
subtitle={
subtitle || get(x, subtitlePath, "") || formatDateRange(x)
subtitle || get(x, subtitlePath, '') || formatDateRange(x)
}
text={text || get(x, textPath, "")}
text={text || get(x, textPath, '')}
className={styles.listItem}
onEdit={() => handleEdit(x)}
isFirst={i === 0}

View File

@ -1,9 +1,9 @@
import { Menu, MenuItem } from "@material-ui/core";
import React, { useState } from "react";
import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
import { MdMoreVert } from "react-icons/md";
import { useDispatch } from "../../../contexts/ResumeContext";
import styles from "./ListItem.module.css";
import { Menu, MenuItem } from '@material-ui/core';
import React, { useState } from 'react';
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
import { MdMoreVert } from 'react-icons/md';
import { useDispatch } from '../../../contexts/ResumeContext';
import styles from './ListItem.module.css';
const ListItem = ({
title,
@ -29,7 +29,7 @@ const ListItem = ({
const handleMoveUp = () => {
dispatch({
type: "on_move_item_up",
type: 'on_move_item_up',
payload: {
path,
value: data,
@ -41,7 +41,7 @@ const ListItem = ({
const handleMoveDown = () => {
dispatch({
type: "on_move_item_down",
type: 'on_move_item_down',
payload: {
path,
value: data,
@ -53,7 +53,7 @@ const ListItem = ({
const handleDelete = () => {
dispatch({
type: "on_delete_item",
type: 'on_delete_item',
payload: {
path,
value: data,

View File

@ -1,12 +1,9 @@
import cx from "classnames";
import React, { useContext } from "react";
import { MdPerson, MdSync, MdSyncDisabled } from "react-icons/md";
import DatabaseContext from "../../../contexts/DatabaseContext";
import styles from "./RightNavbar.module.css";
import React from 'react';
import { MdPerson } from 'react-icons/md';
import styles from './RightNavbar.module.css';
import SyncIndicator from './SyncIndicator';
const RightNavbar = () => {
const { isOffline, isUpdating } = useContext(DatabaseContext);
return (
<div className={styles.container}>
<div className="grid grid-cols-1 gap-6">
@ -16,13 +13,9 @@ const RightNavbar = () => {
/>
</div>
<div className="text-4xl mt-auto">
{isOffline ? (
<MdSyncDisabled className="text-red-600" />
) : (
<MdSync className={cx({ spin: isUpdating })} />
)}
</div>
<hr className="mt-auto my-6" />
<SyncIndicator />
</div>
);
};

View File

@ -1,7 +1,7 @@
import React from "react";
import Layout from "../sections/Layout";
import RightNavbar from "./RightNavbar";
import styles from "./RightSidebar.module.css";
import React from 'react';
import Layout from '../sections/Layout';
import RightNavbar from './RightNavbar';
import styles from './RightSidebar.module.css';
const RightSidebar = () => {
return (

View File

@ -0,0 +1,20 @@
import cx from 'classnames';
import React, { useContext } from 'react';
import { MdSync, MdSyncDisabled } from 'react-icons/md';
import DatabaseContext from '../../../contexts/DatabaseContext';
const SyncIndicator = () => {
const { isOffline, isUpdating } = useContext(DatabaseContext);
return (
<div className="text-4xl">
{isOffline ? (
<MdSyncDisabled className="text-red-600" />
) : (
<MdSync className={cx({ spin: isUpdating })} />
)}
</div>
);
};
export default SyncIndicator;

View File

@ -1,8 +1,8 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Awards = ({ id, name, event, state }) => {
const Awards = ({ id, name, event }) => {
const path = `${id}.items`;
return (

View File

@ -1,8 +1,8 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Certifications = ({ id, name, event, state }) => {
const Certifications = ({ id, name, event }) => {
const path = `${id}.items`;
return (

View File

@ -1,8 +1,8 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Education = ({ id, name, event, state }) => {
const Education = ({ id, name, event }) => {
const path = `${id}.items`;
return (

View File

@ -1,8 +1,8 @@
import React, { useContext } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import TemplateContext from "../../../contexts/TemplateContext";
import Heading from "../../shared/Heading";
import styles from "./Layout.module.css";
import React, { useContext } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import TemplateContext from '../../../contexts/TemplateContext';
import Heading from '../../shared/Heading';
import styles from './Layout.module.css';
const Layout = () => {
const { blocks, onDragEnd } = useContext(TemplateContext);
@ -20,11 +20,11 @@ const Layout = () => {
<DragDropContext onDragEnd={onDragEnd}>
{blocks.map((el, ind) => (
<Droppable key={ind} droppableId={`${ind}`}>
{(provided) => (
{(dropProvided) => (
<div
ref={provided.innerRef}
ref={dropProvided.innerRef}
className={styles.droppable}
{...provided.droppableProps}
{...dropProvided.droppableProps}
>
<div className="grid gap-3">
<span className="uppercase font-semibold text-xs">
@ -36,12 +36,12 @@ const Layout = () => {
draggableId={item.id}
index={index}
>
{(provided) => (
{(dragProvided) => (
<div
ref={provided.innerRef}
ref={dragProvided.innerRef}
className={styles.draggable}
{...provided.draggableProps}
{...provided.dragHandleProps}
{...dragProvided.draggableProps}
{...dragProvided.dragHandleProps}
>
{item.name}
</div>
@ -49,7 +49,7 @@ const Layout = () => {
</Draggable>
))}
</div>
{provided.placeholder}
{dropProvided.placeholder}
</div>
)}
</Droppable>

View File

@ -1,6 +1,6 @@
import React from "react";
import Heading from "../../shared/Heading";
import Input from "../../shared/Input";
import React from 'react';
import Heading from '../../shared/Heading';
import Input from '../../shared/Input';
const Objective = () => {
return (

View File

@ -1,7 +1,7 @@
import React from "react";
import Heading from "../../shared/Heading";
import Input from "../../shared/Input";
import PhotoUpload from "../../shared/PhotoUpload";
import React from 'react';
import Heading from '../../shared/Heading';
import Input from '../../shared/Input';
import PhotoUpload from '../../shared/PhotoUpload';
const Profile = () => {
return (

View File

@ -1,6 +1,6 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Skills = ({ id, name, event }) => {
const path = `${id}.items`;

View File

@ -1,6 +1,6 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Social = ({ id, name, event }) => {
const path = `${id}.items`;

View File

@ -1,8 +1,8 @@
import React from "react";
import Heading from "../../shared/Heading";
import List from "../lists/List";
import React from 'react';
import Heading from '../../shared/Heading';
import List from '../lists/List';
const Work = ({ id, name, event, state }) => {
const Work = ({ id, name, event }) => {
const path = `${id}.items`;
return (

View File

@ -1,8 +1,8 @@
import React, { useContext } from "react";
import { MdAdd } from "react-icons/md";
import ModalContext from "../../contexts/ModalContext";
import { handleKeyDown } from "../../utils";
import styles from "./CreateResume.module.css";
import React, { useContext } from 'react';
import { MdAdd } from 'react-icons/md';
import ModalContext from '../../contexts/ModalContext';
import { handleKeyDown } from '../../utils';
import styles from './CreateResume.module.css';
const CreateResume = () => {
const { emitter, events } = useContext(ModalContext);

View File

@ -1,12 +1,12 @@
import { Menu, MenuItem } from "@material-ui/core";
import { navigate } from "gatsby";
import moment from "moment";
import React, { useContext, useState } from "react";
import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
import { toast } from "react-toastify";
import DatabaseContext from "../../contexts/DatabaseContext";
import ModalContext from "../../contexts/ModalContext";
import styles from "./ResumePreview.module.css";
import { Menu, MenuItem } from '@material-ui/core';
import { navigate } from 'gatsby';
import moment from 'moment';
import React, { useContext, useState } from 'react';
import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
import { toast } from 'react-toastify';
import DatabaseContext from '../../contexts/DatabaseContext';
import ModalContext from '../../contexts/ModalContext';
import styles from './ResumePreview.module.css';
const ResumePreview = ({ resume }) => {
const [anchorEl, setAnchorEl] = useState(null);

View File

@ -1,16 +1,16 @@
import { Link, navigate } from "gatsby";
import React, { useContext } from "react";
import UserContext from "../../contexts/UserContext";
import Avatar from "../shared/Avatar";
import Logo from "../shared/Logo";
import styles from "./TopNavbar.module.css";
import { Link, navigate } from 'gatsby';
import React, { useContext } from 'react';
import UserContext from '../../contexts/UserContext';
import Avatar from '../shared/Avatar';
import Logo from '../shared/Logo';
import styles from './TopNavbar.module.css';
const TopNavbar = () => {
const { logout } = useContext(UserContext);
const handleLogout = async () => {
await logout();
navigate("/");
navigate('/');
};
return (

View File

@ -1,11 +1,11 @@
import { navigate } from "gatsby";
import React, { useContext } from "react";
import { FaGithub } from "react-icons/fa";
import ModalContext from "../../contexts/ModalContext";
import ThemeContext from "../../contexts/ThemeContext";
import UserContext from "../../contexts/UserContext";
import Button from "../shared/Button";
import Logo from "../shared/Logo";
import { navigate } from 'gatsby';
import React, { useContext } from 'react';
import { FaGithub } from 'react-icons/fa';
import ModalContext from '../../contexts/ModalContext';
import ThemeContext from '../../contexts/ThemeContext';
import UserContext from '../../contexts/UserContext';
import Button from '../shared/Button';
import Logo from '../shared/Logo';
const Hero = () => {
const { emitter, events } = useContext(ModalContext);
@ -14,7 +14,7 @@ const Hero = () => {
const handleLogin = () => emitter.emit(events.AUTH_MODAL);
const handleGotoApp = () => navigate("/app/dashboard");
const handleGotoApp = () => navigate('/app/dashboard');
return (
<div className="flex items-center">

View File

@ -1,7 +1,7 @@
import { Fade, Modal } from "@material-ui/core";
import React from "react";
import { getRandomTip } from "../../data/tips";
import Logo from "../shared/Logo";
import { Fade, Modal } from '@material-ui/core';
import React from 'react';
import { getRandomTip } from '../../data/tips';
import Logo from '../shared/Logo';
const LoadingScreen = () => {
return (

View File

@ -1,7 +1,7 @@
import { navigate } from "gatsby";
import React, { useContext } from "react";
import UserContext from "../../contexts/UserContext";
import LoadingScreen from "./LoadingScreen";
import { navigate } from 'gatsby';
import React, { useContext } from 'react';
import UserContext from '../../contexts/UserContext';
import LoadingScreen from './LoadingScreen';
const PrivateRoute = ({ component: Component, location, ...props }) => {
const { user, loading } = useContext(UserContext);
@ -11,7 +11,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
}
if (!user) {
navigate("/");
navigate('/');
return null;
}

View File

@ -1,13 +1,13 @@
import cx from "classnames";
import { toUrl } from "gatsby-source-gravatar";
import React, { useContext, useMemo } from "react";
import UserContext from "../../contexts/UserContext";
import styles from "./Avatar.module.css";
import cx from 'classnames';
import { toUrl } from 'gatsby-source-gravatar';
import React, { useContext, useMemo } from 'react';
import UserContext from '../../contexts/UserContext';
import styles from './Avatar.module.css';
const Avatar = ({ className }) => {
const { user } = useContext(UserContext);
const photoURL = useMemo(() => toUrl(user.email, "size=128"), [user.email]);
const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
return (
<img

View File

@ -1,17 +1,9 @@
import classNames from "classnames";
import React from "react";
import { handleKeyDown } from "../../utils";
import styles from "./Button.module.css";
import classNames from 'classnames';
import React from 'react';
import { handleKeyDown } from '../../utils';
import styles from './Button.module.css';
const Button = ({
icon,
title,
onClick,
outline,
className,
isLoading,
type = "button",
}) => {
const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
const Icon = icon;
const classes = classNames(styles.container, className, {
[styles.outline]: outline,
@ -19,13 +11,12 @@ const Button = ({
return (
<button
type={type}
className={classes}
onKeyDown={(e) => handleKeyDown(e, onClick)}
onClick={isLoading ? undefined : onClick}
>
{icon && <Icon size="14" className="mr-2" />}
{isLoading ? "Loading..." : title}
{isLoading ? 'Loading...' : title}
</button>
);
};

View File

@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
const Heading = ({ children }) => {
return <h2 className="text-4xl">{children}</h2>;

View File

@ -1,11 +1,11 @@
import cx from "classnames";
import { get, isFunction } from "lodash";
import React, { useMemo } from "react";
import { MdClose } from "react-icons/md";
import { v4 as uuidv4 } from "uuid";
import { useDispatch, useSelector } from "../../contexts/ResumeContext";
import { handleKeyDown } from "../../utils";
import styles from "./Input.module.css";
import cx from 'classnames';
import { get, isFunction } from 'lodash';
import React from 'react';
import { MdClose } from 'react-icons/md';
import { v4 as uuidv4 } from 'uuid';
import { useDispatch, useSelector } from '../../contexts/ResumeContext';
import { handleKeyDown } from '../../utils';
import styles from './Input.module.css';
const Input = ({
name,
@ -22,7 +22,7 @@ const Input = ({
placeholder,
onDeleteItem,
showDeleteItemButton,
type = "text",
type = 'text',
}) => {
const uuid = uuidv4();
const stateValue = useSelector((state) => get(state, path));
@ -33,7 +33,7 @@ const Input = ({
? onChange
: (e) => {
dispatch({
type: "on_input",
type: 'on_input',
payload: {
path,
value: e.target.value,
@ -41,93 +41,72 @@ const Input = ({
});
};
return useMemo(
() => (
<div className={cx(styles.container, className)}>
<label htmlFor={uuid}>
<span>
{label}{" "}
{isRequired && (
<span className="opacity-75 font-normal lowercase">
(Required)
</span>
return (
<div className={cx(styles.container, className)}>
<label htmlFor={uuid}>
<span>
{label}{' '}
{isRequired && (
<span className="opacity-75 font-normal lowercase">(Required)</span>
)}
</span>
{type === 'text' && (
<div className="relative grid items-center">
<input
id={uuid}
name={name}
type={type}
value={value}
onBlur={onBlur}
checked={checked}
onChange={onChange}
placeholder={placeholder}
/>
{showDeleteItemButton && isFunction(onDeleteItem) && (
<MdClose
size="16px"
tabIndex="0"
onClick={onDeleteItem}
onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
/>
)}
</span>
</div>
)}
{type === "text" && (
<div className="relative grid items-center">
<input
id={uuid}
name={name}
type={type}
value={value}
onBlur={onBlur}
checked={checked}
onChange={onChange}
placeholder={placeholder}
/>
{type === 'textarea' && (
<div className="flex flex-col">
<textarea
id={uuid}
rows="4"
name={name}
type={type}
value={value}
onBlur={onBlur}
checked={checked}
onChange={onChange}
placeholder={placeholder}
/>
{showDeleteItemButton && isFunction(onDeleteItem) && (
<MdClose
size="16px"
tabIndex="0"
onClick={onDeleteItem}
onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
/>
)}
</div>
)}
<p className="mt-2 text-sm opacity-75">
This text block supports{' '}
<a
href="https://www.markdownguide.org/basic-syntax/"
className="text-blue-600"
target="blank"
>
markdown
</a>
.
</p>
</div>
)}
{type === "textarea" && (
<div className="flex flex-col">
<textarea
id={uuid}
rows="4"
name={name}
type={type}
value={value}
onBlur={onBlur}
checked={checked}
onChange={onChange}
placeholder={placeholder}
/>
<p className="mt-2 text-sm opacity-75">
This text block supports{" "}
<a
href="https://www.markdownguide.org/basic-syntax/"
className="text-blue-600"
target="blank"
>
markdown
</a>
.
</p>
</div>
)}
{error && touched && <p>{error}</p>}
</label>
</div>
),
[
checked,
className,
error,
isRequired,
label,
name,
onBlur,
onChange,
onDeleteItem,
placeholder,
showDeleteItemButton,
touched,
type,
uuid,
value,
]
{error && touched && <p>{error}</p>}
</label>
</div>
);
};

View File

@ -1,10 +1,10 @@
import cx from "classnames";
import { graphql, useStaticQuery } from "gatsby";
import GatsbyImage from "gatsby-image";
import React from "react";
import styles from "./Logo.module.css";
import cx from 'classnames';
import { graphql, useStaticQuery } from 'gatsby';
import GatsbyImage from 'gatsby-image';
import React from 'react';
import styles from './Logo.module.css';
const Logo = ({ size = "256px", className }) => {
const Logo = ({ size = '256px', className }) => {
const { file } = useStaticQuery(graphql`
query {
file(relativePath: { eq: "logo.png" }) {

View File

@ -1,9 +1,9 @@
import React, { useContext, useRef } from "react";
import { MdFileUpload } from "react-icons/md";
import StorageContext from "../../contexts/StorageContext";
import { handleKeyDown } from "../../utils";
import Input from "./Input";
import styles from "./PhotoUpload.module.css";
import React, { useContext, useRef } from 'react';
import { MdFileUpload } from 'react-icons/md';
import StorageContext from '../../contexts/StorageContext';
import { handleKeyDown } from '../../utils';
import Input from './Input';
import styles from './PhotoUpload.module.css';
const PhotoUpload = () => {
const fileInputRef = useRef(null);

View File

@ -1,7 +1,7 @@
import { Tooltip } from "@material-ui/core";
import React from "react";
import { Tooltip } from '@material-ui/core';
import React from 'react';
const SectionIcon = ({ section, placement = "right" }) => {
const SectionIcon = ({ section, placement = 'right' }) => {
const { icon: Icon, name } = section;
return (

View File

@ -1,25 +1,25 @@
import React, { Fragment, useEffect } from "react";
import { Slide, toast } from "react-toastify";
import ModalRegistrar from "../../modals/ModalRegistrar";
import React, { useEffect } from 'react';
import { Slide, toast } from 'react-toastify';
import ModalRegistrar from '../../modals/ModalRegistrar';
const Wrapper = ({ children }) => {
useEffect(() => {
toast.configure({
role: "alert",
role: 'alert',
hideProgressBar: true,
transition: Slide,
closeButton: false,
position: "bottom-right",
position: 'bottom-right',
pauseOnFocusLoss: false,
});
}, []);
return (
<Fragment>
<>
{children}
<ModalRegistrar />
</Fragment>
</>
);
};