file name + panel for each category / subcategory

src/App.js

+/*global google */
+
 import React, { useState } from 'react';
 import { saveAs } from "file-saver";
 import './App.css';
@@ -40,17 +42,30 @@ function App() {
 	const classes = useStyles();
 
 	const [state, setState] = useState({
-		sections: []
+		sections: [],
+		name: ""
 	}
 	);
 
-	const generate = () => {
+	const save = () => {
+		let name = prompt("Nom du fichier");
 		let blob = new Blob([JSON.stringify(state)], { type: "application/json" });
-		saveAs(blob, "config.json");
+		saveAs(blob, name + ".json");
+	}
+
+	const generate = () => {
+		
 	}
 
 	const loadConfig = () => {
-		let config = JSON.parse(state.config)
+		let config;
+		try {
+			config = JSON.parse(state.config)
+		} catch (e) {
+			alert("Impossible de charger cette configuration")
+			console.error(e);
+			return;
+		}
 		setState({ ...config })
 	}
 
@@ -95,8 +110,11 @@ function App() {
 							<Grid item xs={12} md={6} lg={4}>
 								<TextField
 									id="outlined-name"
+									name="name"
 									label="Nom du questionnaire"
 									className={classes.textField}
+									value={state.name}
+									onChange={handleChange}
 									margin="normal"
 									variant="outlined"
 									fullWidth
@@ -129,6 +147,14 @@ function App() {
 								>
 									Ajouter une section
 								</Button>
+								<Button
+									size="medium"
+									variant="contained"
+									color="primary"
+									onClick={save}
+								>
+									Sauvegarder la configuration
+								</Button>
 								<Button
 									size="medium"
 									variant="contained"

src/Category.jsx

@@ -2,10 +2,13 @@ import React from "react";
 
 import { makeStyles } from "@material-ui/core/styles"
 import Grid from "@material-ui/core/Grid";
-import Divider from "@material-ui/core/Divider";
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { Danger } from "./Buttons";
 import SubCategory from "./SubCategory";
@@ -54,11 +57,16 @@ export default function Category(props) {
     return (
         <Grid container spacing={2} justify="flex-end">
             <Grid item xs={12} md={10}>
-                <Divider />
-                <Typography variant="h6" component="h5">
-                    {category.name}
-                </Typography>
-            </Grid>
+                <ExpansionPanel>
+                    <ExpansionPanelSummary
+                        expandIcon={<ExpandMoreIcon />}
+                        aria-controls="panel1a-content"
+                        id="panel1a-header"
+                    >
+                        <Typography className={classes.heading}>{category.name}</Typography>
+                    </ExpansionPanelSummary>
+                    <ExpansionPanelDetails>
+                        <Grid container>
                             <Grid item xs={12} md={10}>
                                 <TextField
                                     id="name"
@@ -102,5 +110,9 @@ export default function Category(props) {
                             </Danger>
                             </Grid>
                         </Grid>
+                    </ExpansionPanelDetails>
+                </ExpansionPanel>
+            </Grid>
+        </Grid>
     )
 }
\ No newline at end of file

src/SubCategory.jsx

@@ -2,12 +2,17 @@ import React from "react";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import Divider from "@material-ui/core/Divider";
 import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
 import { Danger } from "./Buttons";
 
 const useStyles = makeStyles(theme => ({
@@ -37,6 +42,17 @@ export default function SubCategory(props) {
     }
 
     return (
+        <Grid container spacing={2} justify="flex-end">
+            <Grid item xs={12} md={10}>
+                <ExpansionPanel>
+                    <ExpansionPanelSummary
+                        expandIcon={<ExpandMoreIcon />}
+                        aria-controls="panel1a-content"
+                        id="panel1a-header"
+                    >
+                        <Typography className={classes.heading}>{subCategory.name}</Typography>
+                    </ExpansionPanelSummary>
+                    <ExpansionPanelDetails>
                         <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
                             <Grid item xs={12} md={10}>
                                 <Divider />
@@ -136,5 +152,9 @@ export default function SubCategory(props) {
                             </Danger>
                             </Grid>
                         </Grid >
+                    </ExpansionPanelDetails>
+                </ExpansionPanel>
+            </Grid>
+        </Grid>
     );
 }
\ No newline at end of file