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

Merge branch 'release/1.11.0'

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-09 09:47:07 +01:00
parent b5af8303c8 fb17b52b8e
commit becdbe573f
15 changed files with 107 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/api/locations/available-years/route.ts
View File

@@ -1,9 +0,0 @@
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
const availableYears = await fetchAvailableYears();
return NextResponse.json({ availableYears });
}

12
app/api/locations/by-id/route.ts
View File

@@ -1,12 +0,0 @@
import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { NextResponse } from 'next/server';
export const GET = async (
req: Request,
) => {
const url = new URL(req.url as string);
const locationId = url.searchParams.get('id');
const location = await fetchLocationById(locationId as string);
return NextResponse.json({ location });
}

13
app/api/locations/in-year/route.ts
View File

@@ -1,13 +0,0 @@
import { fetchAllLocations } from '@/app/lib/actions/locationActions';
import { NextResponse } from 'next/server';
export const GET = async (
req: Request,
) => {
// get year from query params
const url = new URL(req.url as string);
const year = parseInt(url.searchParams.get('year') as string, 10);
const locations = await fetchAllLocations(year);
return NextResponse.json({ locations });
}

4
app/location/[id]/add/LocationAddPage.tsx
View File

@@ -1,8 +1,6 @@
"use client";
import { LocationEditForm } from '@/app/ui/LocationEditForm'; import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { YearMonth } from '@/app/lib/db-types'; import { YearMonth } from '@/app/lib/db-types';
export default function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) { export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
return (<LocationEditForm yearMonth={yearMonth} />); return (<LocationEditForm yearMonth={yearMonth} />);
} }

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

@@ -1,11 +1,6 @@
import { parseYearMonth } from '@/app/lib/format'; import { parseYearMonth } from '@/app/lib/format';
import LocationAddPage from './LocationAddPage';
import { Main } from '@/app/ui/Main'; import { Main } from '@/app/ui/Main';
import dynamic from 'next/dynamic'
const LocationAddPage = dynamic(
() => import('./LocationAddPage'),
{ ssr: false }
)
export default async function Page({ params:{ id } }: { params: { id:string } }) { export default async function Page({ params:{ id } }: { params: { id:string } }) {
return ( return (

50
app/location/[id]/delete/LocationDeletePage.tsx
View File

@@ -1,54 +1,14 @@
"use client";
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { LocationDeleteForm, LocationDeleteFormSkeleton } from '@/app/ui/LocationDeleteForm'; import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { WithId } from 'mongodb'; import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
import { BillingLocation } from '@/app/lib/db-types';
import { useEffect, useState } from 'react';
const fetchLocationById = async (locationId: string) => { export const LocationDeletePage = async ({ locationId }: { locationId:string }) => {
const response = await fetch(`/api/locations/by-id?id=${locationId}`);
const json = await response.json();
return json.location as WithId<BillingLocation>;
}
const LocationDeletePage = ({ locationId }: { locationId:string }) => {
const [state, stateSet] = useState<{
status: 'loading' | 'error' | 'success';
location?: WithId<BillingLocation>;
error?: string;
}>({ status: 'loading' });
useEffect(() => {
const fetchLocation = async () => {
try {
const location = await fetchLocationById(locationId); const location = await fetchLocationById(locationId);
stateSet({ location, status: 'success' });
} catch(error:any) {
stateSet({ status: 'error', error: error.message });
}
};
fetchLocation(); if (!location) {
}, [locationId]);
switch(state.status) {
case "error":
return(<div>Error: {state.error}</div>);
case "loading":
return(<LocationDeleteFormSkeleton />);
case "success":
if (!state.location) {
return(notFound()); return(notFound());
} }
return(<LocationDeleteForm location={state.location} />); return (<LocationDeleteForm location={location} />);
default:
return(<div>Error: Unknown status</div>);
} }
}
export default LocationDeletePage;

23
app/location/[id]/delete/page.tsx
View File

@@ -1,17 +1,14 @@
import { Main } from '@/app/ui/Main'; import { notFound } from 'next/navigation';
import dynamic from 'next/dynamic' import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
const LocationDeletePage = dynamic(
() => import('./LocationDeletePage'),
{ ssr: false }
)
export default async function Page({ params:{ id } }: { params: { id:string } }) { export default async function Page({ params:{ id } }: { params: { id:string } }) {
return ( const location = await fetchLocationById(id);
<Main>
<LocationDeletePage locationId={id} /> if (!location) {
</Main> return(notFound());
); }
return (<LocationDeleteForm location={location} />);
} }

51
app/location/[id]/edit/LocationEditPage.tsx
View File

@@ -1,53 +1,16 @@
"use client";
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { LocationEditForm, LocationEditFormSkeleton } from '@/app/ui/LocationEditForm'; import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { useEffect, useState } from 'react'; import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { WithId } from 'mongodb';
import { BillingLocation } from '@/app/lib/db-types';
export default async function LocationEditPage({ locationId }: { locationId:string }) {
const fetchLocationById = async (locationId: string) => {
const response = await fetch(`/api/locations/by-id?id=${locationId}`);
const json = await response.json();
return json.location as WithId<BillingLocation>;
}
export default function LocationEditPage({ locationId }: { locationId:string }) {
const [state, stateSet] = useState<{
status: 'loading' | 'error' | 'success';
location?: WithId<BillingLocation>;
error?: string;
}>({ status: 'loading' });
useEffect(() => {
const fetchLocation = async () => {
try {
const location = await fetchLocationById(locationId); const location = await fetchLocationById(locationId);
stateSet({ location, status: 'success' });
} catch(error:any) {
stateSet({ status: 'error', error: error.message });
}
};
fetchLocation(); if (!location) {
}, [locationId]);
switch(state.status) {
case "error":
return(<div>Error: {state.error}</div>);
case "loading":
return(<LocationEditFormSkeleton />);
case "success":
if (!state.location) {
return(notFound()); return(notFound());
} }
return(<LocationEditForm location={state.location} />); const result = <LocationEditForm location={location} />;
default:
return(<div>Error: Unknown status</div>); return (result);
}
} }

12
app/location/[id]/edit/page.tsx
View File

@@ -1,17 +1,15 @@
import { Suspense } from 'react';
import LocationEditPage from './LocationEditPage';
import { Main } from '@/app/ui/Main'; import { Main } from '@/app/ui/Main';
import dynamic from 'next/dynamic' import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
const LocationEditPage = dynamic(
() => import('./LocationEditPage'),
{ ssr: false }
)
export default async function Page({ params:{ id } }: { params: { id:string } }) { export default async function Page({ params:{ id } }: { params: { id:string } }) {
return ( return (
<Main> <Main>
<Suspense fallback={<LocationEditFormSkeleton />}>
<LocationEditPage locationId={id} /> <LocationEditPage locationId={id} />
</Suspense>
</Main> </Main>
); );
} }

19
app/page.tsx
View File

@@ -1,11 +1,7 @@
import { FC, Suspense } from 'react'; import { FC, Suspense } from 'react';
import { Main } from './ui/Main'; import { Main } from './ui/Main';
import dynamic from 'next/dynamic' import HomePage from './ui/HomePage';
import { MonthCardSkeleton } from './ui/MonthCardSkeleton';
const HomePage = dynamic(
() => import('./ui/HomePage'),
{ ssr: false }
)
export interface PageProps { export interface PageProps {
searchParams?: { searchParams?: {
@@ -14,11 +10,20 @@ export interface PageProps {
}; };
} }
const HomePageSkeleton = () =>
<>
<MonthCardSkeleton checked={true} />
<MonthCardSkeleton />
<MonthCardSkeleton />
</>
const Page:FC<PageProps> = async ({ searchParams }) => { const Page:FC<PageProps> = async ({ searchParams }) => {
return ( return (
<Main> <Main>
<HomePage /> <Suspense fallback={<HomePageSkeleton />}>
<HomePage searchParams={searchParams} />
</Suspense>
</Main> </Main>
); );
} }

114
app/ui/HomePage.tsx
View File

@@ -1,58 +1,39 @@
"use client"; import { fetchAllLocations } from '@/app/lib/actions/locationActions';
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
import { BillingLocation, YearMonth } from '@/app/lib/db-types'; import { BillingLocation, YearMonth } from '@/app/lib/db-types';
import { FC, useEffect, useState } from 'react'; import { FC } from 'react';
import { MonthLocationList } from '@/app/ui/MonthLocationList'; import { MonthLocationList } from '@/app/ui/MonthLocationList';
import { WithId } from 'mongodb';
import { MonthCardSkeleton } from './MonthCardSkeleton';
import { useSearchParams } from 'next/navigation';
export interface HomePageProps { export interface HomePageProps {
searchParams?: {
year?: string;
month?: string;
};
} }
type MonthsLocations = { export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
[key:string]:{
yearMonth: YearMonth,
locations: BillingLocation[],
monthlyExpense: number
}
}
const fetchAllLocations = async (year: number) => { let availableYears: number[];
const response = await fetch(`/api/locations/in-year/?year=${year}`);
const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
return locations;
}
const fetchAvailableYears = async () => { // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
const response = await fetch(`/api/locations/available-years/`); // await asyncTimout(5000);
const { availableYears }: { availableYears: number[]} = await response.json();
return availableYears;
}
export const HomePage:FC<HomePageProps> = () => {
const searchParams = useSearchParams();
const year = searchParams.get('year');
const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
const [ homePageStatus, setHomePageStatus ] = useState<{
status: "loading" | "loaded" | "error",
availableYears: number[],
months?: MonthsLocations,
error?: string
}>({
status: "loading",
availableYears: [],
});
const {availableYears, months, status, error} = homePageStatus;
useEffect(() => {
const fetchData = async () => {
try { try {
availableYears = await fetchAvailableYears();
} catch (error:any) {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<p className="text-center text-2xl text-red-500">{error.message}</p>
</main>);
}
// if the database is in it's initial state, show the add location button for the current month
if(availableYears.length === 0) {
return (<MonthLocationList />);
}
const currentYear = Number(searchParams?.year) || availableYears[0];
const locations = await fetchAllLocations(currentYear); const locations = await fetchAllLocations(currentYear);
// group locations by month // group locations by month
@@ -81,44 +62,11 @@ export const HomePage:FC<HomePageProps> = () => {
monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0) monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
} }
}); });
}, {} as MonthsLocations); }, {} as {[key:string]:{
yearMonth: YearMonth,
setHomePageStatus({ locations: BillingLocation[],
availableYears: await fetchAvailableYears(), monthlyExpense: number
months, } });
status: "loaded",
});
} catch (error: any) {
setHomePageStatus({
status: "error",
availableYears: [],
error: error.message
});
}
}
fetchData();
}, [currentYear]);
if(status === "loading") {
return (
<>
<MonthCardSkeleton checked={true} />
<MonthCardSkeleton />
<MonthCardSkeleton />
</>
);
}
if(status === "error") {
return(<p className="text-center text-2xl text-red-500">{error}</p>);
}
// if the database is in it's initial state, show the add location button for the current month
if(availableYears.length === 0) {
return (<MonthLocationList />);
}
return ( return (
<MonthLocationList availableYears={availableYears} months={months} /> <MonthLocationList availableYears={availableYears} months={months} />

4
app/ui/LocationCard.tsx
View File

@@ -18,12 +18,12 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0); const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
return( return(
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1"> <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
<div className="card-body"> <div className="card-body">
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location"> <Link 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" /> <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</Link> </Link>
<h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2> <h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions"> <div className="card-actions">
{ {
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />) bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)

2
app/ui/MonthCard.tsx
View File

@@ -30,7 +30,7 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
}, [expanded]); }, [expanded]);
return( return(
<div className="collapse collapse-plus bg-base-200 my-1" ref={elRef}> <div className={`collapse collapse-plus bg-base-200 my-1 ${expanded ? "border-2 border-neutral" : ""}`} ref={elRef}>
<input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} /> <input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} />
<div className="collapse-title text-xl font-medium"> <div className="collapse-title text-xl font-medium">
{`${formatYearMonth(yearMonth)}`} {`${formatYearMonth(yearMonth)}`}

4
app/ui/MonthLocationList.tsx
View File

@@ -63,10 +63,10 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
const handleMonthToggle = (yearMonth:YearMonth) => { const handleMonthToggle = (yearMonth:YearMonth) => {
// if the month is already expanded, collapse it // if the month is already expanded, collapse it
if(expandedMonth === yearMonth.month) { if(expandedMonth === yearMonth.month) {
router.push(`/?year=${yearMonth.year}`); // router.push(`/?year=${yearMonth.year}`);
setExpandedMonth(-1); // no month is expanded setExpandedMonth(-1); // no month is expanded
} else { } else {
router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`); // router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
setExpandedMonth(yearMonth.month); setExpandedMonth(yearMonth.month);
} }
} }

2
docker-compose-deploy.yml
View File

@@ -9,7 +9,7 @@ networks:
services: services:
web-app: web-app:
image: utility-bills-tracker:1.10.1 image: utility-bills-tracker:1.11.0
networks: networks:
- traefik-network - traefik-network
- mongo-network - mongo-network