Reduax-Co3 Vibishanan S-21IT116

Screenshots:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

Actions.js:
export const updateHeartRate = (heartRate) => {
return {
type: 'UPDATE_HEART_RATE',
payload: heartRate
};
};

export const updateCalorieIntake = (calories) => {

return {
 type: 'UPDATE_CALORIE_INTAKE',
payload: calories }; };
export const logWorkout = (workoutData) => {
return {
type: 'LOG_WORKOUT',
payload: workoutData }; };

Component.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateHeartRate, updateCalorieIntake, logWorkout } from
'../actions/healthActions';
const HealthStatus = () => {
const dispatch = useDispatch();
const { heartRate, calorieIntake, workouts } = useSelector((state) =>
state);
const [workoutDuration, setWorkoutDuration] = useState('');
const [workoutType, setWorkoutType] = useState('');
// State to show health dashboard summary
const [showDashboard, setShowDashboard] = useState(false);

// Handlers for inputs

const handleHeartRateChange = (e) =>
dispatch(updateHeartRate(e.target.value));
 const handleCalorieIntakeChange = (e) =>
dispatch(updateCalorieIntake(e.target.value))
// Workout log handler using dynamic input
const handleWorkoutLog = () => {
if (workoutType && workoutDuration) {
dispatch(logWorkout({ workout: workoutType, duration:
workoutDuration }));
setWorkoutDuration(''); // Reset input field after logging
setWorkoutType(''); // Reset input field after logging } };
// Handler to calculate and display the health dashboard summary
const handleCalculateDashboard = () => {
setShowDashboard(true); // Toggle to show dashboard summar };
// Inline styles for simple, clean layout
const containerStyle = {
width: '60%',
margin: '0 auto',
padding: '20px',
border: '1px solid #ddd',
borderRadius: '8px',
textAlign: 'center',
backgroundColor: '#f9f9f9',
};

const inputStyle = {
 margin: '10px 0',
padding: '8px',
width: '100%',
maxWidth: '300px',
fontSize: '1em',
};const buttonStyle = {
marginTop: '20px',
padding: '10px 20px',
fontSize: '1em',
cursor: 'pointer',
backgroundColor: '#4CAF50',
color: '#fff',
border: 'none',
borderRadius: '5px',
};const listStyle = {
marginTop: '20px',
textAlign: 'left',
};const summaryStyle = {
marginTop: '30px',
padding: '20px',
border: '1px solid #ccc',
borderRadius: '8px',
backgroundColor: '#e8f4e8', };
return (
<div style={containerStyle}>
<h2>Health Dashboard</h2>
<div>
<label>Heart Rate: </label>
<input
style={inputStyle}
type="number"
value={heartRate}
onChange={handleHeartRateChange}/>
</div>
<div>
<label>Calorie Intake: </label>
<input
style={inputStyle}
type="number"
value={calorieIntake}
onChange={handleCalorieIntakeChange} />
</div>
<h3>Log a Workout</h3>
<div>
<label>Workout Type: </label>
<input
style={inputStyle}
type="text"
 value={workoutType}
onChange={(e) => setWorkoutType(e.target.value)} />
</div>
<div>
<label>Workout Duration (mins): </label>
<input
style={inputStyle}
type="number"
value={workoutDuration}
onChange={(e) => setWorkoutDuration(e.target.value)}
/>
</div>
<button style={buttonStyle} onClick={handleWorkoutLog}>
Log Workout
</button>
<br></br>
{workouts.length > 0 && (
<ul style={listStyle}>
{workouts.map((workout, index) => (
<li key={index}>
{workout.workout} - {workout.duration} mins
</li> ))} </ul> )}

<button style={buttonStyle} onClick={handleCalculateDashboard}>

 Calculate Health Dashboard
</button>
{showDashboard && (
<div style={summaryStyle}>
<h3>Health Summary</h3>
<p><strong>Heart Rate:</strong> {heartRate} bpm</p>
<p><strong>Calorie Intake:</strong> {calorieIntake} kcal</p>
<p><strong>Total Workouts Logged:</strong>
{workouts.length}</p>
<p><strong>Total Workout Duration:</strong>
{workouts.reduce((total, workout) => total +
parseInt(workout.duration), 0)} mins</p>
</div )}
</div> );};
export default HealthStatus;
Reducer.js:
const initialState = {
heartRate: 0,
calorieIntake: 0,
workouts: []
};

const healthReducer = (state = initialState, action) => {

switch (action.type) {
case 'UPDATE_HEART_RATE':
 return {
...state,
heartRate: action.payload
};
case 'UPDATE_CALORIE_INTAKE':
return {
...state,
calorieIntake: action.payload
};
case 'LOG_WORKOUT':
return {
...state,
workouts: [...state.workouts, action.payload]
};
default:
return state; }
};
export default healthReducer;
Store.js:
import { configureStore } from '@reduxjs/toolkit';
import healthReducer from './reducers/healthReducer'
const store = configureStore({
reducer: healthReducer, // or combineReducers if you have multiple
reducers});
export default store;
Reduax-Co4 Vibishanan S-21IT116

Output:
CounterComponent.js:
// CounterComponent.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './store';
import './CounterComponent.css'; // Use some basic styling
const CounterComponent = () => {
const userCount = useSelector((state) => state.data.length);
const dispatch = useDispatch();
return (
<div className="counter-container">
<h1>Number of Users: {userCount}</h1>
<div className="button-group">
<button className="counter-button" onClick={() =>
dispatch(increment())}>
Increment (Fetch User)
</button>
<button
className="counter-button"
onClick={() => dispatch(decrement())}
disabled={userCount === 0} >
Decrement (Remove User)
</button>
</div>
</div>
);
};export default CounterComponent
DataComponent.js:
// DataComponent.js
import React from 'react';
import { useSelector } from 'react-redux';
import './DataComponent.css'; // Import styles
const DataComponent = () => {
const { data, loading, error } = useSelector((state) => state);
if (loading) {
return <h2>Loading...</h2>; }
if (error) {
return <h2>Error: {error}</h2>; }
return (
<div className="user-list">
<h1>Random Users</h1>
<div className="user-cards">
{data.map((user, index) => (
<div className="user-card" key={index}>
<img src={user.picture.large} alt="User Avatar" />
<h2>
{user.name.first} {user.name.last}
</h2>
<p>Email: {user.email}</p>
<p>Location: {user.location.city}, {user.location.country}</p>
</div> ))}
</div></div>);};export default DataComponent;
Store.js
import { createStore, applyMiddleware } from 'redux';
import {thunk} from 'redux-thunk';
import axios from 'axios';
// Initial state
const initialState = {
data: [], // Stores user data
loading: false,
error: null,};
// Action Types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';
// Action Creators
export const increment = () => {
return async (dispatch) => {
dispatch({ type: FETCH_DATA_REQUEST });
try {
// Fetch one more user
const response = await axios.get('https://randomuser.me/api/?results=1');
dispatch({ type: FETCH_DATA_SUCCESS, payload: response.data.results });
 } catch (error) {
dispatch({ type: FETCH_DATA_FAILURE, error: error.message }); } };};
export const decrement = () => {
return (dispatch, getState) => {
const { data } = getState();
if (data.length > 0) {
dispatch({ type: DECREMENT }); } };
};
// Reducer
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_REQUEST:
return { ...state, loading: true, error: null };
case FETCH_DATA_SUCCESS:
return {
...state,
loading: false,
data: [...state.data, ...action.payload], // Append new users };
case FETCH_DATA_FAILURE:
return { ...state, loading: false, error: action.error };
case DECREMENT:
return {
...state,
data: state.data.slice(0, -1), // Remove the last user
};
default:
 return state; }
};
export const store = createStore(rootReducer, applyMiddleware(thunk));

App.js:
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './components/store';
import CounterComponent from './components/CounterComponent';
import DataComponent from './components/DataComponent';
import './App.css';

const App = () => {

return (
<Provider store={store}>
<div className="container">
<h1>Redux Thunk Example: Dynamic User Fetch</h1>
<CounterComponent />
<DataComponent />
</div>
</Provider>
);
};
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();