fix(ui): move req intercepter

src/App.tsx

@@ -15,17 +15,15 @@ function App() {
   useAuthInterceptors();
 
   return (
-    <>
-      <Routes>
-        <Route path="login" element={<LoginView />} />
-        <Route element={<AuthGuard />}>
-          <Route path="feed" element={<FeedView />} />
-          <Route path="discover" element={<DiscoverView />} />
-          <Route path="post/:id" element={<PostView />} />
-        </Route>
-        <Route path="*" element={<Navigate to="feed" />} />
-      </Routes>
-    </>
+    <Routes>
+      <Route path="login" element={<LoginView />} />
+      <Route element={<AuthGuard />}>
+        <Route path="feed" element={<FeedView />} />
+        <Route path="discover" element={<DiscoverView />} />
+        <Route path="post/:id" element={<PostView />} />
+      </Route>
+      <Route path="*" element={<Navigate to="feed" />} />
+    </Routes>
   );
 }
 

src/hooks/useAuthInterceptors.ts

@@ -3,29 +3,13 @@ import { useEffect } from 'react';
 
 import { logoutAsync } from '../redux/auth/thunks';
 
-import instalikeApi, { ACCESS_TOKEN_KEY } from '../instalikeApi';
+import instalikeApi from '../instalikeApi';
 import useAppDispatch from './useAppDispatch';
 
 const useAuthInterceptors = () => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    const reqId = instalikeApi.driver.interceptors.request.use((config) => {
-      const accessToken = window.localStorage.getItem(ACCESS_TOKEN_KEY);
-
-      if (accessToken !== null) {
-        return {
-          ...config,
-          headers: {
-            ...config.headers,
-            Authorization: `Bearer ${accessToken}`,
-          },
-        };
-      }
-
-      return config;
-    });
-
     const resId = instalikeApi.driver.interceptors.response.use(
       (response) => response,
       (e) => {
@@ -38,7 +22,6 @@ const useAuthInterceptors = () => {
     );
 
     return () => {
-      instalikeApi.driver.interceptors.request.eject(reqId);
       instalikeApi.driver.interceptors.response.eject(resId);
     };
   }, [dispatch]);

src/instalikeApi.ts

@@ -13,6 +13,22 @@ const instalikeApi = createInstalikeApi(
   })
 );
 
+instalikeApi.driver.interceptors.request.use((config) => {
+  const accessToken = window.localStorage.getItem(ACCESS_TOKEN_KEY);
+
+  if (accessToken !== null) {
+    return {
+      ...config,
+      headers: {
+        ...config.headers,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+  }
+
+  return config;
+});
+
 export const hasAccessToken = () => window.localStorage.getItem(ACCESS_TOKEN_KEY) !== null;
 
 export default instalikeApi;

src/views/DiscoverView.tsx

-import { useEffect } from 'react';
-
-import instalikeApi from '../instalikeApi';
-
 const DiscoverView = () => {
-  useEffect(() => {
-    instalikeApi.posts.fetch({ cursor: null });
-    instalikeApi.users.me.fetch();
-    instalikeApi.users.find(1).fetch();
-  }, []);
-
   return <>Discover</>;
 };
 

src/views/FeedView.tsx

+import { useEffect } from 'react';
+
+import instalikeApi from '../instalikeApi';
+
 const FeedView = () => {
+  useEffect(() => {
+    console.log('fetch');
+    instalikeApi.posts.fetch({ cursor: null });
+    instalikeApi.users.me.fetch();
+    instalikeApi.users.find(1).fetch();
+  }, []);
+
   return <>Feed</>;
 };
 

src/views/LoginView.tsx

+import { Navigate } from 'react-router-dom';
+
+import { loginAsync } from '../redux/auth/thunks';
+
+import useAppDispatch from '../hooks/useAppDispatch';
+import useIsAuth from '../hooks/useIsAuth';
+
 const LoginView = () => {
-  return <>Login</>;
+  const dispatch = useAppDispatch();
+
+  const isAuth = useIsAuth();
+
+  if (isAuth) {
+    return <Navigate to="/feed" />;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          dispatch(loginAsync('j.metterrothan@unistra.fr', 'DWEB2023'));
+        }}
+      >
+        Login
+      </button>
+    </>
+  );
 };
 
 export default LoginView;