linting n stuff

web/components/contract/contract-details.tsx

@@ -106,7 +106,7 @@ export function AvatarDetails(props: {
   )
 }
 
-export function getIsMobile() {
+export function useIsMobile() {
   const { width } = useWindowSize()
   return (width ?? 0) < 600
 }
@@ -116,19 +116,12 @@ export function ContractDetails(props: {
   disabled?: boolean
 }) {
   const { contract, disabled } = props
-  const {
+  const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
-    closeTime,
-    creatorName,
-    creatorUsername,
-    creatorId,
-    creatorAvatarUrl,
-    resolutionTime,
-  } = contract
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
   const user = useUser()
   const isCreator = user?.id === creatorId
   const { width } = useWindowSize()
-  const isMobile = getIsMobile()
+  const isMobile = useIsMobile()
 
   return (
     <Col>
@@ -159,34 +152,11 @@ export function ContractDetails(props: {
             )}
           </Row>
           <Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
-            {(!!closeTime || !!resolvedDate) && (
+            <CloseOrResolveTime
-              <Row className="select-none items-center gap-1">
+              contract={contract}
-                {resolvedDate && resolutionTime ? (
+              resolvedDate={resolvedDate}
-                  <>
+              isCreator={isCreator}
-                    <DateTimeTooltip
+            />
-                      text="Market resolved:"
-                      time={resolutionTime}
-                    >
-                      <Row>
-                        <div>resolved&nbsp;</div>
-                        {resolvedDate}
-                      </Row>
-                    </DateTimeTooltip>
-                  </>
-                ) : null}
-
-                {!resolvedDate && closeTime && (
-                  <Row>
-                    <div>closes&nbsp;</div>
-                    <EditableCloseDate
-                      closeTime={closeTime}
-                      contract={contract}
-                      isCreator={isCreator ?? false}
-                    />
-                  </Row>
-                )}
-              </Row>
-            )}
             {!isMobile && (
               <MarketGroups
                 contract={contract}
@@ -210,18 +180,48 @@ export function ContractDetails(props: {
           />
         </div>
       )}
-      {/* {user && (
-        <>
-          <Row className="hidden items-center gap-1 md:inline-flex">
-            <DatabaseIcon className="h-5 w-5" />
-            <div className="whitespace-nowrap">{volumeLabel}</div>
-          </Row>
-        </>
-      )} */}
     </Col>
   )
 }
 
+export function CloseOrResolveTime(props: {
+  contract: Contract
+  resolvedDate: any
+  isCreator: boolean
+}) {
+  const { contract, resolvedDate, isCreator } = props
+  const { resolutionTime, closeTime } = contract
+  console.log(closeTime, resolvedDate)
+  if (!!closeTime || !!resolvedDate) {
+    return (
+      <Row className="select-none items-center gap-1">
+        {resolvedDate && resolutionTime ? (
+          <>
+            <DateTimeTooltip text="Market resolved:" time={resolutionTime}>
+              <Row>
+                <div>resolved&nbsp;</div>
+                {resolvedDate}
+              </Row>
+            </DateTimeTooltip>
+          </>
+        ) : null}
+
+        {!resolvedDate && closeTime && (
+          <Row>
+            {dayjs().isBefore(closeTime) && <div>closes&nbsp;</div>}
+            {!dayjs().isBefore(closeTime) && <div>closed&nbsp;</div>}
+            <EditableCloseDate
+              closeTime={closeTime}
+              contract={contract}
+              isCreator={isCreator ?? false}
+            />
+          </Row>
+        )}
+      </Row>
+    )
+  } else return <></>
+}
+
 export function MarketGroups(props: {
   contract: Contract
   isMobile: boolean | undefined

web/components/contract/extra-contract-actions-row.tsx

@@ -15,17 +15,12 @@ import { withTracking } from 'web/lib/service/analytics'
 import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import ChallengeIcon from 'web/lib/icons/challenge-icon'
-import { getIsMobile } from './contract-details'
+import { useIsMobile } from './contract-details'
 
 export function ExtraContractActionsRow(props: { contract: Contract }) {
   const { contract } = props
-  // const { outcomeType, resolution } = contract
   const user = useUser()
   const [isShareOpen, setShareOpen] = useState(false)
-  // const [openCreateChallengeModal, setOpenCreateChallengeModal] =
-  //   useState(false)
-  // const showChallenge =
-  //   user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
 
   return (
     <Row>

web/components/follow-button.tsx

@@ -58,17 +58,17 @@ export function FollowButton(props: {
 
 export function UserFollowButton(props: { userId: string; small?: boolean }) {
   const { userId, small } = props
-  const currentUser = useUser()
+  const user = useUser()
-  const following = useFollows(currentUser?.id)
+  const following = useFollows(user?.id)
   const isFollowing = following?.includes(userId)
 
-  if (!currentUser || currentUser.id === userId) return null
+  if (!user || user.id === userId) return null
 
   return (
     <FollowButton
       isFollowing={isFollowing}
-      onFollow={() => follow(currentUser.id, userId)}
+      onFollow={() => follow(user.id, userId)}
-      onUnfollow={() => unfollow(currentUser.id, userId)}
+      onUnfollow={() => unfollow(user.id, userId)}
       small={small}
     />
   )