import Spinner from '@components/Spinner/Spinner';
import { t } from '@lingui/macro';
import { getPublishedPosts } from '@services/graphql/queries';
import { ArticlePreview } from '@ts/types/articles';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import useSWR from 'swr';
import styles from './RecentPosts.module.scss';

const RecentPosts = () => {
  const { data, error } = useSWR('/recent-posts', () =>
    getPublishedPosts({ first: 3 })
  );
  const { locale } = useRouter();
  const dateOptions: Intl.DateTimeFormatOptions = {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  };

  const getPost = (post: ArticlePreview) => {
    return (
      <li key={post.id} className={styles.item}>
        <Link href={`/article/${post.slug}`}>
          <a className={styles.link}>
            <article className={styles.article}>
              {post.featuredImage &&
                Object.keys(post.featuredImage).length > 0 && (
                  <div className={styles.cover}>
                    <Image
                      src={post.featuredImage.sourceUrl}
                      alt={post.featuredImage.altText}
                      layout="fill"
                      objectFit="contain"
                    />
                  </div>
                )}
              <h3 className={styles.title}>{post.title}</h3>
              <dl className={styles.meta}>
                <dt>{t`Published on:`}</dt>
                <dd>
                  {new Date(post.dates.publication).toLocaleDateString(
                    locale,
                    dateOptions
                  )}
                </dd>
              </dl>
            </article>
          </a>
        </Link>
      </li>
    );
  };

  const getPostsItems = () => {
    if (error) return t`Failed to load.`;
    if (!data) return <Spinner />;

    return data.posts.map((post) => getPost(post));
  };

  return <ul className={styles.list}>{getPostsItems()}</ul>;
};

export default RecentPosts;
?h=v1.1.0'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/src/utils/hooks/useGithubApi.tsx'>
<input type='hidden' name='h' value='v1.1.0'/><input type='hidden' name='id' value='0c76e4165bcdf688fabc52d585c6cec5ac568b90'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>root</a>/<a href='/www.armandphilippot.com/tree/src?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>src</a>/<a href='/www.armandphilippot.com/tree/src/utils?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>utils</a>/<a href='/www.armandphilippot.com/tree/src/utils/hooks?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>hooks</a>/<a href='/www.armandphilippot.com/tree/src/utils/hooks/useGithubApi.tsx?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>useGithubApi.tsx</a></div><div class='content'>blob: 4b0b3b232e7f6e416990258b0ce6774f48ed23ed (<a href='/www.armandphilippot.com/plain/src/utils/hooks/useGithubApi.tsx?h=v1.1.0&amp;id=0c76e4165bcdf688fabc52d585c6cec5ac568b90'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
</pre></td>
<td class='lines'><pre><code>