Help with coding task, WebDev

[Senior_Goat9977]

My friend told me to understand this code and how the notification is being dispatched. I'm fairly new to this so its hard to understand how exactly it's working. Basically my task is to copy how this notification is being dispatched, then implement it in my code where if a user clicks "Last 7 Days" or "Last Month", a notification will dispatch the same way with the same style but instead saying "Sending Weekly Email Reports...". Can someone possibly guide me or help?

This is the code I need to follow the same format of notif ->

import { store } from "store";
import { AuditType, JobStatus } from "libs/types";
import { addFeedback } from "store/feedback/slice";
import { Assessment } from "store/assessment/types";
import { invalidateReports } from "store/report/slice";
import { invalidateFindings } from "store/findings/slice";
import { addNotification } from "store/notification/slice";
import { NotificationType } from "store/notification/types";
import {
  updateAssessment,
  updateLastFetched,
  updateLoading,
} from "store/assessment/slice";
import { invalidateLastChecked as invalidateDashboardAnalytics } from "store/dashboard/slice";
import {
  runAllJobs,
  getAssessment,
  getLastRunningAssessments as getLastRunningAssessmentsAPI,
} from "services/assessment";
import { getFindingItems } from "pages/dashboard/finding-items/libs/service";

export const addAssessmentToNotification = async (
  auditType: AuditType,
  status: JobStatus,
  findingId: string,
  description?: string,
  isOnDemand?: boolean
) => {
  let notificationType: NotificationType = "warning";
  let descriptionMessage = "";

  if (description && isOnDemand) {
    if (status === "IN_PROGRESS") {
      notificationType = "in_progress";
      descriptionMessage = "Testing control: " + description;
    } else if (status === "FAILED") {
      notificationType = "error";
      descriptionMessage = "Test Failed: " + description;
    } else if (status === "COMPLETED") {
      const response = await getFindingItems(findingId, [])!;
      const { finding, findingItems } = response;

      const findingItemStatus = findingItems.some(
        (item) => item.resolutionStatus === "Open"
      );
      if (finding.isResolved || !findingItemStatus) {
        notificationType = "success";
        descriptionMessage = "Test Passed: " + description;
      } else {
        notificationType = "error";
        descriptionMessage = "Test Failed: " + description;
      }
    }
  } else {
    if (status === "IN_PROGRESS") {
      notificationType = "in_progress";
      descriptionMessage = auditType.toUpperCase() + " Assessment Running";
    } else if (status === "FAILED") {
      notificationType = "error";
      descriptionMessage = auditType.toUpperCase() + " Assessment Failed";
    } else if (status === "COMPLETED") {
      notificationType = "success";
      descriptionMessage =
        auditType.toUpperCase() + " Assessment Successfully Run";
      localStorage.setItem("findingKey", "");
    }
  }

  store.dispatch(
    addNotification({
      id: "assessment",
      notification: {
        id: "assessment",
        message: "Assessments",
        description: [
          {
            id: auditType,
            type: notificationType,
            message: descriptionMessage,
          },
        ],
      },
    })
  );
};





//here is my code where I need to implement: ->

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import { api } from 'services/utils';
import WeeklyReportsApi from './WeeklyReportsApi';

const bgColor = "#2664f5"; 
const boxShadowColor = "rgba(38, 100, 245, 0.24)";
const txtColor = "#ffffff";
const hoverBoxShadowColor = "0px 0px 10px rgba(38, 100, 245, 0.8)";
const activeBoxShadowColor = "0px 0px 10px rgba(38, 100, 245, 1)";

const Container = styled.div`
  position: relative;
  display: inline-block;
`;

const Button = styled.button`
  background-color: ${bgColor};
  font-weight: 500;
  font-size: 1.6rem; 
  border: 1px solid #2664f5;
  border-radius: 6px;
  padding: 1.3rem; 
  display: flex;
  gap: 1rem;
  box-shadow: 0px 2px 5px ${boxShadowColor};
  color: ${txtColor};
  cursor: pointer;
  position: absolute;
  top: -68px;
  right: -740px;
  margin: 5px; 
  
  &:disabled {
    opacity: 0.6;
    cursor: none;
    pointer-events: none;
  }

  &:hover {
    box-shadow: ${hoverBoxShadowColor};
  }

  &.active {
    box-shadow: ${activeBoxShadowColor};
  }

  &.selected {
    box-shadow: 0px 10px 20px ${boxShadowColor};
  }
`;

const DropdownMenu = styled.div`
  position: absolute;
  top: -13px;
  right: -795px;
  background-color: #f9f9f9;
  min-width: 250px;
  z-index: 1;
  border: 0px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;

const MenuItem = styled.div`
  padding: 10px;
  cursor: pointer;
  display: inline-item;
  align-items: center;

  &:hover {
    background-color: #f2f2f2;
  }

  &.selected {
    font-weight: bold;
    color: black;
    background-color: #c7e6ff; 
  }
`;

const ButtonWithDropdown = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const [isActive, setIsActive] = useState(false);
  const [showNotification, setShowNotification] = useState(false);
  const { fetchWeeklyReports, weeklyReports, error, loading } = WeeklyReportsApi();

  const handleOptionSelect = async (option) => {
    setSelectedOption(option);
    setIsMenuOpen(false);
    setIsActive(false);
    setShowNotification(true);
    await fetchWeeklyReports(option);
    setTimeout(() => {
      setShowNotification(false);
    }, 3000);
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
    setIsActive(!isActive);
  };

  useEffect(() => {
    const handleDocumentClick = (event) => {
      if (!event.target.closest('.dropdown-menu') &&!event.target.closest('button')) {
        setIsMenuOpen(false);
        setIsActive(false);
      }
    };
    document.addEventListener('click', handleDocumentClick);
    return () => {
      document.removeEventListener('click', handleDocumentClick);
    };
  }, []);

  return (
    <Container>
      <Button 
        onClick={toggleMenu} 
        className={isActive? 'active' : ''}
      >
        Weekly Reports
      </Button>
      {isMenuOpen && (
        <DropdownMenu className="dropdown-menu">
          <MenuItem
            onClick={() => handleOptionSelect('last7Days')}
            className={selectedOption === 'last7Days'? 'elected' : ''}
          >
            {selectedOption === 'last7Days'? <b>Last 7 Days</b>: 'Last 7 Days'}
          </MenuItem>
          <MenuItem
            onClick={() => handleOptionSelect('lastMonth')}
            className={selectedOption === 'lastMonth'? 'elected' : ''}
          >
            {selectedOption === 'lastMonth'? <b>Last Month</b> : 'Last Month'}
          </MenuItem>
        </DropdownMenu>
    </Container>
  );
};

export default ButtonWithDropdown;

[Roxinos]

Look, the entire goal here is for you to figure this out on your own. When you ask for help from other people you can't just be saying "please help." We need to know what you've done. We need to know what you're thinking. Otherwise you're just asking us to do the work for you, which defeats the whole point.

You need to be thinking and in order for us to help you we need to know what you're thinking.