Skip to content

Commit

Permalink
feat: sticky layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@asabotovich
asabotovich committed Sep 20, 2024
1 parent 83bea58 commit 446513c
Show file tree
Hide file tree
Showing 21 changed files with 895 additions and 673 deletions.
128 changes: 124 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@sentry/nextjs": "7.99.0",
"@tanstack/react-query": "4.29.5",
"@tanstack/react-query-devtools": "4.29.6",
"@taskany/bricks": "5.48.1",
"@taskany/bricks": "5.50.0",
"@taskany/colors": "1.13.0",
"@taskany/icons": "2.0.7",
"@tippyjs/react": "4.2.6",
Expand Down
45 changes: 24 additions & 21 deletions src/components/DashboardPage/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
import { ProjectListItemConnected } from '../ProjectListItemConnected/ProjectListItemConnected';
import { PresetModals } from '../PresetModals';
import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
import { KanbanScroller } from '../Kanban/KanbanScroller';

import { tr } from './DashboardPage.i18n';

export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPageProps) => {
const { preset } = useFiltersPreset({ defaultPresetFallback });

const { currentPreset, queryState } = useUrlFilterParams({
const { currentPreset, queryState, view } = useUrlFilterParams({
preset,
});

Expand Down Expand Up @@ -89,29 +90,31 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
/>
}
>
<ListView onKeyboardClick={handleItemEnter}>
{groupsOnScreen?.map(({ ...project }, i) => (
<ProjectListItemConnected
firstLevel
key={project.id}
project={project}
filterPreset={preset}
partnershipProject={project.partnerProjectIds}
actionButtonView="icons"
visible={i === 0}
<KanbanScroller shadow={view === 'kanban' ? 52 : 0}>
<ListView onKeyboardClick={handleItemEnter}>
{groupsOnScreen?.map(({ ...project }, i) => (
<ProjectListItemConnected
firstLevel
key={project.id}
project={project}
filterPreset={preset}
partnershipProject={project.partnerProjectIds}
actionButtonView="icons"
visible={i === 0}
/>
))}
</ListView>

{nullable(hasNextPage, () => (
<LoadMoreButton
disabled={isFetching}
onClick={fetchNextPage as () => void}
{...dashboardLoadMore.attr}
/>
))}
</ListView>

{nullable(hasNextPage, () => (
<LoadMoreButton
disabled={isFetching}
onClick={fetchNextPage as () => void}
{...dashboardLoadMore.attr}
/>
))}

<PresetModals preset={preset} />
<PresetModals preset={preset} />
</KanbanScroller>
</Page>
);
};
45 changes: 24 additions & 21 deletions src/components/ExploreProjectsPage/ExploreProjectsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Table } from '@taskany/bricks/harmony';
import { ExternalPageProps } from '../../utils/declareSsrProps';
import { routes } from '../../hooks/router';
import { Page } from '../Page/Page';
import { PageContentContainer } from '../Page/PageContentContainer';
import { ExplorePageHeader } from '../ExplorePageHeader/ExplorePageHeader';
import { ProjectListItem } from '../ProjectListItem/ProjectListItem';
import { TableRowItem, TableRowItemTitle } from '../TableRowItem/TableRowItem';
Expand All @@ -18,27 +19,29 @@ export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {

return (
<Page user={user} ssrTime={ssrTime} title={tr('title')} header={<ExplorePageHeader />}>
<Table>
{data.projects.map((project) =>
nullable(project, (p) => (
<TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
<ProjectListItem
href={routes.project(p.id)}
id={p.id}
title={p.title}
flowId={p.flowId}
stargizers={p._count.stargizers}
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
actionButtonView="icons"
/>
</TableRowItem>
)),
)}
</Table>
<PageContentContainer>
<Table>
{data.projects.map((project) =>
nullable(project, (p) => (
<TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
<ProjectListItem
href={routes.project(p.id)}
id={p.id}
title={p.title}
flowId={p.flowId}
stargizers={p._count.stargizers}
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
actionButtonView="icons"
/>
</TableRowItem>
)),
)}
</Table>
</PageContentContainer>
</Page>
);
};
83 changes: 43 additions & 40 deletions src/components/ExploreProjectsStarredPage/ExploreProjectsStarredPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import NextLink from 'next/link';
import { ExternalPageProps } from '../../utils/declareSsrProps';
import { routes } from '../../hooks/router';
import { Page } from '../Page/Page';
import { PageContentContainer } from '../Page/PageContentContainer';
import { ProjectListItem } from '../ProjectListItem/ProjectListItem';
import { TableRowItem, TableRowItemTitle } from '../TableRowItem/TableRowItem';
import { trpc } from '../../utils/trpcClient';
Expand All @@ -19,47 +20,49 @@ export const ExploreProjectsStarredPage = ({ user, ssrTime }: ExternalPageProps)

return (
<Page user={user} ssrTime={ssrTime} title={tr('title')} header={<CommonHeader title={tr('Starred')} />}>
{nullable(data, (projects) =>
nullable(
projects.length,
() => (
<Table>
{projects.map((project) =>
nullable(project, (p) => (
<TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
<ProjectListItem
href={routes.project(p.id)}
title={p.title}
flowId={p.flowId}
id={p.id}
stargizers={p._count.stargizers}
owner={p.activity}
starred={!!p._isStarred}
watching={!!p._isWatching}
participants={p.participants as ActivityByIdReturnType[]}
averageScore={p.averageScore}
actionButtonView="icons"
/>
</TableRowItem>
)),
)}
</Table>
<PageContentContainer>
{nullable(data, (projects) =>
nullable(
projects.length,
() => (
<Table>
{projects.map((project) =>
nullable(project, (p) => (
<TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
<ProjectListItem
href={routes.project(p.id)}
title={p.title}
flowId={p.flowId}
id={p.id}
stargizers={p._count.stargizers}
owner={p.activity}
starred={!!p._isStarred}
watching={!!p._isWatching}
participants={p.participants as ActivityByIdReturnType[]}
averageScore={p.averageScore}
actionButtonView="icons"
/>
</TableRowItem>
)),
)}
</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>,
),
<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>,
),
)}
)}
</PageContentContainer>
</Page>
);
};
Loading

0 comments on commit 446513c

Please sign in to comment.