import { useQuery } from "@apollo/client";
import { GetServerSideProps } from 'next';
import Link from "next/link";
import React from "react";
import { addApolloState, initializeApollo } from '../commons/graphql/client';
import { Article } from "../commons/graphql/generated";
import { ARTICLE_FOR_HOME } from "../commons/graphql/queries";
import styles from "./index.module.css";

export default function Index() {
  const { data, loading } = useQuery<{ articles: Article[] }>(ARTICLE_FOR_HOME);

  return (
    <main className={styles.index}>
      <ol>
        {data?.articles?.map((article) => (
          <Item article={article} key={article.id} />
        ))}
      </ol>
    </main>
  );
}

function Item({ article }: { article: Article }) {
  return (
    <Link href={`/articles/${article.id}`}>
      <li className={styles.item}>
        <h2 className={styles.title}>{article.title}</h2>
        <p className={styles.description}>{article.description}</p>
      </li>
    </Link>
  );
}


export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: ARTICLE_FOR_HOME,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
};