Compare commits
2 Commits
e29ff6a755
...
main
Author | SHA1 | Date | |
---|---|---|---|
3f5516500f | |||
a69b96eb22 |
@ -1,10 +1,8 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<title>Preis Checker</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite + React</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
BIN
lab07/src.zip
BIN
lab07/src.zip
Binary file not shown.
@ -1,16 +1,24 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import { Provider } from 'react-redux';
|
import Output from "./MyOutput";
|
||||||
import store from './store';
|
import MyInput from "./MyInput";
|
||||||
import MyInput from './MyInput';
|
import Button from "./Button";
|
||||||
import MyOutput from './MyOutput';
|
import { useIsPriceToHigh } from "./useIsPriceToHigh";
|
||||||
|
|
||||||
export default function App() {
|
function App() {
|
||||||
|
const [isPriceToHigh] = useIsPriceToHigh(1000); // 1000€ Limit
|
||||||
return (
|
return (
|
||||||
<Provider store={store}>
|
<div className="App">
|
||||||
<div style={{ padding: '20px' }}>
|
<Button text="Grafikkarte" money={800} />
|
||||||
<MyInput />
|
<br />
|
||||||
<MyOutput />
|
<Button text="Prozessor" money={500} />
|
||||||
|
<br />
|
||||||
|
<Button text="Mainboard" money={200} />
|
||||||
|
<br />
|
||||||
|
<Button text="Arbeitsspeicher" money={100} />
|
||||||
|
<br />
|
||||||
|
<Output isPriceToHigh={isPriceToHigh} />
|
||||||
</div>
|
</div>
|
||||||
</Provider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
export default function Output(props) {
|
||||||
const list = useSelector(state => state.list);
|
const cost = useSelector((state) => state.cost);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<>
|
||||||
backgroundColor: 'khaki',
|
<div className="show">{`Preis: ${cost}`}</div>
|
||||||
marginTop: '10px',
|
<div className="show">
|
||||||
padding: '20px',
|
{props.isPriceToHigh ? "Kostet zu viel Geld!" : "Ist im Rahmen"}
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '500'
|
|
||||||
}}>
|
|
||||||
{list.join(' ')}
|
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
|
//import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
|
import store from './store';
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<Provider store={store}>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
@ -1,16 +1,21 @@
|
|||||||
const initialState = {
|
const initialState = {
|
||||||
input: '',
|
cost: 0,
|
||||||
list: []
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function appReducer(state = initialState, action) {
|
export default function appReducer(state = initialState, action) {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'input/update':
|
case "addPartCost": {
|
||||||
return { ...state, input: action.payload };
|
return {
|
||||||
case 'input/clear':
|
...state,
|
||||||
return { ...state, input: '' };
|
cost: state.cost + action.money,
|
||||||
case 'list/add':
|
};
|
||||||
return { ...state, list: [...state.list, action.payload] };
|
}
|
||||||
|
case "removePartCost": {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
cost: state.cost - action.money,
|
||||||
|
};
|
||||||
|
}
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
import { configureStore } from '@reduxjs/toolkit';
|
import appReducer from "./reducer";
|
||||||
import reducer from './reducer';
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
const store = configureStore({
|
const store = configureStore({ reducer: appReducer });
|
||||||
reducer: reducer
|
|
||||||
});
|
|
||||||
|
|
||||||
export default store;
|
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