|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import Error from 'next/error';
|
|
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
|
import { useSession } from 'next-auth/react';
|
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
|
|
|
|
|
import { EyeIcon } from '@heroicons/react/24/outline';
|
|
|
|
|
@ -13,44 +14,43 @@ import OffersSubmissionAnalysis from '~/components/offers/offersSubmission/Offer
|
|
|
|
|
import { getProfilePath } from '~/utils/offers/link';
|
|
|
|
|
import { trpc } from '~/utils/trpc';
|
|
|
|
|
|
|
|
|
|
import type { ProfileAnalysis } from '~/types/offers';
|
|
|
|
|
|
|
|
|
|
export default function OffersSubmissionResult() {
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
let { offerProfileId, token = '' } = router.query;
|
|
|
|
|
offerProfileId = offerProfileId as string;
|
|
|
|
|
token = token as string;
|
|
|
|
|
const [step, setStep] = useState(0);
|
|
|
|
|
const [analysis, setAnalysis] = useState<ProfileAnalysis | null>(null);
|
|
|
|
|
const [isValidToken, setIsValidToken] = useState(false);
|
|
|
|
|
const { data: session } = useSession();
|
|
|
|
|
|
|
|
|
|
const pageRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const scrollToTop = () =>
|
|
|
|
|
pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
|
|
|
|
|
|
|
|
|
|
const checkToken = trpc.useQuery(
|
|
|
|
|
['offers.profile.isValidToken', { profileId: offerProfileId, token }],
|
|
|
|
|
{
|
|
|
|
|
onSuccess(data) {
|
|
|
|
|
setIsValidToken(data);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
const checkToken = trpc.useQuery([
|
|
|
|
|
'offers.profile.isValidToken',
|
|
|
|
|
{ profileId: offerProfileId, token },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const getAnalysis = trpc.useQuery(
|
|
|
|
|
['offers.analysis.get', { profileId: offerProfileId }],
|
|
|
|
|
{
|
|
|
|
|
onSuccess(data) {
|
|
|
|
|
setAnalysis(data);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
const getAnalysis = trpc.useQuery([
|
|
|
|
|
'offers.analysis.get',
|
|
|
|
|
{ profileId: offerProfileId },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const isSavedQuery = trpc.useQuery([
|
|
|
|
|
`offers.profile.isSaved`,
|
|
|
|
|
{ profileId: offerProfileId, userId: session?.user?.id },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const steps = [
|
|
|
|
|
<OffersProfileSave key={0} profileId={offerProfileId} token={token} />,
|
|
|
|
|
<OffersProfileSave
|
|
|
|
|
key={0}
|
|
|
|
|
isSavedQuery={isSavedQuery}
|
|
|
|
|
profileId={offerProfileId}
|
|
|
|
|
token={token}
|
|
|
|
|
/>,
|
|
|
|
|
<OffersSubmissionAnalysis
|
|
|
|
|
key={1}
|
|
|
|
|
analysis={analysis}
|
|
|
|
|
analysis={getAnalysis.data}
|
|
|
|
|
isError={getAnalysis.isError}
|
|
|
|
|
isLoading={getAnalysis.isLoading}
|
|
|
|
|
/>,
|
|
|
|
|
@ -77,71 +77,67 @@ export default function OffersSubmissionResult() {
|
|
|
|
|
scrollToTop();
|
|
|
|
|
}, [step]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{(checkToken.isLoading || getAnalysis.isLoading) && (
|
|
|
|
|
<div className="flex h-screen w-screen">
|
|
|
|
|
<div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
|
|
|
|
|
<Spinner display="block" size="lg" />
|
|
|
|
|
<div className="text-center">Loading...</div>
|
|
|
|
|
return checkToken.isLoading || getAnalysis.isLoading ? (
|
|
|
|
|
<div className="flex h-screen w-screen">
|
|
|
|
|
<div className="m-auto mx-auto w-screen justify-center font-medium text-slate-500">
|
|
|
|
|
<Spinner display="block" size="lg" />
|
|
|
|
|
<div className="text-center">Loading...</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
) : checkToken.isError || getAnalysis.isError ? (
|
|
|
|
|
<Error statusCode={404} title="Error loading page" />
|
|
|
|
|
) : checkToken.isSuccess && !checkToken.data ? (
|
|
|
|
|
<Error
|
|
|
|
|
statusCode={403}
|
|
|
|
|
title="You do not have permissions to access this page"
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<div ref={pageRef} className="w-full">
|
|
|
|
|
<div className="flex justify-center">
|
|
|
|
|
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
|
|
|
|
|
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
|
|
|
|
|
<Breadcrumbs
|
|
|
|
|
currentStep={step}
|
|
|
|
|
setStep={setStep}
|
|
|
|
|
steps={breadcrumbSteps}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{checkToken.isSuccess && !isValidToken && (
|
|
|
|
|
<Error
|
|
|
|
|
statusCode={403}
|
|
|
|
|
title="You do not have permissions to access this page"
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{getAnalysis.isSuccess && (
|
|
|
|
|
<div ref={pageRef} className="w-full">
|
|
|
|
|
<div className="flex justify-center">
|
|
|
|
|
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
|
|
|
|
|
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
|
|
|
|
|
<Breadcrumbs
|
|
|
|
|
currentStep={step}
|
|
|
|
|
setStep={setStep}
|
|
|
|
|
steps={breadcrumbSteps}
|
|
|
|
|
<div className="bg-white p-6 sm:p-10">
|
|
|
|
|
{steps[step]}
|
|
|
|
|
{step === 0 && (
|
|
|
|
|
<div className="flex justify-end">
|
|
|
|
|
<Button
|
|
|
|
|
disabled={false}
|
|
|
|
|
icon={ArrowRightIcon}
|
|
|
|
|
label="Next"
|
|
|
|
|
variant="primary"
|
|
|
|
|
onClick={() => setStep(step + 1)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="bg-white p-6 sm:p-10">
|
|
|
|
|
{steps[step]}
|
|
|
|
|
{step === 0 && (
|
|
|
|
|
<div className="flex justify-end">
|
|
|
|
|
<Button
|
|
|
|
|
disabled={false}
|
|
|
|
|
icon={ArrowRightIcon}
|
|
|
|
|
label="Next"
|
|
|
|
|
variant="primary"
|
|
|
|
|
onClick={() => setStep(step + 1)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{step === 1 && (
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<Button
|
|
|
|
|
addonPosition="start"
|
|
|
|
|
icon={ArrowLeftIcon}
|
|
|
|
|
label="Previous"
|
|
|
|
|
variant="secondary"
|
|
|
|
|
onClick={() => setStep(step - 1)}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
href={getProfilePath(
|
|
|
|
|
offerProfileId as string,
|
|
|
|
|
token as string,
|
|
|
|
|
)}
|
|
|
|
|
icon={EyeIcon}
|
|
|
|
|
label="View your profile"
|
|
|
|
|
variant="primary"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
)}
|
|
|
|
|
{step === 1 && (
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<Button
|
|
|
|
|
addonPosition="start"
|
|
|
|
|
icon={ArrowLeftIcon}
|
|
|
|
|
label="Previous"
|
|
|
|
|
variant="secondary"
|
|
|
|
|
onClick={() => setStep(step - 1)}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
href={getProfilePath(
|
|
|
|
|
offerProfileId as string,
|
|
|
|
|
token as string,
|
|
|
|
|
)}
|
|
|
|
|
icon={EyeIcon}
|
|
|
|
|
label="View your profile"
|
|
|
|
|
variant="primary"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
Ai Ling
2 years ago
committed by
GitHub