Refactor Pinned Items into a reusable component

web/components/groups/group-overview.tsx

@@ -145,8 +145,6 @@ function GroupOverviewPinned(props: {
 }) {
   const { group, posts, isEditable } = props
   const [pinned, setPinned] = useState<JSX.Element[]>([])
-  const [open, setOpen] = useState(false)
-  const [editMode, setEditMode] = useState(false)
 
   useEffect(() => {
     async function getPinned() {
@@ -185,11 +183,52 @@ function GroupOverviewPinned(props: {
         ...(selectedItems as { itemId: string; type: 'contract' | 'post' }[]),
       ],
     })
-    setOpen(false)
+  }
+
+  function onDeleteClicked(index: number) {
+    const newPinned = group.pinnedItems.filter((item) => {
+      return item.itemId !== group.pinnedItems[index].itemId
+    })
+    updateGroup(group, { pinnedItems: newPinned })
   }
 
   return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
-    pinned.length > 0 || isEditable ? (
+    <PinnedItems
+      posts={posts}
+      group={group}
+      isEditable={isEditable}
+      pinned={pinned}
+      onDeleteClicked={onDeleteClicked}
+      onSubmit={onSubmit}
+      modalMessage={'Pin posts or markets to the overview of this group.'}
+    />
+  ) : (
+    <LoadingIndicator />
+  )
+}
+
+export function PinnedItems(props: {
+  posts: Post[]
+  isEditable: boolean
+  pinned: JSX.Element[]
+  onDeleteClicked: (index: number) => void
+  onSubmit: (selectedItems: { itemId: string; type: string }[]) => void
+  group?: Group
+  modalMessage: string
+}) {
+  const {
+    isEditable,
+    pinned,
+    onDeleteClicked,
+    onSubmit,
+    posts,
+    group,
+    modalMessage,
+  } = props
+  const [editMode, setEditMode] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  return pinned.length > 0 || isEditable ? (
     <div>
       <Row className="mb-3 items-center justify-between">
         <SectionHeader label={'Pinned'} />
@@ -229,19 +268,10 @@ function GroupOverviewPinned(props: {
             <div className="relative my-2">
               {element}
 
-                {editMode && (
-                  <CrossIcon
-                    onClick={() => {
-                      const newPinned = group.pinnedItems.filter((item) => {
-                        return item.itemId !== group.pinnedItems[index].itemId
-                      })
-                      updateGroup(group, { pinnedItems: newPinned })
-                    }}
-                  />
-                )}
+              {editMode && <CrossIcon onClick={() => onDeleteClicked(index)} />}
             </div>
           ))}
-            {editMode && group.pinnedItems && pinned.length < 6 && (
+          {editMode && pinned.length < 6 && (
             <div className=" py-2">
               <Row
                 className={
@@ -269,16 +299,11 @@ function GroupOverviewPinned(props: {
         setOpen={setOpen}
         title="Pin a post or market"
         description={
-            <div className={'text-md my-4 text-gray-600'}>
-              Pin posts or markets to the overview of this group.
-            </div>
+          <div className={'text-md my-4 text-gray-600'}>{modalMessage}</div>
         }
         onSubmit={onSubmit}
       />
     </div>
-    ) : (
-      <LoadingIndicator />
-    )
   ) : (
     <></>
   )

web/components/pinned-select-modal.tsx

@@ -20,8 +20,8 @@ export function PinnedSelectModal(props: {
     selectedItems: { itemId: string; type: string }[]
   ) => void | Promise<void>
   contractSearchOptions?: Partial<Parameters<typeof ContractSearch>[0]>
-  group: Group
   posts: Post[]
+  group?: Group
 }) {
   const {
     title,
@@ -134,8 +134,8 @@ export function PinnedSelectModal(props: {
                 highlightClassName:
                   '!bg-indigo-100 outline outline-2 outline-indigo-300',
               }}
-              additionalFilter={{ groupSlug: group.slug }}
-              persistPrefix={`group-${group.slug}`}
+              additionalFilter={group ? { groupSlug: group.slug } : undefined}
+              persistPrefix={group ? `group-${group.slug}` : undefined}
               headerClassName="bg-white sticky"
               {...contractSearchOptions}
             />
@@ -152,7 +152,7 @@ export function PinnedSelectModal(props: {
                     '!bg-indigo-100 outline outline-2 outline-indigo-300',
                 }}
               />
-              {posts.length === 0 && (
+              {posts.length == 0 && (
                 <div className="text-center text-gray-500">No posts yet</div>
               )}
             </div>