redox2
This commit is contained in:
@ -1,10 +1,8 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>Preis Checker</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
@ -1,16 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store';
|
||||
import MyInput from './MyInput';
|
||||
import MyOutput from './MyOutput';
|
||||
import React from "react";
|
||||
import Output from "./MyOutput";
|
||||
import MyInput from "./MyInput";
|
||||
import Button from "./Button";
|
||||
import { useIsPriceToHigh } from "./useIsPriceToHigh";
|
||||
|
||||
export default function App() {
|
||||
function App() {
|
||||
const [isPriceToHigh] = useIsPriceToHigh(1000); // 1000€ Limit
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<div style={{ padding: '20px' }}>
|
||||
<MyInput />
|
||||
<MyOutput />
|
||||
</div>
|
||||
</Provider>
|
||||
<div className="App">
|
||||
<Button text="Grafikkarte" money={800} />
|
||||
<br />
|
||||
<Button text="Prozessor" money={500} />
|
||||
<br />
|
||||
<Button text="Mainboard" money={200} />
|
||||
<br />
|
||||
<Button text="Arbeitsspeicher" money={100} />
|
||||
<br />
|
||||
<Output isPriceToHigh={isPriceToHigh} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
25
lab07/src/Button.jsx
Normal file
25
lab07/src/Button.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React, { useState } from "react";
|
||||
// import "./Button.css"; // optional
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
export default function Button({ money, text }) {
|
||||
const [isAddMoney, setIsAddMoney] = useState(true);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleClick = () => {
|
||||
if (isAddMoney) {
|
||||
dispatch({ type: "addPartCost", money: money });
|
||||
} else {
|
||||
dispatch({ type: "removePartCost", money: money });
|
||||
}
|
||||
setIsAddMoney(!isAddMoney);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button className="button" onClick={handleClick}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,18 +1,15 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useSelector } from "react-redux";
|
||||
//import "./Output.css";
|
||||
|
||||
export default function MyOutput() {
|
||||
const list = useSelector(state => state.list);
|
||||
export default function Output(props) {
|
||||
const cost = useSelector((state) => state.cost);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
backgroundColor: 'khaki',
|
||||
marginTop: '10px',
|
||||
padding: '20px',
|
||||
fontSize: '18px',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{list.join(' ')}
|
||||
</div>
|
||||
<>
|
||||
<div className="show">{`Preis: ${cost}`}</div>
|
||||
<div className="show">
|
||||
{props.isPriceToHigh ? "Kostet zu viel Geld!" : "Ist im Rahmen"}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,12 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
//import './index.css';
|
||||
import App from './App';
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</Provider>
|
||||
);
|
||||
|
@ -1,16 +1,21 @@
|
||||
const initialState = {
|
||||
input: '',
|
||||
list: []
|
||||
cost: 0,
|
||||
};
|
||||
|
||||
export default function appReducer(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case 'input/update':
|
||||
return { ...state, input: action.payload };
|
||||
case 'input/clear':
|
||||
return { ...state, input: '' };
|
||||
case 'list/add':
|
||||
return { ...state, list: [...state.list, action.payload] };
|
||||
case "addPartCost": {
|
||||
return {
|
||||
...state,
|
||||
cost: state.cost + action.money,
|
||||
};
|
||||
}
|
||||
case "removePartCost": {
|
||||
return {
|
||||
...state,
|
||||
cost: state.cost - action.money,
|
||||
};
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
@ -1,8 +1,6 @@
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import reducer from './reducer';
|
||||
import appReducer from "./reducer";
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: reducer
|
||||
});
|
||||
const store = configureStore({ reducer: appReducer });
|
||||
|
||||
export default store;
|
||||
|
13
lab07/src/useIsPriceToHigh.jsx
Normal file
13
lab07/src/useIsPriceToHigh.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export function useIsPriceToHigh(priceBorder) {
|
||||
const currentConfigCost = useSelector((state) => state.cost);
|
||||
const [isPriceToHigh, setIsPriceToHigh] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsPriceToHigh(currentConfigCost > priceBorder);
|
||||
}, [currentConfigCost, priceBorder]);
|
||||
|
||||
return [isPriceToHigh];
|
||||
}
|
Reference in New Issue
Block a user