From a85abdf8962dc742a32b32f16ca8faac1d4d41c0 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Sun, 31 Jul 2022 11:05:32 +0200 Subject: [PATCH 1/4] improve nutriscore game --- src/components/ResponsiveAppBar.jsx | 90 ++++++++++--------- src/i18n/common.json | 3 +- src/i18n/en.json | 3 +- src/pages/nutriscoreValidator/index.jsx | 114 ++++++++++++++++-------- 4 files changed, 125 insertions(+), 85 deletions(-) diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx index 6857049dee..0604a63369 100644 --- a/src/components/ResponsiveAppBar.jsx +++ b/src/components/ResponsiveAppBar.jsx @@ -11,7 +11,7 @@ import Button from "@mui/material/Button"; import MenuItem from "@mui/material/MenuItem"; import ListSubheader from "@mui/material/ListSubheader"; import MuiLink from "@mui/material/Link"; -import SettingsIcon from '@mui/icons-material/Settings'; +import SettingsIcon from "@mui/icons-material/Settings"; import DevModeContext from "../contexts/devMode"; import logo from "../assets/logo.png"; @@ -26,7 +26,8 @@ const pages = [ { url: "logos", translationKey: "menu.logos" }, { url: "eco-score", translationKey: "menu.eco-score" }, { translationKey: "menu.manage" }, - { url: "insights", translationKey: "menu.insights" }, + { url: "insights", translationKey: "menu.insights", devModeOnly: true }, + { url: "nutriscore", translationKey: "menu.nutriscore", devModeOnly: true }, // { url: "settings", translationKey: "menu.settings" }, ]; @@ -44,9 +45,7 @@ const ResponsiveAppBar = () => { const { devMode: isDevMode } = React.useContext(DevModeContext); - const displayedPages = pages.filter( - (page) => page.url !== "insights" || isDevMode - ); + const displayedPages = pages.filter((page) => !page.devModeOnly || isDevMode); return ( @@ -127,45 +126,45 @@ const ResponsiveAppBar = () => { display: { xs: "none", md: "flex" }, flexDirection: "row", alignItems: "center", - width: '100%', - justifyContent: 'space-between' - }} - > - - - OpenFoodFact logo - - - Hunger Games - + + OpenFoodFact logo + + + Hunger Games + {displayedPages.map((page) => page.url ? ( @@ -173,21 +172,24 @@ const ResponsiveAppBar = () => { color="inherit" key={page.url} onClick={handleCloseNavMenu} - sx={{ my: 2, display: "block"}} + sx={{ my: 2, display: "block" }} component={Link} to={`/${page.url}`} > - {page.url === 'settings' ? : t(page.translationKey)} + {page.url === "settings" ? ( + + ) : ( + t(page.translationKey) + )} ) : null )} - - + - - + + + + + ); } From c817749fb1345eafaae9c24cb262e8a28cf002c5 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Sun, 31 Jul 2022 11:05:46 +0200 Subject: [PATCH 2/4] run prettier --- src/localeStorageManager.js | 17 ++++----- src/pages/questions/ProductInformation.jsx | 44 +++++++++++----------- src/pages/questions/QuestionDisplay.jsx | 19 ++++------ src/pages/questions/UserData.jsx | 4 +- src/pages/settings/index.jsx | 15 ++++---- 5 files changed, 47 insertions(+), 52 deletions(-) diff --git a/src/localeStorageManager.js b/src/localeStorageManager.js index 7fae090049..b6371648cc 100644 --- a/src/localeStorageManager.js +++ b/src/localeStorageManager.js @@ -3,21 +3,20 @@ import isEqual from "lodash.isequal"; const STORAGE_KEY = "hunger-game-settings"; export const localSettingsKeys = { - language: 'lang', - isDevMode: 'devMode', - hideImages: 'questions_hideImages', -} - + language: "lang", + isDevMode: "devMode", + hideImages: "questions_hideImages", +}; export const localSettings = { fetch: function () { let storedValue = {}; - - try{ + + try { storedValue = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}"); - } catch(e){} + } catch (e) {} - return (typeof storedValue === 'object')?storedValue:{}; + return typeof storedValue === "object" ? storedValue : {}; }, save: function (settings) { localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx index 9ee64306b3..2158220598 100644 --- a/src/pages/questions/ProductInformation.jsx +++ b/src/pages/questions/ProductInformation.jsx @@ -6,7 +6,7 @@ import Divider from "@mui/material/Divider"; import Checkbox from "@mui/material/Checkbox"; import Typography from "@mui/material/Typography"; import FormControlLabel from "@mui/material/FormControlLabel"; -import Grid from '@mui/material/Grid'; +import Grid from "@mui/material/Grid"; import Zoom from "react-medium-image-zoom"; import "react-medium-image-zoom/dist/styles.css"; @@ -14,12 +14,15 @@ import "react-medium-image-zoom/dist/styles.css"; import EditIcon from "@mui/icons-material/Edit"; import VisibilityIcon from "@mui/icons-material/Visibility"; - import { useTranslation } from "react-i18next"; import { NO_QUESTION_LEFT } from "../../const"; import offService from "../../off"; -import { localSettings,localSettingsKeys,getHideImages } from "../../localeStorageManager"; +import { + localSettings, + localSettingsKeys, + getHideImages, +} from "../../localeStorageManager"; const getImagesUrls = (images, barcode) => { if (!images || !barcode) { @@ -32,7 +35,6 @@ const getImagesUrls = (images, barcode) => { .map((key) => `${rootImageUrl}/${key}.jpg`); }; - const ProductInformation = ({ question }) => { const { t } = useTranslation(); const [productData, setProductData] = React.useState({}); @@ -70,7 +72,7 @@ const ProductInformation = ({ question }) => { const handleHideImages = (event) => { setHideImages(event.target.checked); localSettings.update(localSettingsKeys.hideImages, event.target.checked); - } + }; if (!question || question === NO_QUESTION_LEFT) { return null; @@ -109,28 +111,23 @@ const ProductInformation = ({ question }) => { {/* Image display section */} - } + control={} label={t("questions.hide_images")} labelPlacement="end" /> {!hideImages && productData?.images && ( {getImagesUrls(productData.images, question.barcode).map((src) => ( - - - - - + + + + + ))} )} @@ -144,7 +141,10 @@ const ProductInformation = ({ question }) => { {t("questions.ingredients")}: {productData?.ingredientsText}

- {t("questions.countries")}: {!productData?.countriesTags?null:`${productData.countriesTags.join(", ")}.`} + {t("questions.countries")}:{" "} + {!productData?.countriesTags + ? null + : `${productData.countriesTags.join(", ")}.`}

diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx index d2a7b5b3ac..c87a388498 100644 --- a/src/pages/questions/QuestionDisplay.jsx +++ b/src/pages/questions/QuestionDisplay.jsx @@ -63,9 +63,8 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { const valueTagExamplesURL = getValueTagExamplesURL(question); React.useEffect(() => { - function handleShortCut(event) { - const preventShortCut = event.target.tagName.toUpperCase() === 'INPUT' + const preventShortCut = event.target.tagName.toUpperCase() === "INPUT"; if (question && !preventShortCut) { switch (event.keyCode) { case 75: @@ -80,11 +79,12 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { default: break; } - }} + } + } - window.addEventListener( 'keydown', handleShortCut) - return () => window.removeEventListener('keydown', handleShortCut) - }, [question, answerQuestion]) + window.addEventListener("keydown", handleShortCut); + return () => window.removeEventListener("keydown", handleShortCut); + }, [question, answerQuestion]); if (question === NO_QUESTION_LEFT) { return ( @@ -144,12 +144,7 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { /> - +