Implemented problem 1 of homework 3

minimal-app/src/app.js

 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} />

minimal-app/src/app/store.js

 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;

minimal-app/src/features/counter/Result.js

+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;

minimal-app/src/features/counter/counter.js

-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 (
+    <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>
-      {props.label}:&nbsp;
-      <button className={classes} onClick={onClick}>
-        {value}
-      </button>
+        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;