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

Merge branch 'feature/from-client-to-server-side' into develop

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-09 09:45:57 +01:00
parent 960210cbc3 432952f57c
commit 5412c3aa11
14 changed files with 106 additions and 276 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 { 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} />);
}

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

@@ -1,11 +1,6 @@
import { parseYearMonth } from '@/app/lib/format';
import LocationAddPage from './LocationAddPage';
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 } }) {
return (

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

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

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

@@ -1,17 +1,14 @@
import { Main } from '@/app/ui/Main';
import dynamic from 'next/dynamic'
const LocationDeletePage = dynamic(
() => import('./LocationDeletePage'),
{ ssr: false }
)
import { notFound } from 'next/navigation';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
return (
<Main>
<LocationDeletePage locationId={id} />
</Main>
);
const location = await fetchLocationById(id);
if (!location) {
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 { LocationEditForm, LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
import { useEffect, useState } from 'react';
import { WithId } from 'mongodb';
import { BillingLocation } from '@/app/lib/db-types';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
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);
stateSet({ location, status: 'success' });
} catch(error:any) {
stateSet({ status: 'error', error: error.message });
}
};
fetchLocation();
}, [locationId]);
switch(state.status) {
case "error":
return(<div>Error: {state.error}</div>);
case "loading":
return(<LocationEditFormSkeleton />);
case "success":
if (!state.location) {
if (!location) {
return(notFound());
}
return(<LocationEditForm location={state.location} />);
default:
return(<div>Error: Unknown status</div>);
}
const result = <LocationEditForm location={location} />;
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 dynamic from 'next/dynamic'
const LocationEditPage = dynamic(
() => import('./LocationEditPage'),
{ ssr: false }
)
import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
return (
<Main>
<Suspense fallback={<LocationEditFormSkeleton />}>
<LocationEditPage locationId={id} />
</Suspense>
</Main>
);
}

19
app/page.tsx
View File

@@ -1,11 +1,7 @@
import { FC, Suspense } from 'react';
import { Main } from './ui/Main';
import dynamic from 'next/dynamic'
const HomePage = dynamic(
() => import('./ui/HomePage'),
{ ssr: false }
)
import HomePage from './ui/HomePage';
import { MonthCardSkeleton } from './ui/MonthCardSkeleton';
export interface PageProps {
searchParams?: {
@@ -14,11 +10,20 @@ export interface PageProps {
};
}
const HomePageSkeleton = () =>
<>
<MonthCardSkeleton checked={true} />
<MonthCardSkeleton />
<MonthCardSkeleton />
</>
const Page:FC<PageProps> = async ({ searchParams }) => {
return (
<Main>
<HomePage />
<Suspense fallback={<HomePageSkeleton />}>
<HomePage searchParams={searchParams} />
</Suspense>
</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 { FC, useEffect, useState } from 'react';
import { FC } from 'react';
import { MonthLocationList } from '@/app/ui/MonthLocationList';
import { WithId } from 'mongodb';
import { MonthCardSkeleton } from './MonthCardSkeleton';
import { useSearchParams } from 'next/navigation';
export interface HomePageProps {
searchParams?: {
year?: string;
month?: string;
};
}
type MonthsLocations = {
[key:string]:{
yearMonth: YearMonth,
locations: BillingLocation[],
monthlyExpense: number
}
}
export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
const fetchAllLocations = async (year: number) => {
const response = await fetch(`/api/locations/in-year/?year=${year}`);
const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
return locations;
}
let availableYears: number[];
const fetchAvailableYears = async () => {
const response = await fetch(`/api/locations/available-years/`);
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 () => {
// const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
// await asyncTimout(5000);
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);
// 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)
}
});
}, {} as MonthsLocations);
setHomePageStatus({
availableYears: await fetchAvailableYears(),
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 />);
}
}, {} as {[key:string]:{
yearMonth: YearMonth,
locations: BillingLocation[],
monthlyExpense: number
} });
return (
<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);
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">
<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" />
</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">
{
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]);
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} />
<div className="collapse-title text-xl font-medium">
{`${formatYearMonth(yearMonth)}`}

4
app/ui/MonthLocationList.tsx
View File

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