feat: add shared category page

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,16 +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 VisibilityBadge from 'components/Visibility/Visibility';
-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 {
@@ -22,6 +23,7 @@ export default function Links({
   isMobile,
   openSideMenu,
 }: Readonly<LinksProps>) {
+  const { status } = useUser();
   const { t } = useTranslation('home');
   const { activeCategory } = useActiveCategory();
 
@@ -34,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']}>
@@ -46,68 +48,36 @@ export default function Links({
             <RxHamburgerMenu size={'1.5em'} />
           </ButtonLink>
         )}
-        <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={activeCategory.visibility}
-          />
-        </div>
-        <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,21 +38,6 @@
   align-items: center;
   justify-content: space-between;
 
-  & .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;
-  }
-
   & .category-controls {
     display: flex;
     gap: 0.5em;
@@ -67,13 +47,6 @@
   & > svg {
     display: flex;
   }
-
-  & .links-count {
-    min-width: fit-content;
-    font-weight: 300;
-    font-size: 0.8em;
-    color: $grey;
-  }
 }
 
 .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/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/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/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/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;
+}