knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

year & month replaced by yearMonth object

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-09 16:20:49 +01:00
parent 46b65711a8
commit d627ad757d
12 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/lib/actions/locationActions.ts
View File

@@ -4,7 +4,7 @@ import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import clientPromise, { getDbClient } from '../dbClient';
import { BillingLocation } from '../db-types';
import { BillingLocation, YearMonth } from '../db-types';
import { ObjectId } from 'mongodb';
import { auth, withUser } from '@/app/lib/auth';
import { AuthenticatedUser } from '../types/next-auth';
@@ -33,7 +33,7 @@ const UpdateLocation = FormSchema.omit({ _id: true });
* @param formData form data
* @returns
*/
export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId?: string, year?: string, month?: string, prevState:State, formData: FormData) => {
export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId?: string, yearMonth?: YearMonth, prevState:State, formData: FormData) => {
const validatedFields = UpdateLocation.safeParse({
locationName: formData.get('locationName'),
@@ -70,15 +70,14 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
notes: locationNotes,
}
});
} else if(year && month) {
} else if(yearMonth) {
await dbClient.collection<BillingLocation>("lokacije").insertOne({
_id: (new ObjectId()).toHexString(),
userId,
userEmail,
name: locationName,
notes: locationNotes,
year: parseInt(year), // ToDo: get the current year and month
month: parseInt(month), // ToDo: get the current year and month
yearMonth: yearMonth,
bills: [],
});
}
@@ -99,7 +98,7 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, pageIx:
// fetch `pageSize` locations for the given page index
const locations = await dbClient.collection<BillingLocation>("lokacije")
.find({ userId })
.sort({ year: -1, month: -1, name: 1 })
.sort({ yearMonth: -1, name: 1 })
.skip(pageIx * pageSize)
.limit(pageSize)
.toArray();

18
app/lib/actions/monthActions.ts
View File

@@ -4,7 +4,7 @@ import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import clientPromise, { getDbClient } from '../dbClient';
import { ObjectId } from 'mongodb';
import { BillingLocation } from '../db-types';
import { BillingLocation, YearMonth } from '../db-types';
import { AuthenticatedUser } from '../types/next-auth';
import { withUser } from '../auth';
@@ -16,14 +16,12 @@ import { withUser } from '../auth';
* @param formData form data
* @returns
*/
export const addMonth = withUser(async (user:AuthenticatedUser, yearString: string, monthString: string) => {
export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }: YearMonth) => {
const { id: userId } = user;
// update the bill in the mongodb
const dbClient = await getDbClient();
const year = parseInt(yearString);
const month = parseInt(monthString);
const prevYear = month === 1 ? year - 1 : year;
const prevMonth = month === 1 ? 12 : month - 1;
@@ -31,8 +29,10 @@ export const addMonth = withUser(async (user:AuthenticatedUser, yearString: stri
// find all locations for the previous month
const prevMonthLocations = await dbClient.collection<BillingLocation>("lokacije").find({
userId, // make sure that the locations belongs to the user
year: prevYear,
month: prevMonth,
yearMonth: {
year: prevYear,
month: prevMonth,
}
});
const newMonthLocationsCursor = prevMonthLocations.map((prevLocation) => {
@@ -41,8 +41,10 @@ export const addMonth = withUser(async (user:AuthenticatedUser, yearString: stri
...prevLocation,
// assign a new ID
_id: (new ObjectId()).toHexString(),
year: year,
month: month,
yearMonth: {
year: year,
month: month,
},
// copy bill array, but set all bills to unpaid and remove attachments and notes
bills: prevLocation.bills.map((bill) => {
return {

11
app/lib/db-types.ts
View File

@@ -9,6 +9,11 @@ export interface BillAttachment {
fileContentsBase64: string;
};
export interface YearMonth {
year: number;
month: number;
};
/** bill object in the form returned by MongoDB */
export interface BillingLocation {
_id: string;
@@ -18,10 +23,8 @@ export interface BillingLocation {
userEmail?: string | null;
/** name of the location */
name: string;
/** billing period year */
year: number;
/** billing period month */
month: number;
/** billing period year and month */
yearMonth: YearMonth;
/** array of bills */
bills: Bill[];
/** (optional) notes */

10
app/lib/format.ts
View File

@@ -1,4 +1,12 @@
import { YearMonth } from "./db-types";
export const formatYearMonth = (year: number, month:number): string => {
export const formatYearMonth = ({ year, month }: YearMonth): string => {
return `${year}-${month<10?"0":""}${month}`;
}
export const parseYearMonth = (yearMonthString: string): YearMonth => {
const [year, month] = yearMonthString.split("-").map((s) => parseInt(s, 10));
return({ year, month } as YearMonth);
}

5
app/location/[id]/add/page.tsx
View File

@@ -1,7 +1,6 @@
import { parseYearMonth } from '@/app/lib/format';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const [year, month] = id.split("-");
return (<LocationEditForm year={year} month={month} />);
return (<LocationEditForm yearMonth={ parseYearMonth(id) } />);
}

41
app/page.tsx
View File

@@ -7,18 +7,21 @@ import { isAuthErrorMessage } from '@/app/lib/auth';
import { fetchAllLocations } from './lib/actions/locationActions';
import { formatCurrency } from './lib/formatStrings';
import { fetchAvailableYears } from './lib/actions/monthActions';
import { YearMonth } from './lib/db-types';
import { formatYearMonth } from './lib/format';
const getNextYearMonth = (year:number, month:number) => {
const getNextYearMonth = (yearMonth:YearMonth) => {
const {year, month} = yearMonth;
return({
year: month<12 ? year+1 : year,
month: month<12 ? month+1 : 1
});
year: month===12 ? year+1 : year,
month: month===12 ? 1 : month+1
} as YearMonth);
}
export const Page = async () => {
const locations = await fetchAllLocations();
const availableYearMonths = await fetchAvailableYears();
const availableYears = await fetchAvailableYears();
if(isAuthErrorMessage(locations)) {
return (
@@ -30,13 +33,15 @@ export const Page = async () => {
// if the database is in it's initial state, show the add location button for the current month
if(locations.length === 0) {
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const currentYearMonth:YearMonth = {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1
};
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<MonthTitle year={currentYear} month={currentMonth} />
<AddLocationButton year={currentYear} month={currentMonth} />
<MonthTitle yearMonth={currentYearMonth} />
<AddLocationButton yearMonth={currentYearMonth} />
<PageFooter />
</main>
);
@@ -46,13 +51,17 @@ export const Page = async () => {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<AddMonthButton {...getNextYearMonth(locations[0].year, locations[0].month)} />
<AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
{
locations.map((location, ix, array) => {
const isFirstLocationInMonth = ix === 0 || location.year !== array[ix-1].year || location.month !== array[ix-1].month;
const isLastLocationInMonth = location.year !== array[ix+1]?.year || location.month !== array[ix+1]?.month;
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.year === array[0].year && location.month === array[0].month;
const { year, month } = location.yearMonth
const { year: prevYear, month: prevMonth } = array[ix-1]?.yearMonth ?? { year: undefined, month: undefined };
const { year: nextYear, month: nextMonth } = array[ix+1]?.yearMonth ?? { year: undefined, month: undefined };
const isFirstLocationInMonth = ix === 0 || year !== prevYear || month !== prevMonth;
const isLastLocationInMonth = year !== nextYear || month !== nextMonth;
const isLastLocationOfFirstMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month
if(isFirstLocationInMonth) {
monthlyExpense = 0;
@@ -65,13 +74,13 @@ export const Page = async () => {
{
// show month title above the first LocationCard in the month
isFirstLocationInMonth ?
<MonthTitle key={`${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
<MonthTitle key={`${year}-${month}`} yearMonth={location.yearMonth} /> : null
}
<LocationCard key={`${location._id}`} location={location} />
{
// show AddLocationButton as a last item in the firts month
isLastLocationOfFirstMonth ?
<AddLocationButton key={`add-loc-${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
<AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
}
{
isLastLocationInMonth && monthlyExpense>0 ?
@@ -88,7 +97,7 @@ export const Page = async () => {
})
}
<PageFooter />
{ availableYearMonths.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
{ availableYears.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
</main>
);
}

12
app/ui/AddLocationButton.tsx
View File

@@ -1,16 +1,16 @@
import { PlusCircleIcon } from "@heroicons/react/24/outline";
import { YearMonth } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
export interface AddLocationButtonProps {
/** year at which the new billing location should be addes */
year: number
/** month at which the new billing location should be addes */
month: number
/** year and month at which the new billing location should be addes */
yearMonth: YearMonth
}
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({year,month}) =>
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) =>
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<a href={`/location/${year}-${month<10?"0":""}${month}/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<a href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<span className='grid self-center' data-tip="Add a new billing location">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>

9
app/ui/AddMonthButton.tsx
View File

@@ -1,12 +1,13 @@
import { PlusCircleIcon } from "@heroicons/react/24/outline";
import React from "react";
import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types";
export interface AddMonthButtonProps {
year: number;
month: number;
yearMonth: YearMonth;
}
export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ year, month }) =>
<a href={`/year-month/${year}-${month<10?"0":""}${month}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) =>
<a href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</a>

4
app/ui/LocationCard.tsx
View File

@@ -11,7 +11,7 @@ export interface LocationCardProps {
location: BillingLocation
}
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, year, month, bills }}) => {
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
// sum all the billAmounts
const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
@@ -22,7 +22,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, year,
<a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</a>
<h2 className="card-title">{formatYearMonth(year, month)} {name}</h2>
<h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)

12
app/ui/LocationEditForm.tsx
View File

@@ -2,7 +2,7 @@
import { TrashIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillingLocation } from "../lib/db-types";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import { gotoHome } from "../lib/actions/billActions";
@@ -10,16 +10,14 @@ import { gotoHome } from "../lib/actions/billActions";
export interface LocationEditFormProps {
/** location which should be edited */
location?: BillingLocation,
/** year at a new billing location should be assigned */
year?: string
/** month at a new billing location should be assigned */
month?: string
/** year adn month at a new billing location should be assigned */
yearMonth?: YearMonth
}
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, year, month }) =>
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
{
const initialState = { message: null, errors: {} };
const handleAction = updateOrAddLocation.bind(null, location?._id, year, month);
const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
const [ state, dispatch ] = useFormState(handleAction, initialState);
// redirect to the main page

8
app/ui/MonthTitle.tsx
View File

@@ -1,10 +1,10 @@
import { FC } from "react";
import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types";
export interface MonthTitleProps {
year: number;
month: number;
yearMonth: YearMonth
}
export const MonthTitle:FC<MonthTitleProps> = ({year, month}) =>
<div className="divider text-2xl">{`${formatYearMonth(year, month)}`}</div>
export const MonthTitle:FC<MonthTitleProps> = ({ yearMonth }) =>
<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>

5
app/year-month/[id]/add/page.tsx
View File

@@ -1,12 +1,11 @@
import { addMonth } from '@/app/lib/actions/monthActions';
import { parseYearMonth } from '@/app/lib/format';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const [year, month] = id.split("-");
await addMonth(year, month);
await addMonth(parseYearMonth(id));
revalidatePath('/');
redirect(`/`);