mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

use toast instea modal for info messages (#932)

Browse source 
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Anton Podviaznikov 2021-10-13 05:13:00 -07:00 committed by GitHub
parent ec6b897191
commit 5c4f4bfd90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
components/Modal.tsx
View file

@ -1,85 +0,0 @@
import { Dialog, Transition } from "@headlessui/react";
import { CheckIcon, InformationCircleIcon } from "@heroicons/react/outline";
import { Fragment, ReactNode } from "react";
import classNames from "@lib/classNames";
/**
* @deprecated please refactor to use <Dialog> only
*/
export default function Modal(props: {
heading: ReactNode;
description: ReactNode;
handleClose: () => void;
open: boolean;
variant?: "success" | "warning";
}) {
const { variant = "success" } = props;
return (
<Transition.Root show={props.open} as={Fragment}>
<Dialog
as="div"
static
className="fixed z-50 inset-0 overflow-y-auto"
open={props.open}
onClose={props.handleClose}>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<Dialog.Overlay className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div>
<div
className={classNames(
"mx-auto flex items-center justify-center h-12 w-12 rounded-full",
variant === "success" && "bg-green-100",
variant === "warning" && "bg-yellow-100"
)}>
{variant === "success" && (
<CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
)}
{variant === "warning" && (
<InformationCircleIcon className={"h-6 w-6 text-yellow-400"} aria-hidden="true" />
)}
</div>
<div className="mt-3 text-center sm:mt-5">
<Dialog.Title as="h3" className="font-cal text-lg leading-6 font-medium text-gray-900">
{props.heading}
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">{props.description}</p>
</div>
</div>
</div>
<div className="mt-5 sm:mt-6">
<button type="button" className="btn-wide btn-primary" onClick={() => props.handleClose()}>
Dismiss
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
}

16
components/security/ChangePasswordSection.tsx
View file

@ -2,13 +2,11 @@ import React, { SyntheticEvent, useState } from "react";
import { ErrorCode } from "@lib/auth"; import { ErrorCode } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import showToast from "@lib/notification";
import Modal from "@components/Modal";
const ChangePasswordSection = () => { const ChangePasswordSection = () => {
const [oldPassword, setOldPassword] = useState(""); const [oldPassword, setOldPassword] = useState("");
const [newPassword, setNewPassword] = useState(""); const [newPassword, setNewPassword] = useState("");
const [successModalOpen, setSuccessModalOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null); const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const { t } = useLocale(); const { t } = useLocale();
@ -18,10 +16,6 @@ const ChangePasswordSection = () => {
[ErrorCode.NewPasswordMatchesOld]: t("new_password_matches_old_password"), [ErrorCode.NewPasswordMatchesOld]: t("new_password_matches_old_password"),
}; };
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
async function changePasswordHandler(e: SyntheticEvent) { async function changePasswordHandler(e: SyntheticEvent) {
e.preventDefault(); e.preventDefault();
@ -44,7 +38,7 @@ const ChangePasswordSection = () => {
if (response.status === 200) { if (response.status === 200) {
setOldPassword(""); setOldPassword("");
setNewPassword(""); setNewPassword("");
setSuccessModalOpen(true); showToast(t("password_has_been_changed"), "success");
return; return;
} }
@ -112,12 +106,6 @@ const ChangePasswordSection = () => {
<hr className="mt-4" /> <hr className="mt-4" />
</div> </div>
</form> </form>
<Modal
heading={t("password_updated_successfully")}
description={t("password_has_been_changed")}
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</> </>
); );
}; };

15
components/team/EditTeam.tsx
View file

@ -3,11 +3,11 @@ import React, { useEffect, useRef, useState } from "react";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import { Member } from "@lib/member"; import { Member } from "@lib/member";
import showToast from "@lib/notification";
import { Team } from "@lib/team"; import { Team } from "@lib/team";
import { Dialog, DialogTrigger } from "@components/Dialog"; import { Dialog, DialogTrigger } from "@components/Dialog";
import ImageUploader from "@components/ImageUploader"; import ImageUploader from "@components/ImageUploader";
import Modal from "@components/Modal";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import MemberInvitationModal from "@components/team/MemberInvitationModal"; import MemberInvitationModal from "@components/team/MemberInvitationModal";
import Avatar from "@components/ui/Avatar"; import Avatar from "@components/ui/Avatar";
@ -26,7 +26,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
const hideBrandingRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>; const hideBrandingRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
const logoRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>; const logoRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
const [hasErrors, setHasErrors] = useState(false); const [hasErrors, setHasErrors] = useState(false);
const [successModalOpen, setSuccessModalOpen] = useState(false);
const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false); const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
const [inviteModalTeam, setInviteModalTeam] = useState<Team | null | undefined>(); const [inviteModalTeam, setInviteModalTeam] = useState<Team | null | undefined>();
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
@ -96,7 +95,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
}) })
.then(handleError) .then(handleError)
.then(() => { .then(() => {
setSuccessModalOpen(true); showToast(t("your_team_updated_successfully"), "success");
setHasErrors(false); // dismiss any open errors setHasErrors(false); // dismiss any open errors
}) })
.catch((err) => { .catch((err) => {
@ -110,10 +109,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
setShowMemberInvitationModal(false); setShowMemberInvitationModal(false);
}; };
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
const handleLogoChange = (newLogo: string) => { const handleLogoChange = (newLogo: string) => {
logoRef.current.value = newLogo; logoRef.current.value = newLogo;
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement?.prototype, "value").set; const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement?.prototype, "value").set;
@ -288,12 +283,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
</div> </div>
</div> </div>
</form> </form>
<Modal
heading={t("team_updated_successfully")}
description={t("your_team_updated_successfully")}
open={successModalOpen}
handleClose={closeSuccessModal}
/>
{showMemberInvitationModal && ( {showMemberInvitationModal && (
<MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} /> <MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} />
)} )}

12
pages/event-types/[type].tsx
View file

@ -50,7 +50,6 @@ import { AdvancedOptions, EventTypeInput } from "@lib/types/event-type";
import { inferSSRProps } from "@lib/types/inferSSRProps"; import { inferSSRProps } from "@lib/types/inferSSRProps";
import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog"; import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog";
import Modal from "@components/Modal";
import Shell from "@components/Shell"; import Shell from "@components/Shell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm"; import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
@ -87,7 +86,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
const { t } = useLocale(); const { t } = useLocale();
const router = useRouter(); const router = useRouter();
const [successModalOpen, setSuccessModalOpen] = useState(false);
const updateMutation = useMutation(updateEventType, { const updateMutation = useMutation(updateEventType, {
onSuccess: async ({ eventType }) => { onSuccess: async ({ eventType }) => {
@ -210,10 +208,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
setShowLocationModal(false); setShowLocationModal(false);
}; };
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
const updateLocations = (e: React.FormEvent<HTMLFormElement>) => { const updateLocations = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const newLocation = e.currentTarget.location.value; const newLocation = e.currentTarget.location.value;
@ -954,12 +948,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Button type="submit">{t("update")}</Button> <Button type="submit">{t("update")}</Button>
</div> </div>
</form> </form>
<Modal
heading={t("event_type_updated_successfully")}
description={t("event_type_updated_successfully_description")}
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</div> </div>
</div> </div>
<div className="w-full px-2 mt-8 ml-2 sm:w-3/12 sm:mt-0 min-w-32"> <div className="w-full px-2 mt-8 ml-2 sm:w-3/12 sm:mt-0 min-w-32">