Improve error handling, automatically renew access token

Client/app/routes/posts.tsx

@@ -1,4 +1,3 @@
-
 import type { Route } from "../+types/root";
 import { useState, useEffect, type FormEventHandler } from "react";
 
@@ -12,6 +11,7 @@ import { API } from "../api/api";
 import { useNavigate } from "react-router";
 import type { PaginatedResponse } from "~/types/PaginatedResponse";
 import Loading from "~/components/Loading";
+import { getApiErrorMessage } from "~/context/AuthContext";
 
 interface PostCardProps {
   post: Post;
@@ -113,8 +113,12 @@ export default function Posts() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await API.fetchPosts(currentPage, searchQuery);
-      setPaginatedData(data);
+      try {
+        const data = await API.fetchPosts(currentPage, searchQuery);
+        setPaginatedData(data);
+      } catch (err: any) {
+        alert(`Failed to fetch posts: ${getApiErrorMessage(err)}`);
+      }
     }
     fetchData();
   }, [currentPage, searchQuery]);