chore: release v1.3.0

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "my-links",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-links",
-      "version": "1.2.1",
+      "version": "1.3.0",
       "dependencies": {
         "@ducanh2912/next-pwa": "^10.2.6",
         "@prisma/client": "^5.12.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-links",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "MyLinks is a free and open source software, that lets you manage your bookmarks in an intuitive interface",
   "private": false,
   "scripts": {

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

@@ -29,10 +29,11 @@ model User {
 }
 
 model Category {
-  id          Int     @id @default(autoincrement())
-  name        String  @db.VarChar(255)
-  description String? @db.VarChar(255)
+  id          Int        @id @default(autoincrement())
+  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/CategoryDescription/CategoryDescription.tsx

@@ -0,0 +1,13 @@
+import { CategoryWithLinks } from 'types/types';
+import styles from './category-description.module.scss';
+
+const CategoryDescription = ({
+  description,
+}: {
+  description?: CategoryWithLinks['description'];
+}) =>
+  description && (
+    <p className={styles['category-description']}>{description}</p>
+  );
+
+export default CategoryDescription;

src/components/Links/CategoryDescription/category-description.module.scss

@@ -0,0 +1,4 @@
+.category-description {
+  font-size: 0.85em;
+  margin-bottom: 0.5em;
+}

src/components/Links/CategoryHeader/CategoryHeader.tsx

@@ -0,0 +1,24 @@
+import { CategoryWithLinks } from 'types/types';
+import styles from './category-header.module.scss';
+import VisibilityBadge from 'components/Visibility/Visibility';
+import { useTranslation } from 'next-i18next';
+
+export default function CategoryHeader({
+  activeCategory: { name, links, visibility },
+}: {
+  activeCategory: CategoryWithLinks;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles['category-name-wrapper']}>
+      <div className={styles['category-name']}>{name}</div>
+      {links.length > 0 && (
+        <span className={styles['links-count']}> — {links.length}</span>
+      )}
+      <VisibilityBadge
+        label={t('common:category.visibility')}
+        visibility={visibility}
+      />
+    </div>
+  );
+}

src/components/Links/CategoryHeader/category-header.module.scss

@@ -0,0 +1,24 @@
+@import 'styles/colors.scss';
+
+.category-name-wrapper {
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  gap: 0.35em;
+  flex: 1;
+  align-items: center;
+}
+
+.category-name {
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.links-count {
+  min-width: fit-content;
+  font-weight: 300;
+  font-size: 0.8em;
+  color: $grey;
+}

src/components/Links/LinkItem.tsx

@@ -15,9 +15,11 @@ import styles from './links.module.scss';
 export default function LinkItem({
   link,
   index,
+  showUserControls = false,
 }: {
   link: LinkWithCategory;
   index: number;
+  showUserControls: boolean;
 }) {
   const { id, name, url, description, favorite } = link;
   const { categories, setCategories } = useCategories();
@@ -80,24 +82,27 @@ export default function LinkItem({
           className='reset'
         >
           <span className={styles['link-name']}>
-            {name} {favorite && <AiFillStar color='#ffc107' />}
+            {name}{' '}
+            {showUserControls && 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>
+        {showUserControls && (
+          <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>

src/components/Links/LinkList/LinkList.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { CategoryWithLinks } from 'types/types';
+import LinkItem from '../LinkItem';
+import styles from '../links.module.scss';
+
+const LinkList = ({
+  links,
+  showUserControls = false,
+}: {
+  links: CategoryWithLinks['links'];
+  showUserControls: boolean;
+}) => (
+  <ul className={clsx(styles['links'], 'reset')}>
+    {links.map((link, index) => (
+      <LinkItem
+        link={link}
+        index={index}
+        key={link.id}
+        showUserControls={showUserControls}
+      />
+    ))}
+  </ul>
+);
+
+export default LinkList;

src/components/Links/LinkList/NoLinkItem.tsx

@@ -0,0 +1,37 @@
+import { Category } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import styles from '../links.module.scss';
+
+export default function NoLinkItem({
+  categoryId,
+  categoryName,
+}: {
+  categoryId: Category['id'];
+  categoryName: Category['name'];
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles['no-link']}>
+      <motion.p
+        initial={{ opacity: 0, scale: 0.85 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          type: 'spring',
+          stiffness: 260,
+          damping: 20,
+          duration: 0.01,
+        }}
+        dangerouslySetInnerHTML={{
+          __html: t('home:no-link', { name: categoryName } as any, {
+            interpolation: { escapeValue: false },
+          }),
+        }}
+      />
+      <Link href={`/link/create?categoryId=${categoryId}`}>
+        {t('common:link.create')}
+      </Link>
+    </div>
+  );
+}

src/components/Links/Links.tsx

@@ -1,15 +1,17 @@
-import clsx from 'clsx';
 import ButtonLink from 'components/ButtonLink';
 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 { motion } from 'framer-motion';
 import useActiveCategory from 'hooks/useActiveCategory';
+import useUser from 'hooks/useUser';
 import { useTranslation } from 'next-i18next';
 import LinkTag from 'next/link';
 import { RxHamburgerMenu } from 'react-icons/rx';
-import LinkItem from './LinkItem';
+import CategoryDescription from './CategoryDescription/CategoryDescription';
+import CategoryHeader from './CategoryHeader/CategoryHeader';
+import LinkList from './LinkList/LinkList';
+import NoLinkItem from './LinkList/NoLinkItem';
 import styles from './links.module.scss';
 
 interface LinksProps {
@@ -21,6 +23,7 @@ export default function Links({
   isMobile,
   openSideMenu,
 }: Readonly<LinksProps>) {
+  const { status } = useUser();
   const { t } = useTranslation('home');
   const { activeCategory } = useActiveCategory();
 
@@ -33,7 +36,7 @@ export default function Links({
     );
   }
 
-  const { id, name, links } = activeCategory;
+  const { id, name, description, links } = activeCategory;
   return (
     <div className={styles['links-wrapper']}>
       <h2 className={styles['category-header']}>
@@ -45,64 +48,36 @@ export default function Links({
             <RxHamburgerMenu size={'1.5em'} />
           </ButtonLink>
         )}
-        <span className={styles['category-name']}>
-          {name}
-          {links.length > 0 && (
-            <span className={styles['links-count']}> — {links.length}</span>
-          )}
-        </span>
-        <span className={styles['category-controls']}>
-          <CreateItem
-            type='link'
-            categoryId={id}
-          />
-          <EditItem
-            type='category'
-            id={id}
-          />
-          <RemoveItem
-            type='category'
-            id={id}
-          />
-        </span>
-      </h2>
-      {activeCategory.description && (
-        <p className={styles['category-description']}>
-          {activeCategory.description}
-        </p>
-      )}
-      {links.length !== 0 ? (
-        <ul className={clsx(styles['links'], 'reset')}>
-          {links.map((link, index) => (
-            <LinkItem
-              link={link}
-              index={index}
-              key={link.id}
+        <CategoryHeader activeCategory={activeCategory} />
+        {status === 'authenticated' && (
+          <span className={styles['category-controls']}>
+            <CreateItem
+              type='link'
+              categoryId={id}
             />
-          ))}
-        </ul>
+            <EditItem
+              type='category'
+              id={id}
+            />
+            <RemoveItem
+              type='category'
+              id={id}
+            />
+          </span>
+        )}
+      </h2>
+      <CategoryDescription description={description} />
+      {links.length !== 0 ? (
+        <LinkList
+          links={links}
+          showUserControls
+        />
       ) : (
-        <div className={styles['no-link']}>
-          <motion.p
-            key={id}
-            initial={{ opacity: 0, scale: 0.85 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{
-              type: 'spring',
-              stiffness: 260,
-              damping: 20,
-              duration: 0.01,
-            }}
-            dangerouslySetInnerHTML={{
-              __html: t('home:no-link', { name } as any, {
-                interpolation: { escapeValue: false },
-              }),
-            }}
-          />
-          <LinkTag href={`/link/create?categoryId=${id}`}>
-            {t('common:link.create')}
-          </LinkTag>
-        </div>
+        <NoLinkItem
+          categoryId={id}
+          categoryName={name}
+          key={id}
+        />
       )}
       <Footer />
     </div>

src/components/Links/links.module.scss

@@ -28,11 +28,6 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-
-  & .category-description {
-    font-size: 0.85em;
-    margin-bottom: 0.5em;
-  }
 }
 
 .category-header {
@@ -43,29 +38,15 @@
   align-items: center;
   justify-content: space-between;
 
-  & .category-name {
-    min-width: 0;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
   & .category-controls {
     display: flex;
     gap: 0.5em;
     align-items: center;
   }
 
-  & svg {
+  & > svg {
     display: flex;
   }
-
-  & .links-count {
-    color: $grey;
-    font-weight: 300;
-    font-size: 0.8em;
-  }
 }
 
 .links {

src/components/Navbar/navbar.module.scss

@@ -7,6 +7,7 @@
   display: flex;
   gap: 1.5em;
   justify-content: center;
+  transition: 0.15s;
 }
 
 .navbar .user {
@@ -14,3 +15,9 @@
   gap: 0.25em;
   justify-content: center;
 }
+
+@media (max-width: 768px) {
+  .navbar ul {
+    gap: 0.5em;
+  }
+}

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']}>
-        <span className={styles['name']}>{category.name}</span>
-        <span className={styles['links-count']}>— {category.links.length}</span>
+        <div className={styles['name-wrapper']}>
+          <span className={styles['name']}>{category.name}</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: calc(100% - 24px);
     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,13 @@
+@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;
+  display: flex;
+  gap: 0.35em;
+  align-items: center;
+}

src/constants/paths.ts

@@ -3,6 +3,7 @@ const PATHS = {
   LOGOUT: '/logout',
   HOME: '/',
   APP: '/app',
+  SHARED: '/shared',
   PRIVACY: '/privacy',
   TERMS: '/terms',
   ADMIN: '/admin',

src/hooks/useUser.tsx

@@ -2,7 +2,12 @@ import { User } from '@prisma/client';
 import { Session } from 'next-auth';
 import { useSession } from 'next-auth/react';
 
-export default function useUser() {
-  const { data } = useSession();
-  return data as Session & { user?: User };
+type SessionStatus = ReturnType<typeof useSession>['status'];
+
+export default function useUser(): Session & {
+  user?: User;
+  status: SessionStatus;
+} {
+  const { data, status } = useSession();
+  return { status, ...data, user: data?.user as User };
 }

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/lib/category/getPublicCategoryById.ts

@@ -0,0 +1,14 @@
+import { Category, Visibility } from '@prisma/client';
+import prisma from 'utils/prisma';
+
+export default async function getPublicCategoryById(id: Category['id']) {
+  return await prisma.category.findFirst({
+    where: {
+      id,
+      visibility: Visibility.public,
+    },
+    include: {
+      links: true,
+    },
+  });
+}

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(
-    req.body,
-  );
+  const { name, description, visibility, nextId } =
+    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/app.tsx

@@ -13,15 +13,17 @@ import { AnimatePresence } from 'framer-motion';
 import { useMediaQuery } from 'hooks/useMediaQuery';
 import useModal from 'hooks/useModal';
 import { getServerSideTranslation } from 'i18n';
+import getPublicCategoryById from 'lib/category/getPublicCategoryById';
 import getUserCategories from 'lib/category/getUserCategories';
 import sortCategoriesByNextId from 'lib/category/sortCategoriesByNextId';
+import getUser from 'lib/user/getUser';
 import { useRouter } from 'next/router';
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSwipeable } from 'react-swipeable';
 import styles from 'styles/home.module.scss';
 import { CategoryWithLinks, LinkWithCategory } from 'types/types';
-import { withAuthentication } from 'utils/session';
+import { getSession } from 'utils/session';
 
 interface HomePageProps {
   categories: CategoryWithLinks[];
@@ -156,50 +158,72 @@ function HomeProviders(
   );
 }
 
-export const getServerSideProps = withAuthentication(
-  async ({ query, session, user, locale }) => {
-    const queryCategoryId = (query?.categoryId as string) || '';
-    const searchQueryParam = (query?.q as string)?.toLowerCase() || '';
+export async function getServerSideProps({ req, res, locale, query }) {
+  const session = await getSession(req, res);
+  const user = await getUser(session);
 
-    const categories = await getUserCategories(user);
-    if (categories.length === 0) {
-      return {
-        redirect: {
-          destination: PATHS.CATEGORY.CREATE,
-        },
-      };
-    }
+  const queryCategoryId = (query?.categoryId as string) || '';
+  const searchQueryParam = (query?.q as string)?.toLowerCase() || '';
 
-    const link = categories
-      .map((category) => category.links)
-      .flat()
-      .find(
-        (link: LinkWithCategory) =>
-          link.name.toLowerCase() === searchQueryParam ||
-          link.url.toLowerCase() === searchQueryParam,
-      );
-    if (link) {
-      return {
-        redirect: {
-          destination: link.url,
-        },
-      };
-    }
-
-    const activeCategory = categories.find(
-      ({ id }) => id === Number(queryCategoryId),
-    );
+  const publicCategory = await getPublicCategoryById(Number(queryCategoryId));
+  if (!publicCategory && !user) {
     return {
-      props: {
-        session,
-        categories: JSON.parse(
-          JSON.stringify(sortCategoriesByNextId(categories)),
-        ),
-        activeCategory: activeCategory
-          ? JSON.parse(JSON.stringify(activeCategory))
-          : null,
-        ...(await getServerSideTranslation(locale, ['home'])),
+      redirect: {
+        destination: PATHS.LOGIN,
       },
     };
-  },
-);
+  }
+
+  if (!!publicCategory && publicCategory.authorId !== user?.id) {
+    return {
+      redirect: {
+        destination: `${PATHS.SHARED}?id=${publicCategory.id}`,
+      },
+    };
+  }
+
+  const categories = await getUserCategories(user);
+  if (categories.length === 0) {
+    return {
+      redirect: {
+        destination: PATHS.CATEGORY.CREATE,
+      },
+    };
+  }
+
+  const link = categories
+    .map((category) => category.links)
+    .flat()
+    .find(
+      (link: LinkWithCategory) =>
+        link.name.toLowerCase() === searchQueryParam ||
+        link.url.toLowerCase() === searchQueryParam,
+    );
+  if (link) {
+    return {
+      redirect: {
+        destination: link.url,
+      },
+    };
+  }
+
+  const activeCategory = categories.find(
+    ({ id }) => id === Number(queryCategoryId),
+  );
+  return {
+    redirect: !activeCategory &&
+      queryCategoryId && {
+        destination: PATHS.APP,
+      },
+    props: {
+      session,
+      categories: JSON.parse(
+        JSON.stringify(sortCategoriesByNextId(categories)),
+      ),
+      activeCategory: activeCategory
+        ? JSON.parse(JSON.stringify(activeCategory))
+        : null,
+      ...(await getServerSideTranslation(locale, ['home'])),
+    },
+  };
+}

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

src/pages/shared.tsx

@@ -0,0 +1,80 @@
+import Footer from 'components/Footer/Footer';
+import CategoryDescription from 'components/Links/CategoryDescription/CategoryDescription';
+import CategoryHeader from 'components/Links/CategoryHeader/CategoryHeader';
+import LinkList from 'components/Links/LinkList/LinkList';
+import Navbar from 'components/Navbar/Navbar';
+import PageTransition from 'components/PageTransition';
+import PATHS from 'constants/paths';
+import { getServerSideTranslation } from 'i18n';
+import getPublicCategoryById from 'lib/category/getPublicCategoryById';
+import { useTranslation } from 'next-i18next';
+import { DefaultSeo } from 'next-seo';
+import styles from 'styles/shared.module.scss';
+import { CategoryWithLinks } from 'types/types';
+import { getSession } from 'utils/session';
+
+export default function SharedCategoryPage({
+  category,
+}: {
+  category: CategoryWithLinks;
+}) {
+  const { t } = useTranslation();
+  return (
+    <PageTransition className='App'>
+      <DefaultSeo
+        title={category.name}
+        description={category.description ?? undefined}
+      />
+      <Navbar />
+      <main className={styles['content']}>
+        <div className={styles['header']}>
+          <h2 className={styles['title']}>
+            <CategoryHeader activeCategory={category} />
+          </h2>
+          <CategoryDescription description={category.description} />
+        </div>
+        {category.links.length !== 0 ? (
+          <LinkList
+            links={category.links}
+            showUserControls={false}
+          />
+        ) : (
+          <div className={styles['no-link-wrapper']}>
+            <p
+              dangerouslySetInnerHTML={{
+                __html: t('home:no-link', { name: category.name } as any, {
+                  interpolation: { escapeValue: false },
+                }),
+              }}
+            />
+          </div>
+        )}
+      </main>
+      <Footer />
+    </PageTransition>
+  );
+}
+
+export async function getServerSideProps({ req, res, locale, query }) {
+  const session = await getSession(req, res);
+  const queryCategoryId = (query?.id as string) || '';
+
+  const publicCategory = await getPublicCategoryById(Number(queryCategoryId));
+  if (!publicCategory) {
+    return {
+      redirect: {
+        destination: PATHS.APP,
+      },
+    };
+  }
+
+  return {
+    props: {
+      session,
+      category: publicCategory
+        ? JSON.parse(JSON.stringify(publicCategory))
+        : null,
+      ...(await getServerSideTranslation(locale, ['home'])),
+    },
+  };
+}

src/styles/globals.scss

@@ -30,7 +30,7 @@ body {
 .App {
   height: 100%;
   width: 1280px;
-  padding: 0.5em;
+  padding: 0.5em 1.5em;
   display: flex;
   flex-direction: column;
 }

src/styles/shared.module.scss

@@ -0,0 +1,21 @@
+.header {
+  margin-bottom: 1.5em;
+}
+
+.title {
+  font-size: 24px;
+  margin-top: 0.5em;
+}
+
+main.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.no-link-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}