NextJS Consume api

// pages/login.js

import { useState } from "react";

import { useRouter } from "next/router";

import Link from "next/link";

import { useForm } from "react-hook-form";

import { zodResolver } from "@hookform/resolvers/zod";

import { z } from "zod";

import { setToken, isAuthenticated } from "@/utils/auth";



import { Button } from "@/components/ui/button";

import {

  Form,

  FormControl,

  FormField,

  FormItem,

  FormLabel,

  FormMessage,

} from "@/components/ui/form";

import { Input } from "@/components/ui/input";



const formSchema = z.object({

  username: z.string().min(1, "Username is required"),

  password: z.string().min(5, "Password must be at least 5 characters long"),

});



export default function LoginPage({ serverError }) {

  const router = useRouter();

  const [errorMessage, setErrorMessage] = useState(serverError || "");

  const [isLoading, setIsLoading] = useState(false);



  const form = useForm({

    defaultValues: {

      username: "",

      password: "",

    },

    resolver: zodResolver(formSchema),

  });



  const onSubmit = async (data) => {

    setErrorMessage("");

    setIsLoading(true);



    try {

      const response = await fetch("http://localhost:8000/api/login/", {

        method: "POST",

        headers: { "Content-Type": "application/json" },

        body: JSON.stringify(data),

        credentials: 'include', // Penting untuk cookies

      });



      const result = await response.json();



      if (!response.ok) {

        throw new Error(result.message || "Login failed. Please check your credentials.");

      }



      // Simpan token di cookie dan localStorage

      setToken(result.access);



      router.push("/menu");

    } catch (error) {

      setErrorMessage(error.message);

    } finally {

      setIsLoading(false);

    }

  };



  return (

    <div className="min-h-screen flex items-center justify-center w-full">

      <div className="max-w-xs w-full flex flex-col items-center">

        <p className="mt-4 mb-8.5 text-xl font-bold tracking-tight">

          Log in to RestoKu

        </p>



        {errorMessage && (

          <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm w-full">

            {errorMessage}

          </div>

        )}



        <Form {...form}>

          <form

            className="w-full space-y-4"

            onSubmit={form.handleSubmit(onSubmit)}

          >

            <FormField

              control={form.control}

              name="username"

              render={({ field }) => (

                <FormItem>

                  <FormLabel>Username</FormLabel>

                  <FormControl>

                    <Input

                      type="text"

                      placeholder="Username"

                      className="w-full"

                      disabled={isLoading}

                      {...field}

                    />

                  </FormControl>

                  <FormMessage />

                </FormItem>

              )}

            />

            <FormField

              control={form.control}

              name="password"

              render={({ field }) => (

                <FormItem>

                  <FormLabel>Password</FormLabel>

                  <FormControl>

                    <Input

                      type="password"

                      placeholder="Password"

                      className="w-full"

                      disabled={isLoading}

                      {...field}

                    />

                  </FormControl>

                  <FormMessage />

                </FormItem>

              )}

            />

            <Button 

              type="submit" 

              className="mt-4 w-full"

              disabled={isLoading}

            >

              {isLoading ? "Logging in..." : "Login"}

            </Button>

          </form>

        </Form>

        <div className="mt-5 space-y-5">

          <Link

            href="/forgot-password"

            className="text-sm block underline text-muted-foreground text-center"

          >

            Forgot your password?

          </Link>

          <p className="text-sm text-center">

            Don't have an account?

            <Link href="/register" className="ml-1 underline text-muted-foreground">

              Create account

            </Link>

          </p>

        </div>

      </div>

    </div>

  );

}



export async function getServerSideProps(context) {

  // Cek jika pengguna sudah terautentikasi

  if (isAuthenticated(context)) {

    return {

      redirect: {

        destination: '/menu',

        permanent: false,

      },

    };

  }



  const { error } = context.query;



  return {

    props: {

      serverError: error || null,

    },

  };

}

// utils/auth.js

import Cookies from 'js-cookie';

import { parseCookies } from 'nookies';



// Fungsi untuk menyimpan token di cookies dan localStorage (untuk kompatibilitas)

export const setToken = (token) => {

  if (typeof window !== 'undefined') {

    // Client-side

    localStorage.setItem('adminToken', token);

    // Mengatur cookie dengan secure flag, httpOnly untuk produksi

    Cookies.set('adminToken', token, { expires: 7 }); // Expires in 7 days

  }

};



// Fungsi untuk mendapatkan token

export const getToken = (ctx) => {

  // Server-side

  if (ctx) {

    const cookies = parseCookies(ctx);

    return cookies.adminToken;

  }



  // Client-side

  if (typeof window !== 'undefined') {

    return Cookies.get('adminToken') || localStorage.getItem('adminToken');

  }



  return null;

};



// Fungsi untuk menghapus token saat logout

export const removeToken = () => {

  if (typeof window !== 'undefined') {

    localStorage.removeItem('adminToken');

    Cookies.remove('adminToken');

  }

};



// Fungsi untuk memeriksa apakah pengguna sudah terautentikasi

export const isAuthenticated = (ctx) => {

  const token = getToken(ctx);

  return !!token;

};

// pages/menu.tsx

import { Card, CardContent, CardHeader } from "@/components/ui/card";

import { PlusIcon } from "lucide-react";

import {

  Dialog,

  DialogTrigger,

  DialogContent,

  DialogHeader,

  DialogTitle,

  DialogFooter,

} from "@/components/ui/dialog";

import { Input } from "@/components/ui/input";

import { Label } from "@/components/ui/label";

import { Button } from "@/components/ui/button";

import { getToken, removeToken } from "@/utils/auth";

import { redirect } from 'next/navigation';

import { cookies } from 'next/headers';



interface Menuitem {

  id_menu: number;

  nama_menu: string;

  harga: number;

  menu_image: string;

  id_kategori: number;

}



async function getMenuData() {

  const token = getToken({ req: { headers: { cookie: cookies().toString() } });



  if (!token) {

    redirect('/login');

  }



  try {

    const response = await fetch("http://127.0.0.1:8000/api/menu/", {

      headers: {

        Authorization: `Bearer ${token}`,

      },

      cache: 'no-store'

    });



    if (response.status === 401) {

      removeToken();

      redirect('/login');

    }



    if (!response.ok) {

      throw new Error('Failed to fetch menu data');

    }



    return await response.json();

  } catch (error) {

    console.error("Error fetching menu data:", error);

    return [];

  }

}



export default async function MenuPage() {

  const menus: Menuitem[] = await getMenuData();



  async function handleAddMenu(formData: FormData) {

    'use server';



    const token = getToken({ req: { headers: { cookie: cookies().toString() } });



    if (!token) {

      redirect('/login');

    }



    const namaMenu = formData.get('nama_menu') as string;

    const harga = formData.get('harga') as string;

    const kategori = formData.get('id_kategori') as string;

    const imageFile = formData.get('menu_image') as File;



    const postData = new FormData();

    postData.append('nama_menu', namaMenu);

    postData.append('harga', harga);

    postData.append('id_kategori', kategori);



    if (imageFile.size > 0) {

      postData.append('menu_image', imageFile);

    }



    try {

      const response = await fetch("http://127.0.0.1:8000/api/menu/", {

        method: "POST",

        headers: {

          Authorization: `Bearer ${token}`,

        },

        body: postData,

      });



      if (response.status === 401) {

        removeToken();

        redirect('/login');

      }



      if (!response.ok) {

        throw new Error('Failed to add menu');

      }



      redirect('/menu');

    } catch (error) {

      console.error("Error adding menu:", error);

      throw error;

    }

  }



  return (

    <div className="max-w-screen-lg w-full py-10 px-6">

      <div className="flex justify-between items-center">

        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">

          Daftar Menu

        </h1>

        <form action="/logout" method="POST">

          <Button type="submit" variant="outline">

            Logout

          </Button>

        </form>

      </div>



      <Dialog>

        <DialogTrigger asChild>

          <Button

            variant="outline"

            size="icon"

            className="w-[140px] font-normal bg-gray-100"

          >

            <PlusIcon className="mr-2" /> Tambah Menu

          </Button>

        </DialogTrigger>

        <DialogContent>

          <DialogHeader>

            <DialogTitle>Tambah Menu Baru</DialogTitle>

          </DialogHeader>



          <form action={handleAddMenu}>

            <div className="grid gap-4 py-4">

              <div className="grid grid-cols-4 items-center gap-4">

                <Label htmlFor="nama" className="text-right">

                  Nama

                </Label>

                <Input

                  id="nama"

                  name="nama_menu"

                  className="col-span-3"

                  required

                />

              </div>

              <div className="grid grid-cols-4 items-center gap-4">

                <Label htmlFor="harga" className="text-right">

                  Harga

                </Label>

                <Input

                  id="harga"

                  name="harga"

                  type="number"

                  className="col-span-3"

                  required

                />

              </div>

              <div className="grid grid-cols-4 items-center gap-4">

                <Label htmlFor="kategori" className="text-right">

                  Kategori

                </Label>

                <Input

                  id="kategori"

                  name="id_kategori"

                  type="number"

                  defaultValue="1"

                  className="col-span-3"

                  required

                />

              </div>

              <div className="grid grid-cols-4 items-center gap-4">

                <Label htmlFor="gambar" className="text-right">

                  Gambar

                </Label>

                <Input

                  id="gambar"

                  name="menu_image"

                  type="file"

                  accept="image/*"

                  className="col-span-3"

                />

              </div>

            </div>



            <DialogFooter>

              <Button type="submit">Simpan</Button>

            </DialogFooter>

          </form>

        </DialogContent>

      </Dialog>



      <div className="mt-8 w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8">

        {menus.map((menu) => (

          <Card

            key={menu.id_menu}

            className="flex flex-col border rounded-xl overflow-hidden shadow-none"

          >

            <CardHeader>

              <h4 className="!mt-3 text-xl font-semibold tracking-tight">

                {menu.nama_menu}

              </h4>

              <p className="mt-1 text-muted-foreground text-[17px]">

                Rp {menu.harga.toLocaleString()}

              </p>

            </CardHeader>

            <CardContent className="mt-auto px-0 pb-0">

              <div>

                <img

                  src={menu.menu_image}

                  alt={menu.nama_menu}

                  className="bg-muted h-40 ml-6 rounded-tl-xl object-cover w-[calc(100%-1.5rem)]"

                />

              </div>

            </CardContent>

          </Card>

        ))}

      </div>

    </div>

  );

}

// app/features-02/page.tsx

import { Button } from "@/components/ui/button";

import {

  Dialog,

  DialogContent,

  DialogFooter,

  DialogHeader,

  DialogTitle,

  DialogTrigger,

} from "@/components/ui/dialog";

import { Input } from "@/components/ui/input";

import { Label } from "@/components/ui/label";

import { PlusIcon } from "lucide-react";

import { getToken, removeToken } from "@/utils/auth";

import { redirect } from 'next/navigation';

import { cookies } from 'next/headers';



interface MejaItem {

  id_meja: number;

  no_meja: number;

  kapasitas: number;

  image_meja: string;

}



async function getMejaData() {

  const token = getToken({ req: { headers: { cookie: cookies().toString() } });



  if (!token) {

    redirect('/login');

  }



  try {

    const response = await fetch("http://127.0.0.1:8000/api/meja/", {

      headers: {

        Authorization: `Bearer ${token}`,

      },

      cache: 'no-store'

    });



    if (response.status === 401) {

      removeToken();

      redirect('/login');

    }



    if (!response.ok) {

      throw new Error('Failed to fetch table data');

    }



    return await response.json();

  } catch (error) {

    console.error("Error fetching table data:", error);

    return [];

  }

}



export default async function Features02Page() {

  const mejas: MejaItem[] = await getMejaData();



  async function handleAddTable(formData: FormData) {

    'use server';



    const token = getToken({ req: { headers: { cookie: cookies().toString() } });



    if (!token) {

      redirect('/login');

    }



    const no_meja = formData.get('no_meja') as string;

    const kapasitas = formData.get('kapasitas') as string;

    const imageFile = formData.get('image_meja') as File;



    const postData = new FormData();

    postData.append('no_meja', no_meja);

    postData.append('kapasitas', kapasitas);



    if (imageFile.size > 0) {

      postData.append('image_meja', imageFile);

    }



    try {

      const response = await fetch("http://127.0.0.1:8000/api/meja/", {

        method: "POST",

        headers: {

          Authorization: `Bearer ${token}`,

        },

        body: postData,

      });



      if (response.status === 401) {

        removeToken();

        redirect('/login');

      }



      if (!response.ok) {

        throw new Error('Failed to add table');

      }



      redirect('/features-02');

    } catch (error) {

      console.error("Error adding table:", error);

      throw error;

    }

  }



  return (

    <div className="min-h-screen flex justify-center py-12">

      <div className="w-full">

        <div className="flex justify-between items-center px-6">

          <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-14 text-center">

            Daftar Meja

          </h2>

          <form action="/logout" method="POST">

            <Button type="submit" variant="outline">

              Logout

            </Button>

          </form>

        </div>



        <div className="ml-[315px]">

          <Dialog>

            <DialogTrigger asChild>

              <Button

                variant="outline"

                size="icon"

                className="w-[140px] font-normal bg-gray-100"

              >

                <PlusIcon className="mr-2" /> Tambah Meja

              </Button>

            </DialogTrigger>

            <DialogContent>

              <DialogHeader>

                <DialogTitle>Tambah Meja Baru</DialogTitle>

              </DialogHeader>



              <form action={handleAddTable}>

                <div className="grid gap-4 py-4">

                  <div className="grid grid-cols-4 items-center gap-4">

                    <Label htmlFor="no_meja" className="text-right">

                      No Meja

                    </Label>

                    <Input

                      id="no_meja"

                      name="no_meja"

                      className="col-span-3"

                      required

                    />

                  </div>

                  <div className="grid grid-cols-4 items-center gap-4">

                    <Label htmlFor="kapasitas" className="text-right">

                      Kapasitas

                    </Label>

                    <Input

                      id="kapasitas"

                      name="kapasitas"

                      type="number"

                      className="col-span-3"

                      required

                    />

                  </div>

                  <div className="grid grid-cols-4 items-center gap-4">

                    <Label htmlFor="gambar" className="text-right">

                      Gambar

                    </Label>

                    <Input

                      id="gambar"

                      name="image_meja"

                      type="file"

                      accept="image/*"

                      className="col-span-3"

                    />

                  </div>

                </div>



                <DialogFooter>

                  <Button type="submit">Simpan</Button>

                </DialogFooter>

              </form>

            </DialogContent>

          </Dialog>

        </div>



        <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-12 max-w-md sm:max-w-screen-md lg:max-w-screen-lg w-full mx-auto px-6">

          {mejas.map((meja) => (

            <div key={meja.id_meja} className="flex flex-col text-start">

              <div>

                <img

                  src={meja.image_meja}

                  alt={`Meja ${meja.no_meja}`}

                  className="mb-5 sm:mb-6 w-full aspect-[3/3] bg-muted rounded-xl object-cover"

                />

              </div>

              <span className="text-2xl font-semibold tracking-tight">

                Nomor Meja: {meja.no_meja}

              </span>

              <p className="mt-2 max-w-[25ch] text-muted-foreground text-[17px]">

                Kapasitas: {meja.kapasitas} orang

              </p>

            </div>

          ))}

        </div>

      </div>

    </div>

  );

}