import React, { useEffect } from 'react';
import {
  Routes,
  Route,
  useNavigate
} from 'react-router-dom';

import { MainPage } from './pages/main';
import { Lesson } from './pages/Lesson';
import { UserPage } from './pages/UserPage';

const Redirect = ({ path }) => {
  const navigate = useNavigate();

  useEffect(() => {
    navigate(path);
  }, []);

  return null;
}

export const Dashboard = () => (
  <Routes>
    <Route path="/journal" element={<Redirect path="/journal/main" />} />
    <Route path="/journal/main" element={<MainPage />} />
    <Route path="/journal/u/:lessonId" element={<UserPage />} />
    <Route path="/journal/l/:lessonId" element={<Lesson />} />
  </Routes>
)