// _app.tsx
const defaultSEO = {
  defaultTitle: "모으잡",
  titleTemplate: "%s | 모으잡", // %s로 페이지마다 title을 전달해줄 수 있어
  description: "원하는 회사의 채용공고를 모으고 비교해보자",
  canonical: "https://moejob.vercel.app/",
  keywords: ["moejob", "choi2021", "모으잡"],
  icon: "/favicon.ico",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: "https://moejob.vercel.app",
    title: "모으잡",
    site_name: "모으잡",
    description: "원하는 회사의 채용공고를 모으고 비교해보자",
    images: [
      {
        url: "/banner.jpg",
        width: 285,
        height: 167,
        alt: "이미지",
      },
    ],
  },
}

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient())
  const dbService = new DBServiceImpl(firebaseApp)
  return (
    <>
      <DefaultSeo {...defaultSEO} />
      ...
    </>
  )
}
export default MyApp

// pages/login.tsx
const Login = (...
) => {
  return (
    <>
      <NextSeo
        title="로그인"
        description="원하는 회사의 채용공고를 모으고 비교해보자"
        openGraph={% raw %}{{
          type: 'website',
          url: `${process.env.NEXT_PUBLIC_BASE_URL}/login`,
          title: '로그인 | 모으잡',
          description: '원하는 회사의 채용공고를 모으고 비교해보자',
        }}{% endraw %}
      />
     ...
    </>
  );
};

// pages/jobs/[id]
function Index() {
    ...
  return (
    <>
      <NextSeo
        title={job?.name}
        openGraph={% raw %}{{
          title: `${job?.name}`,
          url: `${process.env.NEXT_PUBLIC_BASE_URL}/jobs/${job?.id}`,
          images: [
            {
              url: job?.img || '',
              width: 285,
              height: 167,
              alt: '상세 이미지',
            },
          ],
        }}{% endraw %}
      />
    	...
    </>
  );
}

export default Index;

// react-query 공식홈페이지 예시

export async function getStaticProps() {
  const posts = await getPosts()
  return { props: { posts } }
}

function Posts(props) {
  const { data } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
    initialData: props.posts,
  })

  // ...
}

// react-query 공식홈페이지 예시

// _app.jsx
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query"

export default function MyApp({ Component, pageProps }) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  )
}

// pages/posts.jsx
import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query"

export async function getStaticProps() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery(["posts"], getPosts)

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 1000 * 60,
          },
        },
      })
  );
	...
  return (
    <>
      <DefaultSeo {...defaultSEO} />
      <QueryClientProvider client={queryClient}>
        ...
           <Hydrate state={pageProps.dehydratedState}>
             <Component {...pageProps} />
           </Hydrate>
         ...
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </>
  );
}
export default MyApp;

// 기존 Joblist 컴포넌트
export default function JobList({ session }: { session: Session | undefined }) {
  const { pathname } = useRouter()
  const isUser = pathname === "/user" || pathname === "/user/[id]"
  const user = session?.user
  const { getFilteredJobs } = useJobs(isUser ? user : undefined)
  const { isLoading, data: jobs } = getFilteredJobs
  const vacantJobs = jobs?.length === 0
  if (isLoading) {
    return <GuideBox>채용공고를 불러오는 중입니다...</GuideBox>
  }
  if (vacantJobs) {
    return <GuideBox>채용공고가 비어있습니다😉</GuideBox>
  }

  return (
    <Wrapper>
      {jobs && jobs.map(job => <JobItem key={job.id} job={job} />)}
    </Wrapper>
  )
}

// 수정한 Joblist 컴포넌트

export default function JobList({ jobs }: JobListProps) {
  const vacantJobs = jobs?.length === 0 || !jobs
  if (vacantJobs) {
    return <GuideBox>채용공고가 비어있습니다😉</GuideBox>
  }

  return (
    <Wrapper>
      {!vacantJobs && jobs.map(job => <JobItem key={job.id} job={job} />)}
    </Wrapper>
  )
}

// pages/index.tsx

function Home() {
  const { getJobs } = useJobs()
  const { data } = getJobs
  return (
    <MainLayout>
      <JobSection jobs={data} />
    </MainLayout>
  )
}

export default Home

export const getServerSideProps = async () => {
  const queryClient = new QueryClient()
  const dbService = new DBServiceImpl(firebaseApp)
  await queryClient.prefetchQuery<Jobs, AxiosError, Jobs, [string, string]>(
    [JOBS_KEY, "all"],
    () => dbService.getJobs()
  )

  return {
    props: { dehydratedState: dehydrate(queryClient) },
  }
}

// pages/jobs/[id].tsx

function Index() {
  const { getFilteredJobs, getJobById } = useJobs()
  const { data: job } = getJobById
  const { data: allJobs } = getFilteredJobs

  return (
    <>
      ...
      <MainLayout>
        {!job && <NotFound />}
        {job && (
          <>
            <DetailJob job={job} />
            <JobSection jobs={allJobs} />
          </>
        )}
      </MainLayout>
    </>
  )
}

export default Index

export const getServerSideProps = async (context: NextPageContext) => {
  const query = context.query
  const id = query.id?.toString()
  const queryClient = new QueryClient()
  const dbService = new DBServiceImpl(firebaseApp)
  if (!id) {
    return {
      redirect: {
        destination: "/",
      },
    }
  }

  await queryClient.prefetchQuery<Jobs, AxiosError, Jobs, [string, string]>(
    [JOBS_KEY, "all"],
    () => dbService.getJobs()
  )

  return {
    props: { dehydratedState: dehydrate(queryClient) },
  }
}