From ec1eea110cf40d641936ca08bebbe8656b0a884a Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Wed, 16 Nov 2022 11:44:16 +0100
Subject: [PATCH] fix baground mcu image

---
 src/actions/boardAction.js        |  4 ++++
 src/components/DeviceSelection.js | 20 --------------------
 src/reducers/boardReducer.js      |  8 ++++++++
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/actions/boardAction.js b/src/actions/boardAction.js
index 9763f2a..9d0d002 100644
--- a/src/actions/boardAction.js
+++ b/src/actions/boardAction.js
@@ -1,9 +1,13 @@
 import {
   BOARD,
 } from "./types";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 export const setBoard = (board) => (dispatch) => {
   window.sessionStorage.setItem("board", board);
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
   dispatch({
     type: BOARD,
     payload: board,
diff --git a/src/components/DeviceSelection.js b/src/components/DeviceSelection.js
index f4efb2d..4645c0f 100644
--- a/src/components/DeviceSelection.js
+++ b/src/components/DeviceSelection.js
@@ -7,8 +7,6 @@ import { withStyles } from "@material-ui/core/styles";
 import * as Blockly from "blockly";
 import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";
-import mini_opacity from "../data/mini_opacity.png"
-import mcu_opacity from "../data/mcu_opacity.png"
 
 const styles = (theme) => ({
   link: {
@@ -49,9 +47,6 @@ class DeviceSeclection extends Component {
   };
 
   onclick = (e, value) => {
-    console.log(e, value)
-    const root = document.querySelector(':root');
-    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity})`);
     this.setState({ selectedBoard: value })
     this.props.setBoard(value)
     this.setState({ open: !this.state });
@@ -115,21 +110,6 @@ class DeviceSeclection extends Component {
             </Grid>
           </Grid>
         </div>
-        {/* <FormControlLabel
-          style={{ marginTop: "20px" }}
-          classes={{ label: this.props.classes.label }}
-          control={
-            <Checkbox
-              size={"small"}
-              value={true}
-              checked={this.state.checked}
-              onChange={(e) => this.onChange(e)}
-              name="dialog"
-              color="primary"
-            />
-          }
-          label={Blockly.Msg.deviceselection_keep_selection}
-        /> */}
         <Typography variant="body1" >
           {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
         </Typography>
diff --git a/src/reducers/boardReducer.js b/src/reducers/boardReducer.js
index fad6aeb..bd63c54 100644
--- a/src/reducers/boardReducer.js
+++ b/src/reducers/boardReducer.js
@@ -1,12 +1,20 @@
 import { BOARD } from '../actions/types';
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 const initialValue = () => {
   if (window.sessionStorage.getItem("board")) {
+    setBackgroundImage(window.sessionStorage.getItem("board"));
     return window.sessionStorage.getItem("board");
   }
   return null;
 };
 
+const setBackgroundImage = (board) => {
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
+}
+
 const initialState = {
     board: initialValue()
 };