feat(event): fetch events from backend

Author: eezhal92

src/app/[locale]/(public)/(user)/layout.tsx

@@ -1,28 +1,26 @@
+"use client";
+
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/Avatar";
 
 import { Calendar1, User } from "lucide-react";
 import { Separator } from "@/components/ui/Separator";
 import { Link } from "@/lib/navigation";
+import { useAuthUser } from "@/components/hooks/UseAuthUser";
 
-const user = {
-  name: "Putra Satria",
-  image: "",
-  fallback: "PS",
-};
-
-export default async function UserLayout({ children }: { children: React.ReactNode }) {
+export default function UserLayout({ children }: { children: React.ReactNode }) {
+  const { user } = useAuthUser();
   return (
     <section className="container mx-auto px-5 pt-24 pb-28">
       <div className="grid grid-cols-5 gap-8">
         <aside className="fixed right-0 bottom-0 left-0 col-span-1 mt-8 flex w-full flex-col justify-between gap-4 self-start rounded-lg bg-white lg:sticky lg:top-24 lg:flex-col lg:justify-start lg:bg-transparent dark:bg-slate-950">
           <div className="flex items-center gap-4">
             <Avatar className="h-12 w-12">
-              <AvatarImage src={user.image} />
-              <AvatarFallback>{user.fallback}</AvatarFallback>
+              <AvatarImage src="" />
+              <AvatarFallback>US</AvatarFallback>
             </Avatar>
             <div>
-              <p className="text-muted-foreground text-sm">Hi</p>
-              <p className="font-semibold">{user.name}</p>
+              <p className="text-muted-foreground text-sm">Hello</p>
+              <p className="font-semibold">{user?.username}</p>
             </div>
           </div>
 

src/app/[locale]/admin/events/page.tsx

@@ -1,17 +1,20 @@
+"use client";
+
+import { useEvents } from "@/features/events/hooks/useEvent";
 import Link from "next/link";
 
 const EventListPage = () => {
+  const { events, isLoading } = useEvents();
   return (
     <div>
       <h1>Event List</h1>
-
+      {isLoading && <p>Fetching events...</p>}
       <ul>
-        <li>
-          Event 123 <Link href="/admin/events/123/edit">Edit</Link>
-        </li>
-        <li>
-          Event 456 <Link href="/admin/events/456/edit">Edit</Link>
-        </li>
+        {events.map((ev) => (
+          <li key={ev.id}>
+            {ev.title} <Link href={`/admin/events/${ev.id}/edit`}>Edit</Link>
+          </li>
+        ))}
       </ul>
     </div>
   );

src/app/[locale]/admin/layout.tsx

@@ -2,7 +2,6 @@ import { cookies } from "next/headers";
 import RouteBreadcrumb from "@/components/common/RouteBreadcrumb";
 import AdminSidebar from "@/components/layout/AdminSidebar";
 
-
 import { jwtDecode } from "jwt-decode";
 import { redirect } from "next/navigation";
 import { AuthJwtPayload } from "@/types";
@@ -16,7 +15,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   if (!token) return redirect("/");
 
   const payload = jwtDecode<AuthJwtPayload>(token.value);
-  if (payload.role !== "user") return redirect("/");
+  if (payload.role !== "admin") return redirect("/");
 
   return (
     <SidebarProvider>

src/app/api/login/route.ts

@@ -7,15 +7,15 @@ export async function POST(request: Request) {
   try {
     const body = await request.json();
     const { email, password } = body;
-    const result = await authService.getToken({ email, password });
-    const token = result.data;
+    const token = await authService.getToken({ email, password });
     const decoded = jwtDecode<AuthJwtPayload>(token);
 
-    const res = NextResponse.json(token);
-    // TODO: fix(security) set cookie with these attributes
-    // httpOnly=true, secure=true if prod, same-site
-    // max-age to follow the token. extract from token
-    // TODO: create logout endpoint and remove cookie there
+    const res = NextResponse.json({
+      token,
+      payload: decoded,
+    });
+    // TODO: fix(security)
+    // set cookie with these attributes: same-site
 
     // Now server components will have access to token
     // Question: should we encrypt token?

src/components/layout/Navbar/UserMenu.tsx

@@ -41,6 +41,11 @@ const DesktopUserMenu = () => {
             </div>
           </Link>
         </DropdownMenuItem>
+        {user?.role === "admin" && (
+          <DropdownMenuItem asChild>
+            <Link href="/admin/events">Dashboard</Link>
+          </DropdownMenuItem>
+        )}
         {USER_LINKS.map(({ id, href }) => (
           <DropdownMenuItem key={id} asChild>
             <Link href={href}>{t(`navbar.user.${id}`)}</Link>

src/components/provider/AuthProvider/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, ReactNode } from "react";
+import { createContext, ReactNode, useState } from "react";
 import { AuthJwtPayload, UserContextType } from "@/types";
 
 export const UserContext = createContext<UserContextType | undefined>(undefined);
@@ -15,8 +15,10 @@ interface AuthProviderProps {
 }
 
 export const AuthProvider = ({ payload, children }: AuthProviderProps) => {
-  const user = payload || null;
+  const [user, setUser] = useState(payload || null);
   const isAuthenticated = !!user;
 
-  return <UserContext.Provider value={{ user, isAuthenticated, isLoading: false }}>{children}</UserContext.Provider>;
+  return (
+    <UserContext.Provider value={{ user, setUser, isAuthenticated, isLoading: false }}>{children}</UserContext.Provider>
+  );
 };

src/features/auth/hooks/useAuth.ts

@@ -21,7 +21,7 @@ export const useAuthService = () => {
       router.push("/");
       toast.success(t("sign-in-success"));
 
-      return res.data;
+      return res;
     } catch (err) {
       toast((err as Error)?.message || t("sign-in-failed"));
     } finally {

src/features/auth/sign-in/SignInPage.tsx

@@ -10,10 +10,12 @@ import { LoginForm, loginSchema } from "@/domains/Auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Link } from "@/lib/navigation";
 import { useAuthService } from "../hooks/useAuth";
+import { useAuthUser } from "@/components/hooks/UseAuthUser";
 
 const SignInPage = () => {
   const t = useTranslations("Auth.SignInPage");
   const { login, isLoading } = useAuthService();
+  const { setUser } = useAuthUser();
 
   const form = useForm<LoginForm>({
     resolver: zodResolver(loginSchema),
@@ -24,7 +26,9 @@ const SignInPage = () => {
   });
 
   const onSubmit: SubmitHandler<LoginForm> = (formData) => {
-    login(formData);
+    login(formData).then((data) => {
+      setUser(data!.data.payload);
+    });
   };
 
   return (

src/services/auth/index.ts

@@ -1,20 +1,24 @@
 import { fetcher } from "../instance";
 import { LoginForm, RegisterForm, ForgotPasswordForm, ResetPasswordForm } from "@/domains/Auth";
 import { User } from "@/features/auth/types";
+import { AuthJwtPayload } from "@/types";
 import { HttpResponse } from "@/types/http";
 import axios from "axios";
 
 export const authService = {
-  login(payload: LoginForm): Promise<HttpResponse<string>> {
+  login(payload: LoginForm): Promise<HttpResponse<{ token: string; payload: AuthJwtPayload }>> {
     return axios.post("/api/login", payload);
   },
 
   logout(): Promise<HttpResponse<unknown>> {
     return axios.post("/api/logout");
   },
 
-  getToken(payload: LoginForm): Promise<HttpResponse<string>> {
-    return fetcher.post("auth/login", payload);
+  getToken(payload: LoginForm): Promise<string> {
+    // FIXME
+    return axios
+      .post("https://lms-be-development.hammercode.org/api/v1/auth/login", payload)
+      .then((res) => res.data.data);
   },
 
   register(payload: RegisterForm): Promise<HttpResponse<User>> {

src/services/instance.ts

@@ -26,6 +26,7 @@ const injectInterceptors = (instance: AxiosInstance): AxiosInstance => {
       return response.data;
     },
     (error: AxiosError) => {
+      console.log({ error });
       return Promise.reject(error?.response?.data);
     }
   );