From e7bf2ea1911ac6c24a8bbb5f6aee4ff2f64316a5 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Wed, 4 May 2022 10:45:21 -0400
Subject: [PATCH] category selector component on feed

---
 common/categories.ts                      | 14 ++--
 common/user.ts                            |  2 +
 firestore.rules                           |  2 +-
 web/components/feed/category-selector.tsx | 78 +++++++++++++++++++++++
 web/pages/home.tsx                        |  8 ++-
 5 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 web/components/feed/category-selector.tsx

diff --git a/common/categories.ts b/common/categories.ts
index 05fbf2b9..155da2ba 100644
--- a/common/categories.ts
+++ b/common/categories.ts
@@ -3,13 +3,13 @@ export const CATEGORIES = {
   personal: 'Personal',
   friends: 'Friends / Community',
   technology: 'Technology',
-  gaming: 'Gaming / Esports',
-  science: 'Science',
-  manifold: 'Manifold Markets',
-  society: 'Society',
   sports: 'Sports',
+  gaming: 'Gaming / Esports',
+  manifold: 'Manifold Markets',
+  science: 'Science',
+  society: 'Society',
   geopolitics: 'Geopolitics',
-  fun: 'Goofing around',
+  fun: 'Fun stuff',
   business: 'Business',
   finance: 'Finance',
   crypto: 'Crypto',
@@ -24,3 +24,7 @@ export const TO_CATEGORY = Object.fromEntries(
 )
 
 export const CATEGORY_LIST = Object.keys(CATEGORIES)
+
+export const FEED_CATEGORY_LIST = Object.keys(CATEGORIES).filter(
+  (cat) => !['personal', 'friends'].includes(cat)
+)
diff --git a/common/user.ts b/common/user.ts
index 8f8e6d0d..22d452bb 100644
--- a/common/user.ts
+++ b/common/user.ts
@@ -17,6 +17,8 @@ export type User = {
   totalDeposits: number
   totalPnLCached: number
   creatorVolumeCached: number
+
+  followedCategories?: string[]
 }
 
 export const STARTING_BALANCE = 1000
diff --git a/firestore.rules b/firestore.rules
index 28e03e64..d1698fd7 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -16,7 +16,7 @@ service cloud.firestore {
       allow read;
       allow update: if resource.data.id == request.auth.uid
         && request.resource.data.diff(resource.data).affectedKeys()
-            .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']);
+            .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories']);
     }
 
     match /private-users/{userId} {
diff --git a/web/components/feed/category-selector.tsx b/web/components/feed/category-selector.tsx
new file mode 100644
index 00000000..ed21aa86
--- /dev/null
+++ b/web/components/feed/category-selector.tsx
@@ -0,0 +1,78 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+
+import { User } from '../../../common/user'
+import { Row } from '../layout/row'
+import { CATEGORIES, FEED_CATEGORY_LIST } from '../../../common/categories'
+import { updateUser } from '../../lib/firebase/users'
+
+export function CategorySelector(props: {
+  user: User | null | undefined
+  className?: string
+}) {
+  const { className, user } = props
+
+  const followedCategories = user?.followedCategories ?? []
+
+  return (
+    <Row
+      className={clsx(
+        'carousel carousel-center mx-2 items-center space-x-2 pt-4 pb-4',
+        className
+      )}
+    >
+      <div className="mr-1 hidden text-gray-500 sm:flex">Categories</div>
+
+      <CategoryButton
+        key={'all' + followedCategories.length}
+        category="All"
+        isFollowed={followedCategories.length === 0}
+        toggle={async () => {
+          if (!user?.id) return
+
+          await updateUser(user.id, {
+            followedCategories: [],
+          })
+        }}
+      />
+
+      {FEED_CATEGORY_LIST.map((cat) => (
+        <CategoryButton
+          key={cat + followedCategories.length}
+          category={CATEGORIES[cat].split(' ')[0]}
+          isFollowed={followedCategories.includes(cat)}
+          toggle={async () => {
+            if (!user?.id) return
+
+            await updateUser(user.id, {
+              followedCategories: !followedCategories.includes(cat)
+                ? _.union([cat], followedCategories)
+                : _.difference(followedCategories, [cat]),
+            })
+          }}
+        />
+      ))}
+    </Row>
+  )
+}
+
+function CategoryButton(props: {
+  category: string
+  isFollowed: boolean
+  toggle: () => void
+}) {
+  const { toggle, category, isFollowed } = props
+
+  return (
+    <div
+      className={clsx(
+        'rounded-full border-2 px-4 py-1 shadow-md',
+        'cursor-pointer',
+        isFollowed ? 'border-gray-300 bg-gray-300' : 'bg-white'
+      )}
+      onClick={toggle}
+    >
+      <span className="text-sm text-gray-500">{category}</span>
+    </div>
+  )
+}
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 6f1ec93c..72aeeedf 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -11,6 +11,7 @@ import { useUser } from '../hooks/use-user'
 import { LoadingIndicator } from '../components/loading-indicator'
 import { useAlgoFeed } from '../hooks/use-algo-feed'
 import { ContractPageContent } from './[username]/[contractSlug]'
+import { CategorySelector } from '../components/feed/category-selector'
 
 const Home = () => {
   const user = useUser()
@@ -42,7 +43,12 @@ const Home = () => {
         <Col className="items-center">
           <Col className="w-full max-w-[700px]">
             <FeedCreate user={user ?? undefined} />
-            <Spacer h={10} />
+            <Spacer h={2} />
+
+            <CategorySelector user={user} />
+
+            <Spacer h={1} />
+
             {feed ? (
               <ActivityFeed
                 feed={feed}