Commit 2e421c52 authored by amarcic's avatar amarcic
Browse files

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
parent 90e55346
//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
//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
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
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment