Repository: thenewboston-developers/Website
File: src/containers/Teams/index.tsx (TypeScript)

Code before:
import React, {FC, ReactNode, useCallback, useEffect, useState} from 'react';
import {useHistory, useParams} from 'react-router-dom';

import {BreadcrumbMenu, EmptyPage, FlatNavLinks, PageTitle} from 'components';
import {getTeamMembers} from 'utils/data';
import {NavOption} from 'types/option';
import {TeamMember, TeamName, TeamsUrlParams} from 'types/teams';

import TeamMemberCard from './TeamMemberCard';
import './Teams.scss';

export const TEAMS: NavOption[] = [
  {pathname: 'all', title: TeamName.all},
  {pathname: 'back-end-developers', title: TeamName.backEndDevelopers},
  {pathname: 'community', title: TeamName.community},
  {pathname: 'design', title: TeamName.design},
  {pathname: 'dev-ops', title: TeamName.devOps},
  {pathname: 'discord-managers', title: TeamName.discordManagers},
  {pathname: 'dot-net-core', title: TeamName.dotnetCore},
  {pathname: 'front-end-developers', title: TeamName.frontEndDevelopers},
  {pathname: 'kotlin-sdk', title: TeamName.kotlinSDK},
  {pathname: 'marketing', title: TeamName.marketing},
  {pathname: 'new-user-operations', title: TeamName.newUserOperations},
  {pathname: 'payments', title: TeamName.payments},
  //   {pathname: 'penetration-testing', title: TeamName.penetrationTesting},
  {pathname: 'project-proposals', title: TeamName.projectProposals},
  {pathname: 'qa', title: TeamName.qa},
  {pathname: 'reddit-moderators', title: TeamName.redditModerators},
  {pathname: 'research', title: TeamName.research},
  {pathname: 'security', title: TeamName.security},
  {pathname: 'youtube', title: TeamName.youtube},
];

const teamMembers = getTeamMembers();

const Teams: FC = () => {
  const history = useHistory();
  const {team: teamParam} = useParams<TeamsUrlParams>();

Review comment (refactor):
Is it possible to refactor the team path names as constants? Just realised that the `ProfileInfo` page might need to link to the specific team's page using the path names

Code after:
import React, {FC, ReactNode, useCallback, useEffect, useState} from 'react';
import {useHistory, useParams} from 'react-router-dom';

import {BreadcrumbMenu, EmptyPage, FlatNavLinks, PageTitle} from 'components';
import {TeamPathname} from 'constants/teams';
import {getTeamMembers} from 'utils/data';
import {NavOption} from 'types/option';
import {TeamMember, TeamName, TeamsUrlParams} from 'types/teams';

import TeamMemberCard from './TeamMemberCard';
import './Teams.scss';

export const TEAMS: NavOption[] = [
  {pathname: TeamPathname.all, title: TeamName.all},
  {pathname: TeamPathname.backEndDevelopers, title: TeamName.backEndDevelopers},
  {pathname: TeamPathname.community, title: TeamName.community},
  {pathname: TeamPathname.design, title: TeamName.design},
  {pathname: TeamPathname.devOps, title: TeamName.devOps},
  {pathname: TeamPathname.discordManagers, title: TeamName.discordManagers},
  {pathname: TeamPathname.dotnetCore, title: TeamName.dotnetCore},
  {pathname: TeamPathname.frontEndDevelopers, title: TeamName.frontEndDevelopers},
  {pathname: TeamPathname.kotlinSDK, title: TeamName.kotlinSDK},
  {pathname: TeamPathname.marketing, title: TeamName.marketing},
  {pathname: TeamPathname.newUserOperations, title: TeamName.newUserOperations},
  {pathname: TeamPathname.payments, title: TeamName.payments},
  //   {pathname: TeamPathname.penetrationTesting, title: TeamName.penetrationTesting},
  {pathname: TeamPathname.projectProposals, title: TeamName.projectProposals},
  {pathname: TeamPathname.qa, title: TeamName.qa},
  {pathname: TeamPathname.redditModerators, title: TeamName.redditModerators},
  {pathname: TeamPathname.research, title: TeamName.research},
  {pathname: TeamPathname.security, title: TeamName.security},
  {pathname: TeamPathname.youtube, title: TeamName.youtube},
];

const teamMembers = getTeamMembers();

const Teams: FC = () => {
  const history = useHistory();