feat: add optionnal link description

prisma/migrations/20240409202205_add_link_description/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `link` ADD COLUMN `description` VARCHAR(255) NULL;

prisma/schema.prisma

@@ -45,9 +45,10 @@ model Category {
 }
 
 model Link {
-  id   Int    @id @default(autoincrement())
+  id          Int     @id @default(autoincrement())
-  name String @db.VarChar(255)
+  name        String  @db.VarChar(255)
-  url  String @db.Text
+  description String? @db.VarChar(255)
+  url         String  @db.Text
 
   category   Category @relation(fields: [categoryId], references: [id])
   categoryId Int

public/locales/en/common.json

@@ -8,6 +8,7 @@
     "links": "Links",
     "link": "Link",
     "name": "Link name",
+    "description": "Link description",
     "create": "Create a link",
     "edit": "Edit a link",
     "remove": "Delete a link",

public/locales/fr/common.json

@@ -8,6 +8,7 @@
     "links": "Liens",
     "link": "Lien",
     "name": "Nom du lien",
+    "description": "Description du lien",
     "create": "Créer un lien",
     "edit": "Modifier un lien",
     "remove": "Supprimer un lien",

src/components/Links/LinkItem.tsx

@@ -1,3 +1,4 @@
+import ExternalLink from 'components/ExternalLink';
 import EditItem from 'components/QuickActions/EditItem';
 import FavoriteItem from 'components/QuickActions/FavoriteItem';
 import RemoveItem from 'components/QuickActions/RemoveItem';
@@ -5,7 +6,6 @@ import PATHS from 'constants/paths';
 import { motion } from 'framer-motion';
 import useCategories from 'hooks/useCategories';
 import { makeRequest } from 'lib/request';
-import LinkTag from 'next/link';
 import { useCallback } from 'react';
 import { AiFillStar } from 'react-icons/ai';
 import { LinkWithCategory } from 'types';
@@ -19,7 +19,7 @@ export default function LinkItem({
   link: LinkWithCategory;
   index: number;
 }) {
-  const { id, name, url, favorite } = link;
+  const { id, name, url, description, favorite } = link;
   const { categories, setCategories } = useCategories();
 
   const toggleFavorite = useCallback(
@@ -73,32 +73,35 @@ export default function LinkItem({
         delay: index * 0.05,
       }}
     >
-      <LinkFavicon url={url} />
+      <div className={styles['link-header']}>
-      <LinkTag
+        <LinkFavicon url={url} />
-        href={url}
+        <ExternalLink
-        target={'_blank'}
+          href={url}
-        rel='noreferrer'
+          className='reset'
-        className='reset'
+        >
-      >
+          <span className={styles['link-name']}>
-        <span className={styles['link-name']}>
+            {name} {favorite && <AiFillStar color='#ffc107' />}
-          {name} {favorite && <AiFillStar color='#ffc107' />}
+          </span>
-        </span>
+          <LinkItemURL url={url} />
-        <LinkItemURL url={url} />
+        </ExternalLink>
-      </LinkTag>
+        <div className={styles['controls']}>
-      <div className={styles['controls']}>
+          <FavoriteItem
-        <FavoriteItem
+            isFavorite={favorite}
-          isFavorite={favorite}
+            onClick={onFavorite}
-          onClick={onFavorite}
+          />
-        />
+          <EditItem
-        <EditItem
+            type='link'
-          type='link'
+            id={id}
-          id={id}
+          />
-        />
+          <RemoveItem
-        <RemoveItem
+            type='link'
-          type='link'
+            id={id}
-          id={id}
+          />
-        />
+        </div>
       </div>
+      {description && (
+        <div className={styles['link-description']}>{description}</div>
+      )}
     </motion.li>
   );
 }

src/components/Links/links.module.scss

@@ -91,8 +91,18 @@
   border: 1px solid $lightest-grey;
   border-radius: 3px;
   outline: 3px solid transparent;
-  display: flex;
+
-  align-items: center;
+  & .link-header {
+    display: flex;
+    align-items: center;
+  }
+
+  & .link-description {
+    margin-top: 0.5em;
+    color: $black;
+    font-size: 0.8em;
+    word-wrap: break-word;
+  }
 
   &:hover {
     border: 1px solid transparent;
@@ -109,7 +119,7 @@
   }
 }
 
-.link > a {
+.link-header > a {
   height: 100%;
   max-width: calc(100% - 125px); // TODO: faut fix ça, c'est pas beau
   text-decoration: none;

src/lib/link/linkValidationSchema.ts

@@ -6,6 +6,7 @@ const LinkBodySchema = object({
     .trim()
     .required('Link name is required')
     .max(128, 'Link name is too long'),
+  description: string().trim().max(255, 'Link description is too long'),
   url: string()
     .trim()
     .required('URl is required')

src/pages/api/link/[lid].ts

@@ -10,9 +10,8 @@ export default apiHandler({
 
 async function editLink({ req, res, user }) {
   const { lid } = await LinkQuerySchema.validate(req.query);
-  const { name, url, favorite, categoryId } = await LinkBodySchema.validate(
+  const { name, url, description, favorite, categoryId } =
-    req.body,
+    await LinkBodySchema.validate(req.body);
-  );
 
   const link = await getUserLink(user, lid);
   if (!link) {
@@ -22,6 +21,7 @@ async function editLink({ req, res, user }) {
   if (
     link.name === name &&
     link.url === url &&
+    link.description === description &&
     link.favorite === favorite &&
     link.categoryId === categoryId
   ) {
@@ -33,6 +33,7 @@ async function editLink({ req, res, user }) {
     data: {
       name,
       url,
+      description,
       favorite,
       categoryId,
     },

src/pages/api/link/index.ts

@@ -10,9 +10,8 @@ export default apiHandler({
 });
 
 async function createLink({ req, res, user }) {
-  const { name, url, favorite, categoryId } = await LinkBodySchema.validate(
+  const { name, url, description, favorite, categoryId } =
-    req.body,
+    await LinkBodySchema.validate(req.body);
-  );
 
   const link = await getUserLinkByName(user, name, categoryId);
   if (link) {
@@ -28,6 +27,7 @@ async function createLink({ req, res, user }) {
     data: {
       name,
       url,
+      description,
       categoryId,
       favorite,
       authorId: user.id,

src/pages/link/create.tsx

@@ -28,6 +28,8 @@ export default function PageCreateLink({
 
   const [name, setName] = useState<LinkWithCategory['name']>('');
   const [url, setUrl] = useState<LinkWithCategory['url']>('');
+  const [description, setDescription] =
+    useState<LinkWithCategory['description']>('');
   const [favorite, setFavorite] = useState<LinkWithCategory['favorite']>(false);
   const [categoryId, setCategoryId] = useState<
     LinkWithCategory['category']['id']
@@ -54,7 +56,7 @@ export default function PageCreateLink({
     makeRequest({
       url: PATHS.API.LINK,
       method: 'POST',
-      body: { name, url, favorite, categoryId },
+      body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
         router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
@@ -75,19 +77,29 @@ export default function PageCreateLink({
         <TextBox
           name='name'
           label={t('common:link.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={t('common:link.name')}
           innerRef={autoFocusRef}
+          required
         />
         <TextBox
           name='url'
           label={t('common:link.link')}
-          onChangeCallback={(value) => setUrl(value)}
+          onChangeCallback={setUrl}
           value={url}
           fieldClass={styles['input-field']}
           placeholder='https://www.example.com/'
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={t('common:link.description')}
         />
         <Selector
           name='category'
@@ -98,11 +110,12 @@ export default function PageCreateLink({
             label: name,
             value: id,
           }))}
+          required
         />
         <Checkbox
           name='favorite'
           isChecked={favorite}
-          onChangeCallback={(value) => setFavorite(value)}
+          onChangeCallback={setFavorite}
           label={t('common:favorite')}
         />
       </FormLayout>

src/pages/link/edit/[lid].tsx

@@ -30,6 +30,7 @@ export default function PageEditLink({
 
   const [name, setName] = useState<string>(link.name);
   const [url, setUrl] = useState<string>(link.url);
+  const [description, setDescription] = useState<string>(link.description);
   const [favorite, setFavorite] = useState<boolean>(link.favorite);
   const [categoryId, setCategoryId] = useState<number | null>(
     link.category?.id || null,
@@ -42,6 +43,7 @@ export default function PageEditLink({
     const isFormEdited =
       name !== link.name ||
       url !== link.url ||
+      description !== link.description ||
       favorite !== link.favorite ||
       categoryId !== link.category.id;
     const isFormValid =
@@ -50,17 +52,7 @@ export default function PageEditLink({
       favorite !== null &&
       categoryId !== null;
     return isFormEdited && isFormValid && !submitted;
-  }, [
+  }, [categoryId, description, favorite, link, name, submitted, url]);
-    categoryId,
-    favorite,
-    link.category.id,
-    link.favorite,
-    link.name,
-    link.url,
-    name,
-    submitted,
-    url,
-  ]);
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -70,7 +62,7 @@ export default function PageEditLink({
     makeRequest({
       url: `${PATHS.API.LINK}/${link.id}`,
       method: 'PUT',
-      body: { name, url, favorite, categoryId },
+      body: { name, url, description, favorite, categoryId },
     })
       .then((data) =>
         router.push(`${PATHS.HOME}?categoryId=${data?.categoryId}`),
@@ -90,19 +82,29 @@ export default function PageEditLink({
         <TextBox
           name='name'
           label={t('common:link.name')}
-          onChangeCallback={(value) => setName(value)}
+          onChangeCallback={setName}
           value={name}
           fieldClass={styles['input-field']}
           placeholder={`${t('common:link.name')} : ${link.name}`}
           innerRef={autoFocusRef}
+          required
         />
         <TextBox
           name='url'
           label={t('common:link.link')}
-          onChangeCallback={(value) => setUrl(value)}
+          onChangeCallback={setUrl}
           value={url}
           fieldClass={styles['input-field']}
           placeholder='https://example.com/'
+          required
+        />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          onChangeCallback={setDescription}
+          value={description}
+          fieldClass={styles['input-field']}
+          placeholder={`${t('common:link.description')} : ${link.description}`}
         />
         <Selector
           name='category'
@@ -113,11 +115,12 @@ export default function PageEditLink({
             label: name,
             value: id,
           }))}
+          required
         />
         <Checkbox
           name='favorite'
           isChecked={favorite}
-          onChangeCallback={(value) => setFavorite(value)}
+          onChangeCallback={setFavorite}
           label={t('common:favorite')}
         />
       </FormLayout>

src/pages/link/remove/[lid].tsx

@@ -69,6 +69,13 @@ export default function PageRemoveLink({
           fieldClass={styles['input-field']}
           disabled={true}
         />
+        <TextBox
+          name='description'
+          label={t('common:link.description')}
+          value={link.description}
+          fieldClass={styles['input-field']}
+          disabled={true}
+        />
         <TextBox
           name='category'
           label={t('common:category.category')}