Show owner in trip card and trip details

tabi-memo · Feb 19, 2024 · 0058aa5 · 0058aa5
1 parent c123379
commit 0058aa5
Show file tree

Hide file tree

Showing 12 changed files with 225 additions and 96 deletions.
diff --git a/app/trip/[id]/manage-group/components/invited-user-card.tsx b/app/trip/[id]/manage-group/components/invited-user-card.tsx
@@ -11,6 +11,7 @@ import {
   Text
 } from '@chakra-ui/react'
 import { FiTrash2 } from 'react-icons/fi'
+import { useUserId } from '@/providers/session-provider'
 import { useUpdateInvitation, useDeleteInvitation } from '../hooks'
 import { Permission_Level_Enum } from '@generated/api'
 
@@ -21,6 +22,7 @@ type InvitedUserCardProps = {
   name: string
   email: string
   permissionLevel: Permission_Level_Enum
+  ownerId: string
 }
 
 export const InvitedUserCard = ({
@@ -29,7 +31,8 @@ export const InvitedUserCard = ({
   image,
   name,
   email,
-  permissionLevel
+  permissionLevel,
+  ownerId
 }: InvitedUserCardProps) => {
   const borderColor = useColorModeValue('gray.300', 'gray.600')
 
@@ -38,11 +41,15 @@ export const InvitedUserCard = ({
     [Permission_Level_Enum.ViewOnly]: 'View Only'
   }
 
+  const userId = useUserId()
+
   const { updatePermissionLevel, isInvitationUpdating } =
     useUpdateInvitation(tripId)
 
   const { deleteInvitation, isInvitationDeleting } = useDeleteInvitation(tripId)
 
+  const currentUserIsOwner = userId === ownerId
+
   return (
     <Flex
       justifyContent="space-between"
@@ -61,8 +68,9 @@ export const InvitedUserCard = ({
         </Box>
       </Flex>
 
+      {/* TODO If not owner, readme only */}
       <Flex
-        justifyContent="space-between"
+        justifyContent={currentUserIsOwner ? 'space-between' : 'center'}
         align="center"
         w={{ base: 'auto', md: '174px' }}
         flexShrink={0}
@@ -77,6 +85,7 @@ export const InvitedUserCard = ({
               <Radio
                 key={key}
                 value={value}
+                isReadOnly={!currentUserIsOwner}
                 size={{ base: 'sm', md: 'md' }}
                 onChange={() => updatePermissionLevel(id, value)}
               >
@@ -86,20 +95,22 @@ export const InvitedUserCard = ({
           </VStack>
         </RadioGroup>
 
-        <IconButton
-          aria-label="Delete the user"
-          variant="unstyled"
-          color={'gray.400'}
-          _hover={{
-            color: 'gray.500'
-          }}
-          minW={{ base: '18px', md: '24px' }}
-          h={{ base: '18px', md: '24px' }}
-          isLoading={isInvitationDeleting}
-          onClick={() => deleteInvitation(id)}
-        >
-          <FiTrash2 size="100%" />
-        </IconButton>
+        {currentUserIsOwner && (
+          <IconButton
+            aria-label="Delete the user"
+            variant="unstyled"
+            color={'gray.400'}
+            _hover={{
+              color: 'gray.500'
+            }}
+            minW={{ base: '18px', md: '24px' }}
+            h={{ base: '18px', md: '24px' }}
+            isLoading={isInvitationDeleting}
+            onClick={() => deleteInvitation(id)}
+          >
+            <FiTrash2 size="100%" />
+          </IconButton>
+        )}
       </Flex>
     </Flex>
   )

diff --git a/app/trip/[id]/manage-group/components/owner-card.tsx b/app/trip/[id]/manage-group/components/owner-card.tsx
@@ -36,7 +36,7 @@ export const OwnerCard = ({ image, name, email }: OwnerCardProps) => {
 
       <Box
         fontWeight="bold"
-        w={{ base: '138px', md: '174px' }}
+        minW={{ base: '82px', md: '174px' }}
         textAlign="center"
       >
         Owner

diff --git a/app/trip/[id]/manage-group/page.tsx b/app/trip/[id]/manage-group/page.tsx
@@ -58,6 +58,7 @@ export default function ManageGroup({ params }: { params: { id: string } }) {
                       name={invitedUser.node.users?.name || ''}
                       email={invitedUser.node.users?.email || ''}
                       permissionLevel={invitedUser.node.permission_level}
+                      ownerId={tripSharedUsers.users?.id || ''}
                     />
                   )
                 }

diff --git a/app/trip/[id]/page.tsx b/app/trip/[id]/page.tsx
@@ -53,6 +53,17 @@ export default function TripDetailsPage({
     }
   }
 
+  const owner = {
+    id: tripData?.edges[0].node.users.id,
+    image: tripData?.edges[0].node.users.profile_picture_url
+  }
+
+  const sharedUsers =
+    tripData?.edges[0].node.invitationsCollection?.edges.map((invitation) => ({
+      id: invitation.node.users?.id,
+      image: invitation.node.users?.profile_picture_url
+    })) || []
+
   return (
     <Box as="main" minH="100svh" bg={bg} color={color}>
       <Container
@@ -76,14 +87,7 @@ export default function TripDetailsPage({
               dateTo={tripData.edges[0].node.date_to}
               cost={tripData.edges[0].node.cost}
               costUnit={tripData.edges[0].node.cost_unit}
-              users={
-                tripData.edges[0].node.invitationsCollection?.edges.map(
-                  (invitation) => ({
-                    id: invitation.node.users?.id,
-                    image: invitation.node.users?.profile_picture_url
-                  })
-                ) || []
-              }
+              users={[owner, ...sharedUsers]}
               tags={
                 tripData.edges[0].node.trip_tagsCollection?.edges.map(
                   (tag) => ({

diff --git a/app/trip/components/trip-card.tsx b/app/trip/components/trip-card.tsx
@@ -83,29 +83,47 @@ export const TripCard = ({ data }: TripCardProps) => {
         >
           {data.node.title}
         </Heading>
-        {data.node.invitationsCollection?.edges &&
-          data.node.invitationsCollection.edges.length > 0 && (
-            <Flex gap="8px" color="gray.400">
-              {data.node.invitationsCollection?.edges.map((invitation) => (
-                <Box
-                  key={invitation.node.users?.id}
-                  w={{ base: '26px', md: '38px' }}
-                  h={{ base: '26px', md: '38px' }}
-                >
-                  {invitation.node.users?.profile_picture_url ? (
-                    <Image
-                      src={invitation.node.users?.profile_picture_url}
-                      alt=""
-                      borderRadius="full"
-                      objectFit="cover"
-                    />
-                  ) : (
-                    <MdAccountCircle size="100%" />
-                  )}
-                </Box>
-              ))}
-            </Flex>
-          )}
+        <Flex gap="8px" color="gray.400">
+          <Box
+            w={{ base: '26px', md: '38px' }}
+            h={{ base: '26px', md: '38px' }}
+          >
+            {data.node.users.profile_picture_url ? (
+              <Image
+                src={data.node.users.profile_picture_url}
+                alt=""
+                borderRadius="full"
+                objectFit="cover"
+              />
+            ) : (
+              <MdAccountCircle size="100%" />
+            )}
+          </Box>
+
+          {data.node.invitationsCollection?.edges &&
+            data.node.invitationsCollection.edges.length > 0 && (
+              <>
+                {data.node.invitationsCollection?.edges.map((invitation) => (
+                  <Box
+                    key={invitation.node.users?.id}
+                    w={{ base: '26px', md: '38px' }}
+                    h={{ base: '26px', md: '38px' }}
+                  >
+                    {invitation.node.users?.profile_picture_url ? (
+                      <Image
+                        src={invitation.node.users?.profile_picture_url}
+                        alt=""
+                        borderRadius="full"
+                        objectFit="cover"
+                      />
+                    ) : (
+                      <MdAccountCircle size="100%" />
+                    )}
+                  </Box>
+                ))}
+              </>
+            )}
+        </Flex>
         <Flex fontSize={{ base: 'sm', md: 'md' }}>
           {formatDateToSlash(data.node.date_from, 'dayMonthYear')} -{' '}
           {formatDateToSlash(data.node.date_to, 'dayMonthYear')}

diff --git a/app/trip/graphql/query/tripDetails.graphql b/app/trip/graphql/query/tripDetails.graphql
@@ -9,6 +9,10 @@ query tripDetails($id: UUID) {
         image_url
         cost
         cost_unit
+        users {
+          id
+          profile_picture_url
+        }
         invitationsCollection {
           edges {
             node {

diff --git a/app/trip/graphql/query/tripsCollection.graphql b/app/trip/graphql/query/tripsCollection.graphql
@@ -19,6 +19,11 @@ query tripsCollection(
         date_to
         image_url
         created_at
+        users {
+          id
+          name
+          profile_picture_url
+        }
         invitationsCollection {
           edges {
             node {

diff --git a/app/trip/hooks/useTripsGet.ts b/app/trip/hooks/useTripsGet.ts
@@ -5,6 +5,7 @@ import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
 export const useTripsGet = (searchWord?: string) => {
   const userId = useUserId()
 
+  // TODO - need to change as currently just showing all trips user created. We also need to show invited trips
   const { data, loading, error, fetchMore, refetch, networkStatus } =
     useTripsCollectionQuery({
       variables: {