77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import { Resume } from '@reactive-resume/schema';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
import { GetServerSideProps, NextPage } from 'next';
|
|
import Head from 'next/head';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
|
import { useEffect } from 'react';
|
|
import { useQuery } from 'react-query';
|
|
|
|
import Center from '@/components/build/Center/Center';
|
|
import LeftSidebar from '@/components/build/LeftSidebar/LeftSidebar';
|
|
import RightSidebar from '@/components/build/RightSidebar/RightSidebar';
|
|
import { fetchResumeByIdentifier } from '@/services/resume';
|
|
import { useAppDispatch } from '@/store/hooks';
|
|
import { setResume } from '@/store/resume/resumeSlice';
|
|
import styles from '@/styles/pages/Build.module.scss';
|
|
|
|
type QueryParams = {
|
|
username: string;
|
|
slug: string;
|
|
};
|
|
|
|
type Props = {
|
|
username: string;
|
|
slug: string;
|
|
};
|
|
|
|
export const getServerSideProps: GetServerSideProps<Props> = async ({ query, locale = 'en' }) => {
|
|
const { username, slug } = query as QueryParams;
|
|
|
|
return {
|
|
props: { username, slug, ...(await serverSideTranslations(locale, ['common', 'modals', 'builder'])) },
|
|
};
|
|
};
|
|
|
|
const Build: NextPage<Props> = ({ username, slug }) => {
|
|
const { t } = useTranslation();
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const { data: resume } = useQuery<Resume>(
|
|
`resume/${username}/${slug}`,
|
|
() => fetchResumeByIdentifier({ username, slug }),
|
|
{
|
|
cacheTime: 0,
|
|
refetchOnMount: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnWindowFocus: false,
|
|
onSuccess: (resume) => {
|
|
dispatch(setResume(resume));
|
|
},
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (resume) dispatch(setResume(resume));
|
|
}, [resume, dispatch]);
|
|
|
|
if (!resume || isEmpty(resume)) return null;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Head>
|
|
<title>
|
|
{resume.name} | {t('common.title')}
|
|
</title>
|
|
</Head>
|
|
|
|
<LeftSidebar />
|
|
<Center />
|
|
<RightSidebar />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Build;
|