paginate stories

2021-06-22 12:47:49 -05:00 · 2021-06-22 12:47:49 -05:00 · f968ab7954
parent 31399c7547
commit f968ab7954
11 changed files with 544 additions and 239 deletions
--- a/api/resolvers/item.js
+++ b/api/resolvers/item.js
@ -2,6 +2,8 @@ import { UserInputError, AuthenticationError } from 'apollo-server-micro'
 import { ensureProtocol } from '../../lib/url'
 import serialize from './serial'

+const LIMIT = 5
+
 async function comments (models, id) {
  const flat = await models.$queryRaw(`
        WITH RECURSIVE base AS (
@ -18,22 +20,53 @@ async function comments (models, id) {
  return nestComments(flat, id)[0]
 }

+function decodeCursor (cursor) {
+  if (!cursor) {
+    return { offset: 0, time: new Date() }
+  } else {
+    const res = JSON.parse(Buffer.from(cursor, 'base64'))
+    res.time = new Date(res.time)
+    return res
+  }
+}
+
+function nextCursorEncoded (cursor) {
+  cursor.offset += LIMIT
+  return Buffer.from(JSON.stringify(cursor)).toString('base64')
+}
+
 export default {
  Query: {
-    items: async (parent, args, { models }) => {
-      return await models.$queryRaw(`
-        ${SELECT}
-        FROM "Item"
-        ${LEFT_JOIN_SATS}
-        WHERE "parentId" IS NULL
-        ${ORDER_BY_SATS}`)
-    },
-    recent: async (parent, args, { models }) => {
-      return await models.$queryRaw(`
-        ${SELECT}
-        FROM "Item"
-        WHERE "parentId" IS NULL
-        ORDER BY created_at DESC`)
+    moreItems: async (parent, { sort, cursor, userId }, { models }) => {
+      const decodedCursor = decodeCursor(cursor)
+      const items = userId
+        ? await models.$queryRaw(`
+          ${SELECT}
+          FROM "Item"
+          WHERE "userId" = $1 AND "parentId" IS NULL AND created_at <= $2
+          ORDER BY created_at
+          OFFSET $3
+          LIMIT ${LIMIT}`, Number(userId), decodedCursor.time, decodedCursor.offset)
+        : sort === 'hot'
+          ? await models.$queryRaw(`
+            ${SELECT}
+            FROM "Item"
+            ${timedLeftJoinSats(1)}
+            WHERE "parentId" IS NULL AND created_at <= $1
+            ${timedOrderBySats(1)}
+            OFFSET $2
+            LIMIT ${LIMIT}`, decodedCursor.time, decodedCursor.offset)
+          : await models.$queryRaw(`
+            ${SELECT}
+            FROM "Item"
+            WHERE "parentId" IS NULL AND created_at <= $1
+            ORDER BY created_at DESC
+            OFFSET $2
+            LIMIT ${LIMIT}`, decodedCursor.time, decodedCursor.offset)
+      return {
+        cursor: items.length === LIMIT ? nextCursorEncoded(decodedCursor) : null,
+        items
+      }
    },
    item: async (parent, { id }, { models }) => {
      const [item] = await models.$queryRaw(`
@ -43,13 +76,6 @@ export default {
      item.comments = comments(models, id)
      return item
    },
-    userItems: async (parent, { userId }, { models }) => {
-      return await models.$queryRaw(`
-        ${SELECT}
-        FROM "Item"
-        WHERE "userId" = $1 AND "parentId" IS NULL
-        ORDER BY created_at`, Number(userId))
-    },
    userComments: async (parent, { userId }, { models }) => {
      return await models.$queryRaw(`
        ${SELECT}
@ -213,11 +239,22 @@ const SELECT =
  `SELECT "Item".id, "Item".created_at as "createdAt", "Item".updated_at as "updatedAt", "Item".title,
  "Item".text, "Item".url, "Item"."userId", "Item"."parentId", ltree2text("Item"."path") AS "path"`

+function timedLeftJoinSats (num) {
+  return `LEFT JOIN (SELECT i.id, SUM("Vote".sats) as sats
+  FROM "Item" i
+  JOIN "Vote" ON i.id = "Vote"."itemId" AND "Vote".created_at <= $${num}
+  GROUP BY i.id) x ON "Item".id = x.id`
+}
+
 const LEFT_JOIN_SATS =
  `LEFT JOIN (SELECT i.id, SUM("Vote".sats) as sats
  FROM "Item" i
  JOIN "Vote" ON i.id = "Vote"."itemId"
  GROUP BY i.id) x ON "Item".id = x.id`

+function timedOrderBySats (num) {
+  return `ORDER BY (x.sats-1)/POWER(EXTRACT(EPOCH FROM ($${num} - "Item".created_at))/3600+2, 1.5) DESC NULLS LAST`
+}
+
 const ORDER_BY_SATS =
  'ORDER BY (x.sats-1)/POWER(EXTRACT(EPOCH FROM ((NOW() AT TIME ZONE \'UTC\') - "Item".created_at))/3600+2, 1.5) DESC NULLS LAST'
--- a/api/typeDefs/item.js
+++ b/api/typeDefs/item.js
@ -2,10 +2,8 @@ import { gql } from 'apollo-server-micro'

 export default gql`
  extend type Query {
-    items: [Item!]!
-    recent: [Item!]!
+    moreItems(sort: String!, cursor: String, userId: ID): Items
    item(id: ID!): Item
-    userItems(userId: ID!): [Item!]
    userComments(userId: ID!): [Item!]
    root(id: ID!): Item
  }
@ -17,6 +15,11 @@ export default gql`
    vote(id: ID!, sats: Int): Int!
  }

+  type Items {
+    cursor: String
+    items: [Item!]!
+  }
+
  type Item {
    id: ID!
    createdAt: String!
--- a/components/items.js
+++ b/components/items.js
@ -1,28 +1,74 @@
 import { useQuery } from '@apollo/client'
+import Button from 'react-bootstrap/Button'
 import Item, { ItemSkeleton } from './item'
 import styles from './items.module.css'
+import { MORE_ITEMS } from '../fragments/items'
+import { useState } from 'react'

-export default function Items ({ query, rank }) {
-  const { loading, error, data } = useQuery(query)
+export default function Items ({ variables, rank }) {
+  const { loading, error, data, fetchMore } = useQuery(MORE_ITEMS, {
+    variables
+  })
  if (error) return <div>Failed to load!</div>
  if (loading) {
-    const items = new Array(20).fill(null)
-
-    return (
-      <div className={styles.grid}>
-        {items.map((_, i) => (
-          <ItemSkeleton rank={i + 1} key={i} />
-        ))}
-      </div>
-    )
+    return <ItemsSkeleton />
  }

-  const { items } = data
+  const { moreItems: { items, cursor } } = data
+  return (
+    <>
+      <div className={styles.grid}>
+        {items.map((item, i) => (
+          <Item item={item} rank={rank && i + 1} key={item.id} />
+        ))}
+      </div>
+      <MoreFooter cursor={cursor} fetchMore={fetchMore} offset={items.length} />
+    </>
+  )
+}
+
+function ItemsSkeleton ({ startRank = 1 }) {
+  const items = new Array(21).fill(null)
+
  return (
    <div className={styles.grid}>
-      {items.map((item, i) => (
-        <Item item={item} rank={rank && i + 1} key={item.id} />
+      {items.map((_, i) => (
+        <ItemSkeleton rank={i + startRank + 1} key={i + startRank} />
      ))}
    </div>
  )
 }
+
+function MoreFooter ({ cursor, fetchMore, offset }) {
+  const [loading, setLoading] = useState(false)
+
+  if (loading) {
+    return <ItemsSkeleton startRank={offset} />
+  }
+
+  let Footer
+  if (cursor) {
+    Footer = () => (
+      <Button
+        variant='secondary'
+        size='sm'
+        onClick={async () => {
+          setLoading(true)
+          await fetchMore({
+            variables: {
+              cursor
+            }
+          })
+          setLoading(false)
+        }}
+      >Load more
+      </Button>
+    )
+  } else {
+    Footer = () => (
+      <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.6' }}>GENISIS</div>
+    )
+  }
+
+  return <div className='d-flex justify-content-center mt-4 mb-2'><Footer /></div>
+}
--- a/components/layout.js
+++ b/components/layout.js
@ -21,14 +21,14 @@ export default function Layout ({ noContain, noFooter, children }) {
          description: desc,
          images: [
            {
-              url: 'https://stacker.news/favicon.png',
-            },
+              url: 'https://stacker.news/favicon.png'
+            }
          ],
-          site_name: 'Stacker News',
+          site_name: 'Stacker News'
        }}
        twitter={{
          site: '@stacker_news',
-          cardType: 'summary_large_image',
+          cardType: 'summary_large_image'
        }}
      />
      <LightningProvider>
@ -39,7 +39,7 @@ export default function Layout ({ noContain, noFooter, children }) {
        {noContain
          ? children
          : (
-            <Container className='my-1 mb-4 px-sm-0'>
+            <Container className='mt-1 px-sm-0'>
              {children}
            </Container>
            )}
--- a/fragments/items.js
+++ b/fragments/items.js
@ -16,6 +16,18 @@ export const ITEM_FIELDS = gql`
    ncomments
  }`

+export const MORE_ITEMS = gql`
+  ${ITEM_FIELDS}
+
+  query MoreItems($sort: String!, $cursor: String, $userId: ID) {
+    moreItems(sort: $sort, cursor: $cursor, userId: $userId) {
+      cursor
+      items {
+        ...ItemFields
+      }
+    }
+  } `
+
 export const ITEMS_FEED = gql`
  ${ITEM_FIELDS}

--- a/package-lock.json
+++ b/package-lock.json
@ -127,12 +127,12 @@
      }
    },
    "@babel/generator": {
-      "version": "7.14.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
-      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.14.2",
+        "@babel/types": "^7.14.5",
        "jsesc": "^2.5.1",
        "source-map": "^0.5.0"
      },
@ -146,23 +146,32 @@
      }
    },
    "@babel/helper-function-name": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
-      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
      "dev": true,
      "requires": {
-        "@babel/helper-get-function-arity": "^7.12.13",
-        "@babel/template": "^7.12.13",
-        "@babel/types": "^7.14.2"
+        "@babel/helper-get-function-arity": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/types": "^7.14.5"
      }
    },
    "@babel/helper-get-function-arity": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
-      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.14.5"
      }
    },
    "@babel/helper-plugin-utils": {
@ -171,18 +180,18 @@
      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
    },
    "@babel/helper-split-export-declaration": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
-      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.14.5"
      }
    },
    "@babel/helper-validator-identifier": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
      "dev": true
    },
    "@babel/highlight": {
@ -242,9 +251,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.14.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.3.tgz",
-      "integrity": "sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==",
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
+      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
      "dev": true
    },
    "@babel/runtime": {
@ -256,33 +265,154 @@
      }
    },
    "@babel/template": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
-      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
      "dev": true,
      "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/parser": "^7.12.13",
-        "@babel/types": "^7.12.13"
+        "@babel/code-frame": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
      }
    },
    "@babel/traverse": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
-      "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
+      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
      "dev": true,
      "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/generator": "^7.13.0",
-        "@babel/helper-function-name": "^7.12.13",
-        "@babel/helper-split-export-declaration": "^7.12.13",
-        "@babel/parser": "^7.13.0",
-        "@babel/types": "^7.13.0",
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/parser": "^7.14.7",
+        "@babel/types": "^7.14.5",
        "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.19"
+        "globals": "^11.1.0"
      },
      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
        "debug": {
          "version": "4.3.1",
          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@ -303,16 +433,25 @@
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
        }
      }
    },
    "@babel/types": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
-      "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
      "dev": true,
      "requires": {
-        "@babel/helper-validator-identifier": "^7.14.0",
+        "@babel/helper-validator-identifier": "^7.14.5",
        "to-fast-properties": "^2.0.0"
      }
    },
@ -322,15 +461,15 @@
      "integrity": "sha512-sJpx3F5xcVV/9jNYJQtvimo4Vfld/nD3ph+ZWtQzZ03Zo8rJC7QKQTRcIGS13Rcz80DwFNthCWMrd58vpY4ZAQ=="
    },
    "@eslint/eslintrc": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
-      "integrity": "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
      "dev": true,
      "requires": {
        "ajv": "^6.12.4",
        "debug": "^4.1.1",
        "espree": "^7.3.0",
-        "globals": "^12.1.0",
+        "globals": "^13.9.0",
        "ignore": "^4.0.6",
        "import-fresh": "^3.2.1",
        "js-yaml": "^3.13.1",
@ -347,15 +486,6 @@
            "ms": "2.1.2"
          }
        },
-        "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.8.1"
-          }
-        },
        "ms": {
          "version": "2.1.2",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -2550,28 +2680,30 @@
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
-      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.29.0.tgz",
+      "integrity": "sha512-82G/JToB9qIy/ArBzIWG9xvvwL3R86AlCjtGw+A29OMZDqhTybz/MByORSukGxeI+YPCR4coYyITKk8BFH9nDA==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.0",
+        "@eslint/eslintrc": "^0.4.2",
        "ajv": "^6.10.0",
        "chalk": "^4.0.0",
        "cross-spawn": "^7.0.2",
        "debug": "^4.0.1",
        "doctrine": "^3.0.0",
        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
        "eslint-scope": "^5.1.1",
        "eslint-utils": "^2.1.0",
        "eslint-visitor-keys": "^2.0.0",
        "espree": "^7.3.1",
        "esquery": "^1.4.0",
        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
        "file-entry-cache": "^6.0.1",
        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
+        "glob-parent": "^5.1.2",
        "globals": "^13.6.0",
        "ignore": "^4.0.6",
        "import-fresh": "^3.0.0",
@ -2580,7 +2712,7 @@
        "js-yaml": "^3.13.1",
        "json-stable-stringify-without-jsonify": "^1.0.1",
        "levn": "^0.4.1",
-        "lodash": "^4.17.21",
+        "lodash.merge": "^4.6.2",
        "minimatch": "^3.0.4",
        "natural-compare": "^1.4.0",
        "optionator": "^0.9.1",
@ -2589,7 +2721,7 @@
        "semver": "^7.2.1",
        "strip-ansi": "^6.0.0",
        "strip-json-comments": "^3.1.0",
-        "table": "^6.0.4",
+        "table": "^6.0.9",
        "text-table": "^0.2.0",
        "v8-compile-cache": "^2.0.3"
      },
@ -2612,10 +2744,16 @@
            "ms": "2.1.2"
          }
        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
        "eslint-visitor-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
-          "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
          "dev": true
        },
        "ms": {
@ -2718,19 +2856,6 @@
        "semver": "7.3.2"
      },
      "dependencies": {
-        "browserslist": {
-          "version": "4.16.3",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-          "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001181",
-            "colorette": "^1.2.1",
-            "electron-to-chromium": "^1.3.649",
-            "escalade": "^3.1.1",
-            "node-releases": "^1.1.70"
-          }
-        },
        "semver": {
          "version": "7.3.2",
          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@ -3289,9 +3414,9 @@
      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
    },
    "globals": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.7.0.tgz",
-      "integrity": "sha512-Aipsz6ZKRxa/xQkZhNg0qIWXT6x6rD46f6x/PCnBomlttdIyAPak4YD9jTmKpZ72uROSMU87qJtcgpgHaVchiA==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+      "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
      "dev": true,
      "requires": {
        "type-fest": "^0.20.2"
@ -3693,6 +3818,12 @@
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
    "is-glob": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@ -4037,6 +4168,12 @@
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
    "lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@ -4073,6 +4210,12 @@
      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
      "dev": true
    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
    "lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@ -4083,6 +4226,12 @@
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
    "loglevel": {
      "version": "1.7.1",
      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
@ -4687,15 +4836,40 @@
      }
    },
    "object.entries": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz",
-      "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
+      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
      "dev": true,
      "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1",
-        "has": "^1.0.3"
+        "es-abstract": "^1.18.2"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.3",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
+          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.3",
+            "is-string": "^1.0.6",
+            "object-inspect": "^1.10.3",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
      }
    },
    "object.fromentries": {
@ -4721,15 +4895,40 @@
      }
    },
    "object.values": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz",
-      "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
+      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
+        "es-abstract": "^1.18.2"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.3",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
+          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.3",
+            "is-string": "^1.0.6",
+            "object-inspect": "^1.10.3",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
      }
    },
    "on-finished": {
@ -5761,26 +5960,6 @@
            "lodash": "^4.17.19",
            "minimatch": "^3.0.4",
            "strip-json-comments": "^3.1.1"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "4.3.1",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-              "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-              "dev": true,
-              "requires": {
-                "ms": "2.1.2"
-              }
-            },
-            "globals": {
-              "version": "12.4.0",
-              "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-              "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-              "dev": true,
-              "requires": {
-                "type-fest": "^0.8.1"
-              }
-            }
          }
        },
        "ansi-regex": {
@ -5819,6 +5998,15 @@
          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
          "dev": true
        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
        "emoji-regex": {
          "version": "7.0.3",
          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@ -5868,26 +6056,6 @@
            "table": "^5.2.3",
            "text-table": "^0.2.0",
            "v8-compile-cache": "^2.0.3"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "4.3.1",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-              "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-              "dev": true,
-              "requires": {
-                "ms": "2.1.2"
-              }
-            },
-            "globals": {
-              "version": "12.4.0",
-              "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-              "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-              "dev": true,
-              "requires": {
-                "type-fest": "^0.8.1"
-              }
-            }
          }
        },
        "eslint-visitor-keys": {
@ -5914,17 +6082,6 @@
            "flatted": "^2.0.0",
            "rimraf": "2.6.3",
            "write": "1.0.3"
-          },
-          "dependencies": {
-            "write": {
-              "version": "1.0.3",
-              "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
-              "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
-              "dev": true,
-              "requires": {
-                "mkdirp": "^0.5.1"
-              }
-            }
          }
        },
        "flatted": {
@ -5933,13 +6090,13 @@
          "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
          "dev": true
        },
-        "mkdirp": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
          "dev": true,
          "requires": {
-            "minimist": "^1.2.5"
+            "type-fest": "^0.8.1"
          }
        },
        "ms": {
@ -5975,14 +6132,6 @@
            "ansi-styles": "^3.2.0",
            "astral-regex": "^1.0.0",
            "is-fullwidth-code-point": "^2.0.0"
-          },
-          "dependencies": {
-            "is-fullwidth-code-point": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-              "dev": true
-            }
          }
        },
        "string-width": {
@ -5996,12 +6145,6 @@
            "strip-ansi": "^5.1.0"
          },
          "dependencies": {
-            "is-fullwidth-code-point": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-              "dev": true
-            },
            "strip-ansi": {
              "version": "5.2.0",
              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
@ -6130,18 +6273,45 @@
      }
    },
    "string.prototype.matchall": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz",
-      "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz",
+      "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has-symbols": "^1.0.1",
+        "es-abstract": "^1.18.2",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.2",
        "internal-slot": "^1.0.3",
        "regexp.prototype.flags": "^1.3.1",
        "side-channel": "^1.0.4"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.3",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
+          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.3",
+            "is-string": "^1.0.6",
+            "object-inspect": "^1.10.3",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
      }
    },
    "string.prototype.trimend": {
@ -6306,21 +6476,23 @@
      "integrity": "sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA=="
    },
    "table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
      "dev": true,
      "requires": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
        "slice-ansi": "^4.0.0",
-        "string-width": "^4.2.0"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
      },
      "dependencies": {
        "ajv": {
-          "version": "7.2.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.4.tgz",
-          "integrity": "sha512-nBeQgg/ZZA3u3SYxyaDvpvDtgZ/EZPF547ARgZBrG9Bhu1vKDwAIjtIf+sDtJUKa2zOcEbmRLBRSyMraS/Oy1A==",
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.0.tgz",
+          "integrity": "sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==",
          "dev": true,
          "requires": {
            "fast-deep-equal": "^3.1.1",
@ -6755,6 +6927,26 @@
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
    },
+    "write": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^0.5.1"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        }
+      }
+    },
    "ws": {
      "version": "7.4.4",
      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
--- a/package.json
+++ b/package.json
@ -48,8 +48,8 @@
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
-    "eslint": "^7.22.0",
+    "eslint": "^7.29.0",
    "eslint-plugin-compat": "^3.9.0",
    "standard": "^16.0.3"
  }
-}
+}
--- a/pages/[username].js
+++ b/pages/[username].js
@ -1,6 +1,5 @@
 import Layout from '../components/layout'
 import Items from '../components/items'
-import { ITEM_FIELDS } from '../fragments/items'
 import { gql } from '@apollo/client'
 import ApolloClient from '../api/client'
 import UserHeader from '../components/user-header'
@ -35,18 +34,10 @@ export async function getServerSideProps ({ req, params }) {
 }

 export default function User ({ user }) {
-  const query = gql`
-    ${ITEM_FIELDS}
-    {
-      items: userItems(userId: ${user.id}) {
-        ...ItemFields
-      }
-    }
-  `
  return (
    <Layout>
      <UserHeader user={user} />
-      <Items query={query} />
+      <Items variables={{ sort: 'recent', userId: user.id }} />
    </Layout>
  )
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@ -6,7 +6,33 @@ import { MeProvider } from '../components/me'

 const client = new ApolloClient({
  uri: '/api/graphql',
-  cache: new InMemoryCache()
+  cache: new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          moreItems: {
+            keyArgs: ['sort', 'userId'],
+            merge (existing, incoming, { readField }) {
+              const items = existing ? existing.items : []
+              return {
+                cursor: incoming.cursor,
+                items: [...items, ...incoming.items]
+              }
+            },
+
+            read (existing) {
+              if (existing) {
+                return {
+                  cursor: existing.cursor,
+                  items: existing.items
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  })
 })

 function MyApp ({ Component, pageProps }) {
--- a/pages/index.js
+++ b/pages/index.js
@ -1,11 +1,10 @@
 import Layout from '../components/layout'
 import Items from '../components/items'
-import { ITEMS_FEED } from '../fragments/items'

 export default function Index () {
  return (
    <Layout>
-      <Items query={ITEMS_FEED} rank />
+      <Items variables={{ sort: 'hot' }} rank />
    </Layout>
  )
 }
--- a/pages/recent.js
+++ b/pages/recent.js
@ -1,11 +1,10 @@
 import Layout from '../components/layout'
 import Items from '../components/items'
-import { ITEMS_RECENT } from '../fragments/items'

 export default function Index () {
  return (
    <Layout>
-      <Items query={ITEMS_RECENT} rank />
+      <Items variables={{ sort: 'recent' }} rank />
    </Layout>
  )
 }