chore(validation): add validation for all routes

src/__tests__/RouteSelector.spec.jsx

@@ -551,7 +551,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/media/my-room/mediaDirectory/my-directory-name",
+            "/sites/site-name/media/images/mediaDirectory/images%2Fmy%20directory%20name",
           ]}
         >
           <LoggedInContextProvider>
@@ -617,7 +617,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/folders/my-folder/subfolders/my-subfolder",
+            "/sites/site-name/folders/my-folder/subfolders/my%20subfolder",
           ]}
         >
           <LoggedInContextProvider>
@@ -693,7 +693,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/folders/my-folder/subfolders/my-subfolder/editPage/my-file",
+            "/sites/site-name/folders/my-folder/subfolders/my%20subfolder/editPage/my-file",
           ]}
         >
           <LoggedInContextProvider>

src/layouts/Media/Media.tsx

@@ -58,7 +58,12 @@ import {
 } from "features/FeatureTour/FeatureTourSequence"
 import { MediaData } from "types/directory"
 import { MediaFolderTypes, MediaLabels, SelectedMediaDto } from "types/media"
-import { DEFAULT_RETRY_MSG, useErrorToast, useSuccessToast } from "utils"
+import {
+  DEFAULT_RETRY_MSG,
+  specialCharactersRegexTest,
+  useErrorToast,
+  useSuccessToast,
+} from "utils"
 
 import { CreateButton } from "../components"
 import { SiteEditLayout } from "../layouts"
@@ -259,7 +264,7 @@ export const Media = (): JSX.Element => {
       setSelectedMedia([])
       onCreateMediaFolderModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       if (variables.selectedPages.length === 0) {
         successToast({
           id: "create-directory-success",
@@ -280,7 +285,7 @@ export const Media = (): JSX.Element => {
         `${url}%2F${encodeURIComponent(variables.newDirectoryName)}`
       )
     },
-    onError: (err, variables, context) => {
+    onError: () => {
       errorToast({
         id: "create-directory-error",
         description: `Your ${singularDirectoryLabel} could not be created successfully. ${DEFAULT_RETRY_MSG}`,
@@ -296,15 +301,15 @@ export const Media = (): JSX.Element => {
       setSelectedMedia([])
       onMoveModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       successToast({
         id: "move-multiple-media-success",
         description: `Successfully moved ${
           variables.items.length === 1 ? singularMediaLabel : pluralMediaLabel
         }!`,
       })
     },
-    onError: (err, variables, context) => {
+    onError: (err, variables) => {
       errorToast({
         id: "move-multiple-media-error",
         description: `Your ${
@@ -318,7 +323,7 @@ export const Media = (): JSX.Element => {
     mutate: deleteMultipleMedia,
     isLoading: isDeleteMultipleMediaLoading,
   } = useDeleteMultipleMediaHook(params, {
-    onSettled: (data, error, variables, context) => {
+    onSettled: (data, error, variables) => {
       if (variables.length === 1) {
         setSelectedMedia(
           selectedMedia.filter((selectedData) =>
@@ -333,15 +338,15 @@ export const Media = (): JSX.Element => {
       if (individualMedia) setIndividualMedia(null)
       onDeleteModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       successToast({
         id: "delete-multiple-media-success",
         description: `Successfully deleted ${
           variables.length === 1 ? singularMediaLabel : pluralMediaLabel
         }!`,
       })
     },
-    onError: (err, variables, context) => {
+    onError: (err, variables) => {
       errorToast({
         id: "delete-multiple-media-error",
         description: `Your ${
@@ -724,16 +729,42 @@ export const Media = (): JSX.Element => {
           path={[`${path}/editMediaSettings/:fileName`]}
           component={MediaSettingsScreen}
           onClose={() => history.goBack()}
+          validate={{
+            fileName: (value) => {
+              const encodedName = value.split(".").slice(0, -1).join(".")
+              return !specialCharactersRegexTest.test(encodedName)
+            },
+          }}
         />
         <ProtectedRouteWithProps
           path={[`${path}/deleteDirectory/:mediaDirectoryName`]}
           component={DeleteWarningScreen}
           onClose={() => history.goBack()}
+          validate={{
+            mediaDirectoryName: (value) => {
+              // NOTE: This value is prepended with either `files|images/`
+              // and nested directories are separated by `/` as well.
+              const decodedValues = decodeURIComponent(value).split("/")
+              return decodedValues.every(
+                (val) => !specialCharactersRegexTest.test(val)
+              )
+            },
+          }}
         />
         <ProtectedRouteWithProps
           path={[`${path}/editDirectorySettings/:mediaDirectoryName`]}
           component={DirectorySettingsScreen}
           onClose={() => history.goBack()}
+          validate={{
+            mediaDirectoryName: (value) => {
+              // NOTE: This value is prepended with either `files|images/`
+              // and nested directories are separated by `/` as well.
+              const decodedValues = decodeURIComponent(value).split("/")
+              return decodedValues.every(
+                (val) => !specialCharactersRegexTest.test(val)
+              )
+            },
+          }}
         />
       </Switch>
     </>

src/layouts/ResourceRoom/ResourceRoom.tsx

@@ -62,13 +62,20 @@ import { useErrorToast, useSuccessToast } from "utils/toasts"
 
 import { DirectoryData, DirectoryInfoProps } from "types/directory"
 import { ResourceRoomRouteParams } from "types/resources"
-import { DEFAULT_RETRY_MSG, deslugifyDirectory } from "utils"
+import {
+  DEFAULT_RETRY_MSG,
+  deslugifyDirectory,
+  resourceCategoryRegexTest,
+} from "utils"
 
 import { ResourceRoomNameUpdateProps } from "../../types/directory"
 import { SiteEditLayout } from "../layouts"
 
 import { CategoryCard, ResourceBreadcrumb } from "./components"
 
+const INVALID_CHAR_MESSAGE =
+  "Please ensure that you only use alphanumeric characters with dashes and space!"
+
 const EmptyResourceRoom = () => {
   const params = useParams<ResourceRoomRouteParams>()
   const { siteName } = params
@@ -142,6 +149,10 @@ const EmptyResourceRoom = () => {
                 placeholder="Resource room name"
                 {...register("newDirectoryName", {
                   required: "Please enter resource room name",
+                  pattern: {
+                    value: resourceCategoryRegexTest,
+                    message: INVALID_CHAR_MESSAGE,
+                  },
                 })}
               />
               <FormErrorMessage>
@@ -375,10 +386,14 @@ const ResourceRoomContent = ({
               >
                 <FormLabel>Resource room title</FormLabel>
                 <Input
-                  placeholder="New resource room name"
+                  placeholder="New resource oom name"
                   {...register("newDirectoryName", {
                     required:
                       "Please ensure that you have entered a resource room name!",
+                    pattern: {
+                      value: resourceCategoryRegexTest,
+                      message: INVALID_CHAR_MESSAGE,
+                    },
                   })}
                 />
                 <FormErrorMessage>
@@ -394,7 +409,7 @@ const ResourceRoomContent = ({
                 <Button
                   type="submit"
                   isLoading={isUpdateResourceRoomNameLoading}
-                  isDisabled={isWriteDisabled}
+                  isDisabled={isWriteDisabled || !!errors.newDirectoryName}
                 >
                   Save
                 </Button>

src/routing/ProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import { Box, Center, Spinner } from "@chakra-ui/react"
 import { useGrowthBook } from "@growthbook/growthbook-react"
 import axios from "axios"
-import _ from "lodash"
+import _, { identity } from "lodash"
 import { useEffect } from "react"
 import { Redirect, Route, RouteProps, useLocation } from "react-router-dom"
 
@@ -12,6 +12,8 @@ import { getSiteNameAttributeFromPath } from "utils/growthbook"
 
 import { GBAttributes } from "types/featureFlags"
 
+import { WithValidator } from "./types"
+
 // axios settings
 axios.defaults.withCredentials = true
 
@@ -25,7 +27,7 @@ export const ProtectedRoute = ({
   children,
   component: WrappedComponent,
   ...rest
-}: RouteProps): JSX.Element => {
+}: WithValidator<RouteProps>): JSX.Element => {
   const {
     displayedName,
     isLoading,
@@ -35,8 +37,27 @@ export const ProtectedRoute = ({
     contactNumber,
   } = useLoginContext()
   const growthbook = useGrowthBook()
+
   const currPath = useLocation().pathname
   const siteNameFromPath = getSiteNameAttributeFromPath(currPath)
+  const { validate } = rest
+
+  const validateParams = (
+    params: Record<string, string | undefined> | undefined
+  ) => {
+    return _.entries(params)
+      .map(([key, value]) => {
+        // NOTE: There's no provided validation function
+        // so we will assume it's valid
+        if (!validate?.[key]) return true
+
+        // NOTE: If the value is falsy, we will return true as there's nothing to validate
+        if (!value) return true
+
+        return validate[key](value)
+      })
+      .every(identity)
+  }
 
   useEffect(() => {
     if (growthbook) {
@@ -75,7 +96,19 @@ export const ProtectedRoute = ({
   }
 
   if (displayedName && children) {
-    return <Route {...rest}>{children}</Route>
+    return (
+      <Route {...rest}>
+        {({ match }) => {
+          const isValid = validateParams(match?.params)
+
+          if (!isValid) {
+            return <Redirect to="/not-found" />
+          }
+
+          return <>{children}</>
+        }}
+      </Route>
+    )
   }
 
   if (displayedName && WrappedComponent) {
@@ -84,11 +117,17 @@ export const ProtectedRoute = ({
         {...rest}
         render={(props) => {
           const { match } = props
-          const { params } = match
+          const isValid = validateParams(match?.params)
+
+          if (!isValid) {
+            return <Redirect to="/not-found" />
+          }
+
           const newMatch = {
             ...match,
-            decodedParams: getDecodedParams(prune(params)),
+            decodedParams: getDecodedParams(prune(match.params)),
           }
+
           return <WrappedComponent {...rest} {...props} match={newMatch} />
         }}
       />

src/routing/ProtectedRouteWithProps.tsx

@@ -4,13 +4,16 @@ import { RouteProps as BaseRouteProps } from "react-router-dom"
 import FallbackComponent from "components/FallbackComponent"
 
 import { ProtectedRoute } from "./ProtectedRoute"
+import { WithValidator } from "./types"
 
 type RouteProps = {
   component?: () => JSX.Element
   onClose: () => void
 } & BaseRouteProps
 
-export const ProtectedRouteWithProps = (props: RouteProps): JSX.Element => {
+export const ProtectedRouteWithProps = (
+  props: WithValidator<RouteProps>
+): JSX.Element => {
   return (
     <Sentry.ErrorBoundary fallback={FallbackComponent}>
       <ProtectedRoute {...props} />