extract csrf token logic to custom hook

app/javascript/components/App.tsx

@@ -6,9 +6,9 @@ import { store } from '../store/store'
 import Layout from "./Layout";
 import Home from "./Home";
 import Search from "./Search";
-import RecipeTable from "./RecipeTable";
-import FoodsTable from "./FoodsTable";
-import NewRecipeForm from './NewRecipeForm';
+import Recipes from "./recipes/Index";
+import Foods from "./foods/Index";
+import NewRecipeForm from './recipes/New';
 
 const App: React.FC = () => {
   return (
@@ -17,9 +17,9 @@ const App: React.FC = () => {
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="search" element={<Search />} />
-          <Route path="recipes" element={<RecipeTable />} />
+          <Route path="recipes" element={<Recipes />} />
           <Route path="recipes/new" element={<NewRecipeForm />} />
-          <Route path="foods" element={<FoodsTable />} />
+          <Route path="foods" element={<Foods />} />
         </Route>
       </Routes>
     </Provider>

app/javascript/components/FoodsTable.tsx → app/javascript/components/foods/Index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { useAppDispatch, useAppSelector } from '../store/hooks'
-import { fetchFoods } from '../store/foodsSlice'
+import { useAppDispatch, useAppSelector } from '../../store/hooks'
+import { fetchFoods } from '../../store/foodsSlice'
 
 const FetchDataComponent: React.FC = () => {
   const dispatch = useAppDispatch()

app/javascript/components/RecipeTable.tsx → app/javascript/components/recipes/Index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { useAppDispatch, useAppSelector } from '../store/hooks'
-import { fetchRecipes } from '../store/recipesSlice'
+import { useAppDispatch, useAppSelector } from '../../store/hooks'
+import { fetchRecipes } from '../../store/recipesSlice'
 
 const RecipeTable: React.FC = () => {
   const dispatch = useAppDispatch()

app/javascript/components/NewRecipeForm.tsx → app/javascript/components/recipes/New.tsx

@@ -1,12 +1,8 @@
 import React, { useState } from 'react';
-import { useAppDispatch, useAppSelector } from '../store/hooks';
-import { createRecipe } from '../store/recipesSlice';
-import { Ingredient } from '../types/types';
-
-const getCsrfToken = (): string => {
-  const element = document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement;
-  return element ? element.content : '';
-};
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { createRecipe } from '../../store/recipesSlice';
+import { Ingredient } from '../../types/types';
+import useCsrfToken from '../../hooks/useCsrfToken';
 
 export interface RecipeFormData {
   name: string;
@@ -16,8 +12,8 @@ export interface RecipeFormData {
 
 const NewRecipeForm: React.FC = () => {
   const dispatch = useAppDispatch();
+  const csrfToken = useCsrfToken();
   const { items: foods } = useAppSelector((state) => state.foods);
-  const csrfToken = getCsrfToken();
 
   const [formData, setFormData] = useState<RecipeFormData>({
     name: '',
@@ -52,7 +48,7 @@ const NewRecipeForm: React.FC = () => {
     e.preventDefault();
     dispatch(createRecipe({ 
       data: formData,
-      csrfToken 
+      csrfToken
     }))
     .unwrap()
     .then(() => {

app/javascript/hooks/useCsrfToken.ts

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useCsrfToken = (): string => {
+  const [csrfToken, setCsrfToken] = useState<string>("");
+
+  useEffect(() => {
+    const csrf_element = document.querySelector('meta[name="csrf-token"]')
+    if (csrf_element) {
+      setCsrfToken(csrf_element.getAttribute('content') || "");
+    }
+  }, []);
+
+  return csrfToken;
+};
+
+export default useCsrfToken;

app/javascript/store/recipesSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import { RecipeFormData } from '../components/NewRecipeForm';
+import { RecipeFormData } from '../components/recipes/New';
 import { Recipe } from '../types/types';
 
 export const createRecipe = createAsyncThunk(