[bug] added validators to 404 routes for dynamic routes

src/web/src/Pages/PostPage.tsx

@@ -27,6 +27,7 @@ import { AiOutlineLike, AiOutlineDislike, AiOutlineStar } from 'react-icons/ai';
 import { FaShare } from 'react-icons/fa';
 import { RiUserFollowLine } from 'react-icons/ri';
 import { RiUserUnfollowFill } from 'react-icons/ri';
+import { useNotFound } from '../hooks/useNotFound';
 
 //import gear from '../assets/svg/gear.svg';
 
@@ -361,6 +362,8 @@ const PostPage = () => {
       fetchRelatedData();
    }, [postData, currPostData, userCache, fetchUsers]);
 
+   useNotFound(postData || currPostData);
+
    if (isLoading) {
       return (
          <>

src/web/src/Pages/game/CS2/CS2MapLineups.tsx

@@ -1,8 +1,9 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Layout, GrenadeSelection, CS2Radar } from '../../../Components';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Navigate } from 'react-router-dom';
 import { AuthContext } from '../../../App';
 import { Coordinate } from '../../../global.types';
+import { isValidCS2Map } from '../../../util/validation';
 
 import Decoy from '../../../assets/svg/decoy.svg';
 import Smoke from '../../../assets/svg/smoke.svg';
@@ -72,6 +73,11 @@ const CS2Lineups: React.FC = () => {
    const navigate = useNavigate();
    const { mapName } = useParams<{ mapName: string }>();
    const [mapImage, setMapImage] = useState('');
+
+   // Add validation check
+   if (!mapName || !isValidCS2Map(mapName)) {
+      return <Navigate to="/*" replace />;
+   }
    const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
    // TOGGLE BUTTONS
    const [activeButton, setActiveButton] = useState<string | null>(null);

src/web/src/Pages/game/Valorant/ValorantLineups.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Layout, MapSelectionSkeleton } from '../../../Components';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, Navigate } from 'react-router-dom';
 import useValorant from '../../../hooks/useValorant';
+import { isValidValorantAgent } from '../../../util/validation';
 
 const MINIMUM_SKELETON_TIME = 300;
 
@@ -11,6 +12,10 @@ const ValorantLineups: React.FC = () => {
    const { agentName } = useParams<{ agentName: string }>();
    const [showContent, setShowContent] = useState<boolean>(false);
 
+   if (!isValidValorantAgent(agentName)) {
+      return <Navigate to="/*" replace />;
+   }
+
    useEffect(() => {
       if (!isLoading) {
          const timer = setTimeout(() => {

src/web/src/Pages/game/Valorant/ValorantMapLineups.tsx

@@ -1,11 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Layout, Dot } from '../../../Components';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, Navigate } from 'react-router-dom';
 import { AuthContext } from '../../../App';
 import { getPostByCoordinate, getPostByGrenade } from '../../../util/getPost';
 import { Coordinate, ValorantMaps, ValorantAgent } from '../../../global.types';
 import { MapInteractionCSS } from 'react-map-interaction';
 import { useValorant } from '../../../hooks/index';
+import {
+   isValidValorantAgent,
+   isValidValorantMap,
+} from '../../../util/validation';
 import Modal from 'react-modal';
 import axios from 'axios';
 
@@ -64,16 +68,28 @@ const ValorantLineups: React.FC = () => {
          setSelectedAbility(ability);
       }
    };
+
+   // checks if valid agent and map
+   if (!agentName || !isValidValorantAgent(agentName))
+      return <Navigate to="/*" replace />;
+   if (!mapName || !isValidValorantMap(mapName))
+      return <Navigate to="/*" replace />;
+
    const { allAgents, setAgentDetails, allMaps } = useValorant();
    const navigate = useNavigate();
    const handleClick = (mapName: string) => {
       setSelectedDot('');
       setSelectedAbility(null);
-      const formattedAgentName = agentName === 'KAY/O' ? 'KAYO' : agentName;
-      navigate(
-         `/game/Valorant/agents/${formattedAgentName}/lineups/${mapName}`,
-      );
+      if (isValidValorantMap(mapName)) {
+         const formattedAgentName = agentName === 'KAY/O' ? 'KAYO' : agentName;
+         navigate(
+            `/game/valorant/agents/${formattedAgentName}/lineups/${mapName}`,
+         );
+      } else {
+         navigate('/*');
+      }
    };
+
    const [modalIsOpen, setModalIsOpen] = useState(false);
    useEffect(() => {
       const handleResize = () => {

src/web/src/hooks/useNotFound.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useNotFound = (condition: boolean | null | undefined) => {
+   const navigate = useNavigate();
+
+   useEffect(() => {
+      if (
+         condition === false ||
+         condition === null ||
+         condition === undefined
+      ) {
+         navigate('/*');
+      }
+   }, [condition, navigate]);
+
+   return condition;
+};

src/web/src/util/validation.ts

@@ -0,0 +1,69 @@
+export const allowedValorantAgents = [
+   'gekko',
+   'fade',
+   'breach',
+   'deadlock',
+   'raze',
+   'chamber',
+   'kayo',
+   'skye',
+   'cypher',
+   'sova',
+   'killjoy',
+   'harbor',
+   'vyse',
+   'viper',
+   'phoenix',
+   'astra',
+   'brimstone',
+   'iso',
+   'clove',
+   'neon',
+   'yoru',
+   'sage',
+   'reyna',
+   'omen',
+   'jett',
+].map((agent) => agent.toLowerCase());
+
+export const allowedValorantMaps = [
+   'Ascent',
+   'Split',
+   'Fracture',
+   'Breeze',
+   'Bind',
+   'Haven',
+   'Icebox',
+   'Lotus',
+   'Sunset',
+   'Pearl',
+   'Abyss',
+];
+
+export const allowedCS2Maps = [
+   'Ancient',
+   'Vertigo',
+   'Mirage',
+   'Anubis',
+   'Dust 2',
+   'Inferno',
+   'Nuke',
+   'Overpass',
+];
+
+export const isValidValorantAgent = (
+   agentName: string | undefined,
+): boolean => {
+   if (!agentName) return false;
+   return allowedValorantAgents.includes(agentName.toLowerCase());
+};
+
+export const isValidValorantMap = (mapName: string | undefined): boolean => {
+   if (!mapName) return false;
+   return allowedValorantMaps.includes(mapName);
+};
+
+export const isValidCS2Map = (mapName: string | undefined): boolean => {
+   if (!mapName) return false;
+   return allowedCS2Maps.includes(mapName);
+};