Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
338 changes: 172 additions & 166 deletions client/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { SolutionsPage } from "./pages/SolutionsPage";
import { SkeletonCustom } from "./components/ui/skeleton/skeleton";
import BoardItemSocket from "./pages/boards/board-socket/board-item-socket.tsx";
import { t } from "i18next";
// import SocketProvider from "./hooks/socket/socket-provider.tsx";
import UpgradeModalContainer from "./components/ui/modals/UpgradeModalContainer.tsx";

const LoginPage = lazy(() =>
import("./pages/login/login").then((m) => ({ default: m.LoginPage })),
Expand All @@ -40,202 +40,208 @@ const AuthRoute = ({ children, requireAuth, redirectTo }: AuthRouteProps) => {

function App() {
return (
<Routes>
{/* Public routes */}
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} />
<Route
path="login"
element={
<AuthRoute requireAuth={false} redirectTo="/boards">
<>
<Routes>
{/* Public routes */}
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} />
<Route
path="login"
element={
<AuthRoute requireAuth={false} redirectTo="/boards">
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={4}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md rounded-xl p-10 shadow-2xl"
spinnerText={t("spinner.login", "Cargando Login")}
/>
</div>
}
>
<LoginPage />
</Suspense>
</AuthRoute>
}
/>
<Route
path="change-password"
element={
<AuthRoute requireAuth={false} redirectTo="/login">
<ChangePassword />
</AuthRoute>
}
/>
<Route
path="register"
element={
<AuthRoute requireAuth={false} redirectTo="/boards">
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={5}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md rounded-xl p-10 shadow-2xl"
spinnerText={t("spinner.register", "Cargando Registro")}
/>
</div>
}
>
<RegisterPage />
</Suspense>
</AuthRoute>
}
/>
<Route
path="/invitacion"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={4}
rows={2}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md rounded-xl p-10 shadow-2xl"
spinnerText={t("spinner.login", "Cargando Login")}
className="w-full max-w-md"
spinnerText={t(
"spinner.generateLink",
"Generando enlace",
)}
/>
</div>
}
>
<LoginPage />
<InvitationPage />
</Suspense>
</AuthRoute>
}
/>
<Route
path="change-password"
element={
<AuthRoute requireAuth={false} redirectTo="/login">
<ChangePassword />
</AuthRoute>
}
/>
<Route
path="register"
element={
<AuthRoute requireAuth={false} redirectTo="/boards">
}
/>
<Route
path="/verify-pending"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={5}
rows={4}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md rounded-xl p-10 shadow-2xl"
spinnerText={t("spinner.register", "Cargando Registro")}
className="w-full max-w-md"
spinnerText={t(
"spinner.pendingVerification",
"Verificación pendiente",
)}
/>
</div>
}
>
<RegisterPage />
<VerifyPendingPage />
</Suspense>
</AuthRoute>
}
/>
<Route
path="/invitacion"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={2}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md"
spinnerText={t("spinner.generateLink", "Generando enlace")}
/>
</div>
}
>
<InvitationPage />
</Suspense>
}
/>
<Route
path="/verify-pending"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={4}
columns={1}
rowHeight="h-12"
gap="gap-4"
className="w-full max-w-md"
spinnerText={t(
"spinner.pendingVerification",
"Verificación pendiente",
)}
/>
</div>
}
>
<VerifyPendingPage />
</Suspense>
}
/>
<Route path="features" element={<FeaturesPage />} />
<Route path="solutions" element={<SolutionsPage />} />
<Route path="prices" element={<PricingPage />} />
<Route path="not-found" element={<NotFound />} />
<Route path="*" element={<Navigate to="/not-found" />} />
</Route>
}
/>
<Route path="features" element={<FeaturesPage />} />
<Route path="solutions" element={<SolutionsPage />} />
<Route path="prices" element={<PricingPage />} />
<Route path="not-found" element={<NotFound />} />
<Route path="*" element={<Navigate to="/not-found" />} />
</Route>

{/* Backoffice routes */}
<Route
path="/boards"
element={
<AuthRoute requireAuth={true}>
<BackofficeLayout />
</AuthRoute>
}
>
<Route
index
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={4}
columns={3}
rowHeight="h-36"
columnWidth="w-full"
gap="gap-6"
className="grid w-full max-w-xl grid-cols-1 p-6 sm:grid-cols-2 md:grid-cols-3"
spinnerText={t("spinner.boardsList", "Lista de Tableros")}
/>
</div>
}
>
<BoardsList />
</Suspense>
}
/>
{/* Backoffice routes */}
<Route
path=":slug"
path="/boards"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={1}
columns={4}
rowHeight="h-200"
gap="gap-4"
className="w-full min-w-6xl p-10 shadow-2xl"
spinnerText={t("spinner.loadBoard", "Cargando Tablero")}
/>
</div>
}
>
<BoardItemSocket>
<Board />
</BoardItemSocket>
</Suspense>
<AuthRoute requireAuth={true}>
<BackofficeLayout />
</AuthRoute>
}
/>
</Route>
<Route
path="/profile"
element={
<AuthRoute requireAuth={true}>
<BackofficeLayout />
</AuthRoute>
}
>
>
<Route
index
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={4}
columns={3}
rowHeight="h-36"
columnWidth="w-full"
gap="gap-6"
className="grid w-full max-w-xl grid-cols-1 p-6 sm:grid-cols-2 md:grid-cols-3"
spinnerText={t("spinner.boardsList", "Lista de Tableros")}
/>
</div>
}
>
<BoardsList />
</Suspense>
}
/>
<Route
path=":slug"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={1}
columns={4}
rowHeight="h-200"
gap="gap-4"
className="w-full min-w-6xl p-10 shadow-2xl"
spinnerText={t("spinner.loadBoard", "Cargando Tablero")}
/>
</div>
}
>
<BoardItemSocket>
<Board />
</BoardItemSocket>
</Suspense>
}
/>
</Route>
<Route
index
path="/profile"
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={1}
columns={4}
rowHeight="h-200"
gap="gap-4"
className="w-full min-w-6xl p-10 shadow-2xl"
spinnerText={t("spinner.loadBoard", "Cargando Tablero")}
/>
</div>
}
>
<Profile />
</Suspense>
<AuthRoute requireAuth={true}>
<BackofficeLayout />
</AuthRoute>
}
/>
</Route>
</Routes>
>
<Route
index
element={
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<SkeletonCustom
rows={1}
columns={4}
rowHeight="h-200"
gap="gap-4"
className="w-full min-w-6xl p-10 shadow-2xl"
spinnerText={t("spinner.loadBoard", "Cargando Tablero")}
/>
</div>
}
>
<Profile />
</Suspense>
}
/>
</Route>
</Routes>
<UpgradeModalContainer />
</>
);
}

Expand Down
Loading