feat: add category visibility

prisma/migrations/20240413174109_add_category_visibility/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `category` ADD COLUMN `visibility` ENUM('private', 'public') NOT NULL DEFAULT 'private';

prisma/schema.prisma

@@ -33,6 +33,7 @@ model Category {
   name        String     @db.VarChar(255)
   description String?    @db.VarChar(255)
   links       Link[]
+  visibility  Visibility @default(private)
 
   author   User @relation(fields: [authorId], references: [id])
   authorId Int
@@ -63,3 +64,8 @@ model Link {
 
   @@map("link")
 }
+
+enum Visibility {
+  private
+  public
+}

public/locales/en/common.json

@@ -21,6 +21,7 @@
     "name": "Category name",
     "description": "Category description",
     "no-description": "No description",
+    "visibility": "Public",
     "create": "Create a category",
     "edit": "Edit a category",
     "remove": "Delete a category",

public/locales/fr/common.json

@@ -20,6 +20,7 @@
     "category": "Catégorie",
     "name": "Nom de la catégorie",
     "description": "Description de la catégorie",
+    "visibility": "Public",
     "no-description": "Aucune description",
     "create": "Créer une catégorie",
     "edit": "Modifier une catégorie",

src/components/Links/Links.tsx

@@ -4,6 +4,7 @@ import Footer from 'components/Footer/Footer';
 import CreateItem from 'components/QuickActions/CreateItem';
 import EditItem from 'components/QuickActions/EditItem';
 import RemoveItem from 'components/QuickActions/RemoveItem';
+import VisibilityBadge from 'components/Visibility/Visibility';
 import { motion } from 'framer-motion';
 import useActiveCategory from 'hooks/useActiveCategory';
 import { useTranslation } from 'next-i18next';
@@ -45,12 +46,16 @@ export default function Links({
             <RxHamburgerMenu size={'1.5em'} />
           </ButtonLink>
         )}
-        <span className={styles['category-name']}>
+        <div className={styles['category-name-wrapper']}>
-          {name}
+          <div className={styles['category-name']}>{name}</div>
           {links.length > 0 && (
             <span className={styles['links-count']}> — {links.length}</span>
           )}
-        </span>
+          <VisibilityBadge
+            label={t('common:category.visibility')}
+            visibility={activeCategory.visibility}
+          />
+        </div>
         <span className={styles['category-controls']}>
           <CreateItem
             type='link'

src/components/Links/links.module.scss

@@ -43,9 +43,15 @@
   align-items: center;
   justify-content: space-between;
 
-  & .category-name {
+  & .category-name-wrapper {
     min-width: 0;
     width: 100%;
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  & .category-name {
+    min-width: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -57,7 +63,7 @@
     align-items: center;
   }
 
-  & svg {
+  & > svg {
     display: flex;
   }
 

src/components/SideNavigation/Categories/CategoryItem.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
+import VisibilityBadge from 'components/Visibility/Visibility';
 import PATHS from 'constants/paths';
 import { motion } from 'framer-motion';
 import useActiveCategory from 'hooks/useActiveCategory';
 import useCategories from 'hooks/useCategories';
 import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
 import { makeRequest } from 'lib/request';
+import { useTranslation } from 'next-i18next';
 import { useCallback, useEffect, useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
@@ -28,6 +30,7 @@ export default function CategoryItem({
 }: Readonly<CategoryItemProps>): JSX.Element {
   const { activeCategory, setActiveCategory } = useActiveCategory();
   const { categories, setCategories } = useCategories();
+  const { t } = useTranslation('common');
 
   const ref = useRef<HTMLLIElement>();
 
@@ -155,8 +158,16 @@ export default function CategoryItem({
       )}
 
       <div className={styles['content']}>
+        <div className={styles['name-wrapper']}>
           <span className={styles['name']}>{category.name}</span>
-        <span className={styles['links-count']}>— {category.links.length}</span>
+          <span className={styles['links-count']}>
+            — {category.links.length}
+          </span>
+        </div>
+        <VisibilityBadge
+          label={t('common:category.visibility')}
+          visibility={category.visibility}
+        />
       </div>
     </motion.li>
   );

src/components/SideNavigation/Categories/categories.module.scss

@@ -37,13 +37,22 @@
   }
 
   & .content {
-    width: calc(100% - 42px);
+    width: 100%;
     display: flex;
-    flex: 1;
+    gap: 0.35em;
     align-items: center;
 
+    & .name-wrapper {
+      min-width: 0;
+      width: 100%;
+      display: flex;
+      gap: 0.35em;
+      flex: 1;
+      align-items: center;
+    }
+
     & .name {
-      margin-right: 5px;
+      min-width: 0;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;

src/components/Visibility/Visibility.tsx

@@ -0,0 +1,18 @@
+import { Visibility } from '@prisma/client';
+import { IoEarthOutline } from 'react-icons/io5';
+import styles from './visibility.module.scss';
+
+const VisibilityBadge = ({
+  label,
+  visibility,
+}: {
+  label: string;
+  visibility: Visibility;
+}) =>
+  visibility === Visibility.public && (
+    <span className={styles['visibility']}>
+      {label} <IoEarthOutline size='1em' />
+    </span>
+  );
+
+export default VisibilityBadge;

src/components/Visibility/visibility.module.scss

@@ -0,0 +1,14 @@
+@import 'styles/colors.scss';
+
+.visibility {
+  font-weight: 300;
+  font-size: 0.6em;
+  color: rgba($color: $blue, $alpha: 0.75);
+  border: 1px solid rgba($color: $blue, $alpha: 0.75);
+  border-radius: 50px;
+  padding: 0.15em 0.65em;
+  margin-left: 0.5em;
+  display: flex;
+  gap: 0.35em;
+  align-items: center;
+}

src/lib/category/categoryValidationSchema.ts

@@ -1,4 +1,5 @@
-import { number, object, string } from 'yup';
+import { Visibility } from '@prisma/client';
+import { mixed, number, object, string } from 'yup';
 
 const CategoryBodySchema = object({
   name: string()
@@ -6,6 +7,7 @@ const CategoryBodySchema = object({
     .required('Category name is required')
     .max(128, 'Category name is too long'),
   description: string().trim().max(255, 'Category description is too long'),
+  visibility: mixed<Visibility>().oneOf(Object.values(Visibility)).required(),
   nextId: number().required().nullable(),
 }).typeError('Missing request Body');
 

src/pages/api/category/[cid].ts

@@ -16,9 +16,8 @@ export default apiHandler({
 
 async function editCategory({ req, res, user }) {
   const { cid } = await CategoryQuerySchema.validate(req.query);
-  const { name, description, nextId } = await CategoryBodySchema.validate(
+  const { name, description, visibility, nextId } =
-    req.body,
+    await CategoryBodySchema.validate(req.body);
-  );
   const userId = user.id as User['id'];
 
   const category = await getUserCategory(user, cid);
@@ -107,6 +106,7 @@ async function editCategory({ req, res, user }) {
       data: {
         name,
         description,
+        visibility,
         nextId: category.nextId,
       },
     });

src/pages/api/category/index.ts

@@ -18,7 +18,9 @@ async function getCategories({ res, user }) {
 }
 
 async function createCategory({ req, res, user }) {
-  const { name, description } = await CategoryBodySchema.validate(req.body);
+  const { name, description, visibility } = await CategoryBodySchema.validate(
+    req.body,
+  );
 
   const category = await getUserCategoryByName(user, name);
   if (category) {
@@ -36,7 +38,7 @@ async function createCategory({ req, res, user }) {
   });
 
   const categoryCreated = await prisma.category.create({
-    data: { name, description, authorId: user.id },
+    data: { name, description, visibility, authorId: user.id },
   });
 
   if (lastCategory) {

src/pages/category/create.tsx

@@ -1,3 +1,5 @@
+import { Visibility } from '@prisma/client';
+import Checkbox from 'components/Checkbox';
 import FormLayout from 'components/FormLayout';
 import PageTransition from 'components/PageTransition';
 import TextBox from 'components/TextBox';
@@ -24,6 +26,7 @@ export default function PageCreateCategory({
 
   const [name, setName] = useState<string>('');
   const [description, setDescription] = useState<string>('');
+  const [visibility, setVisibility] = useState<Visibility>(Visibility.private);
 
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState<boolean>(false);
@@ -41,7 +44,7 @@ export default function PageCreateCategory({
     makeRequest({
       url: PATHS.API.CATEGORY,
       method: 'POST',
-      body: { name, description, nextId: null },
+      body: { name, description, visibility, nextId: null },
     })
       .then((data) =>
         router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
@@ -78,6 +81,14 @@ export default function PageCreateCategory({
           fieldClass={styles['input-field']}
           placeholder={t('common:category.description')}
         />
+        <Checkbox
+          name='visibility'
+          isChecked={visibility === Visibility.public}
+          onChangeCallback={(value) =>
+            setVisibility(!!value ? Visibility.public : Visibility.private)
+          }
+          label={t('common:category.visibility')}
+        />
       </FormLayout>
     </PageTransition>
   );

src/pages/category/edit/[cid].tsx

@@ -1,3 +1,5 @@
+import { Visibility } from '@prisma/client';
+import Checkbox from 'components/Checkbox';
 import FormLayout from 'components/FormLayout';
 import PageTransition from 'components/PageTransition';
 import TextBox from 'components/TextBox';
@@ -24,16 +26,27 @@ export default function PageEditCategory({
 
   const [name, setName] = useState<string>(category.name);
   const [description, setDescription] = useState<string>(category.description);
+  const [visibility, setVisibility] = useState<Visibility>(category.visibility);
 
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState<boolean>(false);
 
   const canSubmit = useMemo<boolean>(() => {
     const isFormEdited =
-      name !== category.name || description !== category.description;
+      name !== category.name ||
+      description !== category.description ||
+      visibility !== category.visibility;
     const isFormValid = name !== '';
     return isFormEdited && isFormValid && !submitted;
-  }, [category.description, category.name, description, name, submitted]);
+  }, [
+    category.description,
+    category.name,
+    category.visibility,
+    description,
+    name,
+    submitted,
+    visibility,
+  ]);
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -43,7 +56,7 @@ export default function PageEditCategory({
     makeRequest({
       url: `${PATHS.API.CATEGORY}/${category.id}`,
       method: 'PUT',
-      body: { name, description, nextId: category.nextId },
+      body: { name, description, visibility, nextId: category.nextId },
     })
       .then((data) =>
         router.push(`${PATHS.APP}?categoryId=${data?.categoryId}`),
@@ -78,6 +91,14 @@ export default function PageEditCategory({
           fieldClass={styles['input-field']}
           placeholder={t('common:category.description')}
         />
+        <Checkbox
+          name='visibility'
+          isChecked={visibility === Visibility.public}
+          onChangeCallback={(value) =>
+            setVisibility(!!value ? Visibility.public : Visibility.private)
+          }
+          label={t('common:category.visibility')}
+        />
       </FormLayout>
     </PageTransition>
   );