render links to token pages on server for indexing

blockworks-foundation · Mar 12, 2024 · 27013aa · 27013aa
1 parent df079a5
commit 27013aa
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 287 deletions.
diff --git a/app/components/explore/Category.tsx b/app/components/explore/Category.tsx
@@ -1,10 +1,6 @@
-'use client'
-
-import { useMemo, useState } from 'react'
 import { TokenPageWithData } from '../../../contentful/tokenPage'
 import { MangoTokenData } from '../../types/mango'
 import CategorySwitcher from './CategorySwitcher'
-import TableViewToggle from './TableViewToggle'
 import TokenTable from './TokenTable'
 import { TokenCategoryPage } from '../../../contentful/tokenCategoryPage'
 import { sortTokens } from './ExploreTokens'
@@ -22,12 +18,12 @@ const Category = ({
   tokensForCategory: TokenPageWithData[]
   mangoTokensData: MangoTokenData[]
 }) => {
-  const [showTableView, setShowTableView] = useState(true)
+  // const [showTableView, setShowTableView] = useState(true)
   const { category, slug } = categoryPageData
 
-  const sortedTokens = useMemo(() => {
-    return sortTokens(tokensForCategory)
-  }, [tokensForCategory])
+  // const sortedTokens = useMemo(() => {
+  //   return sortTokens(tokensForCategory)
+  // }, [tokensForCategory])
 
   const backgroundImageUrl = `/images/categories/${slug}.webp`
 
@@ -42,21 +38,20 @@ const Category = ({
         className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto py-10 md:py-16`}
       >
         <div className="mb-4 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between">
-          <p>{`${sortedTokens?.length} ${category} ${
-            sortedTokens?.length === 1 ? 'token' : 'tokens'
+          <p>{`${tokensForCategory?.length} ${category} ${
+            tokensForCategory?.length === 1 ? 'token' : 'tokens'
           } listed on Mango`}</p>
           <div className="flex space-x-2 mb-6 sm:mb-0">
             <CategorySwitcher categories={categoryPages} />
-            <TableViewToggle
+            {/* <TableViewToggle
               showTableView={showTableView}
               setShowTableView={setShowTableView}
-            />
+            /> */}
           </div>
         </div>
         <TokenTable
-          tokens={sortedTokens}
+          tokens={sortTokens(tokensForCategory)}
           mangoTokensData={mangoTokensData}
-          showTableView={showTableView}
         />
       </div>
     </>

diff --git a/app/components/explore/CategorySwitcher.tsx b/app/components/explore/CategorySwitcher.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { useEffect, useMemo, useState } from 'react'
 import Select from '../forms/Select'
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'

diff --git a/app/components/explore/ExploreTokens.tsx b/app/components/explore/ExploreTokens.tsx
@@ -1,51 +1,9 @@
-'use client'
-
 import { TokenPageWithData } from '../../../contentful/tokenPage'
 import { MangoTokenData } from '../../types/mango'
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
-import { ChangeEvent, useMemo, useState } from 'react'
-import Input from '../forms/Input'
 import TokenTable from './TokenTable'
-import TableViewToggle from './TableViewToggle'
 import { MAX_CONTENT_WIDTH } from '../../utils/constants'
 import PageHeader from './PageHeader'
-
-const generateSearchTerm = (item: TokenPageWithData, searchValue: string) => {
-  const normalizedSearchValue = searchValue.toLowerCase()
-  const nameValue = item.tokenName.toLowerCase()
-  const symbolValue = item.symbol.toLowerCase()
-
-  const isMatchingName = nameValue.includes(normalizedSearchValue)
-  const isMatchingSymbol = symbolValue.includes(normalizedSearchValue)
-  const matchingNamePercent = isMatchingName
-    ? normalizedSearchValue.length / item.tokenName.length
-    : 0
-  const matchingSymbolPercent = isMatchingSymbol
-    ? normalizedSearchValue.length / item.symbol.length
-    : 0
-
-  const matchingPercent = Math.max(matchingNamePercent, matchingSymbolPercent)
-
-  const matchingIdx =
-    matchingPercent === matchingNamePercent
-      ? nameValue.indexOf(normalizedSearchValue)
-      : symbolValue.indexOf(normalizedSearchValue)
-
-  return {
-    token: item,
-    matchingIdx,
-    matchingPercent,
-  }
-}
-
-const startSearch = (items: TokenPageWithData[], searchValue: string) => {
-  return items
-    .map((item) => generateSearchTerm(item, searchValue))
-    .filter((item) => item.matchingIdx >= 0)
-    .sort((i1, i2) => i1.matchingIdx - i2.matchingIdx)
-    .sort((i1, i2) => i2.matchingPercent - i1.matchingPercent)
-    .map((item) => item.token)
-}
+import TokensFilter from './TokensFilter'
 
 export const sortTokens = (tokens: TokenPageWithData[]) => {
   return tokens.sort((a, b) => {
@@ -71,17 +29,6 @@ const ExploreTokens = ({
   tokens: TokenPageWithData[]
   mangoTokensData: MangoTokenData[]
 }) => {
-  const [showTableView, setShowTableView] = useState(true)
-  const [searchString, setSearchString] = useState('')
-
-  const filteredTokens = useMemo(() => {
-    return searchString ? startSearch(tokens, searchString) : sortTokens(tokens)
-  }, [searchString, tokens])
-
-  const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchString(e.target.value)
-  }
-
   return (
     <>
       <PageHeader title="Explore listed tokens" />
@@ -91,25 +38,12 @@ const ExploreTokens = ({
         <div className="mb-4 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between">
           <p>{`${tokens?.length} tokens listed on Mango`}</p>
           <div className="flex space-x-2 mb-6 sm:mb-0">
-            <div className="relative w-full lg:mb-0 sm:w-44">
-              <Input
-                heightClass="h-10 pl-8"
-                type="text"
-                value={searchString}
-                onChange={handleUpdateSearch}
-              />
-              <MagnifyingGlassIcon className="absolute left-2 top-3 h-4 w-4 text-th-fgd-3" />
-            </div>
-            <TableViewToggle
-              showTableView={showTableView}
-              setShowTableView={setShowTableView}
-            />
+            <TokensFilter tokens={tokens} />
           </div>
         </div>
         <TokenTable
-          tokens={filteredTokens}
+          tokens={sortTokens(tokens)}
           mangoTokensData={mangoTokensData}
-          showTableView={showTableView}
         />
       </div>
     </>