Refactor collapse. Show 3 lines. Use on charity.

web/components/contract/contract-description.tsx

@@ -46,7 +46,7 @@ export function ContractDescription(props: {
       ) : (
         <CollapsibleContent
           content={contract.description}
-          contractId={contract.id}
+          stateKey={`isCollapsed-contract-${contract.id}`}
         />
       )}
     </div>
@@ -104,10 +104,9 @@ function ContractActions(props: {
     <>
       <CollapsibleContent
         content={contract.description}
-        contractId={contract.id}
+        stateKey={`isCollapsed-contract-${contract.id}`}
       />
-      <Spacer h={4} />
-      <Row className="my-4 items-center gap-2 text-xs">
+      <Row className="mb-4 items-center gap-2 text-xs">
         {isAdmin && 'Admin '}
         <Button color={'gray'} size={'2xs'} onClick={toggleResolver}>
           Resolve

web/components/widgets/collapsible-content.tsx

@@ -15,7 +15,7 @@ import { safeLocalStorage } from 'web/lib/util/local'
 import { Row } from '../layout/row'
 import { Content } from './editor'
 
-export const COLLAPSIBLE_HEIGHT = 45
+export const COLLAPSIBLE_HEIGHT = 26 * 3 // line height is 26px
 export const SHOW_COLLAPSE_TRESHOLD = 180
 
 export function ShowMoreLessButton(props: {
@@ -51,9 +51,9 @@ export function ShowMoreLessButton(props: {
 
 export function CollapsibleContent(props: {
   content: JSONContent | string
-  contractId: string
+  stateKey: string
 }) {
-  const { content, contractId } = props
+  const { content, stateKey } = props
   const [shouldAllowCollapseOfContent, setShouldAllowCollapseOfContent] =
     useState(false)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -66,9 +66,7 @@ export function CollapsibleContent(props: {
     }
   }, [contentRef.current?.offsetHeight])
   if (shouldAllowCollapseOfContent) {
-    return (
-      <ActuallyCollapsibleContent content={content} contractId={contractId} />
-    )
+    return <ActuallyCollapsibleContent content={content} stateKey={stateKey} />
   }
   return (
     <div ref={contentRef}>
@@ -80,15 +78,15 @@ export function CollapsibleContent(props: {
 // Moved to its own component to reduce unnecessary isCollapsed states in local storage
 function ActuallyCollapsibleContent(props: {
   content: JSONContent | string
-  contractId: string
+  stateKey: string
 }) {
-  const { content, contractId } = props
+  const { content, stateKey } = props
   const [isCollapsed, setIsCollapsed] = usePersistentState<boolean>(false, {
     store: storageStore(safeLocalStorage()),
-    key: `isCollapsed-contract-${contractId}`,
+    key: stateKey,
   })
   return (
-    <div className="relative">
+    <div>
       <div
         style={{ height: isCollapsed ? COLLAPSIBLE_HEIGHT : 'auto' }}
         className={clsx(
@@ -106,18 +104,20 @@ function ActuallyCollapsibleContent(props: {
           </>
         )}
       </div>
-      <ShowMoreLessButton
-        className="absolute right-0 -bottom-8 bg-transparent"
-        onClick={() => {
-          if (!isCollapsed)
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            })
-          setIsCollapsed(!isCollapsed)
-        }}
-        isCollapsed={isCollapsed}
-      />
+      <div className="text-right">
+        <ShowMoreLessButton
+          className="bg-transparent"
+          onClick={() => {
+            if (!isCollapsed)
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              })
+            setIsCollapsed(!isCollapsed)
+          }}
+          isCollapsed={isCollapsed}
+        />
+      </div>
     </div>
   )
 }

web/pages/[username]/[contractSlug].tsx

@@ -289,7 +289,7 @@ export function ContractPageContent(
         />
 
         <ContractDescription
-          className="mt-6 mb-2 px-2"
+          className="mt-6 px-2"
           contract={contract}
           toggleResolver={() => setShowResolver(!showResolver)}
         />

web/pages/charity/[charitySlug].tsx

@@ -1,6 +1,5 @@
 import { sortBy, sumBy, uniqBy } from 'lodash'
-import clsx from 'clsx'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import Image from 'next/legacy/image'
 
 import { Col } from 'web/components/layout/col'
@@ -23,6 +22,7 @@ import { track } from 'web/lib/service/analytics'
 import { SEO } from 'web/components/SEO'
 import { Button } from 'web/components/buttons/button'
 import { FullscreenConfetti } from 'web/components/widgets/fullscreen-confetti'
+import { CollapsibleContent } from 'web/components/widgets/collapsible-content'
 
 export default function CharityPageWrapper() {
   const router = useRouter()
@@ -87,7 +87,10 @@ function CharityPage(props: { charity: Charity }) {
             />
           </Row>
           <h2 className="mt-7 mb-2 text-xl text-indigo-700">About</h2>
-          <Blurb text={description} />
+          <CollapsibleContent
+            content={description}
+            stateKey={`isCollapsed-charity-${charity.id}`}
+          />
           {newToOld.map((txn) => (
             <Donation key={txn.id} txn={txn} />
           ))}
@@ -97,40 +100,6 @@ function CharityPage(props: { charity: Charity }) {
   )
 }
 
-function Blurb({ text }: { text: string }) {
-  const [open, setOpen] = useState(false)
-
-  // Calculate whether the full blurb is already shown
-  const ref = useRef<HTMLDivElement>(null)
-  const [hideExpander, setHideExpander] = useState(false)
-  useEffect(() => {
-    if (ref.current) {
-      setHideExpander(ref.current.scrollHeight <= ref.current.clientHeight)
-    }
-  }, [])
-
-  return (
-    <>
-      <div
-        className={clsx(
-          'whitespace-pre-line text-gray-500',
-          !open && 'line-clamp-5'
-        )}
-        ref={ref}
-      >
-        {text}
-      </div>
-      <Button
-        color="indigo"
-        onClick={() => setOpen(!open)}
-        className={clsx('my-3', hideExpander && 'invisible')}
-      >
-        {open ? 'Hide' : 'Read more'}
-      </Button>
-    </>
-  )
-}
-
 function Details(props: {
   charity: Charity
   totalRaised: number