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

Merge branch 'feature/optimizacija' into develop

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-06 14:32:31 +01:00
parent 38fbeebb03 8aaf2a0dea
commit ca56443874
10 changed files with 131 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,8 @@ import { ObjectId } from 'mongodb';
import { withUser } from '@/app/lib/auth';
import { AuthenticatedUser } from '../types/next-auth';
import { gotoHome } from './navigationActions';
import { Noto_Sans_Tamil_Supplement } from 'next/font/google';
import { unstable_noStore as noStore } from 'next/cache';
import { asyncTimeout } from '../asyncTimeout';
export type State = {
errors?: {
@@ -34,6 +35,8 @@ const UpdateLocation = FormSchema.omit({ _id: true });
*/
export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locationId: string | undefined, yearMonth: YearMonth | undefined, prevState:State, formData: FormData) => {
noStore();
const validatedFields = UpdateLocation.safeParse({
locationName: formData.get('locationName'),
locationNotes: formData.get('locationNotes'),
@@ -81,6 +84,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
});
}
// await asyncTimeout(1000);
if(yearMonth) await gotoHome(yearMonth);
return {
@@ -92,6 +97,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:number) => {
noStore();
const dbClient = await getDbClient();
const { id: userId } = user;
@@ -109,11 +116,15 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
})
.toArray();
// await asyncTimeout(1000);
return(locations);
})
export const fetchLocationById = withUser(async (user:AuthenticatedUser, locationID:string) => {
noStore();
const dbClient = await getDbClient();
const { id: userId } = user;
@@ -126,11 +137,15 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
return(null);
}
// await asyncTimeout(1000);
return(billLocation);
})
export const deleteLocationById = withUser(async (user:AuthenticatedUser, locationID:string, yearMonth:YearMonth) => {
noStore();
const dbClient = await getDbClient();
const { id: userId } = user;
@@ -138,5 +153,7 @@ export const deleteLocationById = withUser(async (user:AuthenticatedUser, locati
// find a location with the given locationID
const post = await dbClient.collection<BillingLocation>("lokacije").deleteOne({ _id: locationID, userId });
// await asyncTimeout(1000);
await gotoHome(yearMonth)
})

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

@@ -5,6 +5,7 @@ import { ObjectId } from 'mongodb';
import { Bill, BillingLocation, YearMonth } from '../db-types';
import { AuthenticatedUser } from '../types/next-auth';
import { withUser } from '../auth';
import { unstable_noStore as noStore } from 'next/cache';
/**
* Server-side action which adds a new month to the database
@@ -15,6 +16,8 @@ import { withUser } from '../auth';
* @returns
*/
export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }: YearMonth) => {
noStore();
const { id: userId } = user;
// update the bill in the mongodb
@@ -60,6 +63,8 @@ export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }:
});
export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
noStore();
const { id: userId } = user;
const dbClient = await getDbClient();

2
app/lib/asyncTimeout.ts Normal file
View File

@@ -0,0 +1,2 @@
export const asyncTimeout = (ms: number = 1000) => new Promise(resolve => setTimeout(resolve, ms));

16
app/location/[id]/edit/LocationEditPage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { notFound } from 'next/navigation';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
export default async function LocationEditPage({ locationId }: { locationId:string }) {
const location = await fetchLocationById(locationId);
if (!location) {
return(notFound());
}
const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
return (result);
}

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

@@ -1,13 +1,15 @@
import { notFound } from 'next/navigation';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { Suspense } from 'react';
import LocationEditPage from './LocationEditPage';
import { Main } from '@/app/ui/Main';
import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const location = await fetchLocationById(id);
if (!location) {
return(notFound());
}
return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
return (
<Main>
<Suspense fallback={<LocationEditFormSkeleton />}>
<LocationEditPage locationId={id} />
</Suspense>
</Main>
);
}

14
app/ui/BillDeleteForm.tsx
View File

@@ -4,22 +4,20 @@ import { FC } from "react";
import { Bill, BillingLocation } from "../lib/db-types";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import { gotoHome } from "../lib/actions/navigationActions";
import { deleteBillById } from "../lib/actions/billActions";
import Link from "next/link";
export interface BillDeleteFormProps {
bill: Bill,
location: BillingLocation
}
export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
{
const handleAction = deleteBillById.bind(null, location._id, bill._id, location.yearMonth.year, location.yearMonth.month);
export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
const { year, month } = location.yearMonth;
const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
const [ state, dispatch ] = useFormState(handleAction, null);
const handleCancel = () => {
gotoHome(location.yearMonth);
};
return(
<Main>
@@ -31,7 +29,7 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
</p>
<div className="pt-4 text-center">
<button className="btn btn-primary">Confim</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
<Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>Cancel</Link>
</div>
</form>
</div>

2
app/ui/BillEditForm.tsx
View File

@@ -126,7 +126,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
<div className="pt-4">
<button type="submit" className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
<Link className="btn btn-neutral ml-3" href={`/?year=${billYear}&month=${billMonth}`}>Cancel</Link>
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">

3
app/ui/LocationDeleteForm.tsx
View File

@@ -6,6 +6,7 @@ import { deleteLocationById } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import { gotoUrl } from "../lib/actions/navigationActions";
import Link from "next/link";
export interface LocationDeleteFormProps {
/** location which should be deleted */
@@ -31,7 +32,7 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
</p>
<div className="pt-4 text-center">
<button className="btn btn-primary">Confim</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
<Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
</div>
</form>
</div>

37
app/ui/LocationEditForm.tsx
View File

@@ -5,15 +5,19 @@ import { FC } from "react";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import Link from "next/link";
import { gotoHome } from "../lib/actions/navigationActions";
export interface LocationEditFormProps {
export type LocationEditFormProps = {
/** location which should be edited */
location?: BillingLocation,
location: BillingLocation,
/** year adn month at a new billing location should be assigned */
yearMonth?: YearMonth
yearMonth: undefined
} | {
/** location which should be edited */
location: undefined,
/** year adn month at a new billing location should be assigned */
yearMonth: YearMonth
}
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
@@ -22,17 +26,9 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
const [ state, dispatch ] = useFormState(handleAction, initialState);
// redirect to the main page
const handleCancel = () => {
if(location)
gotoHome(location?.yearMonth);
else if(yearMonth)
gotoHome(yearMonth);
};
let { year, month } = location ? location.yearMonth : yearMonth;
return(
<Main>
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={dispatch}>
@@ -73,11 +69,22 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
<div className="pt-4">
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
<Link className="btn btn-neutral ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
</div>
</form>
</div>
</div>
</Main>
)
}
export const LocationEditFormSkeleton:FC = () =>
{
return(
<div className="skeleton card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" />
<textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis"></textarea>
</div>
</div>
)
}

8
app/ui/MonthLocationList.tsx
View File

@@ -7,7 +7,7 @@ import { MonthCard } from "./MonthCard";
import Pagination from "./Pagination";
import { LocationCard } from "./LocationCard";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useRouter, useSearchParams } from "next/navigation";
const getNextYearMonth = (yearMonth:YearMonth) => {
const {year, month} = yearMonth;
@@ -77,11 +77,15 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
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
}
{
yearMonth.month === expandedMonth ?
// show AddLocationButton as a last item in the first month
monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
(monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null)
: null
}
</MonthCard>
)