src/components/ModForm.tsx

@@ -26,7 +26,7 @@ import {
 import { CheckboxField, InputError, InputField } from './Inputs'
 import { RelayController } from '../controllers'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { appRoutes, getModPageRoute } from '../routes'
+import { appRoutes, getModsInnerPageRoute } from '../routes'
 import { DownloadUrl, ModFormState, ModDetails } from '../types'
 import { LoadingSpinner } from './LoadingSpinner'
 import { T_TAG_VALUE } from '../constants'
@@ -281,7 +281,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
         relays: publishedOnRelays
       })
 
-      navigate(getModPageRoute(naddr))
+      navigate(getModsInnerPageRoute(naddr))
     }
 
     setIsPublishing(false)

src/pages/home.tsx

@@ -9,7 +9,7 @@ import { ModCard } from '../components/ModCard'
 import { LANDING_PAGE_DATA } from '../constants'
 import { RelayController } from '../controllers'
 import { useDidMount } from '../hooks'
-import { appRoutes, getModPageRoute } from '../routes'
+import { appRoutes, getModsInnerPageRoute } from '../routes'
 import { ModDetails } from '../types'
 import {
   extractModData,
@@ -182,7 +182,7 @@ const SlideContent = ({ naddr }: SlideContentProps) => {
           <a
             className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
             role='button'
-            onClick={() => navigate(getModPageRoute(naddr))}
+            onClick={() => navigate(getModsInnerPageRoute(naddr))}
           >
             Check it out
           </a>
@@ -230,7 +230,7 @@ const DisplayMod = ({ naddr }: DisplayModProps) => {
 
   if (!mod) return <Spinner />
 
-  const route = getModPageRoute(naddr)
+  const route = getModsInnerPageRoute(naddr)
 
   return (
     <ModCard
@@ -249,12 +249,10 @@ const DisplayLatestMods = () => {
   const [latestMods, setLatestMods] = useState<ModDetails[]>([])
 
   useDidMount(() => {
-    fetchMods({ source: window.location.host })
+    fetchMods({ source: window.location.host, limit: 4 })
       .then((res) => {
-        const mods = res
+        res.sort((a, b) => b.published_at - a.published_at)
-          .sort((a, b) => b.published_at - a.published_at)
+        setLatestMods(res)
-          .slice(0, 4)
-        setLatestMods(mods)
       })
       .finally(() => {
         setIsFetchingLatestMods(false)
@@ -271,7 +269,7 @@ const DisplayLatestMods = () => {
           <Spinner />
         ) : (
           latestMods.map((mod) => {
-            const route = getModPageRoute(
+            const route = getModsInnerPageRoute(
               nip19.naddrEncode({
                 identifier: mod.aTag,
                 pubkey: mod.author,

src/pages/innerMod.tsx

@@ -53,7 +53,7 @@ import {
 } from '../utils'
 import FsLightbox from 'fslightbox-react'
 
-export const ModPage = () => {
+export const InnerModPage = () => {
   const { naddr } = useParams()
   const [modData, setModData] = useState<ModDetails>()
   const [isFetching, setIsFetching] = useState(true)

src/pages/mods.tsx

@@ -12,7 +12,7 @@ import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
 import { MetadataController } from '../controllers'
 import { useAppSelector, useDidMount } from '../hooks'
-import { getModPageRoute } from '../routes'
+import { getModsInnerPageRoute } from '../routes'
 import '../styles/filters.css'
 import '../styles/pagination.css'
 import '../styles/search.css'
@@ -208,7 +208,7 @@ export const ModsPage = () => {
             <div className='IBMSecMain IBMSMListWrapper'>
               <div className='IBMSMList'>
                 {filteredModList.map((mod) => {
-                  const route = getModPageRoute(
+                  const route = getModsInnerPageRoute(
                     nip19.naddrEncode({
                       identifier: mod.aTag,
                       pubkey: mod.author,

src/routes/index.tsx

@@ -2,7 +2,7 @@ import { AboutPage } from '../pages/about'
 import { BlogsPage } from '../pages/blogs'
 import { GamesPage } from '../pages/games'
 import { HomePage } from '../pages/home'
-import { ModPage } from '../pages/mod'
+import { InnerModPage } from '../pages/innerMod'
 import { ModsPage } from '../pages/mods'
 import { ProfilePage } from '../pages/profile'
 import { SettingsPage } from '../pages/settings'
@@ -14,7 +14,7 @@ export const appRoutes = {
   home: '/home',
   games: '/games',
   mods: '/mods',
-  mod: '/mod/:naddr',
+  modsInner: '/mods-inner/:naddr',
   about: '/about',
   blog: '/blog',
   submitMod: '/submit-mod',
@@ -27,8 +27,8 @@ export const appRoutes = {
   profile: '/profile/:nprofile'
 }
 
-export const getModPageRoute = (eventId: string) =>
+export const getModsInnerPageRoute = (eventId: string) =>
-  appRoutes.mod.replace(':naddr', eventId)
+  appRoutes.modsInner.replace(':naddr', eventId)
 
 export const getModsEditPageRoute = (eventId: string) =>
   appRoutes.editMod.replace(':naddr', eventId)
@@ -54,8 +54,8 @@ export const routes = [
     element: <ModsPage />
   },
   {
-    path: appRoutes.mod,
+    path: appRoutes.modsInner,
-    element: <ModPage />
+    element: <InnerModPage />
   },
   {
     path: appRoutes.about,