Remove granular permissions from lists of permissions in admin

components/admin/permissions-table/PermissionsTable.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { memo } from 'react'
 import { Badge, Stack, Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
-import { useSelectedWebName } from '@hooks/webs'
 
 const columns = [
   {
@@ -15,8 +14,6 @@ const columns = [
 ]
 
 const PermissionsTable = ({ permissions }) => {
-  const selectedWebName = useSelectedWebName()
-
   return (
     <Table borderWidth="1px" fontSize="sm" background="#ffffff" mb="2rem">
       <Thead bg="gray.50">
@@ -43,25 +40,16 @@ const PermissionsTable = ({ permissions }) => {
                   )
                 }
 
-                if (permission.webs.some((w) => w.title === selectedWebName)) {
-                  return (
-                    <Td key={index}>
-                      <Stack direction="row">
-                        <Badge>Editor</Badge>
-                        {!permission.user.emailVerified && (
-                          <Badge colorScheme="yellow">Invite pending</Badge>
-                        )}
-                      </Stack>
-                    </Td>
-                  )
-                } else {
-                  const formatter = new Intl.ListFormat('en', {
-                    style: 'long',
-                    type: 'conjunction',
-                  })
-                  const listings = permission.listings.map((l) => l.title)
-                  return <Td key={index}>{formatter.format(listings)}</Td>
-                }
+                return (
+                  <Td key={index}>
+                    <Stack direction="row">
+                      <Badge>Editor</Badge>
+                      {!permission.user.emailVerified && (
+                        <Badge colorScheme="yellow">Invite pending</Badge>
+                      )}
+                    </Stack>
+                  </Td>
+                )
               }
 
               return <Td key={index}>{cell}</Td>

components/emails/InviteEmail.tsx

@@ -12,20 +12,12 @@ import {
 } from '@react-email/components'
 
 interface InviteEmailProps {
-  listings: string
   webTitle: string
-  inviteToWeb: boolean
   email: string
   url: string
 }
 
-const InviteEmail = ({
-  listings,
-  webTitle,
-  inviteToWeb,
-  email,
-  url,
-}: InviteEmailProps) => {
+const InviteEmail = ({ webTitle, email, url }: InviteEmailProps) => {
   // Insert invisible space into domains and email address to prevent both the
   // email address and the domain from being turned into a hyperlink by email
   // clients like Outlook and Apple mail, as this is confusing because it seems
@@ -48,17 +40,12 @@ const InviteEmail = ({
             alt="Resilience Web logo"
             style={logo}
           />
-          <Text style={paragraph}>Hello,</Text>
+          <Text style={paragraph}>Hello 👋</Text>
           <Text style={paragraph}>
-            You are invited to be an admin of{' '}
-            <strong>
-              {listings}
-              {inviteToWeb === true ? ' Resilience Web' : ''}
-            </strong>
-            {inviteToWeb === false ? ` on the ${webTitle} Resilience Web` : ''},
-            a digital mapping of organisations that are working to create a more
-            resilient, more equitable and greener future for this city and its
-            residents.
+            You are invited to be an editor on{' '}
+            <strong>{webTitle} Resilience Web</strong>, a digital mapping of
+            organisations that are working to create a more resilient, more
+            equitable and greener future for this city and its residents.
           </Text>
           <Text style={paragraph}>
             Click the button below to sign in as{' '}

components/homepage/web-cards/WebCards.tsx

@@ -9,7 +9,7 @@ import { useWebs } from '@hooks/webs'
 const orderOnHomepage = ['Cambridge', 'York', 'Durham']
 
 const WebCards = () => {
-  const { webs } = useWebs()
+  const { webs } = useWebs({ published: true })
 
   return (
     <Container maxW="7xl">

hooks/webs/useWebs.tsx

@@ -2,32 +2,37 @@ import type { Web } from '@prisma/client'
 import { useQuery } from '@tanstack/react-query'
 import { REMOTE_URL } from '@helpers/config'
 
-export async function fetchWebsHydrate() {
+export async function fetchWebsHydrate({ published = false } = {}) {
   const BASE_URL =
     process.env.VERCEL_ENV === 'preview'
       ? 'https://resilienceweb.org.uk'
       : REMOTE_URL
 
-  const response = await fetch(`${BASE_URL}/api/webs?withListings=true`)
+  const response = await fetch(
+    `${BASE_URL}/api/webs?withListings=true&published=${published}`,
+  )
   const data: { webs: Web[] } = await response.json()
   const { webs } = data
   return webs || []
 }
 
-async function fetchWebsRequest() {
-  const response = await fetch(`/api/webs?withListings=true`)
+async function fetchWebsRequest({ queryKey }) {
+  const [_key, { published }] = queryKey
+  const response = await fetch(
+    `/api/webs?withListings=true&published=${published}`,
+  )
   const data: { webs: Web[] } = await response.json()
   const { webs } = data
   return webs || []
 }
 
-export default function useWebs() {
+export default function useWebs({ published = false } = {}) {
   const {
     data: webs,
     isPending,
     isError,
   } = useQuery({
-    queryKey: ['webs'],
+    queryKey: ['webs', { published }],
     queryFn: fetchWebsRequest,
     refetchOnWindowFocus: false,
   })