fix: change code structure and refactor layout

openfoodfacts · Jan 29, 2024 · ce39e4c · ce39e4c
1 parent ab9f73e
commit ce39e4c
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 84 deletions.
diff --git a/interface/README.md b/interface/README.md
@@ -1,30 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

diff --git a/interface/components/BarcodeButton.tsx b/interface/components/BarcodeButton.tsx
@@ -1,5 +1,5 @@
 import Button from '@mui/material/Button';
-import { Link } from 'react-router-dom'; // You may need to adjust this import based on your routing library
+import { Link } from 'react-router-dom';
 
 export default function BarcodeButton(props: { barcode: string }) {
     const linkUrl = `https://world.openfoodfacts.org/cgi/product.pl?type=edit&code=${props.barcode}`;

diff --git a/interface/components/Ticket.tsx b/interface/components/Ticket.tsx
@@ -21,8 +21,8 @@ export default function Ticket({ticket}: any) {
 
                 <div style={{ display: 'flex', gap: '10px', alignItems: 'center'}}>
                     <img 
-                        src={ticket.url} 
-                        //src='https://images.openfoodfacts.net/images/products/327/408/000/5003/1.400.jpg'
+                        //src={ticket.url} 
+                        src='https://images.openfoodfacts.net/images/products/327/408/000/5003/1.400.jpg'
                         alt={ticket.barcode}
                         width={100}
                         height={100}

diff --git a/interface/pages/HomePage.tsx b/interface/pages/HomePage.tsx
@@ -0,0 +1,28 @@
+export default function HomePage() {
+    return (
+        <>
+            <div style={{margin: '3rem 8rem', color: '#281900'}}>
+                <h1 style={{margin: '2rem 0', fontSize: '1.5rem'}}>
+                    🇫🇷 Découvrez Nutripatrol : l'outil de modération en cours de développement pour OpenFoodFacts.
+                </h1>
+                <p style={{margin: '2rem 0', fontSize: '1.2rem'}}>
+                    Nutripatrol simplifie la modération des produits alimentaires en proposant une plateforme de ticketing intuitive. Vous pouvez signaler rapidement les erreurs, incohérences ou informations manquantes sur les produits alimentaires répertoriés.
+                </p>
+                <p style={{margin: '2rem 0', fontSize: '1.2rem'}}>
+                    Rejoignez-nous pour contribuer à l'amélioration de la base de données OpenFoodFacts et aider les consommateurs du monde entier à prendre des décisions éclairées sur leur alimentation.
+                </p>
+            </div>
+            <div style={{margin: '3rem 8rem', color: '#281900'}}>
+                <h1 style={{margin: '2rem 0', fontSize: '1.5rem'}}>
+                    🇺🇸 / 🇬🇧 Discover Nutripatrol: the moderation tool currently in development for OpenFoodFacts.
+                </h1>
+                <p style={{margin: '2rem 0', fontSize: '1.2rem'}}>
+                    Nutripatrol simplifies the moderation of food products by offering an intuitive ticketing platform. You can quickly report errors, inconsistencies, or missing information on listed food products.
+                </p>
+                <p style={{margin: '2rem 0', fontSize: '1.2rem'}}>
+                    Join us in contributing to the improvement of the OpenFoodFacts database and helping consumers worldwide make informed decisions about their diet.
+                </p>
+            </div>
+        </>
+    )
+}
diff --git a/interface/pages/LoginPage.tsx b/interface/pages/LoginPage.tsx
@@ -1,14 +1,19 @@
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';
+
 export default function LoginPage() {
     return (
-        <div className='login-container'>
-            <h1>Login</h1>
-            <form>
-                <label htmlFor="username">Username</label>
-                <input type="text" id="username" name="username" />
-                <label htmlFor="password">Password</label>
-                <input type="password" id="password" name="password" />
-                <input type="submit" value="Submit" />
-            </form>
+        <div style={{margin: '5rem 0', color: '#281900', display: 'flex',flexDirection: "column", alignItems: "center", justifyContent:"center"}}>
+            <h2 style={{fontSize: '1.4rem', margin: "2rem 0"}}>🇫🇷 Connectez-vous avec votre compte OpenFoodFacts </h2>
+            <h2 style={{fontSize: '1.4rem', margin: "2rem 0"}}>🇺🇸 / 🇬🇧 Login with your OpenFoodFacts account </h2>
+            <Button 
+                component={Link} 
+                to={"https://world.openfoodfacts.org/cgi/session.pl"} 
+                variant='contained'
+                color="primary"
+                target="_blank" >
+                Login
+            </Button>
         </div>
     )
 }
diff --git a/interface/pages/ModerationPage.tsx b/interface/pages/ModerationPage.tsx
@@ -1,4 +1,3 @@
-import LayoutMenu from '../components/Layouts/LayoutMenu'
 import { Stack } from '@mui/material'
 import Item from '../components/Ticket'
 import { useEffect, useState } from 'react'
@@ -24,16 +23,14 @@ export default function ModerationPage() {
 
     return (
         <>
-            <LayoutMenu>
-                <Stack spacing={2}>
-                    {
-                    // Map through the tickets and create a ticket component for each ticket with status
-                    Tickets.map((ticket) => (
-                        ticket.status === "open" && <Item key={ticket.barcode} ticket={ticket} />
-                    ))
-                    }
-                </Stack>
-            </LayoutMenu>
+            <Stack spacing={2}>
+                {
+                // Map through the tickets and create a ticket component for each ticket with status
+                Tickets.map((ticket) => (
+                    ticket.status === "open" && <Item key={ticket.barcode} ticket={ticket} />
+                ))
+                }
+            </Stack>
         </>
     )
 }
diff --git a/interface/src/App.css b/interface/src/App.css
diff --git a/interface/src/App.tsx b/interface/src/App.tsx
@@ -1,15 +1,22 @@
+import {
+  Route,
+  Routes
+} from "react-router-dom";
 
-import './App.css'
-import LayoutMenu from '../components/Layouts/LayoutMenu'
+import HomePage from '../pages/HomePage.tsx'
+import ModerationPage from '../pages/ModerationPage.tsx'
+import LoginPage from '../pages/LoginPage.tsx'
+import LayoutMenu from "../components/Layouts/LayoutMenu.tsx";
 
-function App() {
-  return (
-    <>
-      <LayoutMenu>
-        Homepage 🚪
-      </LayoutMenu>
-    </>
-  )
-}
-
-export default App
+export default function App() {
+    return (
+        <LayoutMenu>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/moderation" element={< ModerationPage/>} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="*" element={<h1>Not Found</h1>} />
+          </Routes>
+        </LayoutMenu>
+    )
+}
diff --git a/interface/src/index.css b/interface/src/index.css
@@ -24,6 +24,7 @@ a {
 .ticket-container {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+  gap: 8rem;
 }
diff --git a/interface/src/main.tsx b/interface/src/main.tsx
@@ -1,21 +1,13 @@
-import ReactDOM from 'react-dom/client'
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes
-} from "react-router-dom";
-import App from './App.tsx'
-import ModerationPage from '../pages/ModerationPage.tsx'
-import LoginPage from '../pages/LoginPage.tsx'
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from './App'
 import './index.css'
+import React from "react";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <Router>
-    <Routes>
-      <Route path="/" element={<App />} />
-      <Route path="/moderation" element={< ModerationPage/>} />
-      <Route path="/login" element={<LoginPage />} />
-      <Route path="*" element={<h1>Not Found</h1>} />
-    </Routes>
-  </Router>,
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
 )