import React from 'react' import { Match } from 'react-router-dom' import _isEmpty from 'lodash/isEmpty' import { ApiInterface } from 'types' import { ExploreApiBreadcrumbs, ExploreApiLink, ExploreApiConst } from 'components' import * as S from './styled' type Param = { name: string } type Method = { params?: Param[] description?: string type?: string } type Props = { api: ApiInterface match: Match } const 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'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> ) } export default Subcategory