diff --git a/lab07/index.html b/lab07/index.html
index 0c589ec..c52e81f 100644
--- a/lab07/index.html
+++ b/lab07/index.html
@@ -1,10 +1,8 @@
-
-
+
+
-
-
- Vite + React
+ Preis Checker
diff --git a/lab07/src/App.jsx b/lab07/src/App.jsx
index a1b1e16..09fdbaf 100644
--- a/lab07/src/App.jsx
+++ b/lab07/src/App.jsx
@@ -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 (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
+
+export default App;
diff --git a/lab07/src/Button.jsx b/lab07/src/Button.jsx
new file mode 100644
index 0000000..efbc79e
--- /dev/null
+++ b/lab07/src/Button.jsx
@@ -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 (
+
+
+
+ );
+}
diff --git a/lab07/src/MyOutput.jsx b/lab07/src/MyOutput.jsx
index eebee7e..fc17ce8 100644
--- a/lab07/src/MyOutput.jsx
+++ b/lab07/src/MyOutput.jsx
@@ -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 (
-
- {list.join(' ')}
-
+ <>
+ {`Preis: ${cost}`}
+
+ {props.isPriceToHigh ? "Kostet zu viel Geld!" : "Ist im Rahmen"}
+
+
);
}
diff --git a/lab07/src/main.jsx b/lab07/src/main.jsx
index d76b758..d8d17db 100644
--- a/lab07/src/main.jsx
+++ b/lab07/src/main.jsx
@@ -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(
-
+
-
+
);
diff --git a/lab07/src/reducer.js b/lab07/src/reducer.js
index cd57638..2578ad6 100644
--- a/lab07/src/reducer.js
+++ b/lab07/src/reducer.js
@@ -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;
}
diff --git a/lab07/src/store.js b/lab07/src/store.js
index ab91fb9..1c51d09 100644
--- a/lab07/src/store.js
+++ b/lab07/src/store.js
@@ -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;
diff --git a/lab07/src/useIsPriceToHigh.jsx b/lab07/src/useIsPriceToHigh.jsx
new file mode 100644
index 0000000..fee6778
--- /dev/null
+++ b/lab07/src/useIsPriceToHigh.jsx
@@ -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];
+}