Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 14:43:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add optionnal link description

Browse Source
This commit is contained in:
Sonny
2024-04-09 23:05:14 +02:00
parent cf6b87306e
commit 584489dbb9
12 changed files with 101 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
prisma/migrations/20240409202205_add_link_description/migration.sql Normal file
View File

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

7
prisma/schema.prisma
View File

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

1
public/locales/en/common.json
View File

@@ -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",

1
public/locales/fr/common.json
View File

@@ -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",

57
src/components/Links/LinkItem.tsx
View File

@@ -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} />
<LinkTag
href={url}
target={'_blank'}
rel='noreferrer'
className='reset'
>
<span className={styles['link-name']}>
{name} {favorite && <AiFillStar color='#ffc107' />}
</span>
<LinkItemURL url={url} />
</LinkTag>
<div className={styles['controls']}>
<FavoriteItem
isFavorite={favorite}
onClick={onFavorite}
/>
<EditItem
type='link'
id={id}
/>
<RemoveItem
type='link'
id={id}
/>
<div className={styles['link-header']}>
<LinkFavicon url={url} />
<ExternalLink
href={url}
className='reset'
>
<span className={styles['link-name']}>
{name} {favorite && <AiFillStar color='#ffc107' />}
</span>
<LinkItemURL url={url} />
</ExternalLink>
<div className={styles['controls']}>
<FavoriteItem
isFavorite={favorite}
onClick={onFavorite}
/>
<EditItem
type='link'
id={id}
/>
<RemoveItem
type='link'
id={id}
/>
</div>
</div>
{description && (
<div className={styles['link-description']}>{description}</div>
)}
</motion.li>
);
}

16
src/components/Links/links.module.scss
View File

@@ -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;

1
src/lib/link/linkValidationSchema.ts
View File

@@ -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')

7
src/pages/api/link/[lid].ts
View File

@@ -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(
req.body,
);
const { name, url, description, favorite, categoryId } =
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,
},

6
src/pages/api/link/index.ts
View File

@@ -10,9 +10,8 @@ export default apiHandler({
});
async function createLink({ req, res, user }) {
const { name, url, favorite, categoryId } = await LinkBodySchema.validate(
req.body,
);
const { name, url, description, favorite, categoryId } =
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,

21
src/pages/link/create.tsx
View File

@@ -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>

33
src/pages/link/edit/[lid].tsx
View File

@@ -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,
favorite,
link.category.id,
link.favorite,
link.name,
link.url,
name,
submitted,
url,
]);
}, [categoryId, description, favorite, link, 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>

7
src/pages/link/remove/[lid].tsx
View File

@@ -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')}