style: custom error page (#638)

This commit is contained in:
Aaryan Khandelwal 2023-03-31 03:09:55 +05:30 committed by GitHub
parent 65ddcb6d79
commit 0c39f0c563
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 25 deletions

View File

@ -411,8 +411,8 @@ export const IssuesView: React.FC<Props> = ({
data={issueToDelete} data={issueToDelete}
/> />
<TransferIssuesModal <TransferIssuesModal
handleClose={() => setTransferIssuesModal(false)} handleClose={() => setTransferIssuesModal(false)}
isOpen={transferIssuesModal} isOpen={transferIssuesModal}
/> />
<div className="mb-5 -mt-4"> <div className="mb-5 -mt-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
@ -474,7 +474,10 @@ export const IssuesView: React.FC<Props> = ({
<span>Completed cycles are not editable.</span> <span>Completed cycles are not editable.</span>
</div> </div>
<div> <div>
<PrimaryButton onClick={()=>setTransferIssuesModal(true)} className="flex items-center gap-3 rounded-lg"> <PrimaryButton
onClick={() => setTransferIssuesModal(true)}
className="flex items-center gap-3 rounded-lg"
>
<TransferIcon className="h-4 w-4" /> <TransferIcon className="h-4 w-4" />
<span>Transfer Issues</span> <span>Transfer Issues</span>
</PrimaryButton> </PrimaryButton>

View File

@ -3,19 +3,19 @@ import { Menu, Transition } from "@headlessui/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { CheckIcon, ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline"; import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
// hooks // hooks
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useTheme from "hooks/use-theme"; import useTheme from "hooks/use-theme";
import useWorkspaces from "hooks/use-workspaces"; import useWorkspaces from "hooks/use-workspaces";
import useToast from "hooks/use-toast";
// services // services
import userService from "services/user.service"; import userService from "services/user.service";
import authenticationService from "services/authentication.service"; import authenticationService from "services/authentication.service";
// components // components
import { Avatar, Loader, Tooltip } from "components/ui"; import { Avatar, Loader } from "components/ui";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types
import { IWorkspace } from "types"; import { IWorkspace } from "types";
@ -42,6 +42,9 @@ export const WorkspaceSidebarDropdown = () => {
const { user, mutateUser } = useUser(); const { user, mutateUser } = useUser();
// fetching theme context // fetching theme context
const { collapsed: sidebarCollapse } = useTheme(); const { collapsed: sidebarCollapse } = useTheme();
const { setToastAlert } = useToast();
// fetching workspaces // fetching workspaces
const { activeWorkspace, workspaces } = useWorkspaces(); const { activeWorkspace, workspaces } = useWorkspaces();
@ -54,18 +57,25 @@ export const WorkspaceSidebarDropdown = () => {
mutateUser(); mutateUser();
router.push(`/${workspace.slug}/`); router.push(`/${workspace.slug}/`);
}) })
.catch((err) => console.error(err)); .catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Failed to navigate to the workspace. Please try again.",
})
);
}; };
const handleSignOut = async () => { const handleSignOut = async () => {
await authenticationService await authenticationService
.signOut() .signOut()
.then((response) => { .catch(() =>
console.log("user signed out", response); setToastAlert({
}) type: "error",
.catch((error) => { title: "Error!",
console.log("Failed to sign out", error); message: "Failed to sign out. Please try again.",
}) })
)
.finally(() => { .finally(() => {
mutateUser(); mutateUser();
router.push("/signin"); router.push("/signin");

View File

@ -17,21 +17,75 @@
*/ */
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
import NextErrorComponent from "next/error";
const CustomErrorComponent = ({ statusCode }) => { import { useRouter } from "next/router";
console.log(statusCode, "statusCode");
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
// layouts
import DefaultLayout from "layouts/default-layout";
// ui
import { PrimaryButton, SecondaryButton } from "components/ui";
const CustomErrorComponent = () => {
const router = useRouter();
const { setToastAlert } = useToast();
const handleSignOut = async () => {
await authenticationService
.signOut()
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Failed to sign out. Please try again.",
})
)
.finally(() => router.push("/signin"));
};
return ( return (
<p> <DefaultLayout
We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. meta={{
We apologize for any inconvenience this may have caused. Please reach out to our engineering title: "Plane - Exception Detected",
team at <a href="mailto:support@plane.so">support@plane.so</a> or on our{" "} description: "Exception Detected",
<a href="https://discord.com/invite/A92xrEGCge" target="_blank" rel="noopener noreferrer"> }}
Discord >
</a>{" "} <div className="grid h-full place-items-center p-4">
server for further assistance. <div className="space-y-8 text-center">
</p> <div className="space-y-2">
<h3 className="text-lg font-semibold">Exception Detected!</h3>
<p className="text-sm text-gray-500 w-1/2 mx-auto">
We{"'"}re Sorry! An exception has been detected, and our engineering team has been
notified. We apologize for any inconvenience this may have caused. Please reach out to
our engineering team at{" "}
<a href="mailto:support@plane.so" className="text-theme">
support@plane.so
</a>{" "}
or on our{" "}
<a
href="https://discord.com/invite/A92xrEGCge"
target="_blank"
className="text-theme"
rel="noopener noreferrer"
>
Discord
</a>{" "}
server for further assistance.
</p>
</div>
<div className="flex items-center gap-2 justify-center">
<PrimaryButton size="md">Go back</PrimaryButton>
<SecondaryButton size="md" onClick={handleSignOut}>
Sign out
</SecondaryButton>
</div>
</div>
</div>
</DefaultLayout>
); );
}; };