Npm update & fix axios usage

rsconcept/frontend/package.json

@@ -12,35 +12,35 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lezer/lr": "^1.3.13",
+    "@lezer/lr": "^1.3.14",
     "@tanstack/react-table": "^8.10.7",
     "@uiw/codemirror-themes": "^4.21.20",
     "@uiw/react-codemirror": "^4.21.20",
-    "axios": "^1.5.1",
+    "axios": "^1.6.1",
     "js-file-download": "^0.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
-    "react-intl": "^6.5.1",
+    "react-intl": "^6.5.2",
     "react-loader-spinner": "^5.4.5",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
-    "react-select": "^5.7.7",
+    "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",
     "react-toastify": "^9.1.3",
-    "react-tooltip": "^5.21.6",
+    "react-tooltip": "^5.22.0",
     "reagraph": "^4.14.1"
   },
   "devDependencies": {
     "@lezer/generator": "^1.5.1",
-    "@types/jest": "^29.5.7",
+    "@types/jest": "^29.5.8",
-    "@types/node": "^20.8.9",
+    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.33",
+    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@vitejs/plugin-react": "^4.1.1",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",

rsconcept/frontend/src/main.tsx

@@ -11,9 +11,6 @@ import { AuthState } from './context/AuthContext.tsx';
 import { LibraryState } from './context/LibraryContext.tsx';
 import { ThemeState } from './context/ThemeContext.tsx';
 import { UsersState } from './context/UsersContext.tsx';
-import { initBackend } from './utils/backendAPI.ts';
-
-initBackend();
 
 const resetState = () => {
   console.log('Resetting state after error fallback')

rsconcept/frontend/src/utils/backendAPI.ts

@@ -19,13 +19,25 @@ import {
 import { IExpressionParse, IRSExpression } from '../models/rslang';
 import { config } from './constants';
 
-export function initBackend() {
+const defaultOptions = {
-  axios.defaults.withCredentials = true;
+  xsrfCookieName: 'csrftoken',
-  axios.defaults.xsrfCookieName = 'csrftoken';
+  xsrfHeaderName: 'x-csrftoken',
-  axios.defaults.xsrfHeaderName = 'x-csrftoken';
+  baseURL: `${config.backend}`,
-  axios.defaults.baseURL = `${config.backend}`;
+  withCredentials: true
 }
 
+const axiosInstance = axios.create(defaultOptions);
+axiosInstance.interceptors.request.use(
+(config) => {
+  const token = document.cookie.split('; ')
+    .find((row) => row.startsWith('csrftoken='))
+    ?.split('=')[1];
+  if (token) {
+    config.headers['x-csrftoken'] = token;
+  }
+  return config;
+});
+
 // ================ Data transfer types ================
 export type DataCallback<ResponseData = undefined> = (data: ResponseData) => void;
 
@@ -322,7 +334,7 @@ export function postGenerateLexeme(request: FrontExchange<ITextRequest, ILexemeD
 function AxiosGet<ResponseData>({ endpoint, request, title, options }: IAxiosRequest<undefined, ResponseData>) {
   console.log(`REQUEST: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
-  axios.get<ResponseData>(endpoint, options)
+  axiosInstance.get<ResponseData>(endpoint, options)
     .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
@@ -339,7 +351,7 @@ function AxiosPost<RequestData, ResponseData>(
 ) {
   console.log(`POST: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
-  axios.post<ResponseData>(endpoint, request.data, options)
+  axiosInstance.post<ResponseData>(endpoint, request.data, options)
     .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
@@ -356,7 +368,7 @@ function AxiosDelete<RequestData, ResponseData>(
 ) {
   console.log(`DELETE: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
-  axios.delete<ResponseData>(endpoint, options)
+  axiosInstance.delete<ResponseData>(endpoint, options)
     .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);
@@ -373,7 +385,7 @@ function AxiosPatch<RequestData, ResponseData>(
 ) {
   console.log(`PATCH: [[${title}]]`);
   if (request.setLoading) request.setLoading(true);
-  axios.patch<ResponseData>(endpoint, request.data, options)
+  axiosInstance.patch<ResponseData>(endpoint, request.data, options)
     .then(response => {
       if (request.setLoading) request.setLoading(false);
       if (request.onSuccess) request.onSuccess(response.data);