feat: add starred projects tab

src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "title": "Taskany — Explore — Projects — Starred"
+}

src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/index.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// Do not edit, use generator to update
+import { i18n, fmt, I18nLangSet } from 'easy-typed-intl';
+import getLang from '../../../utils/getLang';
+
+import ru from './ru.json';
+import en from './en.json';
+
+export type I18nKey = keyof typeof ru & keyof typeof en;
+type I18nLang = 'ru' | 'en';
+
+const keyset: I18nLangSet<I18nKey> = {};
+
+keyset['ru'] = ru;
+keyset['en'] = en;
+
+export const tr = i18n<I18nLang, I18nKey>(keyset, fmt, getLang);

src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "title": "Taskany — Обзор — Проекты — Избранное"
+}

src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx

@@ -0,0 +1,45 @@
+import { nullable } from '@taskany/bricks';
+import { Table, Link } from '@taskany/bricks/harmony';
+import NextLink from 'next/link';
+
+import { ExternalPageProps } from '../../utils/declareSsrProps';
+import { routes } from '../../hooks/router';
+import { Page } from '../Page/Page';
+import { ExplorePageHeader } from '../ExplorePageHeader/ExplorePageHeader';
+import { ProjectListItem } from '../ProjectListItem/ProjectListItem';
+import { TableRowItem, TableRowItemTitle } from '../TableRowItem/TableRowItem';
+import { trpc } from '../../utils/trpcClient';
+
+import { tr } from './ExploreProjectsStarredPage.i18n';
+
+export const ExploreProjectsStarredPage = ({ user, ssrTime }: ExternalPageProps) => {
+    const { data } = trpc.project.getStarred.useQuery();
+
+    if (!data) return null;
+
+    return (
+        <Page user={user} ssrTime={ssrTime} title={tr('title')} header={<ExplorePageHeader />}>
+            <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}
+                                        averageScore={p.averageScore}
+                                    />
+                                </TableRowItem>
+                            </Link>
+                        </NextLink>
+                    )),
+                )}
+            </Table>
+        </Page>
+    );
+};

src/components/PageNavigation/PageNavigation.tsx

@@ -69,6 +69,10 @@ export const PageNavigation: FC<AppNavigationProps> = ({ logo }) => {
                     title: p.title,
                     href: routes.project(p.id),
                 })),
+                {
+                    title: tr('Starred'),
+                    href: routes.exploreProjectsStarred(),
+                },
                 {
                     title: tr('All projects'),
                     href: routes.exploreProjects(),

src/hooks/router.ts

@@ -20,6 +20,7 @@ export const routes = {
 
     exploreProjects: () => '/explore/projects',
     exploreTopProjects: () => '/explore/top',
+    exploreProjectsStarred: () => '/explore/projects/starred',
     exploreGoals: () => '/explore/goals',
 
     help: (slug: AvailableHelpPages) => `/help/${slug}`,

src/pages/explore/projects.tsx → src/pages/explore/projects/index.tsx

@@ -1,5 +1,5 @@
-import { ExploreProjectsPage } from '../../components/ExploreProjectsPage/ExploreProjectsPage';
-import { declareSsrProps } from '../../utils/declareSsrProps';
+import { ExploreProjectsPage } from '../../../components/ExploreProjectsPage/ExploreProjectsPage';
+import { declareSsrProps } from '../../../utils/declareSsrProps';
 
 export const getServerSideProps = declareSsrProps(
     async ({ ssrHelpers }) => {

src/pages/explore/projects/starred.tsx

@@ -0,0 +1,13 @@
+import { ExploreProjectsStarredPage } from '../../../components/ExploreProjectsStarredPage/ExploreProjectsStarredPage';
+import { declareSsrProps } from '../../../utils/declareSsrProps';
+
+export const getServerSideProps = declareSsrProps(
+    async ({ ssrHelpers }) => {
+        await ssrHelpers.project.getStarred.fetch();
+    },
+    {
+        private: true,
+    },
+);
+
+export default ExploreProjectsStarredPage;

trpc/router/project.ts

@@ -422,6 +422,29 @@ export const project = router({
                 })
                 .then((res) => res.map((project) => addCalculatedProjectFields(project, activityId, role)));
         }),
+    getStarred: protectedProcedure.query(async ({ ctx }) => {
+        const { activityId, role } = ctx.session.user;
+
+        const whereQuery = {
+            stargizers: {
+                some: {
+                    id: activityId,
+                },
+            },
+        };
+        return prisma.project
+            .findMany({
+                orderBy: {
+                    createdAt: 'asc',
+                },
+                ...getProjectSchema({
+                    role,
+                    activityId,
+                    whereQuery,
+                }),
+            })
+            .then((res) => res.map((project) => addCalculatedProjectFields(project, activityId, role)));
+    }),
     getById: protectedProcedure
         .input(
             z.object({