Implement profile back button (#3165)

* Implement profile backbutton

* update slug to use username

* Back Button Improvments

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/3138/head^2
sean-brydon 2022-07-04 15:26:22 +01:00 committed by GitHub
parent b546d9e33e
commit eec2d8ceed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 16 deletions

View File

@ -16,6 +16,7 @@ import { EventType } from "@prisma/client";
import * as Collapsible from "@radix-ui/react-collapsible";
import { useContracts } from "contexts/contractsContext";
import { TFunction } from "next-i18next";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useMemo, useState } from "react";
import { FormattedNumber, IntlProvider } from "react-intl";
@ -30,7 +31,7 @@ import {
useIsEmbed,
} from "@calcom/embed-core/embed-iframe";
import classNames from "@calcom/lib/classNames";
import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { CAL_URL, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { getRecurringFreq } from "@calcom/lib/recurringStrings";
import { localStorage } from "@calcom/lib/webstorage";
@ -87,23 +88,15 @@ export const locationKeyToString = (location: LocationObject, t: TFunction) => {
}
};
const GoBackToPreviousPage = ({ slug }: { slug: string }) => {
const GoBackToPreviousPage = ({ slug, t }: { slug: string; t: TFunction }) => {
const router = useRouter();
const [previousPage, setPreviousPage] = useState<string>();
useEffect(() => {
setPreviousPage(document.referrer);
}, []);
return previousPage === `${WEBAPP_URL}/${slug}` ? (
return (
<div className="flex h-full flex-col justify-end">
<ArrowLeftIcon
className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white"
onClick={() => router.back()}
/>
<p className="sr-only">Go Back</p>
<button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
<ArrowLeftIcon className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
<p className="sr-only">Go Back</p>
</button>
</div>
) : (
<></>
);
};
@ -655,7 +648,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
{timezoneDropdown}
</div>
<GoBackToPreviousPage slug={profile.slug || ""} />
<GoBackToPreviousPage slug={profile.name ?? ""} t={t} />
{/* Temporarily disabled - booking?.startTime && rescheduleUid && (
<div>