Remove: <a> tags

components/Categories/Categories.tsx

@@ -1,67 +1,76 @@
-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;
+  categories: Category[];
+  categoryActive: Category;
+  handleSelectCategory: (category: Category) => void;
 }
-export default function Categories({ categories, categoryActive, handleSelectCategory }: CategoriesProps) {
-    return (
-        <div className={`${styles['block-wrapper']} ${styles['categories']}`}>
-            <h4>Catégories</h4>
-            <ul className={styles['items']}>
-                {categories.map((category, key) => (
-                    <CategoryItem
-                        category={category}
-                        categoryActive={categoryActive}
-                        handleSelectCategory={handleSelectCategory}
-                        key={key}
-                    />
-                ))}
-            </ul>
-        </div>
-    )
+export default function Categories({
+  categories,
+  categoryActive,
+  handleSelectCategory,
+}: CategoriesProps) {
+  return (
+    <div className={`${styles["block-wrapper"]} ${styles["categories"]}`}>
+      <h4>Catégories</h4>
+      <ul className={styles["items"]}>
+        {categories.map((category, key) => (
+          <CategoryItem
+            category={category}
+            categoryActive={categoryActive}
+            handleSelectCategory={handleSelectCategory}
+            key={key}
+          />
+        ))}
+      </ul>
+    </div>
+  );
 }
 
 interface CategoryItemProps {
-    category: Category;
-    categoryActive: Category;
-    handleSelectCategory: (category: Category) => void;
+  category: Category;
+  categoryActive: Category;
+  handleSelectCategory: (category: Category) => void;
 }
-function CategoryItem({ category, categoryActive, handleSelectCategory }: CategoryItemProps): JSX.Element {
-    const className = `${styles['item']} ${category.id === categoryActive.id ? styles['active'] : ''}`;
-    const onClick = () => handleSelectCategory(category);
+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>
-            <MenuOptions id={category.id} />
-        </li>
-    )
+  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>
+      <MenuOptions id={category.id} />
+    </li>
+  );
 }
 
-function MenuOptions({ id }: { id: number; }): JSX.Element {
-    return (
-        <div className={styles['menu-item']}>
-            <LinkTag href={`/category/edit/${id}`}>
-                <a className={styles['option-edit']}>
-                    <EditSVG />
-                </a>
-            </LinkTag>
-            <LinkTag href={`/category/remove/${id}`}>
-                <a className={styles['option-remove']}>
-                    <RemoveSVG />
-                </a>
-            </LinkTag>
-        </div>
-    )
-}
+function MenuOptions({ id }: { id: number }): JSX.Element {
+  return (
+    <div className={styles["menu-item"]}>
+      <LinkTag href={`/category/edit/${id}`} className={styles["option-edit"]}>
+        <EditSVG />
+      </LinkTag>
+      <LinkTag
+        href={`/category/remove/${id}`}
+        className={styles["option-remove"]}
+      >
+        <RemoveSVG />
+      </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[]; }) {
-    return (
-        <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>
-        </div>
-    )
+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"]}`}>
+      <h4>Favoris</h4>
+      <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 {
-    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>
-    )
-}
+function LinkFavorite({ link }: { link: Link }): JSX.Element {
+  const { name, url, category } = link;
+  return (
+    <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,48 +1,47 @@
-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[];
-    favorites: Link[];
-    handleSelectCategory: (category: Category) => void;
-    categoryActive: Category;
-    session: Session;
+  categories: Category[];
+  favorites: Link[];
+  handleSelectCategory: (category: Category) => void;
+  categoryActive: Category;
+  session: Session;
 }
 export default function SideMenu({
-    categories,
-    favorites,
-    handleSelectCategory,
-    categoryActive,
-    session
+  categories,
+  favorites,
+  handleSelectCategory,
+  categoryActive,
+  session,
 }: SideMenuProps) {
-    return (<div className={styles['categories-wrapper']}>
-        <Favorites favorites={favorites} />
-        <Categories
-            categories={categories}
-            categoryActive={categoryActive}
-            handleSelectCategory={handleSelectCategory}
-        />
-        <MenuControls />
-        <UserCard session={session} />
-    </div>);
+  return (
+    <div className={styles["categories-wrapper"]}>
+      <Favorites favorites={favorites} />
+      <Categories
+        categories={categories}
+        categoryActive={categoryActive}
+        handleSelectCategory={handleSelectCategory}
+      />
+      <MenuControls />
+      <UserCard session={session} />
+    </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>
-    )
-}
+  return (
+    <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,57 +1,63 @@
-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;
-    errorMessage?: string;
-    successMessage?: string;
-    infoMessage?: string;
+  title: string;
+  errorMessage?: string;
+  successMessage?: string;
+  infoMessage?: string;
 
-    canSubmit: boolean;
-    handleSubmit: (event) => void;
+  canSubmit: boolean;
+  handleSubmit: (event) => void;
 
-    textBtnConfirm?: string;
-    classBtnConfirm?: string;
+  textBtnConfirm?: string;
+  classBtnConfirm?: string;
 
-    children: any;
+  children: any;
 }
 export default function Form({
-    title,
-    errorMessage,
-    successMessage,
-    infoMessage,
-    canSubmit,
-    handleSubmit,
-    textBtnConfirm = 'Valider',
-    classBtnConfirm = '',
-    children
+  title,
+  errorMessage,
+  successMessage,
+  infoMessage,
+  canSubmit,
+  handleSubmit,
+  textBtnConfirm = "Valider",
+  classBtnConfirm = "",
+  children,
 }: FormProps) {
-    return (<>
-        <Head>
-            <title>{config.siteName} — {title}</title>
-        </Head>
-        <div className={`App ${styles['create-app']}`}>
-            <h2>{title}</h2>
-            <form onSubmit={handleSubmit}>
-                {children}
-                <button type='submit' className={classBtnConfirm} disabled={!canSubmit}>
-                    {textBtnConfirm}
-                </button>
-            </form>
-            <Link href='/'>
-                <a>← Revenir à l'accueil</a>
-            </Link>
-            <MessageManager
-                info={infoMessage}
-                error={errorMessage}
-                success={successMessage}
-            />
-        </div>
-    </>)
-}
+  return (
+    <>
+      <Head>
+        <title>
+          {config.siteName} — {title}
+        </title>
+      </Head>
+      <div className={`App ${styles["create-app"]}`}>
+        <h2>{title}</h2>
+        <form onSubmit={handleSubmit}>
+          {children}
+          <button
+            type="submit"
+            className={classBtnConfirm}
+            disabled={!canSubmit}
+          >
+            {textBtnConfirm}
+          </button>
+        </form>
+        <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; }) {
-    if (category === null) {
-        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>)
-    }
-
-    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['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>);
-}
-
-function LinkItem({ link }: { link: Link; }) {
-    const { id, name, url, category } = link;
+export default function Links({ category }: { category: Category }) {
+  if (category === null) {
     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>
-                </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']}>
-                        <RemoveSVG />
-                    </a>
-                </LinkTag>
-            </div>
-        </li>
+      <div className={styles["no-category"]}>
+        <p>Veuillez séléctionner une categorié</p>
+        <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">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()}>
+        {links.map((link, key) => (
+          <LinkItem key={key} link={link} />
+        ))}
+      </ul>
+    </div>
+  );
 }
 
-function LinkItemURL({ url }: { url: string; }) {
-    try {
-        const { origin, pathname, search } = new URL(url);
-        let text = '';
+function LinkItem({ link }: { link: Link }) {
+  const { id, name, url, category } = link;
+  return (
+    <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} />
+      </LinkTag>
+      <div className={styles["controls"]}>
+        <LinkTag href={`/link/edit/${id}`} className={styles["edit"]}>
+          <EditSVG />
+        </LinkTag>
+        <LinkTag href={`/link/remove/${id}`} className={styles["remove"]}>
+          <RemoveSVG />
+        </LinkTag>
+      </div>
+    </li>
+  );
+}
 
-        if (pathname !== '/') {
-            text += pathname;
-        }
+function LinkItemURL({ url }: { url: string }) {
+  try {
+    const { origin, pathname, search } = new URL(url);
+    let text = "";
 
-        if (search !== '') {
-            if (text === '') {
-                text += '/';
-            }
-            text += search;
-        }
-
-        return (
-            <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>
-        )
+    if (pathname !== "/") {
+      text += pathname;
     }
-}
+
+    if (search !== "") {
+      if (text === "") {
+        text += "/";
+      }
+      text += search;
+    }
+
+    return (
+      <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>;
+  }
+}

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[] }) {
+  const { data: session, status } = useSession();
+  const info = useRouter().query?.info as string;
+  const error = useRouter().query?.error as string;
 
-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") {
+    return (
+      <div className="App" style={{ alignItems: "center" }}>
+        <p style={{ height: "fit-content" }}>
+          Chargement de la session en cours
+        </p>
+      </div>
+    );
+  }
 
-    if (status === 'loading') {
-        return (
-            <div className='App' style={{ alignItems: 'center' }}>
-                <p style={{ height: 'fit-content' }}>Chargement de la session en cours</p>
-            </div>
-        );
-    }
-
-    return (<>
-        <Head>
-            <title>{config.siteName} — Authentification</title>
-        </Head>
-        <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']}>
-                    {Object.values(providers).map(({ name, id }) => (
-                        <button key={id} onClick={() => signIn(id, { callbackUrl: '/' })} disabled={session !== null}>
-                            Continuer avec {name}
-                        </button>
-                    ))}
-                </div>
-                <Link href='/'>
-                    <a>← Revenir à l'accueil</a>
-                </Link>
-            </div>
+  return (
+    <>
+      <Head>
+        <title>{config.siteName} — Authentification</title>
+      </Head>
+      <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"]}>
+            {Object.values(providers).map(({ name, id }) => (
+              <button
+                key={id}
+                onClick={() => signIn(id, { callbackUrl: "/" })}
+                disabled={session !== null}
+              >
+                Continuer avec {name}
+              </button>
+            ))}
+          </div>
+          <Link href="/">← Revenir à l'accueil</Link>
         </div>
-    </>);
+      </div>
+    </>
+  );
 }
 
-export async function getServerSideProps(context) {
-    const providers = await getProviders();
-    return {
-        props: { providers }
-    }
-}
+export async function getServerSideProps() {
+  const providers = await getProviders();
+  return {
+    props: { providers },
+  };
+}