From 0098718ebdc0688c64ec410cd2473ec0e11222fd Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 28 Apr 2022 14:41:23 -0600
Subject: [PATCH] Did create market -> hook, capitalize buttons

---
 web/components/nav/sidebar.tsx              | 18 +++-----------
 web/hooks/use-has-created-contract-today.ts | 27 +++++++++++++++++++++
 web/lib/firebase/contracts.ts               | 13 ----------
 web/pages/create.tsx                        | 15 +++---------
 4 files changed, 35 insertions(+), 38 deletions(-)
 create mode 100644 web/hooks/use-has-created-contract-today.ts

diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 50303adc..576cea87 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -19,13 +19,7 @@ import { firebaseLogin, firebaseLogout } from '../../lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { getNavigationOptions, ProfileSummary } from './profile-menu'
-import { CreatorContractsList } from '../contract/contracts-list'
-import {
-  Contract,
-  listContracts,
-  userHasCreatedContractToday,
-} from '../../lib/firebase/contracts'
-import { useState } from 'react'
+import { useHasCreatedContractToday } from '../../hooks/use-has-created-contract-today'
 
 const navigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
@@ -103,11 +97,7 @@ export default function Sidebar() {
   const user = useUser()
   let folds = useFollowedFolds(user) || []
   folds = _.sortBy(folds, 'followCount').reverse()
-  const [deservesDailyFreeMarket, setDeservesDailyFreeMarket] = useState(false)
-  user &&
-    userHasCreatedContractToday(user.id).then((result) => {
-      setDeservesDailyFreeMarket(result)
-    })
+  const deservesDailyFreeMarket = !useHasCreatedContractToday(user)
 
   const navigationOptions = user === null ? signedOutNavigation : navigation
   const mobileNavigationOptions =
@@ -173,7 +163,7 @@ export default function Sidebar() {
 
       {deservesDailyFreeMarket ? (
         <div className=" text-primary mt-4 text-center">
-          Use your daily free market!
+          Use your daily free market! 🎉
         </div>
       ) : (
         <div />
@@ -182,7 +172,7 @@ export default function Sidebar() {
       {user && (
         <div className={'aligncenter flex justify-center'}>
           <Link href={'/create'}>
-            <button className="btn btn-primary btn-md mt-4">
+            <button className="btn btn-primary btn-md mt-4 capitalize">
               Create Market
             </button>
           </Link>
diff --git a/web/hooks/use-has-created-contract-today.ts b/web/hooks/use-has-created-contract-today.ts
new file mode 100644
index 00000000..653049d2
--- /dev/null
+++ b/web/hooks/use-has-created-contract-today.ts
@@ -0,0 +1,27 @@
+import { listContracts } from '../lib/firebase/contracts'
+import { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { User } from '../../common/user'
+
+export const useHasCreatedContractToday = (user: User | null | undefined) => {
+  const [hasCreatedContractToday, setHasCreatedContractToday] = useState(false)
+
+  useEffect(() => {
+    // Uses utc time like the server.
+    const todayAtMidnight = dayjs.utc().startOf('day').valueOf()
+
+    async function listUserContractsForToday() {
+      if (!user) return
+
+      const contracts = await listContracts(user.id)
+      const todayContracts = contracts.filter(
+        (contract) => contract.createdTime > todayAtMidnight
+      )
+      setHasCreatedContractToday(todayContracts.length > 0)
+    }
+
+    listUserContractsForToday()
+  }, [user])
+
+  return hasCreatedContractToday
+}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 92bcfae1..1646bd09 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -121,19 +121,6 @@ export async function listAllContracts(): Promise<Contract[]> {
   return snapshot.docs.map((doc) => doc.data() as Contract)
 }
 
-export async function userHasCreatedContractToday(
-  userId: string
-): Promise<boolean> {
-  // uses utc time like the server
-  const todayAtMidnight = dayjs.utc().startOf('day').valueOf()
-  return listContracts(userId).then((contracts) => {
-    const todayContracts = contracts.filter((contract) => {
-      return contract.createdTime > todayAtMidnight
-    })
-    return todayContracts.length === 0
-  })
-}
-
 export function listenForContracts(
   setContracts: (contracts: Contract[]) => void
 ) {
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index cdefc975..4b0d7285 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -6,11 +6,7 @@ import Textarea from 'react-expanding-textarea'
 
 import { Spacer } from '../components/layout/spacer'
 import { useUser } from '../hooks/use-user'
-import {
-  Contract,
-  contractPath,
-  userHasCreatedContractToday,
-} from '../lib/firebase/contracts'
+import { Contract, contractPath } from '../lib/firebase/contracts'
 import { createContract } from '../lib/firebase/api-call'
 import { FIXED_ANTE, MINIMUM_ANTE } from '../../common/antes'
 import { InfoTooltip } from '../components/info-tooltip'
@@ -22,6 +18,7 @@ import { TagsList } from '../components/tags-list'
 import { Row } from '../components/layout/row'
 import { MAX_DESCRIPTION_LENGTH, outcomeType } from '../../common/contract'
 import { formatMoney } from '../../common/util/format'
+import { useHasCreatedContractToday } from '../hooks/use-has-created-contract-today'
 
 export default function Create() {
   const [question, setQuestion] = useState('')
@@ -75,11 +72,7 @@ export function NewContract(props: { question: string; tag?: string }) {
 
   const [ante, setAnte] = useState(FIXED_ANTE)
 
-  const [deservesDailyFreeMarket, setDeservesDailyFreeMarket] = useState(false)
-  creator &&
-    userHasCreatedContractToday(creator.id).then((result) => {
-      setDeservesDailyFreeMarket(result)
-    })
+  const deservesDailyFreeMarket = !useHasCreatedContractToday(creator)
 
   // useEffect(() => {
   //   if (ante === null && creator) {
@@ -288,7 +281,7 @@ export function NewContract(props: { question: string; tag?: string }) {
         <button
           type="submit"
           className={clsx(
-            'btn btn-primary',
+            'btn btn-primary capitalize',
             isSubmitting && 'loading disabled'
           )}
           disabled={isSubmitting || !isValid}