Move delete pinned photo

web/components/buttons/more-options-user-button.tsx

@@ -1,32 +1,33 @@
-import { usePrivateUser } from 'web/hooks/use-user'
-import { Button } from 'web/components/buttons/button'
-import { Modal } from 'web/components/layout/modal'
-import { useState } from 'react'
-import { Col } from 'web/components/layout/col'
-import { User } from 'common/user'
+import {usePrivateUser} from 'web/hooks/use-user'
+import {Button} from 'web/components/buttons/button'
+import {Modal} from 'web/components/layout/modal'
+import {useState} from 'react'
+import {Col} from 'web/components/layout/col'
+import {User} from 'common/user'
 import clsx from 'clsx'
-import { DotsHorizontalIcon } from '@heroicons/react/outline'
-import { useAdmin, useTrusted } from 'web/hooks/use-admin'
-import { UncontrolledTabs } from 'web/components/layout/tabs'
-import { BlockUser } from 'web/components/profile/block-user'
-import { ReportUser } from 'web/components/profile/report-user'
-import { Title } from 'web/components/widgets/title'
-import { Row } from '../layout/row'
-import { SimpleCopyTextButton } from 'web/components/buttons/copy-link-button'
-import { api } from 'web/lib/api'
-import { buildArray } from 'common/util/array'
-import { DeleteYourselfButton } from '../profile/delete-yourself'
+import {DotsHorizontalIcon} from '@heroicons/react/outline'
+import {useAdmin, useTrusted} from 'web/hooks/use-admin'
+import {UncontrolledTabs} from 'web/components/layout/tabs'
+import {BlockUser} from 'web/components/profile/block-user'
+import {ReportUser} from 'web/components/profile/report-user'
+import {Title} from 'web/components/widgets/title'
+import {Row} from '../layout/row'
+import {SimpleCopyTextButton} from 'web/components/buttons/copy-link-button'
+import {api} from 'web/lib/api'
+import {buildArray} from 'common/util/array'
+import {DeleteYourselfButton} from '../profile/delete-yourself'
 import {toast} from "react-hot-toast";
+import Router from "next/router";
 
 export function MoreOptionsUserButton(props: { user: User }) {
-  const { user } = props
-  const { id: userId, name } = user
+  const {user} = props
+  const {id: userId, name} = user
   const currentPrivateUser = usePrivateUser()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const isAdmin = useAdmin()
   const isTrusted = useTrusted()
 
-  if (!currentPrivateUser) return <div />
+  if (!currentPrivateUser) return <div/>
 
   const createdTime = new Date(user.createdTime).toLocaleDateString('en-us', {
     year: 'numeric',
@@ -76,6 +77,17 @@ export function MoreOptionsUserButton(props: { user: User }) {
                 >
                   {user.isBannedFromPosting ? 'Banned' : 'Ban User'}
                 </Button>
+                <Button
+                  size="sm"
+                  color="red"
+                  onClick={() => {
+                    api('remove-pinned-photo', {userId}).then(() =>
+                      Router.back()
+                    )
+                  }}
+                >
+                  Delete pinned photo
+                </Button>
               </Row>
             )}
           </div>
@@ -100,36 +112,36 @@ export function MoreOptionsUserButton(props: { user: User }) {
               // TODO: if isYou include a tab for users you've blocked?
               isYou
                 ? [
-                    {
-                      title: 'Delete Account',
-                      content: (
-                        <div className="flex min-h-[200px] items-center justify-center p-4">
-                          <DeleteYourselfButton/>
-                        </div>
-                      ),
-                    },
-                  ]
+                  {
+                    title: 'Delete Account',
+                    content: (
+                      <div className="flex min-h-[200px] items-center justify-center p-4">
+                        <DeleteYourselfButton/>
+                      </div>
+                    ),
+                  },
+                ]
                 : [
-                    {
-                      title: 'Block',
-                      content: (
-                        <BlockUser
-                          user={user}
-                          currentUser={currentPrivateUser}
-                          closeModal={() => setIsModalOpen(false)}
-                        />
-                      ),
-                    },
-                    {
-                      title: 'Report',
-                      content: (
-                        <ReportUser
-                          user={user}
-                          closeModal={() => setIsModalOpen(false)}
-                        />
-                      ),
-                    },
-                  ],
+                  {
+                    title: 'Block',
+                    content: (
+                      <BlockUser
+                        user={user}
+                        currentUser={currentPrivateUser}
+                        closeModal={() => setIsModalOpen(false)}
+                      />
+                    ),
+                  },
+                  {
+                    title: 'Report',
+                    content: (
+                      <ReportUser
+                        user={user}
+                        closeModal={() => setIsModalOpen(false)}
+                      />
+                    ),
+                  },
+                ],
             ])}
           />
         </Col>

web/components/profile-carousel.tsx

@@ -1,25 +1,22 @@
-import { useState } from 'react'
+import {useState} from 'react'
 import clsx from 'clsx'
 import Image from 'next/image'
-import Router from 'next/router'
-import { buildArray } from 'common/util/array'
-import { Carousel } from 'web/components/widgets/carousel'
-import { MODAL_CLASS, Modal } from 'web/components/layout/modal'
-import { Col } from 'web/components/layout/col'
-import { SignUpButton } from './nav/sidebar'
-import { Profile } from 'common/profiles/profile'
-import { useAdmin } from 'web/hooks/use-admin'
-import { Button } from 'web/components/buttons/button'
-import { updateProfile } from 'web/lib/api'
-import { Row } from 'web/components/layout/row'
-import { useUser } from 'web/hooks/use-user'
-import { PlusIcon } from '@heroicons/react/solid'
-import { api } from 'web/lib/api'
-import { EditablePhotoGrid } from './widgets/editable-photo-grid'
-import { AddPhotosWidget } from './widgets/add-photos'
+import {buildArray} from 'common/util/array'
+import {Carousel} from 'web/components/widgets/carousel'
+import {Modal, MODAL_CLASS} from 'web/components/layout/modal'
+import {Col} from 'web/components/layout/col'
+import {SignUpButton} from './nav/sidebar'
+import {Profile} from 'common/profiles/profile'
+import {Button} from 'web/components/buttons/button'
+import {updateProfile} from 'web/lib/api'
+import {Row} from 'web/components/layout/row'
+import {useUser} from 'web/hooks/use-user'
+import {PlusIcon} from '@heroicons/react/solid'
+import {EditablePhotoGrid} from './widgets/editable-photo-grid'
+import {AddPhotosWidget} from './widgets/add-photos'
 
 export default function ProfileCarousel(props: { profile: Profile }) {
-  const { profile } = props
+  const {profile} = props
   const photoNums = profile.photo_urls ? profile.photo_urls.length : 0
 
   const [lightboxUrl, setLightboxUrl] = useState('')
@@ -30,7 +27,6 @@ export default function ProfileCarousel(props: { profile: Profile }) {
   const [pinnedUrl, setPinnedUrl] = useState<string | null>(profile.pinned_url)
   const [photoUrls, setPhotoUrls] = useState<string[]>(profile.photo_urls ?? [])
 
-  const isAdmin = useAdmin()
   const currentUser = useUser()
   const isCurrentUser = currentUser?.id === profile.user_id
 
@@ -59,7 +55,8 @@ export default function ProfileCarousel(props: { profile: Profile }) {
           </div>
         )}
         {photoNums > 0 && (
-          <Col className="bg-canvas-100 dark:bg-canvas-0 text-ink-500 relative h-80 w-[250px] flex-none items-center rounded text-6xl ">
+          <Col
+            className="bg-canvas-100 dark:bg-canvas-0 text-ink-500 relative h-80 w-[250px] flex-none items-center rounded text-6xl ">
             <Col className=" m-auto items-center gap-1">
               <div className="select-none font-semibold">+{photoNums}</div>
               <SignUpButton
@@ -78,19 +75,6 @@ export default function ProfileCarousel(props: { profile: Profile }) {
   return (
     <>
       <div className="flex gap-2 self-end">
-        {isAdmin && (
-          <Button
-            size="sm"
-            color="red"
-            onClick={() => {
-              api('remove-pinned-photo', { userId: profile.user_id }).then(() =>
-                Router.back()
-              )
-            }}
-          >
-            Admin: Delete pinned photo
-          </Button>
-        )}
         {isCurrentUser && !isEditMode && (
           <Button
             onClick={() => setIsEditMode(true)}
@@ -158,7 +142,7 @@ export default function ProfileCarousel(props: { profile: Profile }) {
             size="sm"
             className="self-start"
           >
-            <PlusIcon className="mr-1 h-5 w-5" />
+            <PlusIcon className="mr-1 h-5 w-5"/>
             Add photos
           </Button>
         </Col>
@@ -186,14 +170,14 @@ export default function ProfileCarousel(props: { profile: Profile }) {
               className="bg-ink-200 text-ink-0 group flex h-80 w-[250px] flex-none cursor-pointer snap-start items-center justify-center rounded ease-in-out"
               onClick={() => setAddPhotosOpen(true)}
             >
-              <PlusIcon className="w-20 transition-all group-hover:w-24" />
+              <PlusIcon className="w-20 transition-all group-hover:w-24"/>
             </button>
           )}
         </Carousel>
       )}
 
       <Modal open={lightboxOpen} setOpen={setLightboxOpen}>
-        <Image src={lightboxUrl} width={1000} height={1000} alt="" />
+        <Image src={lightboxUrl} width={1000} height={1000} alt=""/>
       </Modal>
 
       {isCurrentUser && (