From 088bccb815091910fc82711c567477007038b1a6 Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Sun, 2 Oct 2022 17:26:31 +0100
Subject: [PATCH] Fix James's nits

---
 web/components/groups/group-overview.tsx | 40 ++++++++++++++----------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/web/components/groups/group-overview.tsx b/web/components/groups/group-overview.tsx
index 8e576c42..9b0f7240 100644
--- a/web/components/groups/group-overview.tsx
+++ b/web/components/groups/group-overview.tsx
@@ -77,7 +77,7 @@ export function GroupOverview(props: {
         maxResults={MAX_TRENDING_POSTS}
         defaultFilter={'all'}
         additionalFilter={{ groupSlug: group.slug }}
-        persistPrefix={`group-${group.slug}`}
+        persistPrefix={`group-trending-${group.slug}`}
       />
       <GroupAbout
         group={group}
@@ -181,22 +181,14 @@ function GroupOverviewPinned(props: {
               {element}
 
               {editMode && (
-                <div>
-                  <button
-                    className=" text-gray-500 hover:text-gray-700"
-                    onClick={() => {
-                      console.log(group.pinnedItems)
-                      const newPinned = group.pinnedItems.filter((item) => {
-                        return item.itemId !== group.pinnedItems[index].itemId
-                      })
-                      updateGroup(group, { pinnedItems: newPinned })
-                    }}
-                  >
-                    <div className="absolute top-0 left-0 right-0 bottom-0 bg-gray-200 bg-opacity-50">
-                      <XCircleIcon className="h-12 w-12 text-gray-600" />
-                    </div>
-                  </button>
-                </div>
+                <CrossIcon
+                  onClick={() => {
+                    const newPinned = group.pinnedItems.filter((item) => {
+                      return item.itemId !== group.pinnedItems[index].itemId
+                    })
+                    updateGroup(group, { pinnedItems: newPinned })
+                  }}
+                />
               )}
             </div>
           ))}
@@ -370,3 +362,17 @@ export function GroupAbout(props: {
     </>
   )
 }
+
+function CrossIcon(props: { onClick: () => void }) {
+  const { onClick } = props
+
+  return (
+    <div>
+      <button className=" text-gray-500 hover:text-gray-700" onClick={onClick}>
+        <div className="absolute top-0 left-0 right-0 bottom-0 bg-gray-200 bg-opacity-50">
+          <XCircleIcon className="h-12 w-12 text-gray-600" />
+        </div>
+      </button>
+    </div>
+  )
+}