Add Random link and basic query (#1306)

* Add Random link and basic query

* Use random

* refine random sort query

* make vote threshold higher

---------

Co-authored-by: k00b <k00b@stacker.news>

api/resolvers/item.js

@@ -80,6 +80,8 @@ const orderByClause = (by, me, models, type) => {
       return 'ORDER BY "Item".msats DESC'
     case 'zaprank':
       return topOrderByWeightedSats(me, models)
+    case 'random':
+      return 'ORDER BY RANDOM()'
     default:
       return `ORDER BY ${type === 'bookmarks' ? '"bookmarkCreatedAt"' : '"Item".created_at'} DESC`
   }
@@ -400,6 +402,27 @@ export default {
             orderBy: orderByClause(by || 'zaprank', me, models, type)
           }, ...whenRange(when, from, to || decodedCursor.time), decodedCursor.offset, limit, ...subArr)
           break
+        case 'random':
+          items = await itemQueryWithMeta({
+            me,
+            models,
+            query: `
+              ${selectClause(type)}
+              ${relationClause(type)}
+              ${whereClause(
+                '"Item"."deletedAt" IS NULL',
+                '"Item"."weightedVotes" - "Item"."weightedDownVotes" > 2',
+                type === 'posts' && '"Item"."subName" IS NOT NULL',
+                subClause(sub, 3, subClauseTable(type), me, showNsfw),
+                typeClause(type),
+                await filterClause(me, models, type),
+                muteClause(me))}
+              ${orderByClause('random', me, models, type)}
+              OFFSET $1
+              LIMIT $2`,
+            orderBy: orderByClause('random', me, models, type)
+          }, decodedCursor.offset, limit, ...subArr)
+          break
         default:
           // sub so we know the default ranking
           if (sub) {

components/items.js

@@ -51,7 +51,7 @@ export default function Items ({ ssrData, variables = {}, query, destructureData
     <>
       <div className={styles.grid}>
         {itemsWithPins.filter(filter).map((item, i) => (
-          <ListItem key={item.id} item={item} rank={rank && i + 1} itemClassName={variables.includeComments ? 'py-2' : ''} pinnable={isHome ? false : pins?.length > 0} />
+          <ListItem key={`${item.id}-${i + 1}`} item={item} rank={rank && i + 1} itemClassName={variables.includeComments ? 'py-2' : ''} pinnable={isHome ? false : pins?.length > 0} />
         ))}
       </div>
       <Foooter

components/nav/common.js

@@ -326,11 +326,11 @@ export function Sorts ({ sub, prefix, className }) {
           <Nav.Link eventKey='recent' className={styles.navLink}>recent</Nav.Link>
         </Link>
       </Nav.Item>
-      {/* <Nav.Item className={className}>
+      <Nav.Item className={className}>
         <Link href={prefix + '/random'} passHref legacyBehavior>
           <Nav.Link eventKey='random' className={styles.navLink}>random</Nav.Link>
         </Link>
-      </Nav.Item> */}
+      </Nav.Item>
       {sub !== 'jobs' &&
         <Nav.Item className={className}>
           <Link

next.config.js

@@ -177,7 +177,7 @@ module.exports = withPlausibleProxy()({
         source: '/~:sub/:slug*',
         destination: '/~/:slug*?sub=:sub'
       },
-      ...['/', '/post', '/rss', '/recent/:slug*', '/top/:slug*'].map(source => ({ source, destination: '/~' + source }))
+      ...['/', '/post', '/rss', '/random', '/recent/:slug*', '/top/:slug*'].map(source => ({ source, destination: '/~' + source }))
     ]
   },
   async redirects () {

pages/~/random/index.js

@@ -0,0 +1,31 @@
+import Layout from '@/components/layout'
+import Items from '@/components/items'
+import { getGetServerSideProps } from '@/api/ssrApollo'
+import { SUB_ITEMS } from '@/fragments/subs'
+import { useRouter } from 'next/router'
+
+const staticVariables = { sort: 'random' }
+const variablesFunc = vars =>
+  ({ ...staticVariables, ...vars })
+export const getServerSideProps = getGetServerSideProps({
+  query: SUB_ITEMS,
+  variables: variablesFunc,
+  notFound: (data, vars) => vars.sub && !data.sub
+})
+
+export default function Index ({ ssrData }) {
+  const router = useRouter()
+  const variables = variablesFunc(router.query)
+  const sub = ssrData?.sub?.name || variables.sub
+
+  return (
+    <Layout sub={sub}>
+      <Items
+        ssrData={ssrData}
+        query={SUB_ITEMS}
+        variables={variables}
+        noMoreText='NO MORE'
+      />
+    </Layout>
+  )
+}

pages/~/recent/[type].js

@@ -11,6 +11,7 @@ import PageLoading from '@/components/page-loading'
 const staticVariables = { sort: 'recent' }
 const variablesFunc = vars =>
   ({ includeComments: COMMENT_TYPE_QUERY.includes(vars.type), ...staticVariables, ...vars })
+
 export const getServerSideProps = getGetServerSideProps({
   query: SUB_ITEMS,
   variables: variablesFunc,