component composition, params, and setReduxState [12:37pm]

[frankcollins3]

attempting to do: make what worked in react-express and react-redux-connect-redux with NextJS 13.0.3 && @redux/toolkit

error: component-comp that wraps child and asserts animation upon {children} works, but the redux execution doesn't.

proposed approach: 0: dismantle animation and assert animation upon hover with jquery function

[frankcollins3]

elemClick moved outside of the component composition and added as a parameter to the component-composition

    const elemClick = (event:any) => {     
        let src:string = event.target.src    
        console.log('src')
        console.log(src)
        let length:number = src.length
        let hrefCheck:string = src.slice(0, 4);
        let imgCheck:string = src.slice(length - 3, length)    
        if (hrefCheck === 'http' && imgCheck === 'png' || imgCheck === 'jpeg') {
          // dispatch(setImg(src))
          dispatch(SET_NON_GOOGLE_IMG_URL(src))
          dispatch(TOGGLE_SELECT_ICON_SCREEN())
        //   dispatch(setImg("/water_img/bikini.png"))
        //   dispatch(iconScreenFlag())
        //   if (boat === false) showBoat()
          $(event.target)
          .animate({
            top: '100px'
          }, 500)       
        }
        return
      }

<Boop rotateAngle={45} speed={800} setImg={SET_NON_GOOGLE_IMG_URL} iconScreenFlag={TOGGLE_SELECT_ICON_SCREEN} showBoat={TOGGLE_SPIN_BOTTLE_SHOW_INPUT} boat={SPIN_BOTTLE_SHOW_INPUT} className={styles.img} **clickFunc={elemClick}**>

click function is not a function. This function and JSX live in same component. <Boop> wraps {child} [12:54pm]

[frankcollins3]

👎 dispatch(setImg(src)) 👍 dispatch(iconScreenFlag())

dispatch(SET_NON_GOOGLE_IMG(url)) does work though [12:57pm]

[frankcollins3]

👎 import { TOGGLE_SPIN_BOTTLE_SHOW_INPUT, TOGGLE_SELECT_ICON_SCREEN, SET_NON_GOOGLE_IMG_URL } from "redux/icons/iconsSlice" 👍 import { TOGGLE_SPIN_BOTTLE_SHOW_INPUT, TOGGLE_SELECT_ICON_SCREEN } from "redux/icons/iconsSlice" import { SET_NON_GOOGLE_IMG } from "redux/logInOutGoogle/logInOutGoogleSlice"

was allowing an import without returning error from the wrong redux slice.

👍 found this out by dismantling the component composition and seeing SET_IMG_URL() not work // which it wasn't doing in the puppeteer & web retrieving functionality that uses same redux state

{/ /}

            <img onClick={test} className={styles.img} src={bucket}/>

    {/* </Boop> */}

I went to check for this approach because in this use of component-composition: // the original element is wiped away, so any click events don't work, the click event would be within component-comp

      {React.Children.map(children, (child, index) => {
        const styledChild = React.cloneElement(child, {
          className: className,
          style: {
            margin: 0
          },
          onMouseEnter: boopBehaviorEnter,
          onMouseLeave: boopBehaviorLeave,
          onClick: elemClick 
        });

        return styledChild;
      })}
    </div>

[1:03pm]

[frankcollins3]

👍