generate and import config

package-lock.json

@@ -5408,6 +5408,11 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.2.0",
     "@material-ui/icons": "^4.2.1",
+    "file-saver": "^2.0.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/App.js

 import React, { useState } from 'react';
+import { saveAs } from "file-saver";
 import './App.css';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -39,29 +40,20 @@ function App() {
 	const classes = useStyles();
 
 	const [state, setState] = useState({
-		sections: [{
-			name: "Première section",
-			categories: [
-				{
-					name: "Première catégorie",
-					subCategories: [
-						{
-							name: "Première sous catégorie",
-							coeff: 1,
-							required: true,
-							type: "",
-							upper: "Excellent",
-							lower: "Nul"
-						}
-					]
-				}
-			]
-		}]
+		sections: []
 	}
 	);
 
 	const generate = () => {
 		console.log(JSON.stringify(state))
+		let blob = new Blob([JSON.stringify(state)], { type: "application/json" });
+		saveAs(blob, "config.json");
+	}
+
+	const loadConfig = () => {
+		let config = JSON.parse(state.config)
+		console.log(config)
+		setState({ ...config })
 	}
 
 	const addSection = () => {
@@ -81,15 +73,18 @@ function App() {
 		});
 	}
 
+	const handleChange = e => {
+		setState({ ...state, [e.target.name]: e.target.value });
+	}
+
 	return (
 		<div className={classes.root}>
 			<AppBar position="static">
 				<Toolbar>
 				</Toolbar></AppBar>
-			<Grid container justify="center" className={classes.margin}>
+			<Grid container justify="center" className={classes.margin} spacing={4}>
 				<Grid item xs={12} md={10} lg={8}>
 					<Paper className={classes.paper}>
-
 						<Grid container spacing={2}>
 							<Grid item xs={12}>
 								<Typography variant="h5" component="h3">
@@ -148,6 +143,44 @@ function App() {
 						</Grid>
 					</Paper>
 				</Grid>
+
+				<Grid item xs={12} md={10} lg={8}>
+					<Paper className={classes.paper}>
+						<Grid container spacing={2}>
+							<Grid item xs={12}>
+								<Typography variant="h5" component="h3">
+									Importer une configuration existante
+								</Typography>
+
+								<Divider />
+							</Grid>
+
+							<Grid item xs={12}>
+								<TextField
+									label="Configuration"
+									fullWidth
+									multiline
+									margin="normal"
+									variant="outlined"
+									name="config"
+									value={state.config}
+									onChange={handleChange}
+								/>
+							</Grid>
+
+							<Grid item xs={12}>
+								<Button
+									size="medium"
+									variant="contained"
+									color="primary"
+									onClick={loadConfig}
+								>
+									Importer la configuration
+								</Button>
+							</Grid>
+						</Grid>
+					</Paper>
+				</Grid>
 			</Grid>
 		</div>
 	);