Remove: <a> tags

components/Categories/Categories.tsx

@@ -1,21 +1,25 @@
-import LinkTag from 'next/link';
+import LinkTag from "next/link";
 
-import styles from '../../styles/home/categories.module.scss';
-import { Category } from '../../types';
+import styles from "../../styles/home/categories.module.scss";
+import { Category } from "../../types";
 
-import EditSVG from '../../public/icons/edit.svg';
-import RemoveSVG from '../../public/icons/remove.svg';
+import EditSVG from "../../public/icons/edit.svg";
+import RemoveSVG from "../../public/icons/remove.svg";
 
 interface CategoriesProps {
   categories: Category[];
   categoryActive: Category;
   handleSelectCategory: (category: Category) => void;
 }
-export default function Categories({ categories, categoryActive, handleSelectCategory }: CategoriesProps) {
+export default function Categories({
+  categories,
+  categoryActive,
+  handleSelectCategory,
+}: CategoriesProps) {
   return (
-        <div className={`${styles['block-wrapper']} ${styles['categories']}`}>
+    <div className={`${styles["block-wrapper"]} ${styles["categories"]}`}>
       <h4>Catégories</h4>
-            <ul className={styles['items']}>
+      <ul className={styles["items"]}>
         {categories.map((category, key) => (
           <CategoryItem
             category={category}
@@ -26,7 +30,7 @@ export default function Categories({ categories, categoryActive, handleSelectCat
         ))}
       </ul>
     </div>
-    )
+  );
 }
 
 interface CategoryItemProps {
@@ -34,34 +38,39 @@ interface CategoryItemProps {
   categoryActive: Category;
   handleSelectCategory: (category: Category) => void;
 }
-function CategoryItem({ category, categoryActive, handleSelectCategory }: CategoryItemProps): JSX.Element {
-    const className = `${styles['item']} ${category.id === categoryActive.id ? styles['active'] : ''}`;
+function CategoryItem({
+  category,
+  categoryActive,
+  handleSelectCategory,
+}: CategoryItemProps): JSX.Element {
+  const className = `${styles["item"]} ${
+    category.id === categoryActive.id ? styles["active"] : ""
+  }`;
   const onClick = () => handleSelectCategory(category);
 
   return (
     <li className={className} onClick={onClick}>
-            <div className={styles['content']}>
-                <span className={styles['name']}>{category.name}</span>
-                <span className={styles['links-count']}>— {category.links.length}</span>
+      <div className={styles["content"]}>
+        <span className={styles["name"]}>{category.name}</span>
+        <span className={styles["links-count"]}>— {category.links.length}</span>
       </div>
       <MenuOptions id={category.id} />
     </li>
-    )
+  );
 }
 
-function MenuOptions({ id }: { id: number; }): JSX.Element {
+function MenuOptions({ id }: { id: number }): JSX.Element {
   return (
-        <div className={styles['menu-item']}>
-            <LinkTag href={`/category/edit/${id}`}>
-                <a className={styles['option-edit']}>
+    <div className={styles["menu-item"]}>
+      <LinkTag href={`/category/edit/${id}`} className={styles["option-edit"]}>
         <EditSVG />
-                </a>
       </LinkTag>
-            <LinkTag href={`/category/remove/${id}`}>
-                <a className={styles['option-remove']}>
+      <LinkTag
+        href={`/category/remove/${id}`}
+        className={styles["option-remove"]}
+      >
         <RemoveSVG />
-                </a>
       </LinkTag>
     </div>
-    )
+  );
 }

components/Categories/Favorites.tsx

@@ -1,36 +1,36 @@
-import styles from '../../styles/home/categories.module.scss';
-import { Link } from '../../types';
+import LinkTag from "next/link";
 
-export default function Favorites({ favorites }: { favorites: Link[]; }) {
+import { Link } from "../../types";
+
+import styles from "../../styles/home/categories.module.scss";
+
+export default function Favorites({ favorites }: { favorites: Link[] }) {
   return (
-        <div className={`${styles['block-wrapper']} ${styles['favorites']}`}>
+    <div className={`${styles["block-wrapper"]} ${styles["favorites"]}`}>
       <h4>Favoris</h4>
-            <ul className={styles['items']}>
-                {favorites.length === 0
-                    ? <NoFavLink />
-                    : favorites.map((link, key) => (
-                        <LinkFavorite link={link} key={key} />
-                    ))}
+      <ul className={styles["items"]}>
+        {favorites.length === 0 ? (
+          <NoFavLink />
+        ) : (
+          favorites.map((link, key) => <LinkFavorite link={link} key={key} />)
+        )}
       </ul>
     </div>
-    )
+  );
 }
 
 function NoFavLink(): JSX.Element {
-    return (
-        <li className={styles['no-fav-link']}>
-            Aucun favoris
-        </li>
-    )
+  return <li className={styles["no-fav-link"]}>Aucun favoris</li>;
 }
 
-function LinkFavorite({ link }: { link: Link; }): JSX.Element {
+function LinkFavorite({ link }: { link: Link }): JSX.Element {
   const { name, url, category } = link;
   return (
-        <li className={styles['item']}>
-            <a href={url} target={'_blank'} rel={'noreferrer'}>
-                {name}<span className={styles['category']}> - {category.name}</span>
-            </a>
+    <li className={styles["item"]}>
+      <LinkTag href={url} target={"_blank"} rel={"noreferrer"}>
+        {name}
+        <span className={styles["category"]}> - {category.name}</span>
+      </LinkTag>
     </li>
-    )
+  );
 }

components/Categories/SideMenu.tsx

@@ -1,12 +1,13 @@
-import { Session } from 'next-auth';
-import LinkTag from 'next/link';
+import { Session } from "next-auth";
+import LinkTag from "next/link";
 
-import Categories from './Categories';
-import Favorites from './Favorites';
-import UserCard from './UserCard';
+import Categories from "./Categories";
+import Favorites from "./Favorites";
+import UserCard from "./UserCard";
 
-import styles from '../../styles/home/categories.module.scss';
-import { Category, Link } from '../../types';
+import { Category, Link } from "../../types";
+
+import styles from "../../styles/home/categories.module.scss";
 
 interface SideMenuProps {
   categories: Category[];
@@ -20,9 +21,10 @@ export default function SideMenu({
   favorites,
   handleSelectCategory,
   categoryActive,
-    session
+  session,
 }: SideMenuProps) {
-    return (<div className={styles['categories-wrapper']}>
+  return (
+    <div className={styles["categories-wrapper"]}>
       <Favorites favorites={favorites} />
       <Categories
         categories={categories}
@@ -31,18 +33,15 @@ export default function SideMenu({
       />
       <MenuControls />
       <UserCard session={session} />
-    </div>);
+    </div>
+  );
 }
 
 function MenuControls() {
   return (
-        <div className={styles['controls']}>
-            <LinkTag href={'/category/create'}>
-                <a>Créer categorie</a>
-            </LinkTag>
-            <LinkTag href={'/link/create'}>
-                <a>Créer lien</a>
-            </LinkTag>
+    <div className={styles["controls"]}>
+      <LinkTag href={"/category/create"}>Créer categorie</LinkTag>
+      <LinkTag href={"/link/create"}>Créer lien</LinkTag>
     </div>
-    )
+  );
 }

components/FormLayout.tsx

@@ -1,11 +1,11 @@
-import Head from 'next/head';
-import Link from 'next/link';
+import Head from "next/head";
+import Link from "next/link";
 
-import MessageManager from './MessageManager';
+import MessageManager from "./MessageManager";
 
-import styles from '../styles/create.module.scss';
+import styles from "../styles/create.module.scss";
 
-import { config } from '../config';
+import { config } from "../config";
 
 interface FormProps {
   title: string;
@@ -28,30 +28,36 @@ export default function Form({
   infoMessage,
   canSubmit,
   handleSubmit,
-    textBtnConfirm = 'Valider',
-    classBtnConfirm = '',
-    children
+  textBtnConfirm = "Valider",
+  classBtnConfirm = "",
+  children,
 }: FormProps) {
-    return (<>
+  return (
+    <>
       <Head>
-            <title>{config.siteName} — {title}</title>
+        <title>
+          {config.siteName} — {title}
+        </title>
       </Head>
-        <div className={`App ${styles['create-app']}`}>
+      <div className={`App ${styles["create-app"]}`}>
         <h2>{title}</h2>
         <form onSubmit={handleSubmit}>
           {children}
-                <button type='submit' className={classBtnConfirm} disabled={!canSubmit}>
+          <button
+            type="submit"
+            className={classBtnConfirm}
+            disabled={!canSubmit}
+          >
             {textBtnConfirm}
           </button>
         </form>
-            <Link href='/'>
-                <a>← Revenir à l'accueil</a>
-            </Link>
+        <Link href="/">← Revenir à l'accueil</Link>
         <MessageManager
           info={infoMessage}
           error={errorMessage}
           success={successMessage}
         />
       </div>
-    </>)
+    </>
+  );
 }

components/Links/Links.tsx

@@ -1,95 +1,96 @@
-import LinkTag from 'next/link';
+import LinkTag from "next/link";
 
-import { Category, Link } from '../../types';
+import { Category, Link } from "../../types";
 
-import EditSVG from '../../public/icons/edit.svg';
-import RemoveSVG from '../../public/icons/remove.svg';
+import EditSVG from "../../public/icons/edit.svg";
+import RemoveSVG from "../../public/icons/remove.svg";
 
-import styles from '../../styles/home/links.module.scss';
+import styles from "../../styles/home/links.module.scss";
 
-export default function Links({ category }: { category: Category; }) {
+export default function Links({ category }: { category: Category }) {
   if (category === null) {
-        return (<div className={styles['no-category']}>
+    return (
+      <div className={styles["no-category"]}>
         <p>Veuillez séléctionner une categorié</p>
-            <LinkTag href='/category/create'>
-                <a>ou en créer une</a>
-            </LinkTag>
-        </div>)
+        <LinkTag href="/category/create">ou en créer une</LinkTag>
+      </div>
+    );
   }
 
   const { name, links } = category;
   if (links.length === 0) {
-        return (<div className={styles['no-link']}>
-            <p>Aucun lien pour <b>{category.name}</b></p>
-            <LinkTag href='/link/create'>
-                <a>Créer un lien</a>
-            </LinkTag>
-        </div>)
+    return (
+      <div className={styles["no-link"]}>
+        <p>
+          Aucun lien pour <b>{category.name}</b>
+        </p>
+        <LinkTag href="/link/create">Créer un lien</LinkTag>
+      </div>
+    );
   }
 
-    return (<div className={styles['links-wrapper']}>
-        <h2>{name}<span className={styles['links-count']}> — {links.length}</span></h2>
-        <ul className={styles['links']} key={Math.random()}>
+  return (
+    <div className={styles["links-wrapper"]}>
+      <h2>
+        {name}
+        <span className={styles["links-count"]}> — {links.length}</span>
+      </h2>
+      <ul className={styles["links"]} key={Math.random()}>
         {links.map((link, key) => (
           <LinkItem key={key} link={link} />
         ))}
       </ul>
-    </div>);
+    </div>
+  );
 }
 
-function LinkItem({ link }: { link: Link; }) {
+function LinkItem({ link }: { link: Link }) {
   const { id, name, url, category } = link;
   return (
-        <li className={styles['link']} key={id}>
-            <a href={url} target={'_blank'} rel={'noreferrer'}>
-                <span className={styles['link-name']}>
-                    {name}<span className={styles['link-category']}> — {category.name}</span>
+    <li className={styles["link"]} key={id}>
+      <LinkTag href={url} target={"_blank"} rel={"noreferrer"}>
+        <span className={styles["link-name"]}>
+          {name}
+          <span className={styles["link-category"]}> — {category.name}</span>
         </span>
         <LinkItemURL url={url} />
-            </a>
-            <div className={styles['controls']}>
-                <LinkTag href={`/link/edit/${id}`}>
-                    <a className={styles['edit']}>
-                        <EditSVG />
-                    </a>
       </LinkTag>
-                <LinkTag href={`/link/remove/${id}`}>
-                    <a className={styles['remove']}>
+      <div className={styles["controls"]}>
+        <LinkTag href={`/link/edit/${id}`} className={styles["edit"]}>
+          <EditSVG />
+        </LinkTag>
+        <LinkTag href={`/link/remove/${id}`} className={styles["remove"]}>
           <RemoveSVG />
-                    </a>
         </LinkTag>
       </div>
     </li>
   );
 }
 
-function LinkItemURL({ url }: { url: string; }) {
+function LinkItemURL({ url }: { url: string }) {
   try {
     const { origin, pathname, search } = new URL(url);
-        let text = '';
+    let text = "";
 
-        if (pathname !== '/') {
+    if (pathname !== "/") {
       text += pathname;
     }
 
-        if (search !== '') {
-            if (text === '') {
-                text += '/';
+    if (search !== "") {
+      if (text === "") {
+        text += "/";
       }
       text += search;
     }
 
     return (
-            <span className={styles['link-url']}>
-                {origin}<span className={styles['url-pathname']}>{text}</span>
+      <span className={styles["link-url"]}>
+        {origin}
+        <span className={styles["url-pathname"]}>{text}</span>
       </span>
-        )
+    );
   } catch (error) {
-        console.error('error', error);
-        return (
-            <span className={styles['link-url']}>
-                {url}
-            </span>
-        )
+    console.error("error", error);
+    return <span className={styles["link-url"]}>{url}</span>;
   }
 }

pages/signin.tsx

@@ -1,58 +1,62 @@
-import { getProviders, signIn, useSession } from 'next-auth/react';
-import { useRouter } from 'next/router';
+import { Provider } from "next-auth/providers";
+import { getProviders, signIn, useSession } from "next-auth/react";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
-import Link from 'next/link';
-import Head from 'next/head';
+import MessageManager from "../components/MessageManager";
+import { config } from "../config";
 
-import styles from '../styles/login.module.scss';
-import MessageManager from '../components/MessageManager';
+import styles from "../styles/login.module.scss";
 
-import { config } from '../config';
-import { Provider } from 'next-auth/providers';
-
-export default function SignIn({ providers }: { providers: Provider[]; }) {
+export default function SignIn({ providers }: { providers: Provider[] }) {
   const { data: session, status } = useSession();
   const info = useRouter().query?.info as string;
   const error = useRouter().query?.error as string;
 
-    if (status === 'loading') {
+  if (status === "loading") {
     return (
-            <div className='App' style={{ alignItems: 'center' }}>
-                <p style={{ height: 'fit-content' }}>Chargement de la session en cours</p>
+      <div className="App" style={{ alignItems: "center" }}>
+        <p style={{ height: "fit-content" }}>
+          Chargement de la session en cours
+        </p>
       </div>
     );
   }
 
-    return (<>
+  return (
+    <>
       <Head>
         <title>{config.siteName} — Authentification</title>
       </Head>
-        <div className='App'>
-            <div className={styles['wrapper']}>
+      <div className="App">
+        <div className={styles["wrapper"]}>
           <h2>Se connecter</h2>
-                <MessageManager
-                    error={error}
-                    info={info}
-                />
-                {session !== null && (<MessageManager info='Vous êtes déjà connecté' />)}
-                <div className={styles['providers']}>
+          <MessageManager error={error} info={info} />
+          {session !== null && (
+            <MessageManager info="Vous êtes déjà connecté" />
+          )}
+          <div className={styles["providers"]}>
             {Object.values(providers).map(({ name, id }) => (
-                        <button key={id} onClick={() => signIn(id, { callbackUrl: '/' })} disabled={session !== null}>
+              <button
+                key={id}
+                onClick={() => signIn(id, { callbackUrl: "/" })}
+                disabled={session !== null}
+              >
                 Continuer avec {name}
               </button>
             ))}
           </div>
-                <Link href='/'>
-                    <a>← Revenir à l'accueil</a>
-                </Link>
+          <Link href="/">← Revenir à l'accueil</Link>
         </div>
       </div>
-    </>);
+    </>
+  );
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps() {
   const providers = await getProviders();
   return {
-        props: { providers }
-    }
+    props: { providers },
+  };
 }