Clean up Featured code

web/components/contract/contract-info-dialog.tsx

@@ -17,6 +17,7 @@ import { useAdmin, useDev } from 'web/hooks/use-admin'
 import { SiteLink } from '../site-link'
 import { firestoreConsolePath } from 'common/envs/constants'
 import { deleteField } from 'firebase/firestore'
+import ShortToggle from '../widgets/short-toggle'
 
 export const contractDetailsButtonClassName =
   'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
@@ -50,6 +51,21 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
       ? 'Multiple choice'
       : 'Numeric'
 
+  const onFeaturedToggle = async (enabled: boolean) => {
+    if (
+      enabled &&
+      (contract.featuredOnHomeRank === 0 || !contract?.featuredOnHomeRank)
+    ) {
+      await updateContract(id, { featuredOnHomeRank: 1 })
+      setFeatured(true)
+    } else if (!enabled && (contract?.featuredOnHomeRank ?? 0) > 0) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await updateContract(id, { featuredOnHomeRank: deleteField() })
+      setFeatured(false)
+    }
+  }
+
   return (
     <>
       <button
@@ -144,43 +160,13 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
               )}
               {isAdmin && (
                 <tr>
-                  <td>Set featured</td>
+                  <td>[ADMIN] Featured</td>
                   <td>
-                    <select
+                    <ShortToggle
-                      className="select select-bordered"
+                      enabled={featured}
-                      value={featured ? 'true' : 'false'}
+                      setEnabled={setFeatured}
-                      onChange={(e) => {
+                      onChange={onFeaturedToggle}
-                        const newVal = e.target.value === 'true'
+                    />
-                        if (
-                          newVal &&
-                          (contract.featuredOnHomeRank === 0 ||
-                            !contract?.featuredOnHomeRank)
-                        )
-                          updateContract(id, {
-                            featuredOnHomeRank: 1,
-                          })
-                            .then(() => {
-                              setFeatured(true)
-                            })
-                            .catch(console.error)
-                        else if (
-                          !newVal &&
-                          (contract?.featuredOnHomeRank ?? 0) > 0
-                        )
-                          updateContract(id, {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            featuredOnHomeRank: deleteField(),
-                          })
-                            .then(() => {
-                              setFeatured(false)
-                            })
-                            .catch(console.error)
-                      }}
-                    >
-                      <option value="false">false</option>
-                      <option value="true">true</option>
-                    </select>
                   </td>
                 </tr>
               )}

web/components/widgets/short-toggle.tsx

@@ -5,13 +5,19 @@ import clsx from 'clsx'
 export default function ShortToggle(props: {
   enabled: boolean
   setEnabled: (enabled: boolean) => void
+  onChange?: (enabled: boolean) => void
 }) {
   const { enabled, setEnabled } = props
 
   return (
     <Switch
       checked={enabled}
-      onChange={setEnabled}
+      onChange={(e: boolean) => {
+        setEnabled(e)
+        if (props.onChange) {
+          props.onChange(e)
+        }
+      }}
       className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
     >
       <span className="sr-only">Use setting</span>