fix: redirect user to login if a 401 happens in the admin API

Author: thorsten

CLAUDE.md

@@ -54,6 +54,7 @@ It is built using HTML5, CSS, TypeScript, and PHP and supports various databases
 - TypeScript code in watch mode: pnpm test:watch
 - TypeScript linting: pnpm lint
 - TypeScript code formatting: pnpm lint:fix
+- TypeScript errors have to be fixed before committing code.
 
 ## Building
 

phpmyfaq/admin/assets/src/api/attachment.ts

@@ -13,40 +13,35 @@
  * @since     2024-05-01
  */
 
+import { fetchJson } from './fetch-wrapper';
 import { Response } from '../interfaces';
 
 export const deleteAttachments = async (attachmentId: string, csrfToken: string): Promise<Response> => {
-  const response = await fetch('./api/content/attachments', {
+  return await fetchJson('./api/content/attachments', {
     method: 'DELETE',
     headers: {
       Accept: 'application/json, text/plain, */*',
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ attId: attachmentId, csrf: csrfToken }),
   });
-
-  return await response.json();
 };
 
 export const refreshAttachments = async (attachmentId: string, csrfToken: string): Promise<Response> => {
-  const response = await fetch('./api/content/attachments/refresh', {
+  return await fetchJson('./api/content/attachments/refresh', {
     method: 'POST',
     headers: {
       Accept: 'application/json, text/plain, */*',
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ attId: attachmentId, csrf: csrfToken }),
   });
-
-  return await response.json();
 };
 
 export const uploadAttachments = async (formData: FormData): Promise<Response> => {
-  const response = await fetch('./api/content/attachments/upload', {
+  return await fetchJson('./api/content/attachments/upload', {
     method: 'POST',
     cache: 'no-cache',
     body: formData,
   });
-
-  return await response.json();
 };

phpmyfaq/admin/assets/src/api/category.ts

@@ -12,10 +12,11 @@
  * @link      https://www.phpmyfaq.de
  * @since     2023-12-28
  */
+import { fetchJson } from './fetch-wrapper';
 import { CategoryTranslations, Response } from '../interfaces';
 
 export const fetchCategoryTranslations = async (categoryId: string): Promise<CategoryTranslations> => {
-  const response = await fetch(`./api/category/translations/${categoryId}`, {
+  return await fetchJson(`./api/category/translations/${categoryId}`, {
     method: 'GET',
     cache: 'no-cache',
     headers: {
@@ -24,16 +25,14 @@ export const fetchCategoryTranslations = async (categoryId: string): Promise<Cat
     redirect: 'follow',
     referrerPolicy: 'no-referrer',
   });
-
-  return await response.json();
 };
 
 export const deleteCategory = async (
   categoryId: string,
   language: string,
   csrfToken: string
 ): Promise<Response | undefined> => {
-  const response = await fetch(`./api/category/delete`, {
+  return await fetchJson(`./api/category/delete`, {
     method: 'DELETE',
     cache: 'no-cache',
     headers: {
@@ -47,16 +46,14 @@ export const deleteCategory = async (
     redirect: 'follow',
     referrerPolicy: 'no-referrer',
   });
-
-  return await response.json();
 };
 
 export const setCategoryTree = async (
   categoryTree: unknown,
   categoryId: string,
   csrfToken: string
 ): Promise<Response | undefined> => {
-  const response = await fetch('./api/category/update-order', {
+  return await fetchJson('./api/category/update-order', {
     method: 'POST',
     cache: 'no-cache',
     headers: {
@@ -70,6 +67,4 @@ export const setCategoryTree = async (
     redirect: 'follow',
     referrerPolicy: 'no-referrer',
   });
-
-  return await response.json();
 };

phpmyfaq/admin/assets/src/api/faqs.test.ts

@@ -38,17 +38,20 @@ describe('fetchFaqsByAutocomplete', () => {
     expect(global.fetch).toHaveBeenCalled();
   });
 
-  test('should throw an error if the network response is not ok', async () => {
+  test('should return error JSON for non-ok response', async () => {
+    const mockError = { error: 'Server error', status: 500 };
     global.fetch = vi.fn(() =>
       Promise.resolve({
         status: 500,
+        json: () => Promise.resolve(mockError),
       } as Response)
     );
 
     const searchTerm = 'faq';
     const csrfToken = 'csrfToken';
 
-    await expect(fetchFaqsByAutocomplete(searchTerm, csrfToken)).rejects.toThrow('Network response was not ok.');
+    const result = await fetchFaqsByAutocomplete(searchTerm, csrfToken);
+    expect(result).toEqual(mockError);
   });
 });
 
@@ -71,18 +74,21 @@ describe('deleteFaq', () => {
     expect(global.fetch).toHaveBeenCalled();
   });
 
-  test('should throw an error if the network response is not ok', async () => {
+  test('should return error JSON for non-ok response', async () => {
+    const mockError = { error: 'Failed to delete', status: 500 };
     global.fetch = vi.fn(() =>
       Promise.resolve({
         status: 500,
+        json: () => Promise.resolve(mockError),
       } as Response)
     );
 
     const faqId = '123';
     const faqLanguage = 'en';
     const csrfToken = 'csrfToken';
 
-    await expect(deleteFaq(faqId, faqLanguage, csrfToken)).rejects.toThrow('Network response was not ok.');
+    const result = await deleteFaq(faqId, faqLanguage, csrfToken);
+    expect(result).toEqual(mockError);
   });
 });
 

phpmyfaq/admin/assets/src/api/faqs.ts

@@ -13,6 +13,7 @@
  * @since     2023-12-27
  */
 
+import { fetchJson } from './fetch-wrapper';
 import { Response } from '../interfaces';
 import { FaqList } from '../interfaces';
 
@@ -37,7 +38,7 @@ export const fetchAllFaqsByCategory = async (
   if (onlyNew) {
     url.searchParams.set('only-new', onlyNew as unknown as string);
   }
-  const response = await fetch(url.toString(), {
+  return await fetchJson(url.toString(), {
     method: 'GET',
     cache: 'no-cache',
     headers: {
@@ -46,12 +47,10 @@ export const fetchAllFaqsByCategory = async (
     redirect: 'follow',
     referrerPolicy: 'no-referrer',
   });
-
-  return await response.json();
 };
 
 export const fetchFaqsByAutocomplete = async (searchTerm: string, csrfToken: string): Promise<Response | undefined> => {
-  const response = await fetch(`./api/faq/search`, {
+  return await fetchJson(`./api/faq/search`, {
     method: 'POST',
     headers: {
       Accept: 'application/json, text/plain, */*',
@@ -62,16 +61,10 @@ export const fetchFaqsByAutocomplete = async (searchTerm: string, csrfToken: str
       csrf: csrfToken,
     }),
   });
-
-  if (response.status === 200) {
-    return await response.json();
-  }
-
-  throw new Error('Network response was not ok.');
 };
 
 export const deleteFaq = async (faqId: string, faqLanguage: string, token: string): Promise<Response | undefined> => {
-  const response = await fetch('./api/faq/delete', {
+  return await fetchJson('./api/faq/delete', {
     method: 'DELETE',
     headers: {
       Accept: 'application/json, text/plain, */*',
@@ -83,16 +76,10 @@ export const deleteFaq = async (faqId: string, faqLanguage: string, token: strin
       faqLanguage: faqLanguage,
     }),
   });
-
-  if (response.status === 200) {
-    return await response.json();
-  }
-
-  throw new Error('Network response was not ok.');
 };
 
 export const create = async (formData: unknown): Promise<Response | undefined> => {
-  const response = await fetch('./api/faq/create', {
+  return await fetchJson('./api/faq/create', {
     method: 'POST',
     headers: {
       Accept: 'application/json, text/plain, */*',
@@ -102,12 +89,10 @@ export const create = async (formData: unknown): Promise<Response | undefined> =
       data: formData,
     }),
   });
-
-  return await response.json();
 };
 
 export const update = async (formData: unknown): Promise<Response | undefined> => {
-  const response = await fetch('./api/faq/update', {
+  return await fetchJson('./api/faq/update', {
     method: 'PUT',
     headers: {
       Accept: 'application/json, text/plain, */*',
@@ -117,6 +102,4 @@ export const update = async (formData: unknown): Promise<Response | undefined> =
       data: formData,
     }),
   });
-
-  return await response.json();
 };