some of the paper cut listed in #37

src/App.js

@@ -14,27 +14,33 @@ import {
   Home,
 } from "./pages";
 import ResponsiveAppBar from "./components/ResponsiveAppBar";
+import DevModeContext from "./contexts/devMode";
+import { getIsDevMode } from "./localeStorageManager";
 
 const theme = createTheme({});
 
 export default function App() {
+  const [devMode, setDevMode] = React.useState(getIsDevMode);
+
   return (
     <Router>
       <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <ResponsiveAppBar />
-        <Routes>
-          {/* TODO: put a home page for root url */}
-          <Route path="/" element={<Home />} />
-          <Route path="/eco-score" element={<EcoScorePage />} />
-          <Route path="/logos" element={<LogoAnnotationPage />} />
-          <Route path="/logos/search" element={<LogoSearchPage />} />
-          <Route path="/logos/:logoId" element={<LogoUpdatePage />} />
-          <Route path="/settings" element={<SettingsPage />} />
-          <Route path="/questions" element={<QuestionsPage />} />
-          <Route path="/insights" element={<InsightsPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
+        <DevModeContext.Provider value={{ devMode, setDevMode }}>
+          <CssBaseline />
+          <ResponsiveAppBar />
+          <Routes>
+            {/* TODO: put a home page for root url */}
+            <Route path="/" element={<Home />} />
+            <Route path="/eco-score" element={<EcoScorePage />} />
+            <Route path="/logos" element={<LogoAnnotationPage />} />
+            <Route path="/logos/search" element={<LogoSearchPage />} />
+            <Route path="/logos/:logoId" element={<LogoUpdatePage />} />
+            <Route path="/settings" element={<SettingsPage />} />
+            <Route path="/questions" element={<QuestionsPage />} />
+            <Route path="/insights" element={<InsightsPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </DevModeContext.Provider>
       </ThemeProvider>
     </Router>
   );

src/components/QuestionFilter/QuestionFilter.jsx

@@ -118,6 +118,7 @@ export const QuestionFilter = ({
             size="small"
             value={filterState?.insightType}
             onChange={handleInsightTypeChange}
+            label={t(`questions.insightTypeLabel`)}
           >
             {Object.keys(insightTypesNames).map((insightType) => (
               <MenuItem key={insightType} value={insightType}>

src/components/ResponsiveAppBar.jsx

@@ -12,6 +12,7 @@ import MenuItem from "@mui/material/MenuItem";
 import ListSubheader from "@mui/material/ListSubheader";
 import MuiLink from "@mui/material/Link";
 
+import DevModeContext from "../contexts/devMode";
 import logo from "../assets/logo.png";
 import { Link } from "react-router-dom";
 
@@ -40,9 +41,15 @@ const ResponsiveAppBar = () => {
     setAnchorElNav(null);
   };
 
+  const { devMode: isDevMode } = React.useContext(DevModeContext);
+
+  const displayedPages = pages.filter(
+    (page) => page.url !== "insights" || isDevMode
+  );
+
   return (
     <AppBar position="static">
-      <Container maxWidth="xl">
+      <Container maxWidth={null}>
         <Toolbar disableGutters>
           {/* Mobile content */}
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
@@ -74,7 +81,7 @@ const ResponsiveAppBar = () => {
                 display: { xs: "block", md: "none" },
               }}
             >
-              {pages.map((page) =>
+              {displayedPages.map((page) =>
                 page.url ? (
                   <MenuItem
                     key={page.translationKey}
@@ -114,49 +121,56 @@ const ResponsiveAppBar = () => {
           </Typography>
 
           {/* Desktop content */}
-          <MuiLink
-            sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}
-            href="https://world.openfoodfacts.org/"
-            target="_blank"
-          >
-            <img
-              src={logo}
-              width="30px"
-              height="30px"
-              alt="OpenFoodFact logo"
-            />
-          </MuiLink>
-          <Typography
-            variant="h6"
-            noWrap
-            component="a"
-            href="/"
+          <Box
             sx={{
-              mr: 2,
               display: { xs: "none", md: "flex" },
-              fontFamily: "monospace",
-              fontWeight: 700,
-              letterSpacing: ".3rem",
-              color: "inherit",
-              textDecoration: "none",
+              flexDirection: "row",
+              alignItems: "center",
             }}
           >
-            Hunger Games
-          </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
-            {pages.map((page) =>
-              page.url ? (
-                <Button
-                  key={page.url}
-                  onClick={handleCloseNavMenu}
-                  sx={{ my: 2, color: "white", display: "block" }}
-                  component={Link}
-                  to={`/${page.url}`}
-                >
-                  {t(page.translationKey)}
-                </Button>
-              ) : null
-            )}
+            <MuiLink
+              sx={{ mr: 1, display: "flex" }}
+              href="https://world.openfoodfacts.org/"
+              target="_blank"
+            >
+              <img
+                src={logo}
+                width="30px"
+                height="30px"
+                alt="OpenFoodFact logo"
+              />
+            </MuiLink>
+            <Typography
+              variant="h6"
+              noWrap
+              component="a"
+              href="/"
+              sx={{
+                mr: 2,
+                fontFamily: "monospace",
+                fontWeight: 700,
+                letterSpacing: ".3rem",
+                color: "inherit",
+                textDecoration: "none",
+              }}
+            >
+              Hunger Games
+            </Typography>
+            <Box sx={{ display: "flex" }}>
+              {displayedPages.map((page) =>
+                page.url ? (
+                  <Button
+                    key={page.url}
+                    onClick={handleCloseNavMenu}
+                    sx={{ my: 2, color: "white", display: "block" }}
+                    component={Link}
+                    to={`/${page.url}`}
+                  >
+                    {t(page.translationKey)}
+                  </Button>
+                ) : null
+              )}
+            </Box>
           </Box>
         </Toolbar>
       </Container>

src/contexts/devMode.jsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { getIsDevMode } from "../localeStorageManager";
+
+const DevModeContext = React.createContext({
+  devMode: getIsDevMode(),
+  setDevMode: () => {},
+});
+
+export default DevModeContext;

src/i18n/common.json

@@ -4,10 +4,11 @@
     "label": "label",
     "brand": "brand",
     "brands": "Brands",
+    "insightTypeLabel": "Only shows",
     "ingredients": "Ingredients",
     "product_weight": "product weight",
     "popularity_sort": "Sort by popularity",
-    "see_examples":"See examples of this ",
+    "see_examples": "See examples of this ",
     "no": "No",
     "skip": "Skip",
     "yes": "Yes",
@@ -203,8 +204,8 @@
     }
   },
   "notfound": {
-    "nopage":"Whoops! The page you're looking for can't be found.",
-    "redirect1":"Want to play some games?",
-    "redirect2":"Click here"
+    "nopage": "Whoops! The page you're looking for can't be found.",
+    "redirect1": "Want to play some games?",
+    "redirect2": "Click here"
   }
 }

src/i18n/en.json

@@ -4,6 +4,7 @@
     "label": "label",
     "brand": "brand",
     "brands": "Brands",
+    "insightTypeLabel": "Only shows",
     "ingredients": "Ingredients",
     "product_weight": "product weight",
     "popularity_sort": "Sort by popularity",

src/localeStorageManager.js

@@ -16,6 +16,11 @@ export const localSettings = {
   },
 };
 
+export const getIsDevMode = () => {
+  const settings = localSettings.fetch();
+  return settings.devMode ?? false;
+};
+
 export const getLang = () => {
   const settings = localSettings.fetch();
 

src/pages/insights/FilterInsights.jsx

@@ -10,6 +10,9 @@ const typeOptions = [
   { value: "category", labelKey: "insights.category" },
   { value: "expiration_date", labelKey: "insights.expiration_date" },
   { value: "packager_code", labelKey: "insights.packager_code" },
+  { value: "brand", labelKey: "logos.brand" },
+  { value: "packaging", labelKey: "logos.packaging" },
+  { value: "qr_code", labelKey: "logos.qr_code" },
 ];
 
 const annotationOptions = [
@@ -20,19 +23,29 @@ const annotationOptions = [
   { value: "not_annotated", labelKey: "insights.not_annotated" },
 ];
 
+const useControled = (exteriorValue) => {
+  const [innerValue, setInnerValue] = React.useState(exteriorValue ?? "");
+
+  React.useEffect(() => {
+    setInnerValue((v) => (v !== exteriorValue ? exteriorValue : v));
+  }, [exteriorValue]);
+
+  return [innerValue, setInnerValue];
+};
+
 const FilterForm = ({ filterState = {}, setFilterState }) => {
   const { t } = useTranslation();
 
-  const [innerBarcode, setInnerBarcode] = React.useState(
+  const [innerBarcode, setInnerBarcode] = useControled(
     filterState.barcode ?? ""
   );
-  const [innerValueTag, setInnerValueTag] = React.useState(
+  const [innerValueTag, setInnerValueTag] = useControled(
     filterState.valueTag ?? ""
   );
-  const [innerInsightType, setInnerInsightType] = React.useState(
+  const [innerInsightType, setInnerInsightType] = useControled(
     filterState.insightType ?? ""
   );
-  const [innerAnnotationStatus, setInnerAnnotationStatus] = React.useState(
+  const [innerAnnotationStatus, setInnerAnnotationStatus] = useControled(
     filterState.annotationStatus ?? ""
   );