Skip to content

Commit

Permalink
feat: Add lazy import for different routes (#656)
Browse files Browse the repository at this point in the history 
* feat: Add lazy import for diffrent routes

- imported routes from lazy imports
- added suspense wrapper around all pages

* fix: add fall back to app.js

- when file is still loading data wont be there. so added the check if
its is not null in opportunities.tsx
  • Loading branch information
@Sudhanva-Nadiger
Sudhanva-Nadiger authored Jul 9, 2023
1 parent 7782b7e commit b9d4f93
Show file tree
Hide file tree
Showing 18 changed files with 660 additions and 600 deletions.
271 changes: 143 additions & 128 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Routes, Route, useLocation } from "react-router-dom";
import { useMatomo } from "@jonkoops/matomo-tracker-react";
import axios from "axios";
import {
EcoScorePage,
LogoAnnotationPage,
LogoSearchPage,
LogoUpdatePage,
LogoDeepSearch,
ProductLogoAnnotationPage,
SettingsPage,
QuestionsPage,
InsightsPage,
NotFoundPage,
Home,
Nutrition,
FlaggedImages,
ShouldLoggedinPage,
PackagingPage,
LogoQuestionValidator,
DashBoard,
} from "./pages";

import ResponsiveAppBar from "./components/ResponsiveAppBar";
import DevModeContext from "./contexts/devMode";
import {
Expand All @@ -36,6 +18,33 @@ import LoginContext from "./contexts/login";
import off from "./off";
import { IS_DEVELOPMENT_MODE } from "./const";
import ColorModeContext from "./contexts/colorMode";
import { CircularProgress } from "@mui/material";

const EcoScorePage = React.lazy(() => import("./pages/eco-score"));
const LogoAnnotationPage = React.lazy(() =>
import("./pages/logos/LogoAnnotation")
);
const LogoSearchPage = React.lazy(() => import("./pages/logos/LogoSearch"));
const LogoUpdatePage = React.lazy(() => import("./pages/logos/LogoUpdate"));
const LogoDeepSearch = React.lazy(() => import("./pages/logos/LogoDeepSearch"));
const ProductLogoAnnotationPage = React.lazy(() =>
import("./pages/logos/ProductLogoAnnotations")
);
const SettingsPage = React.lazy(() => import("./pages/settings"));
const QuestionsPage = React.lazy(() => import("./pages/questions"));
const InsightsPage = React.lazy(() => import("./pages/insights"));
const NotFoundPage = React.lazy(() => import("./pages/not-found"));
const Home = React.lazy(() => import("./pages/home"));
const Nutrition = React.lazy(() => import("./pages/nutrition"));
const FlaggedImages = React.lazy(() => import("./pages/flaggedImages"));
const ShouldLoggedinPage = React.lazy(() =>
import("./pages/shouldLoggedinPage")
);
const PackagingPage = React.lazy(() => import("./pages/packaging"));
const LogoQuestionValidator = React.lazy(() =>
import("./pages/logosValidator/LogoQuestionValidator")
);
const DashBoard = React.lazy(() => import("./pages/logosValidator/DashBoard"));

// OFF colors
const latte = "#F6F3F0";
Expand Down Expand Up @@ -212,117 +221,123 @@ export default function App() {
const theme = createTheme(getToken(mode));

return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<LoginContext.Provider value={{ ...userState, refresh }}>
<DevModeContext.Provider
value={{
devMode,
setDevMode,
visiblePages,
setVisiblePages,
}}
>
<CssBaseline />
<ResponsiveAppBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/eco-score" element={<EcoScorePage />} />
<Route
path="/logos"
element={
userState.isLoggedIn ? (
<LogoAnnotationPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/search"
element={
userState.isLoggedIn ? (
<LogoSearchPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/:logoId"
element={
userState.isLoggedIn ? (
<LogoUpdatePage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/product-search"
element={
userState.isLoggedIn ? (
<ProductLogoAnnotationPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/deep-search"
element={
userState.isLoggedIn ? (
<LogoDeepSearch />
) : (
<ShouldLoggedinPage />
)
}
/>
<React.Suspense fallback={<CircularProgress />}>
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<LoginContext.Provider value={{ ...userState, refresh }}>
<DevModeContext.Provider
value={{
devMode,
setDevMode,
visiblePages,
setVisiblePages,
}}
>
<CssBaseline />
<ResponsiveAppBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/eco-score" element={<EcoScorePage />} />
<Route
path="/logos"
element={
userState.isLoggedIn ? (
<LogoAnnotationPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/search"
element={
userState.isLoggedIn ? (
<LogoSearchPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/:logoId"
element={
userState.isLoggedIn ? (
<LogoUpdatePage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/product-search"
element={
userState.isLoggedIn ? (
<ProductLogoAnnotationPage />
) : (
<ShouldLoggedinPage />
)
}
/>
<Route
path="/logos/deep-search"
element={
userState.isLoggedIn ? (
<LogoDeepSearch />
) : (
<ShouldLoggedinPage />
)
}
/>

<Route path="/settings" element={<SettingsPage />} />
<Route path="/questions" element={<QuestionsPage />} />
<Route path="/insights" element={<InsightsPage />} />
<Route path="*" element={<NotFoundPage />} />
<Route path="/logoQuestion/" elemnt={<DashBoard />} />
<Route path="/dashboard/" element={<DashBoard />} />
<Route
path="/logoQuestion/:valueTag"
element={
userState.isLoggedIn ? (
<LogoQuestionValidator />
) : (
<ShouldLoggedinPage />
)
}
/>
{/* To delete in 2024 */}
<Route path="/nutriscore" element={<DashBoard />} />
<Route path="/inao" element={<DashBoard />} />
<Route path="/settings" element={<SettingsPage />} />
<Route path="/questions" element={<QuestionsPage />} />
<Route path="/insights" element={<InsightsPage />} />
<Route path="*" element={<NotFoundPage />} />
<Route path="/logoQuestion/" elemnt={<DashBoard />} />
<Route path="/dashboard/" element={<DashBoard />} />
<Route
path="/logoQuestion/:valueTag"
element={
userState.isLoggedIn ? (
<LogoQuestionValidator />
) : (
<ShouldLoggedinPage />
)
}
/>
{/* To delete in 2024 */}
<Route path="/nutriscore" element={<DashBoard />} />
<Route path="/inao" element={<DashBoard />} />

<Route
path="/nutrition"
element={
userState.isLoggedIn ? <Nutrition /> : <ShouldLoggedinPage />
}
/>
{showFlaggedImage && (
<Route path="/flagged-images" element={<FlaggedImages />} />
)}
<Route
path="/nutrition"
element={
userState.isLoggedIn ? (
<Nutrition />
) : (
<ShouldLoggedinPage />
)
}
/>
{showFlaggedImage && (
<Route path="/flagged-images" element={<FlaggedImages />} />
)}

<Route
path="/packaging"
element={
userState.isLoggedIn ? (
<PackagingPage />
) : (
<ShouldLoggedinPage />
)
}
/>
</Routes>
</DevModeContext.Provider>
</LoginContext.Provider>
</ThemeProvider>
</ColorModeContext.Provider>
<Route
path="/packaging"
element={
userState.isLoggedIn ? (
<PackagingPage />
) : (
<ShouldLoggedinPage />
)
}
/>
</Routes>
</DevModeContext.Provider>
</LoginContext.Provider>
</ThemeProvider>
</ColorModeContext.Provider>
</React.Suspense>
);
}
Loading

0 comments on commit b9d4f93

Please sign in to comment.