Extract routes into global enum and rename them (#109)

src/App.tsx

@@ -6,16 +6,17 @@ import { BacklogView } from "./components/BacklogView"
 import { EpicView } from "./components/EpicView"
 import { StoryMapView } from "./components/StoryMapView"
 import { StoryMapDashboard } from "./components/StoryMapView/StoryMapDashboard"
+import { RouteNames } from "./route-names";
 
 export function App() {
   return (
     <Routes>
       <Route path="/" index element={<Login />} />
       <Route element={<Layout />}>
-        <Route path="projectsview" element={<ProjectsView />} />
-        <Route path="backlogview" element={<BacklogView />} />
-        <Route path="epicview" element={<EpicView />} />
-        <Route path="storymapview">
+        <Route path={RouteNames.PROJECTS_VIEW} element={<ProjectsView />} />
+        <Route path={RouteNames.BACKLOG_VIEW} element={<BacklogView />} />
+        <Route path={RouteNames.EPIC_VIEW} element={<EpicView />} />
+        <Route path={RouteNames.STORY_MAP_VIEW}>
           <Route index element={<StoryMapDashboard />} />
           <Route path=":storyMapId" element={<StoryMapView />} />
         </Route>

src/components/BacklogView/BacklogView.tsx

@@ -35,6 +35,7 @@ import { DraggableIssuesWrapper } from "./IssuesWrapper/DraggableIssuesWrapper"
 import { SprintsPanel } from "./IssuesWrapper/SprintsPanel"
 import { ReloadButton } from "./ReloadButton"
 import { useColorScheme } from "../../common/color-scheme"
+import { RouteNames } from "../../route-names"
 
 export function BacklogView() {
   const colorScheme = useColorScheme()
@@ -132,7 +133,7 @@ export function BacklogView() {
             <Text>
               Please go back to the Projects View section and select a project
             </Text>
-            <Button onClick={() => navigate("/projectsview")}>Go back</Button>
+            <Button onClick={() => navigate(RouteNames.PROJECTS_VIEW)}>Go back</Button>
           </Stack>
         )}
       </Center>
@@ -143,7 +144,7 @@ export function BacklogView() {
         <Group>
           <Group gap="xs" c="dimmed">
             <Text
-              onClick={() => navigate("/projectsview")}
+              onClick={() => navigate(RouteNames.PROJECTS_VIEW)}
               style={{
                 ":hover": {
                   textDecoration: "underline",

src/components/EpicView/EpicView.tsx

@@ -7,6 +7,7 @@ import {CreateIssueModal} from "../CreateIssue/CreateIssueModal";
 import {EpicWrapper} from "./EpicWrapper";
 import {getEpics} from "./helpers/queryFetchers";
 import {useColorScheme} from "../../common/color-scheme";
+import {RouteNames} from "../../route-names";
 
 export function EpicView() {
   const colorScheme = useColorScheme()
@@ -32,7 +33,7 @@ export function EpicView() {
                   <Text>
                       Please go back to the Projects View section and select a project
                   </Text>
-                  <Button onClick={() => navigate("/projectsview")}>Go back</Button>
+                  <Button onClick={() => navigate(RouteNames.PROJECTS_VIEW)}>Go back</Button>
               </Stack>
           )}
       </Center>
@@ -43,7 +44,7 @@ export function EpicView() {
         <Group>
           <Group gap="xs" c="dimmed">
             <Text
-              onClick={() => navigate("/projectsview")}
+              onClick={() => navigate(RouteNames.PROJECTS_VIEW)}
               style={{
                 ":hover": {
                   textDecoration: "underline",

src/components/Login/Login.tsx

@@ -7,11 +7,12 @@ import { ColorSchemeToggle } from "../common/ColorSchemeToggle"
 import { JiraCloudLogin } from "./jira-cloud/JiraCloudLogin"
 import { JiraServerLogin } from "./jira-server/JiraServerLogin"
 import { useColorScheme } from "../../common/color-scheme";
+import { RouteNames } from "../../route-names";
 
 export function Login() {
   const [providerLogin, setProviderLogin] = useState("")
   const navigateTo = useNavigate()
-  const onSuccess = () => navigateTo("/projectsview")
+  const onSuccess = () => navigateTo(RouteNames.PROJECTS_VIEW)
   const goBack = () => setProviderLogin("")
   const colorScheme = useColorScheme()
 

src/components/ProjectsView/Table/ProjectsTable.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState, ChangeEvent } from "react"
 import { useNavigate } from "react-router-dom"
 import { useCanvasStore } from "../../../lib/Store"
 import { sortData } from "./TableHelper"
+import { RouteNames } from "../../../route-names"
 
 import classes from "./ProjectsTable.module.css";
 
@@ -49,7 +50,7 @@ export function ProjectsTable({ data }: { data: Project[] }) {
     setSelectedProject(row)
     setSelectedProjectBoardIds(await window.provider.getBoardIds(row.key))
     setIssueTypes(await window.provider.getIssueTypesByProject(row.key))
-    navigate("/backlogview")
+    navigate(RouteNames.BACKLOG_VIEW)
   }
 
   const header = data && data.length > 0 && Object.keys(data[0]).map((key) => {

src/components/layout/LayoutHeader.tsx

@@ -6,6 +6,7 @@ import { CreateIssueModal } from "../CreateIssue/CreateIssueModal"
 
 import { LogoutButton } from "./LogoutButton"
 import { StoryMapMenu } from "./StoryMapMenu"
+import { RouteNames } from "../../route-names"
 
 import classes from "./LayoutHeader.module.css"
 
@@ -31,21 +32,21 @@ export function LayoutHeader() {
           <Anchor
             component="button"
             type="button"
-            onClick={() => navigate("/projectsview")}
+            onClick={() => navigate(RouteNames.PROJECTS_VIEW)}
           >
             Projects
           </Anchor>
           <Anchor
             component="button"
             type="button"
-            onClick={() => navigate("/backlogview")}
+            onClick={() => navigate(RouteNames.BACKLOG_VIEW)}
           >
             Backlog
           </Anchor>
           <Anchor
             component="button"
             type="button"
-            onClick={() => navigate("/epicview")}>
+            onClick={() => navigate(RouteNames.EPIC_VIEW)}>
             Epics
           </Anchor>
           <StoryMapMenu />

src/components/layout/StoryMapMenu.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tabler/icons-react"
 import { useNavigate } from "react-router-dom"
 import { useStoryMapStore } from "../StoryMapView/StoryMapStore"
+import { RouteNames } from "../../route-names";
 
 export function StoryMapMenu() {
   const navigate = useNavigate()
@@ -20,7 +21,7 @@ export function StoryMapMenu() {
         <Anchor
           component="button"
           type="button"
-          onClick={() => navigate("/storymapview")}
+          onClick={() => navigate(RouteNames.STORY_MAP_VIEW)}
           style={{
             display: "flex",
           }}
@@ -34,7 +35,7 @@ export function StoryMapMenu() {
           <Menu.Item
             leftSection={<IconMap size={14} />}
             key={`layout-header-story-map-${storyMap.id}`}
-            onClick={() => navigate(`/storymapview/${storyMap.id}`)}
+            onClick={() => navigate(`${RouteNames.STORY_MAP_VIEW}/${storyMap.id}`)}
           >
             {storyMap.name}
           </Menu.Item>
@@ -43,7 +44,7 @@ export function StoryMapMenu() {
         {storyMaps?.length > 0 && <Menu.Divider />}
         <Menu.Item
           leftSection={<IconLayoutDashboard size={14} />}
-          onClick={() => navigate("/storymapview")}
+          onClick={() => navigate(RouteNames.STORY_MAP_VIEW)}
         >
           View All Story Maps
         </Menu.Item>

src/route-names.ts

@@ -0,0 +1,6 @@
+export enum RouteNames {
+  PROJECTS_VIEW = '/projectsView',
+  BACKLOG_VIEW = '/backlogView',
+  EPIC_VIEW = '/epicView',
+  STORY_MAP_VIEW = '/storyMapView',
+}