I want to apply delete all functionality . and also want to apply individual delete functionality i am working on react

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

Please say more. That’s a lot of code, so we need to know more details about the issue

actually i make a parent component where i have hours and each hour have some intervals . and each interval have its own input i want that if user select hour input then it’s child input must be selected and if not then interval hour is also works.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.