fix(StarredProjects): fix empty list

taskany-inc · Jul 24, 2024 · b6d99ef · b6d99ef
1 parent 9135e27
commit b6d99ef
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 25 deletions.
diff --git a/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/en.json b/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/en.json
@@ -1,4 +1,7 @@
 {
     "title": "Taskany — Explore — Projects - Starred",
-    "Starred": "Starred Projects"
+    "Starred": "Starred Projects",
+    "You haven't starred any projects": "You haven't starred any projects.",
+    "Go to any project page and mark it with a star": "Go to any project page and mark it with a star",
+    "All projects": "All projects page"
 }
diff --git a/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/ru.json b/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/ru.json
@@ -1,4 +1,7 @@
 {
     "title": "Taskany — Обзор — Проекты — Избранное",
-    "Starred": "Избранные Проекты"
+    "Starred": "Избранные проекты",
+    "You haven't starred any projects": "Нет отмеченных звездочкой проектов.",
+    "Go to any project page and mark it with a star": "Перейди на страницу любого проекта и отметь его звездочкой",
+    "All projects": "Все проекты"
 }
diff --git a/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.module.css b/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.module.css
@@ -0,0 +1,3 @@
+.EmptyStarredProjectsCard {
+    width: 50%;
+}
diff --git a/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx b/src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx
@@ -1,5 +1,5 @@
 import { nullable } from '@taskany/bricks';
-import { Table, Link } from '@taskany/bricks/harmony';
+import { Table, Link, Text, Card, CardContent } from '@taskany/bricks/harmony';
 import NextLink from 'next/link';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
@@ -12,34 +12,56 @@ import { CommonHeader } from '../CommonHeader';
 import { ActivityByIdReturnType } from '../../../trpc/inferredTypes';
 
 import { tr } from './ExploreProjectsStarredPage.i18n';
+import classes from './ExploreProjectsStarredPage.module.css';
 
 export const ExploreProjectsStarredPage = ({ user, ssrTime }: ExternalPageProps) => {
     const { data } = trpc.v2.project.starred.useQuery();
-    if (!data) return null;
 
     return (
         <Page user={user} ssrTime={ssrTime} title={tr('title')} header={<CommonHeader title={tr('Starred')} />}>
-            <Table>
-                {data.map((project) =>
-                    nullable(project, (p) => (
-                        <NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
-                            <Link>
-                                <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
-                                    <ProjectListItem
-                                        id={p.id}
-                                        stargizers={p._count.stargizers}
-                                        owner={p.activity}
-                                        starred={!!p._isStarred}
-                                        watching={!!p._isWatching}
-                                        participants={p.participants as ActivityByIdReturnType[]}
-                                        averageScore={p.averageScore}
-                                    />
-                                </TableRowItem>
-                            </Link>
-                        </NextLink>
-                    )),
-                )}
-            </Table>
+            {nullable(data, (projects) =>
+                nullable(
+                    projects.length,
+                    () => (
+                        <Table>
+                            {projects.map((project) =>
+                                nullable(project, (p) => (
+                                    <NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
+                                        <Link>
+                                            <TableRowItem
+                                                title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}
+                                            >
+                                                <ProjectListItem
+                                                    id={p.id}
+                                                    stargizers={p._count.stargizers}
+                                                    owner={p.activity}
+                                                    starred={!!p._isStarred}
+                                                    watching={!!p._isWatching}
+                                                    participants={p.participants as ActivityByIdReturnType[]}
+                                                    averageScore={p.averageScore}
+                                                />
+                                            </TableRowItem>
+                                        </Link>
+                                    </NextLink>
+                                )),
+                            )}
+                        </Table>
+                    ),
+                    <Card className={classes.EmptyStarredProjectsCard}>
+                        <CardContent>
+                            <Text weight="thin" as="span">
+                                {tr("You haven't starred any projects")}{' '}
+                                {tr('Go to any project page and mark it with a star')}
+                            </Text>
+                            <NextLink href={routes.exploreProjects()} passHref legacyBehavior>
+                                <Link view="secondary">
+                                    <Text>{tr('All projects')}</Text>
+                                </Link>
+                            </NextLink>
+                        </CardContent>
+                    </Card>,
+                ),
+            )}
         </Page>
     );
 };
diff --git a/trpc/router/projectV2.ts b/trpc/router/projectV2.ts
@@ -82,6 +82,10 @@ export const project = router({
         try {
             const projectIds = await getStarredProjectsIds(activityId).execute();
 
+            if (!projectIds?.length) {
+                return [];
+            }
+
             return getProjectsByIds({ activityId, in: projectIds, role })
                 .select([
                     jsonBuildObject({