Create a fold

functions/src/create-fold.ts

@@ -0,0 +1,81 @@
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+import * as _ from 'lodash'
+
+import { getUser } from './utils'
+import { Contract } from '../../common/contract'
+import { slugify } from '../../common/util/slugify'
+import { randomString } from '../../common/util/random'
+import { Fold } from '../../common/fold'
+
+export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
+  async (
+    data: {
+      name: string
+      tags: string[]
+    },
+    context
+  ) => {
+    const userId = context?.auth?.uid
+    if (!userId) return { status: 'error', message: 'Not authorized' }
+
+    const creator = await getUser(userId)
+    if (!creator) return { status: 'error', message: 'User not found' }
+
+    const { name, tags } = data
+
+    if (!name || typeof name !== 'string')
+      return { status: 'error', message: 'Name must be a non-empty string' }
+
+    if (!_.isArray(tags))
+      return { status: 'error', message: 'Tags must be an array of strings' }
+
+    console.log(
+      'creating fold for',
+      creator.username,
+      'named',
+      name,
+      'on',
+      tags
+    )
+
+    const slug = await getSlug(name)
+
+    const foldRef = firestore.collection('folds').doc()
+
+    const fold: Fold = {
+      id: foldRef.id,
+      curatorId: userId,
+      slug,
+      name,
+      tags,
+      createdTime: Date.now(),
+      contractIds: [],
+      excludedContractIds: [],
+      excludedCreatorIds: [],
+    }
+
+    await foldRef.create(fold)
+
+    return { status: 'success', fold }
+  }
+)
+
+const getSlug = async (name: string) => {
+  const proposedSlug = slugify(name)
+
+  const preexistingFold = await getFoldFromSlug(proposedSlug)
+
+  return preexistingFold ? proposedSlug + '-' + randomString() : proposedSlug
+}
+
+const firestore = admin.firestore()
+
+export async function getFoldFromSlug(slug: string) {
+  const snap = await firestore
+    .collection('folds')
+    .where('slug', '==', slug)
+    .get()
+
+  return snap.empty ? undefined : (snap.docs[0].data() as Contract)
+}

functions/src/index.ts

@@ -10,6 +10,7 @@ export * from './stripe'
 export * from './sell-bet'
 export * from './create-contract'
 export * from './create-user'
+export * from './create-fold'
 export * from './unsubscribe'
 export * from './update-contract-metrics'
 export * from './update-user-metrics'

web/lib/firebase/api-call.ts

@@ -1,13 +1,20 @@
 import { getFunctions, httpsCallable } from 'firebase/functions'
+import { Fold } from '../../../common/fold'
 import { User } from '../../../common/user'
 import { randomString } from '../../../common/util/random'
 
 const functions = getFunctions()
 
-export const cloudFunction = (name: string) => httpsCallable(functions, name)
+export const cloudFunction = <RequestData, ResponseData>(name: string) =>
+  httpsCallable<RequestData, ResponseData>(functions, name)
 
 export const createContract = cloudFunction('createContract')
 
+export const createFold = cloudFunction<
+  { name: string; tags: string[] },
+  { status: 'error' | 'success'; message?: string; fold?: Fold }
+>('createFold')
+
 export const placeBet = cloudFunction('placeBet')
 
 export const resolveMarket = cloudFunction('resolveMarket')

web/lib/firebase/folds.ts

@@ -32,9 +32,11 @@ export async function getFoldContracts(fold: Fold) {
 
   const [tagsContracts, includedContracts] = await Promise.all([
     // TODO: if tags.length > 10, execute multiple parallel queries
-    getValues<Contract>(
+    tags.length > 0
-      query(contractCollection, where('tags', 'array-contains-any', tags))
+      ? getValues<Contract>(
-    ),
+          query(contractCollection, where('tags', 'array-contains-any', tags))
+        )
+      : [],
 
     // TODO: if contractIds.length > 10, execute multiple parallel queries
     contractIds.length > 0

web/pages/folds.tsx

@@ -1,4 +1,6 @@
+import clsx from 'clsx'
 import _ from 'lodash'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Fold } from '../../common/fold'
 import { parseWordsAsTags } from '../../common/util/parse'
@@ -11,6 +13,8 @@ import { SiteLink } from '../components/site-link'
 import { TagsList } from '../components/tags-list'
 import { Title } from '../components/title'
 import { UserLink } from '../components/user-page'
+import { useUser } from '../hooks/use-user'
+import { createFold } from '../lib/firebase/api-call'
 import { foldPath, listAllFolds } from '../lib/firebase/folds'
 import { getUser, User } from '../lib/firebase/users'
 
@@ -34,39 +38,20 @@ export async function getStaticProps() {
 export default function Folds(props: { folds: Fold[]; curators: User[] }) {
   const { folds, curators } = props
 
+  const user = useUser()
+
   return (
     <Page>
       <Col className="items-center">
         <Col className="max-w-2xl w-full px-2 sm:px-0">
           <Row className="justify-between items-center">
             <Title text="Folds" />
-            <ConfirmationButton
+            {user && <CreateFoldButton />}
-              id="create-fold"
-              openModelBtn={{
-                label: 'Create a fold',
-                className: 'btn-primary btn-sm',
-              }}
-              submitBtn={{ label: 'Create', className: 'btn-primary' }}
-              onSubmit={() => {}}
-            >
-              <Title className="!mt-0" text="Create a fold" />
-
-              <div className="text-gray-500">
-                <div>A fold is a view of markets that match selected tags.</div>
-                <div>
-                  You can further include or exclude individual markets.
-                </div>
-              </div>
-
-              <Spacer h={4} />
-
-              <CreateFoldForm />
-            </ConfirmationButton>
           </Row>
 
           <Col className="gap-4">
             {folds.map((fold, index) => (
-              <Row className="items-center gap-2">
+              <Row key={fold.id} className="items-center gap-2">
                 <SiteLink href={foldPath(fold)}>{fold.name}</SiteLink>
                 <div />
                 <div className="text-sm text-gray-500">12 followers</div>
@@ -88,45 +73,86 @@ export default function Folds(props: { folds: Fold[]; curators: User[] }) {
   )
 }
 
-function CreateFoldForm() {
+function CreateFoldButton() {
   const [name, setName] = useState('')
   const [tags, setTags] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  const router = useRouter()
+
+  const onSubmit = async () => {
+    setIsSubmitting(true)
+
+    const result = await createFold({
+      name,
+      tags: parseWordsAsTags(tags),
+    }).then((r) => r.data || {})
+
+    if (result.fold) await router.push(foldPath(result.fold))
+    else console.log(result.status, result.message)
+
+    setIsSubmitting(false)
+  }
+
   return (
-    <form>
+    <ConfirmationButton
-      <div className="form-control w-full">
+      id="create-fold"
-        <label className="label">
+      openModelBtn={{
-          <span className="mb-1">Fold name</span>
+        label: 'Create a fold',
-        </label>
+        className: clsx(
+          isSubmitting ? 'loading btn-disabled' : 'btn-primary',
+          'btn-sm'
+        ),
+      }}
+      submitBtn={{
+        label: 'Create',
+        className: clsx(name && tags ? 'btn-primary' : 'btn-disabled'),
+      }}
+      onSubmit={onSubmit}
+    >
+      <Title className="!mt-0" text="Create a fold" />
 
-        <input
+      <Col className="text-gray-500 gap-1">
-          placeholder="Your fold name"
+        <div>A fold is a view of markets that match selected tags.</div>
-          className="input input-bordered resize-none"
+        <div>You can further include or exclude individual markets.</div>
-          disabled={isSubmitting}
+      </Col>
-          value={name}
-          onChange={(e) => setName(e.target.value || '')}
-        />
-      </div>
 
       <Spacer h={4} />
 
-      <div className="form-control w-full">
+      <form>
-        <label className="label">
+        <div className="form-control w-full">
-          <span className="mb-1">Tags</span>
+          <label className="label">
-        </label>
+            <span className="mb-1">Fold name</span>
+          </label>
 
-        <input
+          <input
-          placeholder="Politics, Economics, Rationality"
+            placeholder="Your fold name"
-          className="input input-bordered resize-none"
+            className="input input-bordered resize-none"
-          disabled={isSubmitting}
+            disabled={isSubmitting}
-          value={tags}
+            value={name}
-          onChange={(e) => setTags(e.target.value || '')}
+            onChange={(e) => setName(e.target.value || '')}
-        />
+          />
-      </div>
+        </div>
 
-      <Spacer h={4} />
+        <Spacer h={4} />
-      <TagsList tags={parseWordsAsTags(tags)} />
+
-    </form>
+        <div className="form-control w-full">
+          <label className="label">
+            <span className="mb-1">Tags</span>
+          </label>
+
+          <input
+            placeholder="Politics, Economics, Rationality"
+            className="input input-bordered resize-none"
+            disabled={isSubmitting}
+            value={tags}
+            onChange={(e) => setTags(e.target.value || '')}
+          />
+        </div>
+
+        <Spacer h={4} />
+        <TagsList tags={parseWordsAsTags(tags)} />
+      </form>
+    </ConfirmationButton>
   )
 }