fix: Sort Timeline (#801)

bicstone · Jun 26, 2023 · 3896464 · 3896464
1 parent c37a3e2
commit 3896464
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/features/Timeline/TimelineVirtualizedList.tsx b/src/features/Timeline/TimelineVirtualizedList.tsx
@@ -21,6 +21,7 @@ export const query = graphql`
     nodes {
       __typename
       id
+      dateX: date(formatString: "X")
       ... on ArticlesYaml {
         ...TimelineArticleCard
       }
@@ -113,6 +114,13 @@ export const TimelineVirtualizedList = ({
   const minHeightSingleColumn = (CARD_HEIGHT + 24) * (items.nodes.length + 1);
   const minHeightDoubleColumn = minHeightSingleColumn / 2;
 
+  // XXX: Gatsby でなぜかソートされないことがあるため
+  // クライアント側でもう一回ソートする
+  // 重くなるため早めに原因特定したい
+  const sortedItems = Array.from(items.nodes).sort((a, b) => {
+    return Number(b.dateX) - Number(a.dateX);
+  });
+
   const FallBack = (): JSX.Element => (
     <div
       aria-busy="true"
@@ -131,7 +139,7 @@ export const TimelineVirtualizedList = ({
   return (
     <NoSsr defer fallback={<FallBack />}>
       <VirtuosoGrid
-        data={items.nodes}
+        data={sortedItems}
         components={{
           List: Container,
         }}

diff --git a/src/generated/graphqlTypes.ts b/src/generated/graphqlTypes.ts
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -46,12 +46,6 @@ const NotFound = (): JSX.Element => {
         >
           {TRANSLATION.notFound.backToTimeline}
         </Button>
-        <Button
-          component={RouterLink}
-          variant="outlined"
-          to="/"
-          color="secondary"
-        ></Button>
       </div>
     </Container>
   );