Sort stigmata set

src/pages/v2-pre/stigmata-sets/index.tsx

@@ -3,8 +3,8 @@ import { Box, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import { Flex, Link } from 'theme-ui'
 
-import { StigmataCatalogItem, StigmataSetCatalogItem } from '../../../lib/v2-pre/data/types'
+import { StigmataSetCatalogItem } from '../../../lib/v2-pre/data/types'
-import { loadStigmataCatalog, loadStigmataSetCatalog } from '../../../lib/v2-pre/server/loadData'
+import { loadStigmataSetCatalog } from '../../../lib/v2-pre/server/loadData'
 import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
 
 interface StigmataSetListPageProps {
@@ -16,33 +16,52 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
     <Box>
       <h1>Stigmata (Set)</h1>
       <Flex sx={{ flexWrap: 'wrap' }}>
-        {stigmataSetCatalog.map(stigmataSet => {
+        {stigmataSetCatalog
-          return (
+          .sort((a, b) => {
-            <Box key={stigmataSet.id} m={2}>
+            const aId = getId(a.id)
-              <Link href={`/v2-pre/stigmata-sets/${stigmataSet.id}`}>
+            const bId = getId(b.id)
-                <Card p={1}>
+            return bId - aId
-                  <Flex sx={{ justifyContent: 'center' }}>
+
-                    {stigmataSet.stigmataList.map(stigma => {
+            function getId(id: string): number {
-                      return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
+              if (id === '1290') {
-                    })}
+                return 129.5
-                  </Flex>
+              }
-                  <Box
+              if (id === '132') {
-                    sx={{
+                return 0.2
-                      overflow: 'hidden',
+              }
-                      textOverflow: 'ellipsis',
+              if (id === '120') {
-                      whiteSpace: 'nowrap',
+                return 0.1
-                      px: 1,
+              }
-                      textAlign: 'center'
+              return parseInt(id)
-                    }}
+            }
-                  >
+          })
-                    {stigmataSet.name}
+          .map(stigmataSet => {
-                  </Box>
+            return (
-                  {/* {stigma.id} */}
+              <Box key={stigmataSet.id} m={2}>
-                </Card>
+                <Link href={`/v2-pre/stigmata-sets/${stigmataSet.id}`}>
-              </Link>
+                  <Card p={1}>
-            </Box>
+                    <Flex sx={{ justifyContent: 'center' }}>
-          )
+                      {stigmataSet.stigmataList.map(stigma => {
-        })}
+                        return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
+                      })}
+                    </Flex>
+                    <Box
+                      sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        px: 1,
+                        textAlign: 'center'
+                      }}
+                    >
+                      {stigmataSet.name}
+                    </Box>
+                    {/* {stigma.id} */}
+                  </Card>
+                </Link>
+              </Box>
+            )
+          })}
       </Flex>
     </Box>
   )