Add string-ts and use it in useRoutes()

package.json

@@ -36,6 +36,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "5.2.0",
         "real-cancellable-promise": "^1.1.2",
+        "string-ts": "2.2.0",
         "styled-components": "5.3.5",
         "styled-jsx": "3.4.5",
         "typed-immutable-map": "^0.1.1",

src/webapp/hooks/useRoutes.ts

@@ -1,5 +1,7 @@
 import React from "react";
+import { join } from "string-ts";
 import { generatePath, useHistory } from "react-router-dom";
+
 import { FormType } from "../pages/form-page/FormPage";
 
 export enum RouteName {
@@ -14,7 +16,7 @@ export enum RouteName {
 
 const formTypes = ["disease-outbreak-event"] as const satisfies FormType[];
 
-const formType = `:formType(${formTypes.join("|")})` as const;
+const formType = `:formType(${join(formTypes, "|")})` as const;
 
 export const routes: Record<RouteName, string> = {
     [RouteName.CREATE_FORM]: `/create/${formType}`,

yarn.lock

@@ -10553,6 +10553,11 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
+[email protected]:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/string-ts/-/string-ts-2.2.0.tgz#46573f475f90f9b43c50cd01c9a603c83426bd25"
+  integrity sha512-VTP0LLZo4Jp9Gz5IiDVMS9WyLx/3IeYh0PXUn0NdPqusUFNgkHPWiEdbB9TU2Iv3myUskraD5WtYEdHUrQEIlQ==
+
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"