import React, { useState } from "react";
import classes from "./ScrrenShotCard.module.css";
import ScreenShotCard from "./ScreenShotCard";
const hoursWithIntervals = [
{
hour: "9:00am -10:00am",
id: 1,
checked: false,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"9:00am -9:10 am",
"9:10am - 9:20 am ",
"9:20am - 9:30 am",
"9:30am - 9:40am",
"9:40am-9:50 am",
"9:50am-10:00 am ",
],
},
{
hour: "10:00am -11:00am",
checked: false,
id: 2,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"10:00am - 10:10 am",
"10:10am - 10:20 am",
"10:20am -10:30 am",
"10:30am -10:40 am",
"10:40am- 10:50 am",
"10:50am- 11:00 am",
],
},
{
hour: "11:00am -12:00pm",
checked: false,
id: 3,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"11:00am-11:10am",
"11:10am-11:20am",
"11:20am-11:30am",
"11:30am-11:40am",
"11:40am-11:50am",
"11:50am-12:00pm",
],
},
{
hour: "12:00pm - 1:00 pm",
id: 4,
checked: false,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"12:00pm-12:10pm",
"12:10pm-12:20pm",
"12:20pm-12:30pm",
"12:30pm-12:40pm",
"12:40pm-12:50pm",
"12:50pm-1:00pm",
],
},
{
hour: "1:00pm - 2:00 pm",
checked: false,
id: 5,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"1:00pm-1:10pm",
"1:10pm-1:20pm",
"1:20pm-1:30pm",
"1:30pm-1:40pm",
"1:40pm-1:50pm",
"1:50pm-2:00pm",
],
},
{
hour: "2:00pm - 3:00 pm",
checked: false,
id: 6,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"2:00pm-2:10pm",
"2:10pm-2:20pm",
"2:20pm-2:30pm",
"2:30pm-2:40pm",
"2:40pm-2:50pm",
"2:50pm-3:00pm",
],
},
{
hour: "3:00pm - 4:00 pm",
checked: false,
id: 7,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"3:00pm-3:10pm",
"3:10pm-3:20pm",
"3:20pm-3:30pm",
"3:30pm-3:40pm",
"3:40pm-3:50pm",
"3:50pm-4:00pm",
],
},
{
hour: "4:00pm - 5:00 pm",
checked: false,
id: 8,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"4:00pm-4:10pm",
"4:10pm-4:20pm",
"4:20pm-4:30pm",
"4:30pm-4:40pm",
"4:40pm-4:50pm",
"4:50pm-5:00pm",
],
},
{
hour: "5:00pm - 6:00 pm",
id: 9,
checked: false,
totaltimeworked: "total time worked : 1:00:00",
intervals: [
"5:0pm-5:10pm",
"5:10pm-5:20pm",
"5:20pm-5:30pm",
"5:30pm-5:40pm",
"5:40pm-5:50pm",
"5:50pm-6:00pm",
],
},
];
const ScreenShotTimeInterval = () => {
const [isScreenSelected, setIsScreenSelected] = useState(
Array(hoursWithIntervals.length * 6).fill(false)
);
const [parentHourSelected, setParentHourSelected] = useState(
Array(hoursWithIntervals.length).fill(false)
);
const isAllIntervalsSelected = (hourIndex) => {
const startingIndex = hourIndex * 6;
const endIndex = startingIndex + 6;
for (let i = startingIndex; i < endIndex; i++) {
if (!isScreenSelected[i]) {
return false;
}
}
return true;
};
const handleParentCheckboxChange = (e, hourIndex) => {
const checked = e.target.checked;
const updatedScreenSelected = [...isScreenSelected];
const startingIndex = hourIndex * 6;
for (let i = startingIndex; i < startingIndex + 6; i++) {
updatedScreenSelected[i] = checked;
}
setIsScreenSelected(updatedScreenSelected);
const updatedParentSelected = [...parentHourSelected];
updatedParentSelected[hourIndex] = checked;
setParentHourSelected(updatedParentSelected);
};
const handleIntervalCheckboxChange = (hourIndex, intervalIndex, checked) => {
setIsScreenSelected((prev) => {
const updated = [...prev];
updated[hourIndex * 6 + intervalIndex] = checked;
const allIntervalsSelected = isAllIntervalsSelected(hourIndex);
const updatedParentSelected = [...parentHourSelected];
updatedParentSelected[hourIndex] = allIntervalsSelected;
setParentHourSelected(updatedParentSelected);
return updated;
});
};
return (
<>
{hoursWithIntervals.map((hourData, hourIndex) => (
<div key={hourIndex}>
<div className={classes.various_point_of_seen_screenshot}>
<input
className={classes.user_can_select_when_hover}
type="checkbox"
id={`hour _ ${hourData.id}`}
onChange={(e) => handleParentCheckboxChange(e, hourIndex)}
checked={parentHourSelected[hourIndex]}
/>
<h4>{hourData.hour} </h4>
<h5>{hourData.totaltimeworked} </h5>
</div>
<div className={classes.various_time_interval_screen_shot}>
{hourData.intervals.map((interval, intervalIndex) => (
<div
key={intervalIndex}
className={classes.various_projects_where_you_can_see}
>
<label className={classes.interval_based_on_hour}>IT</label>
<div className={classes.list_of_to_dos}>
<label className={classes.not_to_do}>No-to-dos</label>
<ScreenShotCard
key={intervalIndex}
timeInterval={interval}
onChange={(isChecked) =>
handleIntervalCheckboxChange(
hourIndex,
intervalIndex,
isChecked
)
}
checked={isScreenSelected[hourIndex * 6 + intervalIndex]}
/>
</div>
</div>
))}
</div>
</div>
))}
;
</>
);
};
export default ScreenShotTimeInterval;
this is parent component and this is child component import React, { useContext, useState, useEffect } from "react";
import classes from "./ScrrenShotCard.module.css";
import userImage from "../../images/screenshot.png";
import { BsPencil } from "react-icons/bs";
import { RiContactsBookLine, RiDeleteBin6Line } from "react-icons/ri";
import { TbPhotoX } from "react-icons/tb";
import { SelectedScreenContext } from "../../Store/SelectedScreenContext";
const ScreenShotCard = ({ checked, allIntervalsSelected, onChange }) => {
const handleCheckboxChange = (e) => {
if (!allIntervalsSelected) {
onChange(e.target.checked);
}
};
const { handleViewButton } = useContext(SelectedScreenContext);
const handleImageClick = () => {
handleViewButton();
};
return (
<div className={classes.userScreen}>
<div className={classes.functionality_of_button}>
<img
className={classes.user_screen_image}
src={userImage}
alt="user Screen"
/>
<button className={classes.functionality_to_see_screen}>
3 screens
</button>
<div className={classes.various_information_when_hover_it}>
<div className={classes.various_screen_can_delete}>
<div>
<input
className={classes.user_can_select_when_hover}
type="checkbox"
id="customCheckbox"
onChange={handleCheckboxChange}
checked={checked}
disabled={allIntervalsSelected}
/>
</div>
<div className={classes.various_icon_clicked_for_action}>
<TbPhotoX className={classes.photo_can_be_cancel} />
<RiDeleteBin6Line className={classes.screen_delete_icon} />
</div>
</div>
<div>
<button
className={classes.press_button_to_view_screen}
onClick={handleImageClick}
>
View screen
</button>
</div>
</div>
</div>
<div className={classes.various_information_of_time_interval}>
<div className={classes.various_time_section_for_screenshot}>
<label>2:00 pm - 2:10pm</label>
<div>
<span>
<BsPencil />
</span>
</div>
</div>
<div className={classes.progress_bar}>
<div className={classes.sub_section_of_progress_bar}></div>
</div>
<div>
<p> 7% of 9 minutes</p>
</div>
</div>
</div>
);
};
export default ScreenShotCard;
here i am facing some issue
