From b2c89d36cf4aeb03fb8d9a6c89e2397c2b2bb73c Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 19 Jul 2022 18:22:55 -0500
Subject: [PATCH] Home: Show pills that are groups (in addition to All, For
 you)

---
 web/components/buttons/pill-button.tsx |   2 +-
 web/components/contract-search.tsx     | 101 ++++++++++++++++---------
 web/tailwind.config.js                 |  17 +++++
 3 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/web/components/buttons/pill-button.tsx b/web/components/buttons/pill-button.tsx
index 796036d1..5b4962b7 100644
--- a/web/components/buttons/pill-button.tsx
+++ b/web/components/buttons/pill-button.tsx
@@ -13,7 +13,7 @@ export function PillButton(props: {
   return (
     <button
       className={clsx(
-        'cursor-pointer select-none rounded-full',
+        'cursor-pointer select-none whitespace-nowrap rounded-full',
         selected
           ? ['text-white', color ?? 'bg-gray-700']
           : 'bg-gray-100 hover:bg-gray-200',
diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index dc97f482..fbbb9fe9 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -27,7 +27,7 @@ import ContractSearchFirestore from 'web/pages/contract-search-firestore'
 import { useMemberGroups } from 'web/hooks/use-group'
 import { NEW_USER_GROUP_SLUGS } from 'common/group'
 import { PillButton } from './buttons/pill-button'
-import { toPairs } from 'lodash'
+import { sortBy } from 'lodash'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -49,13 +49,6 @@ const sortIndexes = [
 export const DEFAULT_SORT = 'score'
 
 type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
-const filterOptions: { [label: string]: filter } = {
-  All: 'all',
-  Open: 'open',
-  Closed: 'closed',
-  Resolved: 'resolved',
-  'For you': 'personal',
-}
 
 export function ContractSearch(props: {
   querySortOptions?: {
@@ -86,9 +79,14 @@ export function ContractSearch(props: {
   } = props
 
   const user = useUser()
-  const memberGroupSlugs = useMemberGroups(user?.id)
-    ?.map((g) => g.slug)
-    .filter((s) => !NEW_USER_GROUP_SLUGS.includes(s))
+  const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
+    (group) => !NEW_USER_GROUP_SLUGS.includes(group.slug)
+  )
+  const memberGroupSlugs = memberGroups.map((g) => g.slug)
+  const pillGroups = sortBy(
+    memberGroups.filter((group) => group.contractIds.length > 0),
+    (group) => group.contractIds.length
+  ).reverse()
   const follows = useFollows(user?.id)
   const { initialSort } = useInitialQueryAndSort(querySortOptions)
 
@@ -101,15 +99,27 @@ export function ContractSearch(props: {
   const [filter, setFilter] = useState<filter>(
     querySortOptions?.defaultFilter ?? 'open'
   )
+  const [pillFilter, setPillFilter] = useState<string | undefined>()
 
   const { filters, numericFilters } = useMemo(() => {
     let filters = [
       filter === 'open' ? 'isResolved:false' : '',
       filter === 'closed' ? 'isResolved:false' : '',
       filter === 'resolved' ? 'isResolved:true' : '',
-      filter === 'personal'
+      additionalFilter?.creatorId
+        ? `creatorId:${additionalFilter.creatorId}`
+        : '',
+      additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
+      additionalFilter?.groupSlug
+        ? `groupSlugs:${additionalFilter.groupSlug}`
+        : '',
+      pillFilter && pillFilter !== 'personal'
+        ? `groupSlugs:${pillFilter}`
+        : '',
+      pillFilter === 'personal'
         ? // Show contracts in groups that the user is a member of
-          (memberGroupSlugs?.map((slug) => `groupSlugs:${slug}`) ?? [])
+          memberGroupSlugs
+            .map((slug) => `groupSlugs:${slug}`)
             // Show contracts created by users the user follows
             .concat(follows?.map((followId) => `creatorId:${followId}`) ?? [])
             // Show contracts bet on by users the user follows
@@ -119,13 +129,6 @@ export function ContractSearch(props: {
             )
             .concat(user ? `uniqueBettorIds:${user.id}` : [])
         : '',
-      additionalFilter?.creatorId
-        ? `creatorId:${additionalFilter.creatorId}`
-        : '',
-      additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
-      additionalFilter?.groupSlug
-        ? `groupSlugs:${additionalFilter.groupSlug}`
-        : '',
     ].filter((f) => f)
     // Hack to make Algolia work.
     filters = ['', ...filters]
@@ -139,8 +142,9 @@ export function ContractSearch(props: {
   }, [
     filter,
     Object.values(additionalFilter ?? {}).join(','),
-    (memberGroupSlugs ?? []).join(','),
+    memberGroupSlugs.join(','),
     (follows ?? []).join(','),
+    pillFilter,
   ])
 
   const indexName = `${indexPrefix}contracts-${sort}`
@@ -167,6 +171,17 @@ export function ContractSearch(props: {
           }}
         />
         {/*// TODO track WHICH filter users are using*/}
+        <select
+          className="!select !select-bordered"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value as filter)}
+          onBlur={trackCallback('select search filter')}
+        >
+          <option value="open">Open</option>
+          <option value="closed">Closed</option>
+          <option value="resolved">Resolved</option>
+          <option value="all">All</option>
+        </select>
         {!hideOrderSelector && (
           <SortBy
             items={sortIndexes}
@@ -186,25 +201,41 @@ export function ContractSearch(props: {
 
       <Spacer h={3} />
 
-      <Row className="gap-2">
-        {toPairs<filter>(filterOptions).map(([label, f]) => {
-          return (
-            <PillButton
-              key={f}
-              selected={filter === f}
-              onSelect={() => setFilter(f)}
-            >
-              {label}
-            </PillButton>
-          )
-        })}
-      </Row>
+      {!additionalFilter?.creatorId && !additionalFilter?.groupSlug && (
+        <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
+          <PillButton
+            key={'all'}
+            selected={pillFilter === undefined}
+            onSelect={() => setPillFilter(undefined)}
+          >
+            All
+          </PillButton>
+          <PillButton
+            key={'personal'}
+            selected={pillFilter === 'personal'}
+            onSelect={() => setPillFilter('personal')}
+          >
+            For you
+          </PillButton>
+          {pillGroups.map(({ name, slug }) => {
+            return (
+              <PillButton
+                key={slug}
+                selected={pillFilter === slug}
+                onSelect={() => setPillFilter(slug)}
+              >
+                {name}
+              </PillButton>
+            )
+          })}
+        </Row>
+      )}
 
       <Spacer h={3} />
 
       {filter === 'personal' &&
       (follows ?? []).length === 0 &&
-      (memberGroupSlugs ?? []).length === 0 ? (
+      memberGroupSlugs.length === 0 ? (
         <>You're not following anyone, nor in any of your own groups yet.</>
       ) : (
         <ContractSearchInner
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 0a1616b6..3457b7a6 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
@@ -32,6 +33,22 @@ module.exports = {
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
     require('daisyui'),
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        '.scrollbar-hide': {
+          /* IE and Edge */
+          '-ms-overflow-style': 'none',
+
+          /* Firefox */
+          'scrollbar-width': 'none',
+
+          /* Safari and Chrome */
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+      })
+    }),
   ],
   daisyui: {
     themes: [