fix this when using listimage it uses options with query params i need it to use get with no query params : // src/App.js
import React, { Suspense, lazy, useEffect, useState } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation,
} from 'react-router-dom';
import axios from 'axios';
import { Admin, Create, Datagrid, DeleteButton, Edit, EditButton, ImageField, List, required, Resource, Show, ShowButton, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

// Axios Configuration
axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;

// Lazy load the pages
const Home = lazy(() => import('./pages/home'));
const Apropos = lazy(() => import('./pages/apropos'));
const Contact = lazy(() => import('./pages/contact'));
const Galerie = lazy(() => import('./pages/galerie'));
const HomePhone = lazy(() => import('./pages/homePhone'));
const ContactPhone = lazy(() => import('./pages/contactPhone'));
const AproposPhone = lazy(() => import('./pages/aproposPhone'));
const GaleriePhone = lazy(() => import('./pages/galeriePhone'));
const Login = lazy(() => import('./pages/login'));

// ScrollToTop Component
const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

function App() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 1280);
    };

    // Initial check
    handleResize();

    // Event listener
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Router>
      {/* Admin Routes */}
      <Suspense fallback={<div>Loading...</div>}>
        <ScrollToTop />
        <Routes>
          {/* Public Routes */}
          <Route path="/" element={isMobile ? <HomePhone /> : <Home />} />
          <Route
            path="/apropos"
            element={isMobile ? <AproposPhone /> : <Apropos />}
          />
          <Route
            path="/galerie"
            element={isMobile ? <GaleriePhone /> : <Galerie />}
          />
          <Route
            path="/contact"
            element={isMobile ? <ContactPhone /> : <Contact />}
          />
          <Route path="/login" element={<Login />} />
          {/* Catch-All Route (Optional) */}
          <Route
            path="*"
            element={<div>404 Not Found. Please check the URL.</div>}
          />
        </Routes>
      </Suspense>
      <AdminRoutes />
    </Router>
  );
}

// AdminRoutes Component to encapsulate react-admin
const AdminRoutes = () => (
  <Admin dataProvider={simpleRestProvider('http://127.0.0.1:8000/')}>
    <Resource name="images" list={ImageList} edit={ImageEdit} create={ImageCreate} show={ImageShow} />
    {/* Add more resources as needed */}
  </Admin>
);

// Image List Component
const ImageList = (props) => (
  <List {...props} title="Images">
    <Datagrid rowClick="show">
      <TextField source="id" />
      <TextField source="title" />
      <ImageField source="image_url" title="Image" />
      {/* Add more fields as necessary */}
      <EditButton />
      <ShowButton />
      <DeleteButton />
    </Datagrid>
  </List>
);

// Image Create Component
const ImageCreate = (props) => (
  <Create {...props} title="Create an Image">
    <SimpleForm>
      <TextInput source="title" label="Title" validate={validateTitle} />
      <ImageInput source="image" label="Image" accept="image/*" validate={validateImage}>
        <ImageField source="src" title="Image Preview" />
      </ImageInput>
      {/* Add more inputs as necessary */}
    </SimpleForm>
  </Create>
);

// Image Edit Component
const ImageEdit = (props) => (
  <Edit {...props} title="Edit Image">
    <SimpleForm>
      <TextInput disabled source="id" />
      <TextInput source="title" label="Title" validate={validateTitle} />
      <ImageInput source="image" label="Image" accept="image/*">
        <ImageField source="src" title="Current Image" />
      </ImageInput>
      {/* Add more inputs as necessary */}
    </SimpleForm>
  </Edit>
);

// Image Show Component
const ImageShow = (props) => (
  <Show {...props} title="Image Details">
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="title" />
      <ImageField source="image_url" title="Image" />
      {/* Add more fields as necessary */}
    </SimpleShowLayout>
  </Show>
);

export default App;