feat!: improve translation, zustand, API performance

Author: am9zZWY

src/app/WithSystemCheck.tsx

@@ -4,21 +4,20 @@ import { Construction } from "lucide-react";
 import { ComponentType, useCallback, useEffect, useMemo, useState } from "react";
 import { Loading } from "@/app/components/Loading";
 import { useTranslations } from 'next-intl';
-
-// Define the system status type
-type SystemStatus = 'checking' | 'active' | 'inactive';
+import { SystemStatus } from "@/model/system";
 
 let globalSystemStatus: SystemStatus | null = null;
 let lastFetchTime = 0;
 const CACHE_DURATION = 30000; // 30 seconds
 
+type ExtendedSystemStatus = SystemStatus | 'checking';
 const WithSystemCheck = <P extends object>(
     WrappedComponent: ComponentType<P>
 ): ComponentType<P> => {
 
     return function WithSystemCheckComponent(props: P) {
         const t = useTranslations();
-        const [systemStatus, setSystemStatus] = useState<SystemStatus>(() => {
+        const [systemStatus, setSystemStatus] = useState<ExtendedSystemStatus>(() => {
             const now = Date.now();
             if (globalSystemStatus && (now - lastFetchTime) < CACHE_DURATION) {
                 return globalSystemStatus;

src/app/admin/logout/page.tsx

@@ -9,7 +9,7 @@ const Page = () => {
     const authStore = useAuthStore();
     useEffect(() => {
         authStore.signOut();
-        router.push('/');
+        router.push('/', { scroll: true })
     }, []);
 
     return (

src/app/admin/manage/database/page.tsx

@@ -22,7 +22,8 @@ export default function ManagePage() {
 
         fetch('/api/manage/db/delete', {
             method: 'POST',
-            credentials: 'include',        })
+            credentials: 'include',
+        })
             .then(() => setMessage('Database deleted'))
             .catch((error) => setMessage(error))
     }
@@ -34,7 +35,8 @@ export default function ManagePage() {
 
         fetch('/api/manage/db/prepare', {
             method: 'POST',
-            credentials: 'include',        })
+            credentials: 'include',
+        })
             .then(() => setMessage('Database prepared'))
             .catch((error) => {
                 console.error('Error preparing database', error);
@@ -44,7 +46,8 @@ export default function ManagePage() {
 
     const getSystemStatus = () => {
         fetch('/api/manage/system/status', {
-            credentials: 'include',        })
+            credentials: 'include',
+        })
             .then(async response => {
                 const data = await response.json();
                 if (!response.ok) {
@@ -67,7 +70,8 @@ export default function ManagePage() {
     const updateSystemStatus = (status: SystemStatus) => {
         fetch(`/api/manage/system/status/${status}`, {
             method: 'POST',
-            credentials: 'include',        })
+            credentials: 'include',
+        })
             .then(() => {
                 setMessage(`System ${status}`)
                 setStatus(status)
@@ -77,7 +81,6 @@ export default function ManagePage() {
                 setMessage(error)
             })
     }
-
     return (
         <div>
             <Heading title={t('admin.manage.database.title')} description={message}

src/app/admin/prepare/pizza/page.tsx

@@ -46,7 +46,7 @@ const PizzaMakerStation = () => {
 
     // Fetch orders and calculate upcoming pizzas
     const fetchOrders = async () => {
-        const response = await fetch('/api/order', { credentials: 'include',});
+        const response = await fetch('/api/order', { credentials: 'include', });
         const data = await response.json();
 
         if (!response.ok) {
@@ -116,7 +116,7 @@ const PizzaMakerStation = () => {
             return;
         }
 
-        // Add to recently made list for visual feedback
+        // Add to a recently made list for visual feedback
         setRecentlyMade([...recentlyMade, pizzaType.name]);
         setTimeout(() => {
             setRecentlyMade(prev => prev.filter(name => name !== pizzaType.name));
@@ -134,38 +134,36 @@ const PizzaMakerStation = () => {
 
     return (
         <div>
-            {/* TODO: add missing translations*/}
-            <Heading title={t('admin.prepare.title')} description={"Tap when pizza is ready for oven"}
+            <Heading title={t('admin.prepare.title')} description={t('admin.prepare.subtitle')}
                      icon={<Clock className="w-10 h-10 text-gray-900"/>}/>
 
 
             <div className="flex flex-col md:flex-row gap-5">
                 <div className="bg-white p-4 md:p-8 rounded-2xl w-full md:w-1/3">
-                    <div className="flex flex-wrap gap-2">
-                        <div className="flex flex-col gap-2">
-                            {orders.map(order => (
-                                <>
-                                    {order.items
-                                        .filter(item => item.status === ITEM_STATUSES.PREPPING)
-                                        .map((item, index) => (
-                                                <span key={`${order._id.toString()}-${item.item.name}-${index}`}
-                                                      className={`border px-3 py-1 rounded-lg text-sm ${item.status !== ITEM_STATUSES.PREPPING ? 'bg-green-50 border-green-100 text-gray-400' : ''}`}>
+                    <div className="flex flex-col gap-2 max-h-[15rem] md:max-h-fit overflow-y-scroll ">
+                        {orders.map(order => (
+                            <>
+                                {order.items
+                                    .filter(item => item.status === ITEM_STATUSES.PREPPING)
+                                    .map((item, index) => (
+                                        <div
+                                            key={`${order._id.toString()}-${item.item._id.toString()}-${item.status}-${index}`}
+                                            className={`border px-3 py-1 rounded-lg text-sm flex items-center justify-between ${item.status !== ITEM_STATUSES.PREPPING ? 'bg-green-50 border-green-100 text-gray-400' : ''}`}>
                                             {item.item.name} <span
-                                                    className="bg-gray-100 py-0.5 px-1  rounded-2xl">{order.timeslot}</span>
-                                      </span>)
-                                        )}
-                                </>
-                            ))}
-                        </div>
-                        {upcomingPizzas.size === 0 && (
-                            <span className="text-gray-400">{t('admin.prepare.no_open_orders')} 🎉</span>
-                        )}
+                                            className="bg-gray-100 py-0.5 px-1  rounded-2xl">{order.timeslot}</span>
+                                        </div>)
+                                    )}
+                            </>
+                        ))}
                     </div>
+                    {upcomingPizzas.size === 0 && (
+                        <span className="text-gray-400">{t('admin.prepare.no_open_orders')} 🎉</span>
+                    )}
                 </div>
 
                 {/* Pizza buttons grid */}
                 <div>
-                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
                         {items.map(pizza => {
                             const pendingCount = upcomingPizzas.get(pizza.name) ?? 0;
                             const isRecent = recentlyMade.includes(pizza.name);
@@ -174,7 +172,7 @@ const PizzaMakerStation = () => {
                                 <button
                                     key={pizza.id}
                                     className={`
-                aspect-4/3 ${pizza.color} bg-opacity-90 rounded-3xl p-6 md:p-4 
+                aspect-4/3 ${pizza.color} bg-opacity-90 rounded-3xl p-3 md:p-4 
                 shadow-2xl transform transition-all duration-200
                 ${pendingCount > 0 ? 'hover:scale-105 active:scale-95 cursor-pointer' : 'opacity-50 cursor-not-allowed'}
                 ${isRecent ? 'ring-4 ring-green-400 ring-opacity-75' : ''}
@@ -190,9 +188,9 @@ const PizzaMakerStation = () => {
                                                 className="text-sm text-black opacity-75 mt-1">{pizza.dietary}</span>
                                         )}
                                         {pendingCount > 0 && (
-                                            <div className="mt-4 bg-white bg-opacity-25 rounded-full px-4 py-2">
+                                            <div className="mt-4 bg-white bg-opacity-25 rounded-2xl px-4 py-2">
                                                 <span
-                                                    className="text-xl font-bold text-black">{pendingCount} needed</span>
+                                                    className="text-lg font-medium text-black">{pendingCount} needed</span>
                                             </div>
                                         )}
                                         {isRecent && (

src/app/api/manage/system/status/route.ts

@@ -1,16 +1,15 @@
 import dbConnect from "@/lib/dbConnect";
-import { getSystemStatus } from "@/lib/system";
+import { getSystemStatus } from "@/lib/serverAuth";
 
-// Thanks to https://medium.com/phantom3/next-js-14-build-prerender-error-fix-f3c51de2fe1d
 export const dynamic = "force-dynamic";
 export const fetchCache = "force-no-store";
 
+const conn = await dbConnect();
 
 /**
  * Set the system status
  * @constructor
  */
 export async function GET(request: Request) {
-    await dbConnect();
     return Response.json({ status: await getSystemStatus() })
 }

src/app/api/order/[id]/cancel/route.ts

@@ -2,6 +2,7 @@ import dbConnect from "@/lib/dbConnect";
 import mongoose from "mongoose";
 import { ORDER_STATUSES, OrderModel } from "@/model/order";
 import { NextRequest } from "next/server";
+import { ObjectId } from "bson";
 
 /**
  * Allow user to cancel an order.
@@ -16,7 +17,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
     const { id } = await params
 
     // Check if the ID is valid and ObjectId
-    if (!id || !mongoose.isValidObjectId(id)) {
+    if (!id || !ObjectId.isValid(id)) {
         return new Response(`
             The ID is not valid.
             Please provide a valid ID.

src/app/api/order/[id]/pay/route.ts

@@ -3,11 +3,13 @@ import dbConnect from "@/lib/dbConnect";
 import { requireAuth } from "@/lib/serverAuth";
 import { OrderModel } from "@/model/order";
 import { NextRequest, NextResponse } from "next/server";
+import { ObjectId } from "bson";
 
 /**
  * Retrieve whether order is paid or not
  * @constructor
  * @param request
+ * @param params
  */
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
     await dbConnect();
@@ -16,7 +18,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     const { id } = await params
 
     // Check if the ID is valid and ObjectId
-    if (!id || !mongoose.isValidObjectId(id)) {
+    if (!id || !ObjectId.isValid(id)) {
         return NextResponse.json({
             message: 'The ID is not valid.'
         }, { status: 400 })
@@ -42,22 +44,22 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
  * @param params
  */
 export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-    await dbConnect();
-    await requireAuth();
-
     // Get the ID from the URL
     const { id } = await params
 
     // Get the order details from the request body
     const { isPaid } = await request.json()
 
     // Check if the ID is valid and ObjectId
-    if (!id || !mongoose.isValidObjectId(id)) {
+    if (!id || !ObjectId.isValid(id)) {
         return NextResponse.json({
             message: 'The ID is not valid.'
         }, { status: 400 })
     }
 
+    await dbConnect();
+    await requireAuth();
+
 
     try {
         // Find the order by ID

src/app/api/order/[id]/route.ts

@@ -1,7 +1,7 @@
 import dbConnect from "@/lib/dbConnect";
-import mongoose from "mongoose";
 import { OrderModel } from "@/model/order";
 import { NextRequest } from "next/server";
+import { ObjectId } from "bson";
 
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
@@ -11,7 +11,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
     const { id } = await params
 
     // Check if the ID is valid and ObjectId
-    if (!id || !mongoose.isValidObjectId(id)) {
+    if (!id || !ObjectId.isValid(id)) {
         return new Response(`
             The ID is not valid.
             Please provide a valid ID.

src/app/api/order/batch/route.ts

@@ -0,0 +1,31 @@
+import dbConnect from "@/lib/dbConnect";
+import mongoose from "mongoose";
+import { OrderModel, OrderStatus } from "@/model/order";
+import { NextRequest } from "next/server";
+
+
+export async function POST(request: NextRequest) {
+    await dbConnect();
+
+    // Get IDs
+    const { orderIds } = await request.json() as { orderIds: string[] }
+
+    // Check if the ID is valid and ObjectId
+    if (!orderIds || orderIds.some(orderId => !mongoose.isValidObjectId(orderId))) {
+        return new Response(`
+            The ID are not valid.
+        `, { status: 400 });
+    }
+
+    // Batch fetch all order statuses in a single database query
+    const orders = await OrderModel.find({
+        _id: { $in: orderIds }
+    }).select('_id status').lean();
+
+    const statusMap = orders.reduce((acc: { [id: string]: OrderStatus }, order) => {
+        acc[order._id.toString()] = order.status;
+        return acc;
+    }, {});
+
+    return Response.json(statusMap);
+}