added files for inital values and contexts; added contexts for labels and...

added files for inital values and contexts; added contexts for labels and settings; added hooks to consume these contexts

src/Contexts.js

+//Contexts used by components are created in and exported from this file
+import React from 'react';
+
+export const LabelsContext = React.createContext(null);
+
+export const SettingsContext = React.createContext(null);
\ No newline at end of file

src/INIT_VALUES.js

+//initial values for component states are set in and exported from this file
+
+export const INIT_LABELS = {
+    HelloWorld: {
+        de: "Hallo ganze Welt",
+        en: "Hello World"
+    },
+    HelloComputerButton: {
+        de: "Achtung, Rechenmaschine!",
+        en: "Hello Computer"
+    }
+};
+
+export const INIT_SETTINGS = {
+    language: "en",
+    mode: "basic"
+};
\ No newline at end of file

src/components/HelloComputerButton/HelloComputerButton.jsx

-import React from 'react';
+import React, { useContext } from 'react';
+import { SettingsContext, LabelsContext } from "../../Contexts";
 
 export const HelloComputerButton = props => {
 
+    const settings = useContext(SettingsContext);
+    const labels = useContext(LabelsContext);
+
     return(
-        <button onClick={ (ev) => alert(`Hi ${ev.type}`) }>Hello Computer</button>
+        <button onClick={ (ev) => alert(`Hi ${ev.type}`) }>{labels.HelloComputerButton[settings.language]}</button>
     );
 }
\ No newline at end of file

src/index.js

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { HelloComputerButton } from './components/';
+import { LabelsContext, SettingsContext } from './Contexts';
+import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
 import './index.css';
 
-const INIT_LABELS = {
-    HelloWorld: {
-        de: "Hallo ganze Welt",
-        en: "Hello World"
-    },
-    HelloComputerButton: {
-        de: "Achtung, Rechenmaschine!",
-        en: "Hello Computer"
-    }
-};
-
-const INIT_SETTINGS = {
-    language: "en"
-}
-
 const App = () => {
+
     const [labels, setLabels] = useState(INIT_LABELS);
     const [settings, setSettings] = useState(INIT_SETTINGS);
 
-    return(
-        <div>
-            <span>{labels.HelloWorld[settings.language]}</span><br />
-            <HelloComputerButton />
-        </div>
-        )
+    const onSwitchLanguages = (setLang) => {
+        switch (setLang){
+            case 'en':
+                const newSettings = {...settings, language: "de"};
+                setSettings(newSettings);
+                break;
+            case 'de':
+                const newSettings1 = {...settings, language: "en"};
+                setSettings(newSettings1);
+                break;
+            default:
+                console.log("How did we even get here?");
+        }
     }
 
-ReactDOM.render(<App />, document.getElementById('app' ))
+    return(
+        <LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
+            <div>
+                <span>{labels.HelloWorld[settings.language]}</span><br />
+                <HelloComputerButton />
+                <button type="button" onClick={() => onSwitchLanguages(settings.language)} >Switch</button>
+            </div>
+        </SettingsContext.Provider></LabelsContext.Provider>
+
+        );
+    };
+
+ReactDOM.render(<App />, document.getElementById('app' ))
\ No newline at end of file