From 947830904239d51ec9e94971fed6346c1089911f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 23 Jan 2023 19:01:28 +0100
Subject: chore: make Links and Images compliant with Next.js 13

---
 src/components/organisms/layout/cards-list.tsx       |  9 ++-------
 src/components/organisms/layout/comment.test.tsx     |  2 +-
 src/components/organisms/layout/comment.tsx          | 17 +++++++++++------
 src/components/organisms/layout/overview.module.scss |  6 +++++-
 src/components/organisms/layout/overview.tsx         |  8 +-------
 5 files changed, 20 insertions(+), 22 deletions(-)

(limited to 'src/components/organisms/layout')

diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index dd05e59..f6cb6ed 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -6,17 +6,14 @@ import Card, { type CardProps } from '@components/molecules/layout/card';
 import { FC } from 'react';
 import styles from './cards-list.module.scss';
 
-export type CardsListItem = Omit<
-  CardProps,
-  'className' | 'coverFit' | 'titleLevel'
-> & {
+export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
   /**
    * The card id.
    */
   id: string;
 };
 
-export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> &
+export type CardsListProps = Pick<CardProps, 'titleLevel'> &
   Pick<ListProps, 'kind'> & {
     /**
      * Set additional classnames to the list wrapper.
@@ -35,7 +32,6 @@ export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> &
  */
 const CardsList: FC<CardsListProps> = ({
   className = '',
-  coverFit,
   items,
   kind = 'unordered',
   titleLevel,
@@ -56,7 +52,6 @@ const CardsList: FC<CardsListProps> = ({
           <Card
             key={id}
             className={styles.card}
-            coverFit={coverFit}
             id={id}
             titleLevel={titleLevel}
             {...card}
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index dc6d18d..7290c6c 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -30,7 +30,7 @@ describe('Comment', () => {
       screen.getByRole('link', {
         name: `${formattedDate} at ${formattedTime}`,
       })
-    ).toHaveAttribute('href', `/#comment-${id}`);
+    ).toHaveAttribute('href', `#comment-${id}`);
   });
 
   it('renders a reply button', () => {
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 497a04c..3b58a79 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -5,7 +5,7 @@ import { type SingleComment } from '@ts/types/app';
 import useSettings from '@utils/hooks/use-settings';
 import Image from 'next/image';
 import Script from 'next/script';
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { type Comment as CommentSchema, type WithContext } from 'schema-dts';
 import CommentForm, { type CommentFormProps } from '../forms/comment-form';
@@ -42,6 +42,11 @@ const Comment: FC<CommentProps> = ({
   const { website } = useSettings();
   const [isReplying, setIsReplying] = useState<boolean>(false);
 
+  const handleReply = useCallback(
+    () => setIsReplying((prevState) => !prevState),
+    []
+  );
+
   if (!approved) {
     return (
       <div className={styles.wrapper}>
@@ -114,11 +119,11 @@ const Comment: FC<CommentProps> = ({
           {author.avatar && (
             <div className={styles.avatar}>
               <Image
-                src={author.avatar.src}
-                alt={author.avatar.alt}
-                layout="fill"
-                objectFit="cover"
                 {...props}
+                alt={author.avatar.alt}
+                fill
+                src={author.avatar.src}
+                style={{ objectFit: 'cover' }}
               />
             </div>
           )}
@@ -149,7 +154,7 @@ const Comment: FC<CommentProps> = ({
         />
         <footer className={styles.footer}>
           {canReply && (
-            <Button kind="tertiary" onClick={() => setIsReplying(!isReplying)}>
+            <Button kind="tertiary" onClick={handleReply}>
               {buttonLabel}
             </Button>
           )}
diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss
index 895bae5..5620513 100644
--- a/src/components/organisms/layout/overview.module.scss
+++ b/src/components/organisms/layout/overview.module.scss
@@ -36,9 +36,13 @@
 
   .cover {
     width: fit-content;
-    max-height: fun.convert-px(175);
+    height: fun.convert-px(175);
     margin-bottom: var(--spacing-sm);
     padding: var(--spacing-2xs);
     border: fun.convert-px(1) solid var(--color-border);
+
+    img {
+      object-fit: contain;
+    }
   }
 }
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index b110e68..04ec79a 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -41,13 +41,7 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => {
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
-      {cover && (
-        <ResponsiveImage
-          className={styles.cover}
-          objectFit="contain"
-          {...cover}
-        />
-      )}
+      {cover && <ResponsiveImage className={styles.cover} {...cover} />}
       <Meta
         data={{ ...remainingMeta, technologies }}
         layout="inline"
-- 
cgit v1.2.3