mardi 23 juin 2020

how to compare object prop with pathname React

iam stuck with an if statement where i have to check if the Objects prop is equal to my pathname. i have 4 objects with different onSite path one for each page.

matchEditorSteps :onSite: '/matches/:matchId/' Pathname: /matches/38705/edit/

matchSteps :onSite: '/matches/:matchId/' Pathname: /matches/:matchId/

matchSequenceSteps:onSite: '/matches/:matchId/edit/sequence/:sequenceId/' Pathname: /matches/:matchId/edit/sequence/:sequenceId/

matchSiteSteps :onSite: '/matches/' Pathname: /matches/

i've tried some if statements but it doenst work. only for matchSiteSteps.

This is my Tutorial Component where i have to check it:

import matchSiteSteps from '../tutorial/steps/matchSiteSteps'
import matchSteps from '../tutorial/steps/matchSteps'
import matchEditorSteps from '../tutorial/steps/matchEditorSteps'
import matchSequenceSteps from '../tutorial/steps/matchSequenceSteps'

class Tutorial extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      steps: []
    }
  }
  
 render () {
    let { steps } = this.state
    const pathname = this.props.location.pathname
    const siteSteps = [matchSteps, matchEditorSteps,matchSequenceSteps,matchSiteSteps]

    // have to check it Here 
    for (let i = 0; i < siteSteps.length; i++) {
      if (pathname === siteSteps[i].onSite && siteSteps[i].part === 'full') {
        steps = siteSteps[i].steps
      }
    }
    
 return (
      <>
        <Joyride
          ...
        />
      </>
    )
  }
}

export default withRouter(Tutorial)

and the Objects are all like this :

const matchEditorSteps = {
  name: 'matchEditorSteps',
  onSite: '/matches/:matchId/edit/',
  part: 'full',
  steps: [{
    target: '.row',
    title: '',
    content: 'something interesting',
    placement: 'center',
    disableBeacon: true
  }
    ]
}

export default matchEditorSteps

i've tried something like this:

for (let i = 0; i < siteSteps.length; i++) {
      if (pathname === siteSteps[i].onSite && siteSteps[i].part === 'full') {
        steps = siteSteps[i].steps
      } else if (pathname.startsWith(siteSteps[i].onSite.slice(0, 9)) && pathname.endsWith(siteSteps[i].onSite.slice(17, 23) && pathname.match('\\d+') && siteSteps[i].part === 'full')) {
        steps = siteSteps[i].steps
      } else if (pathname.startsWith(siteSteps[i].onSite.slice(0, 9)) && siteSteps[i].onSite.includes('sequence') && siteSteps[i].part === 'full') {
        steps = siteSteps[i].steps
      } else if (pathname.startsWith(siteSteps[i].onSite.slice(0, 9)) && pathname.match('\\d+') && siteSteps[i].part === 'full') {
        steps = siteSteps[i].steps
      }
    }

but he did not set the right steps and i have no clue how to check it right.

thanks for helping me.

Aucun commentaire:

Enregistrer un commentaire