95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AddLocationButton } from "./AddLocationButton";
|
|
import { AddMonthButton } from "./AddMonthButton";
|
|
import { MonthCard } from "./MonthCard";
|
|
import Pagination from "./Pagination";
|
|
import { LocationCard } from "./LocationCard";
|
|
import { BillingLocation, YearMonth } from "../lib/db-types";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { ToastContainer } from 'react-toastify';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
const getNextYearMonth = (yearMonth:YearMonth) => {
|
|
const {year, month} = yearMonth;
|
|
return({
|
|
year: month===12 ? year+1 : year,
|
|
month: month===12 ? 1 : month+1
|
|
} as YearMonth);
|
|
}
|
|
|
|
export interface MonthLocationListProps {
|
|
availableYears?: number[];
|
|
months?: {
|
|
[key: string]: {
|
|
yearMonth: YearMonth;
|
|
locations: BillingLocation[];
|
|
monthlyExpense: number;
|
|
};
|
|
};
|
|
}
|
|
|
|
export const MonthLocationList:React.FC<MonthLocationListProps > = ({
|
|
availableYears,
|
|
months,
|
|
}) => {
|
|
|
|
const router = useRouter();
|
|
const search = useSearchParams();
|
|
|
|
const initialMonth = search.get('month')
|
|
|
|
const [expandedMonth, setExpandedMonth] = React.useState<number>(
|
|
initialMonth ? parseInt(initialMonth as string) : -1 // no month is expanded
|
|
);
|
|
|
|
if(!availableYears || !months) {
|
|
const currentYearMonth:YearMonth = {
|
|
year: new Date().getFullYear(),
|
|
month: new Date().getMonth() + 1
|
|
};
|
|
|
|
return(
|
|
<>
|
|
<MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} onToggle={() => {}} expanded={true} >
|
|
<AddLocationButton yearMonth={currentYearMonth} />
|
|
</MonthCard>
|
|
</>)
|
|
};
|
|
|
|
const monthsArray = Object.entries(months);
|
|
|
|
// when the month is toggled, update the URL
|
|
// and set the the new expandedMonth
|
|
const handleMonthToggle = (yearMonth:YearMonth) => {
|
|
// if the month is already expanded, collapse it
|
|
if(expandedMonth === yearMonth.month) {
|
|
// router.push(`/?year=${yearMonth.year}`);
|
|
setExpandedMonth(-1); // no month is expanded
|
|
} else {
|
|
// router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
|
|
setExpandedMonth(yearMonth.month);
|
|
}
|
|
}
|
|
|
|
return(<>
|
|
<AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
|
|
{
|
|
monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) =>
|
|
<MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
|
|
{
|
|
yearMonth.month === expandedMonth ?
|
|
locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
|
|
: null
|
|
}
|
|
<AddLocationButton yearMonth={yearMonth} />
|
|
</MonthCard>
|
|
)
|
|
}
|
|
<div className="mt-5 flex w-full justify-center">
|
|
<Pagination availableYears={availableYears} />
|
|
</div>
|
|
<ToastContainer />
|
|
</>)
|
|
} |