Skip to content

Commit 230215a

Browse files
gustavlrsngustavlrsn
committed
Update Collective profile prototype
1 parent e140c96 commit 230215a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+831
-1694
lines changed

‎components/crowdfunding-redesign/Accounts.tsx

-448
This file was deleted.

‎components/crowdfunding-redesign/AccountsList.tsx

+1-29
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,8 @@
11
import React from 'react';
2-
import type { Column, ColumnDef, Row, TableMeta } from '@tanstack/react-table';
3-
import clsx from 'clsx';
4-
import { isNil, omit } from 'lodash';
5-
import { ArrowDown10, ArrowDownZA, ArrowUp10, ArrowUpZA } from 'lucide-react';
6-
import { FormattedMessage } from 'react-intl';
72

8-
import type {
9-
AccountMetricsFragment,
10-
Currency,
11-
OverviewMetricsQueryVariables,
12-
} from '../../lib/graphql/types/v2/graphql';
13-
import type { useQueryFilterReturnType } from '../../lib/hooks/useQueryFilter';
14-
import { getCollectivePageRoute } from '../../lib/url-helpers';
15-
16-
import { AccountHoverCard } from '../AccountHoverCard';
17-
import Avatar from '../Avatar';
18-
import type { schema } from '../dashboard/sections/overview/CollectiveOverview';
19-
import type { MetricProps } from '../dashboard/sections/overview/Metric';
20-
import { ChangeBadge, getPercentageDifference } from '../dashboard/sections/overview/Metric';
21-
import FormattedMoneyAmount from '../FormattedMoneyAmount';
22-
import Link from '../Link';
23-
import { DataTable } from '../table/DataTable';
24-
import { Badge } from '../ui/Badge';
25-
import { Button } from '../ui/Button';
26-
import { Checkbox } from '../ui/Checkbox';
273
import { AccountsSublist } from './AccountsSublist';
284

29-
export default function AccountsList({ data, queryFilter, loading, metric }) {
5+
export default function AccountsList({ data, queryFilter, metric }) {
306
const currency = data?.account?.[metric.id]?.current?.currency;
317

328
const meta = {
@@ -36,10 +12,6 @@ export default function AccountsList({ data, queryFilter, loading, metric }) {
3612
metric,
3713
};
3814

39-
// if (error) {
40-
// return <MessageBoxGraphqlError error={error} />;
41-
// }
42-
4315
return (
4416
<div className="space-y-8">
4517
<AccountsSublist label="Main account" type="COLLECTIVE" data={data} metric={metric} meta={meta} />

‎components/crowdfunding-redesign/AccountsSublist.tsx

+7-162
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,20 @@
11
import React from 'react';
2-
import type { Column, ColumnDef, Row, TableMeta } from '@tanstack/react-table';
3-
import clsx from 'clsx';
42
import { isNil, omit } from 'lodash';
5-
import { ArrowDown10, ArrowDownZA, ArrowUp10, ArrowUpZA, ChevronRight } from 'lucide-react';
6-
import { FormattedMessage } from 'react-intl';
3+
import { ChevronRight } from 'lucide-react';
4+
import { useRouter } from 'next/router';
75

8-
import type {
9-
AccountMetricsFragment,
10-
Currency,
11-
OverviewMetricsQueryVariables,
12-
} from '../../lib/graphql/types/v2/graphql';
13-
import type { useQueryFilterReturnType } from '../../lib/hooks/useQueryFilter';
14-
import { getCollectivePageRoute } from '../../lib/url-helpers';
6+
import type { AccountMetricsFragment } from '../../lib/graphql/types/v2/graphql';
157

16-
import { AccountHoverCard } from '../AccountHoverCard';
17-
import Avatar from '../Avatar';
18-
import type { schema } from '../dashboard/sections/overview/CollectiveOverview';
19-
import type { MetricProps } from '../dashboard/sections/overview/Metric';
20-
import { ChangeBadge, getPercentageDifference } from '../dashboard/sections/overview/Metric';
8+
import { getPercentageDifference } from '../dashboard/sections/overview/Metric';
219
import FormattedMoneyAmount from '../FormattedMoneyAmount';
2210
import Link from '../Link';
23-
import { DataTable } from '../table/DataTable';
24-
import { Badge } from '../ui/Badge';
25-
import { Button } from '../ui/Button';
26-
import { Checkbox } from '../ui/Checkbox';
27-
import { useRouter } from 'next/router';
11+
2812
type AccountMetricsRow = AccountMetricsFragment & {
2913
current: number;
3014
comparison?: number;
3115
percentageDifference?: number;
3216
};
3317

34-
interface AccountMetricsMeta extends TableMeta<AccountMetricsRow> {
35-
currency: Currency;
36-
isAmount: boolean;
37-
queryFilter: useQueryFilterReturnType<typeof schema, OverviewMetricsQueryVariables>;
38-
metric: MetricProps;
39-
}
40-
41-
const SortableHeader = ({
42-
column,
43-
label,
44-
type,
45-
align,
46-
}: {
47-
column: Column<AccountMetricsRow, unknown>;
48-
label: React.ReactNode;
49-
type?: 'alphabetic' | 'numerical';
50-
align?: 'left' | 'right';
51-
}) => {
52-
const isSorted = column.getIsSorted();
53-
const isSortedDesc = isSorted === 'desc';
54-
const UpIcon = type === 'alphabetic' ? ArrowUpZA : ArrowUp10;
55-
const DownIcon = type === 'alphabetic' ? ArrowDownZA : ArrowDown10;
56-
const SortIcon = isSortedDesc || !isSorted ? UpIcon : DownIcon;
57-
return (
58-
<div className={clsx('flex items-center', align === 'right' && 'justify-end')}>
59-
<Button
60-
variant="ghost"
61-
size="xs"
62-
className={clsx('group/btn -m-2 gap-2', isSorted && 'text-foreground')}
63-
onClick={() => column.toggleSorting(!isSortedDesc)}
64-
>
65-
<SortIcon
66-
className={clsx(
67-
'h-4 w-4 transition-colors',
68-
isSorted ? 'text-muted-foreground' : 'text-transparent group-hover/btn:text-muted-foreground',
69-
)}
70-
/>
71-
<span className={clsx(align === 'left' && '-order-1')}>{label}</span>
72-
</Button>
73-
</div>
74-
);
75-
};
76-
const columns: ColumnDef<AccountMetricsRow>[] = [
77-
{
78-
id: 'name',
79-
accessorKey: 'name',
80-
header: ({ column }) => (
81-
<SortableHeader
82-
column={column}
83-
type="alphabetic"
84-
label={<FormattedMessage defaultMessage="Name" id="HAlOn1" />}
85-
align="left"
86-
/>
87-
),
88-
meta: { className: 'min-w-0 max-w-[300px]' },
89-
90-
cell: ({ row, table }) => {
91-
const account = row.original;
92-
// const { queryFilter } = table.options.meta as AccountMetricsMeta;
93-
// const selectedAccountSlug = queryFilter.values.account;
94-
return (
95-
<div className="flex items-center gap-3 text-base">
96-
<div className="flex items-center gap-1.5 overflow-hidden">
97-
<AccountHoverCard
98-
account={account}
99-
trigger={
100-
<div className="max-w-[400px] truncate">
101-
<Link
102-
href={getCollectivePageRoute(account)}
103-
className={clsx('truncate hover:underline group-hover/row:text-foreground')}
104-
>
105-
{account.name}
106-
</Link>
107-
</div>
108-
}
109-
/>
110-
111-
{account.isArchived && (
112-
<Badge size="xs" className="capitalize">
113-
Archived {account.type.toLowerCase()}
114-
</Badge>
115-
)}
116-
</div>
117-
</div>
118-
);
119-
},
120-
},
121-
{
122-
id: 'current',
123-
accessorKey: 'current',
124-
meta: { className: 'text-right' },
125-
header: ({ column, table }) => {
126-
const meta = table.options.meta as AccountMetricsMeta;
127-
return <SortableHeader align="right" column={column} label={meta.metric.label} />;
128-
},
129-
sortingFn: (rowA: Row<AccountMetricsRow>, rowB: Row<AccountMetricsRow>): number => {
130-
const a = rowA.original.current;
131-
const b = rowB.original.current;
132-
133-
const diff = a - b;
134-
135-
// sort by comparison value if current is the same
136-
if (diff === 0) {
137-
const rowAPrevious = rowA.original.comparison;
138-
const rowBPrevious = rowB.original.comparison;
139-
return rowAPrevious - rowBPrevious;
140-
}
141-
return a - b;
142-
},
143-
cell: ({ cell, table }) => {
144-
const current = cell.getValue() as number;
145-
const meta = table.options.meta as AccountMetricsMeta;
146-
147-
return (
148-
<div className="flex items-center justify-end gap-2">
149-
<span className="text-base font-medium">
150-
{meta.isAmount ? (
151-
<FormattedMoneyAmount amount={current} currency={meta.currency} precision={2} showCurrencyCode={false} />
152-
) : (
153-
current.toLocaleString()
154-
)}
155-
</span>
156-
<ChevronRight size={20} className="text-muted-foreground" />
157-
</div>
158-
);
159-
},
160-
},
161-
];
162-
16318
export function AccountsSublist({ label, type, data, metric, meta }) {
16419
const router = useRouter();
16520
const columnData: AccountMetricsRow[] = React.useMemo(() => {
@@ -178,7 +33,8 @@ export function AccountsSublist({ label, type, data, metric, meta }) {
17833
percentageDifference: getPercentageDifference(current, comparison),
17934
};
18035
});
181-
}, [metric.id, data]);
36+
}, [metric.id, data, type]);
37+
18238
return (
18339
<div className="">
18440
<h2 className="mb-3 px-2 text-lg font-semibold text-slate-800">{label}</h2>
@@ -206,17 +62,6 @@ export function AccountsSublist({ label, type, data, metric, meta }) {
20662
</Link>
20763
))}
20864
</div>
209-
210-
{/* <DataTable
211-
hideHeader
212-
className="bg-background"
213-
columns={columns}
214-
data={columnData}
215-
initialSort={[{ id: 'current', desc: true }]}
216-
nbPlaceholders={nbPlaceholders}
217-
loading={loading}
218-
meta={meta}
219-
/> */}
22065
</div>
22166
);
22267
}

‎components/crowdfunding-redesign/Breadcrumb.tsx

+1-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,7 @@
1-
import { useRouter } from 'next/router';
21
import React from 'react';
3-
import Link from '../Link';
42
import { Slash } from 'lucide-react';
53

6-
const getPathdata = (router, collective, account) => {
7-
switch (router.pathname) {
8-
case '/preview/[collectiveSlug]/finances/[accountSlug]':
9-
return [{ href: `/preview/${router.query.collectiveSlug}/finances`, label: 'Finances' }];
10-
case '/preview/[collectiveSlug]/transactions/[groupId]':
11-
return [
12-
{ href: `/preview/${router.query.collectiveSlug}/finances`, label: 'Finances' },
13-
{
14-
href: `/preview/${router.query.collectiveSlug}/finances/${router.query.collectiveSlug}`,
15-
label: collective?.name,
16-
},
17-
];
18-
case '/preview/[collectiveSlug]/[accountSlug]/transactions/[groupId]':
19-
return [
20-
{ href: `/preview/${router.query.collectiveSlug}/finances`, label: 'Finances' },
21-
{
22-
href: `/preview/${router.query.collectiveSlug}/finances/${router.query.accountSlug}`,
23-
label: account?.name,
24-
},
25-
];
26-
case '/preview/[collectiveSlug]/projects/[accountSlug]':
27-
return [{ href: `/preview/${router.query.collectiveSlug}/projects`, label: 'Projects' }];
28-
case '/preview/[collectiveSlug]/events/[accountSlug]':
29-
return [{ href: `/preview/${router.query.collectiveSlug}/events`, label: 'Events' }];
30-
default:
31-
return [{ href: '', label: '' }];
32-
}
33-
};
4+
import Link from '../Link';
345

356
export function Breadcrumb({ breadcrumbs }) {
367
return (

‎components/crowdfunding-redesign/CollectiveHeader.tsx

-40
This file was deleted.

‎components/crowdfunding-redesign/ContentOverview.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { cva } from 'class-variance-authority';
33
// eslint-disable-next-line no-restricted-imports
44
import Link from 'next/link';
5+
56
import { triggerPrototypeToast } from './helpers';
67

78
export const ContentOverview = ({ content }) => {

0 commit comments

Comments
 (0)