components#ExploreApiBreadcrumbs TypeScript Examples

Category = ({ api, match }: Props) => {
  const { category } = match.params

  return (
    <S.Wrapper>
      <S.Title>
        <S.CategoryName>
          <strong>{category}</strong>
          <S.SearchPlaceholder />
        </S.CategoryName>
        <ExploreApiBreadcrumbs match={match} />
      </S.Title>
      {_isEmpty(api.description[category]) ? (
        <S.Empty>There&apos;s nothing in here ?</S.Empty>
      ) : (
        Object.entries(api.description[category].categories)
          .sort((a: [string, Method], b: [string, Method]) => {
            return a[0] < b[0] ? -1 : 1
          })
          .map((item: [string, Method], idx) => (
            <ExploreApiLink
              key={`exploreApi-subcategory-${idx}`}
              to={`${match.url}/${item[0]}`}
              name={item[0]}
              description={item[1].description}
            />
          ))
      )}
    </S.Wrapper>
  )
}

storiesOf('COMPONENTS|ExploreApiBreadcrumbs', module)
  .addDecorator(story => (
    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('default', () => {
    const urlKnob = text(
      'apiexplorer.polkalert.com/explore-api/',
      'query/staking',
      'other'
    )

    return (
      <div style={{ padding: '24px' }}>
        <ExploreApiBreadcrumbs match={{ url: `/explore-api/${urlKnob}` }} />
      </div>
    )
  })

Subcategory = ({ api, match }: Props) => {
  const { category, subcategory } = match.params

  return (
    <S.Wrapper>
      <S.Title>
        <S.CategoryName>
          <div>
            <strong>{subcategory}</strong>
            <span>
              Available {category === 'consts' ? 'consts' : 'methods'}:
            </span>
          </div>
        </S.CategoryName>
        <ExploreApiBreadcrumbs match={match} />
      </S.Title>
      {/* We have to disable ESLint here because it doesn't
      play nicely with Prettier */}
      {/* eslint-disable indent */}
      {_isEmpty(api.description[category]?.categories[subcategory]?.methods) ? (
        <S.Empty>There&apos;s nothing in here ?</S.Empty>
      ) : (
        Object.entries(
          api.description[category]?.categories[subcategory]?.methods
        )
          .sort((a: [string, Method], b: [string, Method]) => {
            return a[0] < b[0] ? -1 : 1
          })
          .map((item: [string, Method], idx) =>
            category === 'consts' ? (
              <ExploreApiConst
                key={`exploreApi-const-${idx}`}
                name={item[0]}
                path={`api.consts.${subcategory}.${item[0]}`}
                type={item[1].type}
                description={item[1].description}
                value={JSON.stringify(
                  api.promise[category][subcategory][item[0]]
                )}
              />
            ) : (
              <ExploreApiLink
                key={`exploreApi-subcategory-${idx}`}
                to={`${match.url}/${item[0]}`}
                name={item[0]}
                params={item[1].params}
                description={item[1].description}
              />
            )
          )
      )}
      {/* eslint-enable indent */}
    </S.Wrapper>
  )
}

Method = ({ api, match }: Props) => {
  const location = useLocation()
  const history = useHistory()
  const { category, subcategory, method } = match.params
  const [data, setData] = useState<Method>()
  const [paramInputs, setParamInputs] = useState<ParamFormatted[]>([])
  const [funcResult, setFuncResult] = useState<FuncResult>({
    message: 'Fill out the required params and click the "Run test" button.',
    level: 'info'
  })

  const requirements = [
    {
      key: 'isSigned',
      name: 'signed'
    },
    {
      key: 'isSubscription',
      name: 'a subscription'
    }
  ]

  useDidMount(() => {
    if (api.description[category]?.categories[subcategory]?.methods[method]) {
      setData(api.description[category].categories[subcategory].methods[method])
    }
  })

  useDidUpdate(() => {
    if (data && !_isEmpty(data)) {
      const paramsFormatted: ParamFormatted[] = data.params.map((o: Param) => ({
        ...o,
        value: ''
      }))

      setParamInputs(paramsFormatted)

      if (data.isSigned || data.isSubscription) {
        setFuncResult({
          message: "This function can't be tested.",
          level: 'error'
        })
      }
    }
  }, [data])

  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    idx: number
  ) => {
    if (paramInputs) {
      const paramsFormatted = _cloneDeep(paramInputs)

      paramsFormatted[idx].value = e.target.value
      setParamInputs(paramsFormatted)
    }
  }

  const handleRunTest = () => {
    if (_some(paramInputs, o => !o.isOptional && !o.value)) {
      setFuncResult({
        message: 'You have to fill out all the required params!',
        level: 'error'
      })
    } else {
      const params = paramInputs.map(o => o.value)
      const fn = api.promise[category][subcategory][method]

      if (data && !data.isConstant) {
        fn(...params)
          .then(res => {
            setFuncResult({
              message: JSON.stringify(res),
              level: 'result'
            })
          })
          .catch(err => {
            setFuncResult({
              message: JSON.stringify(err.message),
              level: 'error'
            })
          })
      } else {
        setFuncResult({
          message: JSON.stringify(fn),
          level: 'result'
        })
      }
    }
  }

  const handleReset = () => {
    setFuncResult({
      message: 'Fill out the required params and click the "Run test" button.',
      level: 'info'
    })
  }

  return category === 'consts' ? (
    <Redirect to="/explore-api" />
  ) : data ? (
    <S.Wrapper>
      <S.Title>
        <S.CategoryName>
          <div>
            <strong>
              {method}(
              {data.params && (
                <>
                  <span> {data.params.map(o => o.name).join(', ')} </span>
                </>
              )}
              )
            </strong>
            {data.description && <div>{data.description}</div>}
          </div>
          <div>
            {location?.state?.search && (
              <Button
                fluid
                theme="outline"
                text="< Back to search"
                onClick={() =>
                  history.push({
                    pathname: `/search/${location.state.search}`,
                    state: { routeName: 'Search' }
                  })
                }
              />
            )}
          </div>
        </S.CategoryName>
        <ExploreApiBreadcrumbs match={match} />
      </S.Title>
      {_isEmpty(data) ? (
        <S.Empty>There&apos;s nothing in here ?</S.Empty>
      ) : (
        <S.Content>
          <div>
            <S.Header>Can be tested?</S.Header>
            {requirements.map((item, idx) => (
              <S.Requirement key={`requirement-${idx}`} isOk={!data[item.key]}>
                <SVG
                  src={data[item.key] ? '/icons/close.svg' : '/icons/check.svg'}
                >
                  <img
                    src={
                      data[item.key] ? '/icons/close.svg' : '/icons/check.svg'
                    }
                    alt={data[item.key] ? 'not testable' : 'is testable'}
                  />
                </SVG>
                {data[item.key] ? `Is ${item.name}` : `Is not ${item.name}`}
              </S.Requirement>
            ))}
          </div>
          <div>
            <S.Header>Return type</S.Header>
            {data.type && <S.ReturnType>{data.type}</S.ReturnType>}
          </div>
          <S.Params>
            <S.Header>Params</S.Header>
            {_isEmpty(paramInputs) ? (
              <S.NoParams>
                This function doesn&apos;t have any params.
              </S.NoParams>
            ) : (
              paramInputs &&
              paramInputs.map((item, idx) => (
                <div key={`paramInput-${idx}`}>
                  <S.ParamName isOptional={item.isOptional}>
                    <strong>{item.name}:</strong>
                    {` ${item.type}`}
                    <span>{item.isOptional ? 'Optional' : 'Required!'}</span>
                  </S.ParamName>
                  {!data.isSigned && !data.isSubscription && (
                    <Input
                      fluid
                      value={item.value}
                      onChange={e => handleInputChange(e, idx)}
                    />
                  )}
                </div>
              ))
            )}
            <Button
              fluid
              disabled={data.isSigned || data.isSubscription}
              text={
                data.isSigned || data.isSubscription
                  ? 'Test unavailable'
                  : 'Run test'
              }
              onClick={handleRunTest}
              style={{ marginTop: '8px' }}
            />
          </S.Params>
          <div>
            <S.Header>Test result</S.Header>
            <S.FuncResult fluid padding="16px 24px" level={funcResult.level}>
              <button onClick={handleReset}>RESET</button>
              {funcResult.message}
            </S.FuncResult>
          </div>
        </S.Content>
      )}
    </S.Wrapper>
  ) : null
}