HandleNext function in SelectedWillType Component for handling next button functionality

PHOTO

Thu Dec 14 2023 05:15:19 GMT+0000 (Coordinated Universal Time)

Saved by @alfred555 #react.js

const handleNext = async (
    step: number,
    stepName?: any,
    completed?: boolean,
  ) => {
    console.log('STEPNUMBER', step);
    window.scrollTo(0, 0);
    setStepCompleted(completed);
    setCurrentSelectedStep(step);
    // Revert Active Service Funtionalities back to initial state on first handleNext Step
    dispatch(setIsChangeService(false));
    // dispatch(setIsCompleteWillInfo(false));
    dispatch(setModifyAppointment(false));
    // dispatch(setIsUpgradeWill(false));

    // Set upgradeWill flag to false if next clicked from Personal Details
    if (stepName === 'personal') {
      dispatch(setIsUpgradeWill(false));
    }

    // Completed Step handling --> remove after testing
    // if (completed === false) {
    //   const completedSteps = [...newCompletedSteps];
    //   const newSteps = completedSteps.filter((s: any) => s !== step);
    //   const unique = newSteps.filter(
    //     (item, index) => newSteps.indexOf(item) === index,
    //   );
    //   setNewCompletedSteps(newSteps);
    // }

    // Show selection option in Real Estate Distribution for Property Will up on next from beneficiary Details
    if (step === 5) {
      dispatch(clearSelectedDistribution());
    }

    // If quick booking is enabled
    if (isQuickBooking && stepName !== 'willTypeSelection') {
      setActiveStep(8);
      if (stepName === 'bookAppointment') {
        setActiveStep((prev) => prev + 1);
      }
    } else if (!isQuickBooking && stepName !== 'willTypeSelection') {
      // setActiveStep(3);
    }

    if (stepName === 'personal' && isQuickBooking) {
      setShowSkipToAppointmentModal(true);
    }

    // If upload documents is active and Book appointment is visible
    if (stepName === 'upload' && !isShowBookAppointment) {
      // Incomplete steps API called here
      try {
        const response = await trackPromise(
          api.validateWillSteps(
            profileGuid,
            spouseGuid,
            isSpouseSelected ? spouseGuid : profileGuid,
            serviceId,
          ),
        );
        // Save incomplete steps list in store (redux)
        dispatch(getIncompleteSteps(response?.data?.Output));
        const incompletedSteps = response?.data?.Output;
        const testatorIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === profileGuid);
        const spouseIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === spouseGuid);
        console.log('testatorIncompleteSteps', testatorIncompleteSteps);
        console.log('spouseIncompleteSteps', spouseIncompleteSteps);

        // Mirror Will && Testator
        if (mirrorWillCheck && !isSpouseSelected) {
          if (testatorIncompleteSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
            // alert('go to next step');
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(13));
          }
        } else if (mirrorWillCheck && isSpouseSelected) { // Mirror Will && Spouse
          if (spouseIncompleteSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(13));
          }
        }

        if (singleWillCheck) {
          // Show incomplete steps Modal only if the response is not empty
          if (incompletedSteps.length !== 0) {
            handleShowIncompleteStepsModal();
          } else {
          // Ask for confirmation on this functionality
            setIsShowBookAppointment(true);
            // Set View component, highlighted step in stepper and icon
            dispatch(setHighlightedSteps(9));
            dispatch(setNavigationIndex(9));
            dispatch(getNewActiveStep(21));
            setNewCompletedSteps((prev: any) => [...prev, 3, 4, 5, 6, 7, 8]);
          // dispatch(storeActiveStep(9));
          }
        }
      } catch (error) {
        console.log(error);
      }
    } else if (stepName === 'beneficiary-details' && willTypeID !== 1) {
      // Not needed for Full Will
      // If property and beneficiray is added then only we can navigate or go next to Real Estate Distribution
      if (propertyAdded && beneficiaryAdded) {
        dispatch(setHighlightedSteps(6));
        dispatch(getNewActiveStep(getStepIDFromBeneficiaryStep(willTypeID)));
        dispatch(setNavigationIndex(null));
        // // Highlighted step handled here
        // dispatch(setHighlightedSteps(step + 1));
        // // Set Current step number
        // dispatch(disableNavigation());
        // setCurrentSelectedStep(step);
        // // getWillStep(step);
        // const nextIndex = (currentIndex + 1) % stepNumber.length;
        // setCurrentIndex(nextIndex);

        // // setActiveStep((prevActiveStep) => prevActiveStep + 1);
        // // Need more testing here
        // setCurrentBtnStep(step + 1);
        // setActiveStep((prevActiveStep) => prevActiveStep + 1);
        // dispatch(storeActiveStep(step));
        // dispatch(getNewActiveStep(0));
        // dispatch(setNavigationIndex(null));
      } else {
        await dispatch<any>(resetErrorState());
        await dispatch<any>(setErrorInfo(`Please complete Beneficiary Details and ${getThirdStepName(willTypeID)}`));
      }
    } else {
      // ----------------------------------------------------------------
      // Highlighted step handled here
      // dispatch(setHighlightedSteps(step + 1));
      // // Test case
      // // getWillStep(step);
      // dispatch(disableNavigation());
      // const nextIndex = (currentIndex + 1) % stepNumber.length;
      // setCurrentIndex(nextIndex);
      // // dispatch(storeActiveStep(activeStep + 1));

      // // Get stepNumber list from the stepList array
      // const stepNumberList: any = results?.map((res) => Number(res?.stepNumber));

      // // // Handling ICONS navigation in handleNext()
      // if (step === 3) {
      //   setIconNum1(3);
      //   setIconNum2(6);
      // } else if (step === 6) {
      //   setIconNum1(6);
      //   setIconNum2(9);
      // } else if (step === 9) {
      //   if (willTypeID === 2) {
      //     // Guardianship Will
      //     setIconNum1(7);
      //     setIconNum2(10);
      //   } else {
      //     setIconNum1(8);
      //     setIconNum2(11);
      //   }
      // } else if (step > stepNumberList[stepNumberList.length - 2]) {
      //   // setIconNum1(8);
      //   // setIconNum2(11);
      //   navigate('/wills');
      // }

      // // Handle distribution of shares/Real estate distribution in ICONS
      // if (step === 7) {
      //   setIconNum1(6);
      //   setIconNum2(9);
      // }

      // // Set current step to pass as a prop to the further components to use
      // //  the handleNext method in those respective components
      // // NB:increment the step number by 1 to get correct list of completed steps
      // setCurrentBtnStep(step + 1);

      // let newSkipped = skipped;
      // if (isStepSkipped(activeStep)) {
      //   newSkipped = new Set(newSkipped.values());
      //   newSkipped.delete(activeStep);
      // }
      // // Increment activestep from state
      // setActiveStep((prevActiveStep) => prevActiveStep + 1);
      // // Increment currentStep from store state
      // dispatch(storeActiveStep(step));
      // dispatch(setStepFlow());
      // setSkipped(newSkipped);
      // dispatch(getNewActiveStep(0));

      // if (navigationEnabled) {
      //   setNewCompletedSteps((prevSteps: any) => [
      //     ...prevSteps,
      //     completed ? navigationIndex : null,
      //   ]);
      //   dispatch(setCompletedStepList(completed ? navigationIndex : null));
      //   dispatch(storeActiveStep(navigationIndex));
      //   setActiveStep(navigationIndex);
      // } else {
      //   setNewCompletedSteps((prevStep: any) => [
      //     ...prevStep,
      //     completed ? step : null,
      //   ]);
      //   dispatch(setCompletedStepList(completed ? step : null));
      //   // setNewCompletedSteps((prevStep: any) => [...prevStep,step]);
      // }

      // ----------------------------------------------------------------

      // Stepper/Next Optimisations
      dispatch(setHighlightedSteps(step + 1));
      dispatch(storeActiveStep(step));
      dispatch(getNewActiveStep(0));
      dispatch(setNavigationIndex(step + 1));
      // dispatch(setNavigationIndex(null));

      setNewCompletedSteps((prev:any) => [...prev,completed ? step : null]);
    }
  };

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

#react.js #sorting

Creating Sortable Tables With React — Smashing Magazine

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);
  
  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = key => {
    let direction = 'ascending';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  }

  return { items: sortedItems, requestSort };
}

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

#css #react.js #frontend #styling

underline hover effect on text when hovering its parent wrapper

// copy paste react
return (
<>
<style>
{`
.animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;}

.animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;}

.wrapper:hover .animated-text::after, .wrapper:hover .animated-text {
            transform: scaleX(1);}

//or (removing redundant, see if it works)
.wrapper:hover .animated-text1::after{
            transform: scaleX(1);}
 `}
<style>
<button className="wrapper">
<p className="animated-text">click</p>
</button>
</>
)

useWorker | useWorker

https://useworker.js.org/

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

GRID material ui

<Grid container><Grid item></Grid></Grid>

Browse more snippets >>