feat(user): add tabs to user page

filipedeschamps · Dec 27, 2023 · 61f1ee0 · 61f1ee0
1 parent 2e42e9e
commit 61f1ee0
Show file tree

Hide file tree

Showing 8 changed files with 294 additions and 116 deletions.
diff --git a/.../[username]/pagina/[page]/index.public.js → ...rname]/comentarios/[page]/index.public.js b/.../[username]/pagina/[page]/index.public.js → ...rname]/comentarios/[page]/index.public.js
@@ -1,24 +1,35 @@
 import { getStaticPropsRevalidate } from 'next-swr';
 
-import { ContentList, DefaultLayout } from '@/TabNewsUI';
+import { ContentList, DefaultLayout, UserHeader } from '@/TabNewsUI';
+import { FaUser } from '@/TabNewsUI/icons';
 import { NotFoundError } from 'errors';
 import authorization from 'models/authorization.js';
 import content from 'models/content.js';
 import removeMarkdown from 'models/remove-markdown.js';
 import user from 'models/user.js';
 import validator from 'models/validator.js';
+import { useUser } from 'pages/interface';
+
+export default function ChildContent({ contentListFound, pagination, username }) {
+  const { user, isLoading } = useUser();
+  const isAuthenticatedUser = user && user.username === username;
 
-export default function Home({ contentListFound, pagination, username }) {
   return (
-    <>
-      <DefaultLayout metadata={{ title: `Página ${pagination.currentPage} · ${username}` }}>
-        <ContentList
-          contentList={contentListFound}
-          pagination={pagination}
-          paginationBasePath={`/${username}/pagina`}
-        />
-      </DefaultLayout>
-    </>
+    <DefaultLayout metadata={{ title: `Comentários · Página ${pagination.currentPage} · ${username}` }}>
+      <UserHeader username={username} childContentCount={pagination.totalRows} />
+
+      <ContentList
+        contentList={contentListFound}
+        pagination={pagination}
+        paginationBasePath={`/${username}/comentarios`}
+        emptyStateProps={{
+          isLoading: isLoading,
+          title: 'Nenhum comentário encontrado',
+          description: `${isAuthenticatedUser ? 'Você' : username} ainda não fez nenhum comentário.`,
+          icon: FaUser,
+        }}
+      />
+    </DefaultLayout>
   );
 }
 
@@ -57,6 +68,7 @@ export const getStaticProps = getStaticPropsRevalidate(async (context) => {
       where: {
         owner_id: secureUserFound.id,
         status: 'published',
+        $not_null: ['parent_id'],
       },
       page: context.params.page,
       per_page: context.params.per_page,
@@ -76,17 +88,25 @@ export const getStaticProps = getStaticPropsRevalidate(async (context) => {
 
   const secureContentListFound = authorization.filterOutput(userTryingToGet, 'read:content:list', contentListFound);
 
+  if (secureContentListFound.length === 0 && context.params.page !== 1) {
+    const lastValidPage = `/${secureUserFound.username}/comentarios/${results.pagination.lastPage || 1}`;
+    const revalidate = context.params.page > results.pagination.lastPage + 1 ? 60 : 1;
+
+    return {
+      redirect: {
+        destination: lastValidPage,
+      },
+      revalidate,
+    };
+  }
+
   for (const content of secureContentListFound) {
-    if (content.parent_id) {
-      content.body = removeMarkdown(content.body, { maxLength: 255 });
-    } else {
-      delete content.body;
-    }
+    content.body = removeMarkdown(content.body, { maxLength: 255 });
   }
 
   return {
     props: {
-      contentListFound: JSON.parse(JSON.stringify(secureContentListFound)),
+      contentListFound: secureContentListFound,
       pagination: results.pagination,
       username: secureUserFound.username,
     },

diff --git a/pages/[username]/conteudos/[page]/index.public.js b/pages/[username]/conteudos/[page]/index.public.js
@@ -0,0 +1,120 @@
+import { useRouter } from 'next/router';
+import { getStaticPropsRevalidate } from 'next-swr';
+
+import { ContentList, DefaultLayout, UserHeader } from '@/TabNewsUI';
+import { FaUser } from '@/TabNewsUI/icons';
+import { NotFoundError } from 'errors';
+import authorization from 'models/authorization.js';
+import content from 'models/content.js';
+import user from 'models/user.js';
+import validator from 'models/validator.js';
+import { useUser } from 'pages/interface';
+
+export default function RootContent({ contentListFound, pagination, username }) {
+  const { push } = useRouter();
+  const { user, isLoading } = useUser();
+  const isAuthenticatedUser = user && user.username === username;
+
+  return (
+    <DefaultLayout metadata={{ title: `Publicações · Página ${pagination.currentPage} · ${username}` }}>
+      <UserHeader username={username} rootContentCount={pagination.totalRows} />
+
+      <ContentList
+        contentList={contentListFound}
+        pagination={pagination}
+        paginationBasePath={`/${username}/conteudos`}
+        emptyStateProps={{
+          isLoading: isLoading,
+          title: 'Nenhuma publicação encontrada',
+          description: `${isAuthenticatedUser ? 'Você' : username} ainda não fez nenhuma publicação.`,
+          icon: FaUser,
+          action: isAuthenticatedUser && {
+            text: 'Publicar conteúdo',
+            onClick: () => push('/publicar'),
+          },
+        }}
+      />
+    </DefaultLayout>
+  );
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}
+
+export const getStaticProps = getStaticPropsRevalidate(async (context) => {
+  const userTryingToGet = user.createAnonymous();
+
+  try {
+    context.params = validator(context.params, {
+      username: 'required',
+      page: 'optional',
+      per_page: 'optional',
+    });
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+
+  let results;
+  let secureUserFound;
+
+  try {
+    const userFound = await user.findOneByUsername(context.params.username);
+
+    secureUserFound = authorization.filterOutput(userTryingToGet, 'read:user', userFound);
+
+    results = await content.findWithStrategy({
+      strategy: 'new',
+      where: {
+        parent_id: null,
+        owner_id: secureUserFound.id,
+        status: 'published',
+      },
+      attributes: {
+        exclude: ['body'],
+      },
+      page: context.params.page,
+      per_page: context.params.per_page,
+    });
+  } catch (error) {
+    if (error instanceof NotFoundError) {
+      return {
+        notFound: true,
+        revalidate: 1,
+      };
+    }
+
+    throw error;
+  }
+
+  const contentListFound = results.rows;
+
+  const secureContentListFound = authorization.filterOutput(userTryingToGet, 'read:content:list', contentListFound);
+
+  if (secureContentListFound.length === 0 && context.params.page !== 1) {
+    const lastValidPage = `/${secureUserFound.username}/conteudos/${results.pagination.lastPage || 1}`;
+    const revalidate = context.params.page > results.pagination.lastPage + 1 ? 60 : 1;
+
+    return {
+      redirect: {
+        destination: lastValidPage,
+      },
+      revalidate,
+    };
+  }
+
+  return {
+    props: {
+      contentListFound: secureContentListFound,
+      pagination: results.pagination,
+      username: secureUserFound.username,
+    },
+
+    revalidate: 10,
+  };
+});