From 6af1ae547e047876265579e0b4bde4fc7a39a770 Mon Sep 17 00:00:00 2001
From: jonatag12 <jguzman12@huskers.unl.edu>
Date: Mon, 18 Nov 2024 19:04:48 -0600
Subject: [PATCH] Implemented problem 1 of homework 3
---
minimal-app/src/app.js | 12 ++-
minimal-app/src/app/store.js | 9 +-
minimal-app/src/features/counter/Result.js | 25 +++++
minimal-app/src/features/counter/counter.js | 112 +++++++++++++++-----
4 files changed, 123 insertions(+), 35 deletions(-)
create mode 100644 minimal-app/src/features/counter/Result.js
diff --git a/minimal-app/src/app.js b/minimal-app/src/app.js
index e875b5f..ff47ccc 100644
--- a/minimal-app/src/app.js
+++ b/minimal-app/src/app.js
@@ -1,12 +1,18 @@
import { Routes, Route } from 'react-router-dom';
-
-import { Counter } from './features/counter/counter.js';
+import React from 'react';
+import Result from './features/counter/Result';
+import Counter from './features/counter/counter.js';
export function App() {
const page =
<>
- <Counter label={'Taps'} />
+ <div >
+ <h1>Candy Shop</h1>
+ <Counter />
+ <Result />
+ </div>
</>;
+
return (
<Routes>
<Route path={'/*'} element={page} />
diff --git a/minimal-app/src/app/store.js b/minimal-app/src/app/store.js
index ff522e1..7bd10e0 100644
--- a/minimal-app/src/app/store.js
+++ b/minimal-app/src/app/store.js
@@ -1,9 +1,10 @@
import { configureStore } from '@reduxjs/toolkit';
+import counterReducer from '../features/counter/counterSlice.js'; // Import the slice
-import counterSlice from '../features/counter/counterSlice.js';
-
-export const store = configureStore({
+const store = configureStore({
reducer: {
- [counterSlice.name]: counterSlice.reducer,
+ counter: counterReducer,
},
});
+
+export default store;
diff --git a/minimal-app/src/features/counter/Result.js b/minimal-app/src/features/counter/Result.js
new file mode 100644
index 0000000..779ff17
--- /dev/null
+++ b/minimal-app/src/features/counter/Result.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectResult, selectCandies } from './counterSlice';
+
+const Result = () => {
+ const result = useSelector(selectResult);
+ const candies = useSelector(selectCandies);
+
+ return (
+ <div>
+ <h2>Result</h2>
+ <p>Total Tastiness: {result.totalTastiness}</p>
+ <h3>Candy Quantities</h3>
+ <ul>
+ {result.quantities.map((quantity, index) =>
+ <li key={index}>
+ {candies[index]?.name || `Candy ${index + 1}`}: {quantity}
+ </li>,
+ )}
+ </ul>
+ </div>
+ );
+};
+
+export default Result;
diff --git a/minimal-app/src/features/counter/counter.js b/minimal-app/src/features/counter/counter.js
index a09d3e4..733521e 100644
--- a/minimal-app/src/features/counter/counter.js
+++ b/minimal-app/src/features/counter/counter.js
@@ -1,36 +1,92 @@
-import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setCandies, setMaxWeight, knapsack } from './counterSlice';
+import './counter.module.css';
-import classNames from 'classnames';
-import styles from './counter.module.css';
+const Counter = () => {
+ const dispatch = useDispatch();
+ const [candyCount, setCandyCount] = useState(0);
+ const [candies, setCandiesState] = useState([]);
+ const [maxWeight, setMaxWeightState] = useState(0);
-import {
- selectValue,
- setValue,
-} from './counterSlice.js';
+ const handleCandyCountChange = (e) => {
+ const count = parseInt(e.target.value, 10);
+ setCandyCount(count);
+ setCandiesState(Array(count).fill({ name: '',
+ tastiness: 0,
+ weight: 0 }));
+ };
-export function Counter(props) {
- const value = useSelector(selectValue);
- const dispatch = useDispatch();
+ const handleCandyChange = (index, field, value) => {
+ const updatedCandies = candies.map((candy, i) =>
+ i === index ? { ...candy,
+ [field]: value } : candy,
+ );
+ setCandiesState(updatedCandies);
+ };
- const classes = classNames({
- [styles.red]: value % 2 === 0,
- [styles.blue]: value % 2 === 1,
- });
- const onClick = () => dispatch(setValue({
- value: value + 1,
- }));
+ const handleSubmit = () => {
+ dispatch(setCandies(candies));
+ dispatch(setMaxWeight(maxWeight));
+ dispatch(knapsack());
+ };
return (
- <label>
- {props.label}:
- <button className={classes} onClick={onClick}>
- {value}
- </button>
- </label>
+ <div>
+ <h2 classname="setUpStore">Set Up Candy Store</h2>
+ <label classname="numberOfCandies">
+ Number of candies:
+ <input
+ type="number"
+ value={candyCount}
+ onChange={(e) => handleCandyCountChange(e)}
+ />
+ </label>
+ {candies.map((candy, index) =>
+ <div key={index}>
+ <label classname="candieName">
+ Name:
+ <input
+ type="text"
+ value={candy.name}
+ onChange={(e) =>
+ handleCandyChange(index, 'name', e.target.value)
+ }
+ />
+ </label>
+ <label classname="candieTastiness">
+ Tastiness:
+ <input
+ type="number"
+ value={candy.tastiness}
+ onChange={(e) =>
+ handleCandyChange(index, 'tastiness', parseInt(e.target.value, 10))
+ }
+ />
+ </label>
+ <label classname="candieWeight">
+ Weight:
+ <input
+ type="number"
+ value={candy.weight}
+ onChange={(e) =>
+ handleCandyChange(index, 'weight', parseInt(e.target.value, 10))
+ }
+ />
+ </label>
+ </div>,
+ )}
+ <label>
+ Max Basket Weight:
+ <input
+ type="number"
+ value={maxWeight}
+ onChange={(e) => setMaxWeightState(parseInt(e.target.value, 10))}
+ />
+ </label>
+ <button onClick={handleSubmit}>Calculate Knapsack</button>
+ </div>
);
-}
-
-Counter.propTypes = {
- label: PropTypes.string.isRequired,
};
+
+export default Counter;
--
GitLab