more things handled on root

src/App.js

@@ -13,6 +13,8 @@ import Typography from '@material-ui/core/Typography';
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Section from "./Section";
+import Category from "./Category";
+import SubCategory from "./SubCategory";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -45,10 +47,10 @@ function App() {
 
 	const [state, setState] = useState({
 		sections: [],
+		toUpdate: "",
 		name: ""
-	}
-	);
-
+	});
+	const [sectionsCreated, setSectionsCreated] = useState(0);
 	const [url, setURL] = useState({ url: "", requesting: false });
 
 	useEffect(() => {
@@ -97,20 +99,99 @@ function App() {
 	}
 
 	const addSection = () => {
-		setState({ ...state, sections: [...state.sections, { name: "Nouvelle section", categories: [] }] });
+		setState({
+			...state,
+			sections: [
+				...state.sections,
+				{
+					id: sectionsCreated.toString(),
+					name: "Nouvelle section",
+					categories: [],
+					totalCoeff: 0
+				}
+			]
+		});
+
+		setSectionsCreated(sectionsCreated + 1);
 	}
 
-	const deleteSection = i => () => {
-		if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?"))
-			setState({ sections: state.sections.filter((s, ind) => ind !== i) })
+	const indexesOf = id => {
+		const ids = id.split(",");
+		let indexes = [];
+
+		indexes[0] = state.sections.findIndex(s => s.id === ids[0]);
+		if (ids.length >= 2)
+			indexes[1] = state.sections[indexes[0]].categories.findIndex(c => c.id === [ids[0], ids[1]].join(','));
+		if (ids.length >= 3)
+			indexes[2] = state.sections[indexes[0]].categories[indexes[1]].subCategories.findIndex(sc => sc.id === ids.join(','));
+
+		return indexes;
 	}
 
-	const setSection = i => update => {
+	const setElement = data => {
+		const { id, update } = data;
+		const ids = indexesOf(id);
+		console.log(id, ids);
+
 		let sections = Object.assign(state.sections);
-		sections[i] = update;
+		if (ids.length === 1)
+			sections[ids[0]] = update;
+		if (ids.length === 2)
+			sections[ids[0]].categories[ids[1]] = update;
+		else if (ids.length === 3)
+			sections[ids[0]].categories[ids[1]].subCategories[ids[2]] = update;
+
 		setState({
-			...state,
-			sections: sections
+			name: state.name,
+			toUpdate: id,
+			sections
+		});
+	}
+
+	const deleteElement = id => {
+		const ids = indexesOf(id);
+		let sections = Object.assign(state.sections);
+
+		if (ids.length === 1)
+			sections = sections.filter(s => s.id !== id);
+		if (ids.length === 2)
+			sections[ids[0]].categories = sections[ids[0]].categories.filter(c => c.id !== id);
+		else if (ids.length === 3)
+			sections[ids[0]].categories[ids[1]].subCategories = sections[ids[0]].categories[ids[1]].subCategories.filter(sc => sc.id !== id);
+
+		console.log(sections);
+
+		setState({
+			name: state.name,
+			toUpdate: "",
+			sections
+		})
+	}
+
+	const setCoefficient = data => {
+		const { id, coeff } = data;
+		const ids = indexesOf(id);
+
+		let totalCoeff;
+		let sections = Object.assign(state.sections);
+		let section = sections[ids[0]];
+		let category = section.categories[ids[1]];
+
+		if (ids.length === 2) {
+			category.coeff = coeff;
+			totalCoeff = section.categories.reduce((acc, val) => acc + val.coeff, 0);
+			section.totalCoeff = totalCoeff;
+		} else if (ids.length === 3) {
+			let subCategory = category.subCategories[ids[2]];
+			subCategory.coeff = coeff;
+			totalCoeff = category.subCategories.reduce((acc, val) => acc + val.coeff, 0);
+			category.totalCoeff = totalCoeff;
+		}
+
+		setState({
+			name: state.name,
+			toUpdate: id,
+			sections
 		});
 	}
 
@@ -126,7 +207,7 @@ function App() {
 			<Grid item xs={12}>
 				<AppBar position="static">
 					<Toolbar>
-                    <Button color="inherit" style={{marginLeft: 'auto'}}>
+						<Button color="inherit" style={{ marginLeft: 'auto' }}>
 							Créé par Théophile BORNON pour<br />le Pole Universitaire Léonard de Vinci
                     </Button>
 					</Toolbar>
@@ -159,16 +240,44 @@ function App() {
 
 						<Grid item xs={12}>
 							<Grid container spacing={2}>
-								{state.sections.map((section, i) =>
+								{state.sections.map(section =>
 									<Grid
 										item
 										xs={12}
-										key={"s" + i}>
+										key={section.id}>
 										<Section
 											section={section}
-											deleteSection={deleteSection(i)}
-											setSection={setSection(i)}
-										/>
+											toUpdaet={state.toUpdate}
+											setCoefficient={setCoefficient}
+											setElement={setElement}
+											deleteElement={deleteElement}
+										>
+											{
+												section.categories.map(category =>
+													<Category
+														key={category.id}
+														category={category}
+														totalCoeff={section.totalCoeff}
+														toUpdaet={state.toUpdate}
+														setCoefficient={setCoefficient}
+														setElement={setElement}
+														deleteElement={deleteElement}
+													>
+														{category.subCategories.map(subCategory =>
+															<SubCategory
+																key={subCategory.id}
+																subCategory={subCategory}
+																totalCoeff={category.totalCoeff}
+																toUpdaet={state.toUpdate}
+																setCoefficient={setCoefficient}
+																setElement={setElement}
+																deleteElement={deleteElement}
+															/>)
+														}
+													</Category>
+												)
+											}
+										</Section>
 									</Grid>
 								)}
 							</Grid>

src/Category.jsx

-import React from "react";
+import React, { useState } from "react";
 
 import { makeStyles } from "@material-ui/core/styles"
 import Grid from "@material-ui/core/Grid";
@@ -11,7 +11,6 @@ import Button from "@material-ui/core/Button";
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { Danger } from "./Buttons";
-import SubCategory from "./SubCategory";
 
 const useStyles = makeStyles(theme => ({
     heading: {
@@ -20,21 +19,39 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-export default function Category(props) {
+function Category(props) {
     const classes = useStyles();
-    const { category, setCategory } = props;
+    const { category, setCoefficient, deleteElement, setElement } = props;
+
+    const [subCategoriesCreated, setSubCategoriesCreated] = useState(0);
 
     const handleChange = e => {
         if (e.target.id !== "coeff")
-            setCategory({ ...category, [e.target.id]: e.target.value })
+            setElement({
+                id: category.id,
+                update: {
+                    ...category,
+                    [e.target.id]: e.target.value
+                }
+            });
         else
-            setCategory({ ...category, [e.target.id]: parseInt(e.target.value) })
+            setCoefficient(
+                {
+                    id: category.id,
+                    coeff: parseInt(e.target.value)
+                });
     }
 
     const addSubCategory = () => {
-        setCategory({
-            ...category, subCategories: [...category.subCategories,
+        setElement({
+            id: category.id,
+            update: {
+                ...category,
+                totalCoeff: category.totalCoeff + 1,
+                subCategories: [
+                    ...category.subCategories,
                     {
+                        id: category.id + "," + subCategoriesCreated,
                         name: "Nouvelle sous catégorie",
                         coeff: 1,
                         required: true,
@@ -43,18 +60,17 @@ export default function Category(props) {
                         lower: "Nul"
                     }
                 ]
-        })
             }
+        });
 
-    const deleteSubCategory = i => () => {
-        if (window.confirm("Êtes vous sûr de vouloir supprimer cette sous catégorie ?"))
-            setCategory({ ...category, subCategories: category.subCategories.filter((s, ind) => ind !== i) })
+        setSubCategoriesCreated(subCategoriesCreated + 1);
     }
 
-    const setSubCategory = i => update => {
-        let subCategories = Object.assign(category.subCategories);
-        subCategories[i] = update;
-        setCategory({ ...category, subCategories });
+    const deleteCategory = () => {
+        if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?")) {
+            setCoefficient({ id: category.id, coeff: 0 })
+            deleteElement(category.id);
+        }
     }
 
     return (
@@ -66,7 +82,7 @@ export default function Category(props) {
                         aria-controls="panel1a-content"
                         id="panel1a-header"
                     >
-                        <Typography className={classes.heading}>{category.name}</Typography>
+                        <Typography className={classes.heading}>{category.name} ({Math.round(category.coeff / props.totalCoeff * 10000) / 100}%) - {category.id}</Typography>
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails>
                         <Grid container spacing={2}>
@@ -98,14 +114,7 @@ export default function Category(props) {
                             </Grid>
 
                             <Grid item xs={12} md={10}>
-                                {category.subCategories.map((sc, i) =>
-                                    <SubCategory
-                                        key={"sc" + i}
-                                        subCategory={sc}
-                                        setSubCategory={setSubCategory(i)}
-                                        deleteSubCategory={deleteSubCategory(i)}
-                                    />)
-                                }
+                                {props.children}
                             </Grid>
 
                             <Grid item xs={12} md={10}>
@@ -121,7 +130,7 @@ export default function Category(props) {
                                     size="small"
                                     variant="contained"
                                     color="primary"
-                                    onClick={props.deleteCategory}
+                                    onClick={deleteCategory}
                                 >
                                     Supprimer la catégorie
                             </Danger>
@@ -133,3 +142,7 @@ export default function Category(props) {
         </Grid>
     )
 }
+
+const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.category.id;
+
+export default React.memo(Category, shouldUpdate);

src/Section.jsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
 import Grid from '@material-ui/core/Grid';
@@ -12,7 +12,6 @@ import TextField from "@material-ui/core/TextField";
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { Danger } from "./Buttons";
-import Category from "./Category";
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -24,30 +23,53 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-export default function SimpleExpansionPanel(props) {
+function Section(props) {
     const classes = useStyles();
-    const { setSection, section } = props;
+    const {
+        section,
+        setElement,
+        deleteElement
+    } = props;
+
+    const [categoriesCreated, setCategoriesCreated] = useState(0);
 
     useEffect(() => {
     }, [])
 
-    const handleChange = e => {
-        setSection({ ...section, [e.target.id]: e.target.value })
+    const handleChange = e =>
+        setElement({
+            id: section.id,
+            update: {
+                ...section,
+                [e.target.id]: e.target.value
             }
+        });
+
 
     const addCategory = () => {
-        setSection({ ...section, categories: [...section.categories, { name: "Nouvelle catégorie", coeff: 1, subCategories: [] }] })
+        setElement({
+            id: section.id,
+            update: {
+                ...section,
+                totalCoeff: section.totalCoeff + 1,
+                categories: [
+                    ...section.categories,
+                    {
+                        id: section.id + "," + categoriesCreated,
+                        name: "Nouvelle catégorie",
+                        coeff: 1,
+                        subCategories: [],
+                        totalCoeff: 0,
                     }
-
-    const deleteCategory = i => () => {
-        if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?"))
-            setSection({ ...section, categories: section.categories.filter((s, ind) => ind !== i) })
+                ]
+            }
+        });
+        setCategoriesCreated(categoriesCreated + 1);
     }
 
-    const setCategory = i => update => {
-        let categories = Object.assign(section.categories);
-        categories[i] = update;
-        setSection({ ...section, categories });
+    const deleteSection = () => {
+        if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?"))
+            deleteElement(section.id);
     }
 
     return (
@@ -58,7 +80,7 @@ export default function SimpleExpansionPanel(props) {
                     aria-controls="panel1a-content"
                     id="panel1a-header"
                 >
-                    <Typography className={classes.heading}>{props.section.name}</Typography>
+                    <Typography className={classes.heading}>{props.section.name} - {section.id}</Typography>
                 </ExpansionPanelSummary>
                 <ExpansionPanelDetails>
                     <Grid container spacing={2}>
@@ -76,13 +98,7 @@ export default function SimpleExpansionPanel(props) {
                         </Grid>
 
                         <Grid item xs={12}>
-                            {section.categories.map((category, i) =>
-                                <Category
-                                    key={"c" + i}
-                                    category={category}
-                                    deleteCategory={deleteCategory(i)}
-                                    setCategory={setCategory(i)}
-                                />)}
+                            {props.children}
                         </Grid>
 
                         <Grid item xs={12}>
@@ -98,7 +114,7 @@ export default function SimpleExpansionPanel(props) {
                                 size="medium"
                                 variant="contained"
                                 color="primary"
-                                onClick={props.deleteSection}
+                                onClick={deleteSection}
                             >
                                 Supprimer la section
                             </Danger>
@@ -109,3 +125,7 @@ export default function SimpleExpansionPanel(props) {
         </div>
     );
 }
+
+const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.section.id;
+
+export default React.memo(Section, shouldUpdate)

src/SubCategory.jsx

@@ -24,20 +24,36 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-export default function SubCategory(props) {
+function SubCategory(props) {
     const classes = useStyles();
-    const { setSubCategory, subCategory } = props;
+    const {
+        subCategory,
+        setCoefficient,
+        setElement,
+        deleteElement,
+    } = props;
 
     const handleChange = e => {
+        let update = null;
         if (e.target.type === "text")
-            setSubCategory({ ...subCategory, [e.target.id]: e.target.value })
+            update = { ...subCategory, [e.target.id]: e.target.value };
         else if (e.target.type === "number" && parseInt(e.target.value) >= 1)
-            setSubCategory({ ...subCategory, [e.target.id]: parseInt(e.target.value) })
+            setCoefficient({ id: subCategory.id, coeff: parseInt(e.target.value) });
         else if (e.target.type === "checkbox")
             if (e.target.id === "type")
-                setSubCategory({ ...subCategory, type: (e.target.checked ? "text" : "") })
+                update = { ...subCategory, type: (e.target.checked ? "text" : "") };
             else
-                setSubCategory({ ...subCategory, [e.target.id]: e.target.checked })
+                update = { ...subCategory, [e.target.id]: e.target.checked };
+
+        if (update !== null)
+            setElement({ id: subCategory.id, update });
+    }
+
+    const deleteSubCategory = () => {
+        if (window.confirm("Êtes vous sûr de vouloir supprimer cette sous catégorie ?")) {
+            setCoefficient({id: subCategory.id, coeff: 0})
+            deleteElement(subCategory.id)
+        }
     }
 
     return (
@@ -49,14 +65,15 @@ export default function SubCategory(props) {
                         aria-controls="panel1a-content"
                         id="panel1a-header"
                     >
-                        <Typography className={classes.heading}>{subCategory.name}</Typography>
+                        <Typography className={classes.heading}>{subCategory.name} ({Math.round(subCategory.coeff / props.totalCoeff * 10000) / 100}%) - {subCategory.id}</Typography>
+
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails>
                         <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
                             <Grid item xs={12} md={10}>
                                 <TextField
                                     id="name"
-                                    label="Nom de la categorie"
+                                    label="Nom de la sous categorie"
                                     value={subCategory.name}
                                     onChange={handleChange}
                                     className={classes.textField}
@@ -144,7 +161,7 @@ export default function SubCategory(props) {
                                     size="small"
                                     variant="contained"
                                     color="primary"
-                                    onClick={props.deleteSubCategory}
+                                    onClick={deleteSubCategory}
                                 >
                                     Supprimer la sous catégorie
                             </Danger>
@@ -156,3 +173,7 @@ export default function SubCategory(props) {
         </Grid>
     );
 }
+
+const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.subCategory.id;
+
+export default React.memo(SubCategory, shouldUpdate);
\ No newline at end of file