feat(categories): link c to games and split input on >

src/components/ModForm.tsx

@@ -8,13 +8,13 @@ import React, {
   useRef,
   useState
 } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { FixedSizeList as List } from 'react-window'
 import { v4 as uuidv4 } from 'uuid'
 import { T_TAG_VALUE } from '../constants'
 import { useAppSelector, useGames, useNDKContext } from '../hooks'
-import { appRoutes, getModPageRoute } from '../routes'
+import { appRoutes, getGamePageRoute, getModPageRoute } from '../routes'
 import '../styles/styles.css'
 import { Categories, DownloadUrl, ModDetails, ModFormState } from '../types'
 import {
@@ -256,6 +256,9 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
       tags
     }
 
+    console.log(unsignedEvent)
+    return
+
     const signedEvent = await window.nostr
       ?.signEvent(unsignedEvent)
       .then((event) => event as Event)
@@ -507,6 +510,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
         onChange={handleInputChange}
       />
       <CategoryAutocomplete
+        game={formState.game}
         lTags={formState.lTags}
         LTags={formState.LTags}
         setFormState={setFormState}
@@ -901,12 +905,14 @@ const GameDropdown = ({
 }
 
 interface CategoryAutocompleteProps {
+  game: string
   lTags: string[]
   LTags: string[]
   setFormState: (value: React.SetStateAction<ModFormState>) => void
 }
 
 export const CategoryAutocomplete = ({
+  game,
   lTags,
   LTags,
   setFormState
@@ -970,10 +976,11 @@ export const CategoryAutocomplete = ({
   }
   const handleAddNew = () => {
     if (inputValue) {
+      const value = inputValue.trim()
       const newOption: Categories = {
-        name: inputValue,
-        hierarchy: inputValue,
-        l: [inputValue]
+        name: value,
+        hierarchy: value,
+        l: value.split('>').map((s) => s.trim())
       }
       setSelectedCategories([...selectedCategories, newOption])
       setInputValue('')
@@ -1100,9 +1107,15 @@ export const CategoryAutocomplete = ({
             const heirarchicalCategories = hierarchy.split(`:`)
             const categories = heirarchicalCategories
               .map<React.ReactNode>((c: string) => (
-                <a className='IBMSMSMBSSCategoriesBoxItem'>
+                <Link
+                  to={{
+                    pathname: getGamePageRoute(game),
+                    search: `c=${c}`
+                  }}
+                  className='IBMSMSMBSSCategoriesBoxItem'
+                >
                   <p>{capitalizeEachWord(c)}</p>
-                </a>
+                </Link>
               ))
               .reduce((prev, curr) => [
                 prev,

src/pages/mod/index.tsx

@@ -28,6 +28,7 @@ import '../../styles/tags.css'
 import '../../styles/write.css'
 import { DownloadUrl, ModPageLoaderResult } from '../../types'
 import {
+  capitalizeEachWord,
   copyTextToClipboard,
   downloadFile,
   getFilenameFromUrl
@@ -103,10 +104,10 @@ export const ModPage = () => {
                         featuredImageUrl={mod.featuredImageUrl}
                         title={mod.title}
                         body={mod.body}
+                        game={mod.game}
                         screenshotsUrls={mod.screenshotsUrls}
                         tags={mod.tags}
                         LTags={mod.LTags}
-                        lTags={mod.lTags}
                         nsfw={mod.nsfw}
                         repost={mod.repost}
                         originalAuthor={mod.originalAuthor}
@@ -426,10 +427,10 @@ type BodyProps = {
   featuredImageUrl: string
   title: string
   body: string
+  game: string
   screenshotsUrls: string[]
   tags: string[]
   LTags: string[]
-  lTags: string[]
   nsfw: boolean
   repost: boolean
   originalAuthor?: string
@@ -437,12 +438,12 @@ type BodyProps = {
 
 const Body = ({
   featuredImageUrl,
+  game,
   title,
   body,
   screenshotsUrls,
   tags,
   LTags,
-  lTags,
   nsfw,
   repost,
   originalAuthor
@@ -545,9 +546,15 @@ const Body = ({
                   const heirarchicalCategories = hierarchy.split(`:`)
                   const categories = heirarchicalCategories
                     .map<React.ReactNode>((c: string) => (
-                      <a className='IBMSMSMBSSCategoriesBoxItem'>
-                        <p>{c}</p>
-                      </a>
+                      <ReactRouterLink
+                        className='IBMSMSMBSSCategoriesBoxItem'
+                        to={{
+                          pathname: getGamePageRoute(game),
+                          search: `c=${c}`
+                        }}
+                      >
+                        <p>{capitalizeEachWord(c)}</p>
+                      </ReactRouterLink>
                     ))
                     .reduce((prev, curr) => [
                       prev,