From a736b5ac1bc67d8edf86e1735f3a8dde0cb530f9 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 25 Jan 2022 14:16:32 -0600
Subject: [PATCH] Add about field to Fold

---
 common/fold.ts                      |  1 +
 functions/src/create-fold.ts        |  8 +++-
 web/components/edit-fold-button.tsx | 25 ++++++++++-
 web/lib/firebase/api-call.ts        |  2 +-
 web/pages/fold/[...slugs]/index.tsx | 12 ++---
 web/pages/folds.tsx                 | 69 ++++++++++++++++++-----------
 6 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/common/fold.ts b/common/fold.ts
index c9df3389..46be7499 100644
--- a/common/fold.ts
+++ b/common/fold.ts
@@ -2,6 +2,7 @@ export type Fold = {
   id: string
   slug: string
   name: string
+  about: string
   curatorId: string // User id
   createdTime: number
 
diff --git a/functions/src/create-fold.ts b/functions/src/create-fold.ts
index eb75a762..a653fa93 100644
--- a/functions/src/create-fold.ts
+++ b/functions/src/create-fold.ts
@@ -12,6 +12,7 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
   async (
     data: {
       name: string
+      about: string
       tags: string[]
     },
     context
@@ -22,7 +23,7 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
     const creator = await getUser(userId)
     if (!creator) return { status: 'error', message: 'User not found' }
 
-    const { name, tags } = data
+    const { name, about, tags } = data
 
     if (!name || typeof name !== 'string')
       return { status: 'error', message: 'Name must be a non-empty string' }
@@ -35,7 +36,9 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
       creator.username,
       'named',
       name,
-      'on',
+      'about',
+      about,
+      'tags',
       tags
     )
 
@@ -48,6 +51,7 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
       curatorId: userId,
       slug,
       name,
+      about,
       tags,
       createdTime: Date.now(),
       contractIds: [],
diff --git a/web/components/edit-fold-button.tsx b/web/components/edit-fold-button.tsx
index 2f840eff..3ac2504d 100644
--- a/web/components/edit-fold-button.tsx
+++ b/web/components/edit-fold-button.tsx
@@ -12,7 +12,8 @@ import { TagsList } from './tags-list'
 
 export function EditFoldButton(props: { fold: Fold }) {
   const { fold } = props
-  const [name, setName] = useState(fold?.name ?? '')
+  const [name, setName] = useState(fold.name)
+  const [about, setAbout] = useState(fold.about ?? '')
 
   const initialOtherTags =
     fold?.tags.filter((tag) => tag !== toCamelCase(name)).join(', ') ?? ''
@@ -23,13 +24,16 @@ export function EditFoldButton(props: { fold: Fold }) {
   const tags = parseWordsAsTags(toCamelCase(name) + ' ' + otherTags)
 
   const saveDisabled =
-    !name || (name === fold.name && _.isEqual(tags, fold.tags))
+    name === fold.name &&
+    _.isEqual(tags, fold.tags) &&
+    about === (fold.about ?? '')
 
   const onSubmit = async () => {
     setIsSubmitting(true)
 
     await updateFold(fold, {
       name,
+      about,
       tags,
     })
 
@@ -66,6 +70,23 @@ export function EditFoldButton(props: { fold: Fold }) {
 
           <Spacer h={4} />
 
+          <div className="form-control w-full">
+            <label className="label">
+              <span className="mb-1">About</span>
+            </label>
+
+            <input
+              placeholder="Short description (140 characters max)"
+              className="input input-bordered resize-none"
+              disabled={isSubmitting}
+              value={about}
+              maxLength={140}
+              onChange={(e) => setAbout(e.target.value || '')}
+            />
+          </div>
+
+          <Spacer h={4} />
+
           <div className="form-control w-full">
             <label className="label">
               <span className="mb-1">Tags</span>
diff --git a/web/lib/firebase/api-call.ts b/web/lib/firebase/api-call.ts
index 1776e46f..a0fc7de8 100644
--- a/web/lib/firebase/api-call.ts
+++ b/web/lib/firebase/api-call.ts
@@ -11,7 +11,7 @@ export const cloudFunction = <RequestData, ResponseData>(name: string) =>
 export const createContract = cloudFunction('createContract')
 
 export const createFold = cloudFunction<
-  { name: string; tags: string[] },
+  { name: string; about: string; tags: string[] },
   { status: 'error' | 'success'; message?: string; fold?: Fold }
 >('createFold')
 
diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx
index 0b7c6b34..c73be9b8 100644
--- a/web/pages/fold/[...slugs]/index.tsx
+++ b/web/pages/fold/[...slugs]/index.tsx
@@ -242,7 +242,7 @@ export default function FoldPage(props: {
 
 function FoldOverview(props: { fold: Fold; curator: User }) {
   const { fold, curator } = props
-  const { tags } = fold
+  const { about, tags } = fold
 
   return (
     <Col className="max-w-sm">
@@ -259,10 +259,12 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
           />
         </Row>
 
-        <Spacer h={2} />
-        <div className="text-gray-500">
-          This is a community for predicting asdf asd fasdf asdf asdf .
-        </div>
+        {about && (
+          <>
+            <Spacer h={2} />
+            <div className="text-gray-500">{about}</div>
+          </>
+        )}
 
         <Spacer h={2} />
 
diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx
index 7d86832a..d6be19e9 100644
--- a/web/pages/folds.tsx
+++ b/web/pages/folds.tsx
@@ -103,6 +103,7 @@ export default function Folds(props: {
 
 function CreateFoldButton() {
   const [name, setName] = useState('')
+  const [about, setAbout] = useState('')
   const [otherTags, setOtherTags] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -120,6 +121,7 @@ function CreateFoldButton() {
     const result = await createFold({
       name,
       tags,
+      about,
     }).then((r) => r.data || {})
 
     if (result.fold) {
@@ -145,7 +147,7 @@ function CreateFoldButton() {
       }}
       submitBtn={{
         label: 'Create',
-        className: clsx(name ? 'btn-primary' : 'btn-disabled'),
+        className: clsx(name && about ? 'btn-primary' : 'btn-disabled'),
       }}
       onSubmit={onSubmit}
     >
@@ -175,37 +177,50 @@ function CreateFoldButton() {
 
         <Spacer h={4} />
 
-        {name && (
-          <>
-            <label className="label">
-              <span className="mb-1">Primary tag</span>
-            </label>
-            <TagsList noLink tags={[`#${toCamelCase(name)}`]} />
+        <div className="form-control w-full">
+          <label className="label">
+            <span className="mb-1">About</span>
+          </label>
 
-            <Spacer h={4} />
+          <input
+            placeholder="Short description (140 characters max)"
+            className="input input-bordered resize-none"
+            disabled={isSubmitting}
+            value={about}
+            maxLength={140}
+            onChange={(e) => setAbout(e.target.value || '')}
+          />
+        </div>
 
-            <div className="form-control w-full">
-              <label className="label">
-                <span className="mb-1">Additional tags</span>
-              </label>
+        <Spacer h={4} />
 
-              <input
-                placeholder="Politics, Economics, Rationality"
-                className="input input-bordered resize-none"
-                disabled={isSubmitting}
-                value={otherTags}
-                onChange={(e) => setOtherTags(e.target.value || '')}
-              />
-            </div>
+        <label className="label">
+          <span className="mb-1">Primary tag</span>
+        </label>
+        <TagsList noLink tags={[`#${toCamelCase(name)}`]} />
 
-            <Spacer h={4} />
+        <Spacer h={4} />
 
-            <TagsList
-              tags={parseWordsAsTags(otherTags).map((tag) => `#${tag}`)}
-              noLink
-            />
-          </>
-        )}
+        <div className="form-control w-full">
+          <label className="label">
+            <span className="mb-1">Additional tags</span>
+          </label>
+
+          <input
+            placeholder="Politics, Economics, Rationality (Optional)"
+            className="input input-bordered resize-none"
+            disabled={isSubmitting}
+            value={otherTags}
+            onChange={(e) => setOtherTags(e.target.value || '')}
+          />
+        </div>
+
+        <Spacer h={4} />
+
+        <TagsList
+          tags={parseWordsAsTags(otherTags).map((tag) => `#${tag}`)}
+          noLink
+        />
       </div>
     </ConfirmationButton>
   )