Refactor: Simplify conditional rendering in FetchApi component

docker-compose.yml

@@ -3,8 +3,3 @@ services:
     image: toogether/webapp
     ports:
       - "80:3000"
-    build: 
-      context: ./
-      dockerfile: Dockerfile
-    environment:
-      - NEXT_PUBLIC_API_URL=http://api:3000

src/app/components/FetchApi.tsx

@@ -1,18 +1,16 @@
 "use client";
 import { axiosInstance } from "@/app/lib/axios";
-import { useRef } from "react";
+import { useState } from "react";
 
 export const FetchApi = () => {
-	const listRef = useRef<HTMLUListElement>(null);
+	const [date, setDate] = useState<string | null>(null);
 
 	const handleFetch = async () => {
 		const response = await axiosInstance.get<{
 			message: string;
 		}>("/ping");
 
-		const li = document.createElement("li");
+		setDate(response.data.message);
-		li.textContent = response.data.message;
-		listRef.current?.appendChild(li);
 	};
 
 	return (
@@ -23,7 +21,11 @@ export const FetchApi = () => {
 			>
 				Fetch API
 			</button>
-			<ul ref={listRef}></ul>
+			{date ? (
+				<p>Server time: {date}</p>
+			) : (
+				<p>Click the button to fetch the API</p>
+			)}
 		</div>
 	);
 };

src/app/lib/axios.ts

@@ -2,6 +2,8 @@ import axios from "axios";
 import moment, { Moment } from "moment";
 import { getSession } from "next-auth/react";
 
+moment.locale("fr");
+
 let cachedAccessToken: string | null = null;
 let tokenExpirationAt: Moment | null = null;
 

src/authOptions.ts

@@ -3,6 +3,8 @@ import moment from "moment";
 import { AuthOptions, Session } from "next-auth";
 import { JWT } from "next-auth/jwt";
 
+moment.locale("fr");
+
 export const authOptions: AuthOptions = {
 	providers: [
 		{