Skip to content

Commit

Permalink
typescript update
Browse files Browse the repository at this point in the history
  • Loading branch information
@carkom
carkom committed Feb 21, 2024
1 parent 2eca199 commit 60e2d8a
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 81 deletions.
1 change: 1 addition & 0 deletions packages/desktop-client/src/components/reports/ChooseGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,4 +176,5 @@ export function ChooseGraph({
</View>
);
}
return null;
}
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/reports/Overview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function Overview() {
<View
style={{
height: 1,
backgroundColor: theme.sidebarBackground,
backgroundColor: theme.pillBorderDark,
marginTop: 10,
flexShrink: 0,
}}
Expand Down
188 changes: 108 additions & 80 deletions packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-strict-ignore
import React, { useMemo, useState } from 'react';

import { send } from 'loot-core/src/platform/client/fetch';
import { type CustomReportEntity } from 'loot-core/types/models/reports';

import { styles } from '../../../style';
import { Block } from '../../common/Block';
Expand Down Expand Up @@ -43,32 +43,43 @@ function CardMenu({ onClose, onMenuSelect, reportId }: CardMenuProps) {
);
}

function index(data) {
return data.reduce((carry, report) => ({ ...carry, [report.id]: false }), []);
function index(data: CustomReportEntity[]): { [key: string]: boolean }[] {
return data.reduce((carry, report) => {
const reportId: string = report.id === undefined ? '' : report.id;

return {
...carry,
[reportId]: false,
};
}, []);
}

export function CustomReportListCards({ reports }) {
const result = index(reports);
export function CustomReportListCards({
reports,
}: {
reports: CustomReportEntity[];
}) {
const result: { [key: string]: boolean }[] = index(reports);
const [reportMenu, setReportMenu] = useState(result);

const [isCardHovered, setIsCardHovered] = useState(null);
const [isCardHovered, setIsCardHovered] = useState('');

const onMenuSelect = async (item, reportId) => {
const onMenuSelect = async (item: string, reportId: string) => {
if (item === 'delete') {
onMenuOpen(reportId, false);
await send('report/delete', reportId);
}
};

const onMenuOpen = (item, state) => {
const onMenuOpen = (item: string, state: boolean) => {
setReportMenu({ ...reportMenu, [item]: state });
};

const chunkSize = 3;

const groups = useMemo(() => {
return reports
.map((e, i) => {
.map((report: CustomReportEntity, i: number) => {
return i % chunkSize === 0 ? reports.slice(i, i + chunkSize) : null;
})
.filter(e => {
Expand All @@ -89,86 +100,103 @@ export function CustomReportListCards({ reports }) {
flexDirection: 'row',
}}
>
{group.map((report, id) => (
<View key={id} style={{ position: 'relative', flex: '1' }}>
<View style={{ width: '100%', height: '100%' }}>
<ReportCard to="/reports/custom" report={report}>
<View
style={{ flex: 1, padding: 10 }}
onMouseEnter={() => setIsCardHovered(report.id)}
onMouseLeave={() => {
setIsCardHovered(null);
onMenuOpen(report.id, false);
}}
>
{group &&
group.map((report, id) => (
<View key={id} style={{ position: 'relative', flex: '1' }}>
<View style={{ width: '100%', height: '100%' }}>
<ReportCard to="/reports/custom" report={report}>
<View
style={{
flexDirection: 'row',
flexShrink: 0,
paddingBottom: 5,
style={{ flex: 1, padding: 10 }}
onMouseEnter={() =>
setIsCardHovered(
report.id === undefined ? '' : report.id,
)
}
onMouseLeave={() => {
setIsCardHovered('');
onMenuOpen(
report.id === undefined ? '' : report.id,
false,
);
}}
>
<View style={{ flex: 1 }}>
<Block
style={{
...styles.mediumText,
fontWeight: 500,
marginBottom: 5,
}}
role="heading"
>
{report.name}
</Block>
<DateRange
start={report.startDate}
end={report.endDate}
/>
<View
style={{
flexDirection: 'row',
flexShrink: 0,
paddingBottom: 5,
}}
>
<View style={{ flex: 1 }}>
<Block
style={{
...styles.mediumText,
fontWeight: 500,
marginBottom: 5,
}}
role="heading"
>
{report.name}
</Block>
<DateRange
start={report.startDate}
end={report.endDate}
/>
</View>
</View>
</View>

{report.data ? (
<ChooseGraph
startDate={report.startDate}
endDate={report.endDate}
data={report.data}
mode={report.mode}
graphType={report.graphType}
balanceType={report.balanceType}
groupBy={report.groupBy}
compact={true}
style={{ height: 'auto', flex: 1 }}
/>
) : (
<LoadingIndicator />
)}
</View>
</ReportCard>
</View>
<View
style={{
textAlign: 'right',
position: 'absolute',
right: 25,
top: 25,
}}
>
<MenuButton
onClick={() => onMenuOpen(report.id, true)}
{report.data ? (
<ChooseGraph
startDate={report.startDate}
endDate={report.endDate}
data={report.data}
mode={report.mode}
graphType={report.graphType}
balanceType={report.balanceType}
groupBy={report.groupBy}
compact={true}
style={{ height: 'auto', flex: 1 }}
/>
) : (
<LoadingIndicator />
)}
</View>
</ReportCard>
</View>
<View
style={{
color:
isCardHovered === report.id ? 'inherit' : 'transparent',
textAlign: 'right',
position: 'absolute',
right: 25,
top: 25,
}}
/>
{reportMenu[report.id] && (
<CardMenu
onMenuSelect={onMenuSelect}
onClose={() => onMenuOpen(report.id, false)}
reportId={report.id}
>
<MenuButton
onClick={() =>
onMenuOpen(report.id === undefined ? '' : report.id, true)
}
style={{
color:
isCardHovered === report.id ? 'inherit' : 'transparent',
}}
/>
)}
{report.id === undefined
? null
: reportMenu[report.id as keyof typeof reportMenu] && (
<CardMenu
onMenuSelect={onMenuSelect}
onClose={() =>
onMenuOpen(
report.id === undefined ? '' : report.id,
false,
)
}
reportId={report.id}
/>
)}
</View>
</View>
</View>
))}
))}
{remainder !== 3 &&
i + 1 === groups.length &&
[...Array(remainder)].map((e, i) => (
Expand Down

0 comments on commit 60e2d8a

Please sign in to comment.