save board model to localstorage

src/actions/boardAction.js

@@ -1,10 +1,11 @@
 import {
   BOARD,
-  } from "./types";
+} from "./types";
 
 export const setBoard = (board) => (dispatch) => {
+  window.localStorage.setItem("board", board);
   dispatch({
     type: BOARD,
     payload: board,
   });
-  };
+};

src/components/DeviceSelection.js

@@ -30,39 +30,39 @@ class DeviceSeclection extends Component {
     super(props);
     this.state = {
       open: true,
-      selectedBoard : "",
+      selectedBoard: "",
       saveSettings: false,
 
     };
   }
 
   toggleDialog = () => {
-    
     this.props.setBoard(this.state.selectedBoard)
-
   };
 
   onChange = (e) => {
     if (e.target.checked) {
-      this.setState({ saveSettings: true});
+      this.setState({ saveSettings: true });
     } else {
-      this.setState({ saveSettings: false});
+      this.setState({ saveSettings: false });
     }
   };
 
   onclick = (e, value) => {
     console.log(e, value)
     const root = document.querySelector(':root');
-    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
+    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity})`);
-    this.setState({selectedBoard: value})
+    this.setState({ selectedBoard: value })
     this.props.setBoard(value)
     this.setState({ open: !this.state });
-   
-
-   
   };
 
   render() {
+    const board = this.props.selectedBoard;
+    if (board) {
+      return null;
+    }
+    else {
       return (
         <Dialog
           style={{ zIndex: 9999999 }}
@@ -72,25 +72,24 @@ class DeviceSeclection extends Component {
           title={Blockly.Msg.deviceselection_head}
           content={""}
           onClick={this.toggleDialog}
-        disabled={this.state.selectedBoard===""}
+          disabled={this.state.selectedBoard === ""}
         >
           <div>
-          <Grid container spacing={2} style={{  textAlign : "center" }}>
+            <Grid container spacing={2} style={{ textAlign: "center" }}>
               <Grid item xs={6}>
                 <IconButton onClick={(e) => this.onclick(e, "mcu")}>
                   <Avatar
                     alt="Sensebox MCU"
                     src="/media/hardware/senseboxmcu.png"
                     style={{
-                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                      border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
-                  width:"20vw",
+                      width: "20vw",
                       height: "20vw"
                     }}
                   />
                 </IconButton>
                 <p>senseBox MCU</p>
               </Grid>
-
               {/* <Grid item xs={4}>
             <IconButton onClick={(e) => this.onclick(e, "esp")}>
               <Avatar
@@ -111,8 +110,8 @@ class DeviceSeclection extends Component {
                     alt="Sensebox Mini"
                     src="/media/hardware/senseboxmcumini.png"
                     style={{
-                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                      border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
-                  width:"20vw",
+                      width: "20vw",
                       height: "20vw"
                     }}
                   />
@@ -142,6 +141,7 @@ class DeviceSeclection extends Component {
         </Dialog>
       );
     }
+  }
 }
 
 DeviceSeclection.propTypes = {
@@ -155,5 +155,5 @@ const mapStateToProps = (state) => ({
 
 export default connect(
   mapStateToProps,
-  {setBoard}
+  { setBoard }
 )(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/reducers/boardReducer.js

@@ -4,7 +4,7 @@ const initialValue = () => {
   if (window.localStorage.getItem("board")) {
     return window.localStorage.getItem("board");
   }
-  return "bla";
+  return null;
 };
 
 const initialState = {