From a69b96eb22c4ca58a6e022c8eb2c08e7c8508a9a Mon Sep 17 00:00:00 2001 From: Atdhe Date: Thu, 5 Jun 2025 19:48:46 +0200 Subject: [PATCH] redox2 --- lab07/index.html | 8 +++----- lab07/src/App.jsx | 32 ++++++++++++++++++++------------ lab07/src/Button.jsx | 25 +++++++++++++++++++++++++ lab07/src/MyOutput.jsx | 23 ++++++++++------------- lab07/src/main.jsx | 7 +++++-- lab07/src/reducer.js | 21 +++++++++++++-------- lab07/src/store.js | 8 +++----- lab07/src/useIsPriceToHigh.jsx | 13 +++++++++++++ 8 files changed, 92 insertions(+), 45 deletions(-) create mode 100644 lab07/src/Button.jsx create mode 100644 lab07/src/useIsPriceToHigh.jsx 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]; +}