commit f943d117bb716ceee33fe210449d59ef9bdd5ab6 · gmstn.systems/gemstone-app

+74 -2

src/components/Settings/ChannelInfo.tsx

···

       1
       1
        
       import { Text } from "@/components/primitives/Text";

     

       2
       2
       +
       import { InviteUserModalContent } from "@/components/Settings/InviteUserModalContent";

     

       3
       3
       +
       import { useFacet } from "@/lib/facet";

     

       4
       4
       +
       import { fade } from "@/lib/facet/src/lib/colors";

     

       2
       5
        
       import type { AtUri } from "@/lib/types/atproto";

     

       3
       6
        
       import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channel";

     

       4
       4
       -
       import { View } from "react-native";

     

       7
       7
       +
       import { atUriToString } from "@/lib/utils/atproto";

     

       8
       8
       +
       import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       9
       9
       +
       import { Hash, UserRoundPlus } from "lucide-react-native";

     

       10
       10
       +
       import { useState } from "react";

     

       11
       11
       +
       import { Modal, Pressable, View } from "react-native";

     

       5
       12
        
       

     

       6
       13
        
       export const ChannelInfo = ({

     

       7
       14
        
           channel,

     
···

       9
       16
        
           channel: {

     

       10
       17
        
               value: SystemsGmstnDevelopmentChannel;

     

       11
       18
        
               uri: Required<AtUri>;

     

       19
       19
       +
               cid: string;

     

       12
       20
        
           };

     

       13
       21
        
       }) => {

     

       22
       22
       +
           const { semantic } = useCurrentPalette();

     

       23
       23
       +
           const { atoms } = useFacet();

     

       24
       24
       +
           const [showInviteModal, setShowInviteModal] = useState(false);

     

       25
       25
       +
           const channelAtUri = atUriToString(channel.uri);

     

       26
       26
       +
       

     

       14
       27
        
           return (

     

       15
       15
       -
               <View>

     

       28
       28
       +
               <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>

     

       29
       29
       +
                   <Hash height={16} width={16} color={semantic.text} />

     

       16
       30
        
                   <Text>{channel.value.name}</Text>

     

       31
       31
       +
                   <Pressable

     

       32
       32
       +
                       style={{ marginLeft: 2 }}

     

       33
       33
       +
                       onPress={() => {

     

       34
       34
       +
                           setShowInviteModal(true);

     

       35
       35
       +
                       }}

     

       36
       36
       +
                   >

     

       37
       37
       +
                       {({ hovered }) => (

     

       38
       38
       +
                           <UserRoundPlus

     

       39
       39
       +
                               height={16}

     

       40
       40
       +
                               width={16}

     

       41
       41
       +
                               color={hovered ? semantic.primary : semantic.text}

     

       42
       42
       +
                               style={{

     

       43
       43
       +
                                   backgroundColor: hovered

     

       44
       44
       +
                                       ? semantic.surfaceVariant

     

       45
       45
       +
                                       : semantic.surface,

     

       46
       46
       +
                                   padding: 4,

     

       47
       47
       +
                                   borderRadius: atoms.radii.sm,

     

       48
       48
       +
                               }}

     

       49
       49
       +
                           />

     

       50
       50
       +
                       )}

     

       51
       51
       +
                   </Pressable>

     

       52
       52
       +
                   <Modal

     

       53
       53
       +
                       visible={showInviteModal}

     

       54
       54
       +
                       onRequestClose={() => {

     

       55
       55
       +
                           setShowInviteModal(!showInviteModal);

     

       56
       56
       +
                       }}

     

       57
       57
       +
                       animationType="fade"

     

       58
       58
       +
                       transparent={true}

     

       59
       59
       +
                   >

     

       60
       60
       +
                       <Pressable

     

       61
       61
       +
                           style={{

     

       62
       62
       +
                               flex: 1,

     

       63
       63
       +
                               cursor: "auto",

     

       64
       64
       +
                               alignItems: "center",

     

       65
       65
       +
                               justifyContent: "center",

     

       66
       66
       +
                               backgroundColor: fade(semantic.backgroundDarker, 60),

     

       67
       67
       +
                           }}

     

       68
       68
       +
                           onPress={() => {

     

       69
       69
       +
                               setShowInviteModal(false);

     

       70
       70
       +
                           }}

     

       71
       71
       +
                       >

     

       72
       72
       +
                           <Pressable

     

       73
       73
       +
                               style={{

     

       74
       74
       +
                                   alignSelf: "center",

     

       75
       75
       +
                                   cursor: "auto",

     

       76
       76
       +
                               }}

     

       77
       77
       +
                               onPress={(e) => {

     

       78
       78
       +
                                   e.stopPropagation();

     

       79
       79
       +
                               }}

     

       80
       80
       +
                           >

     

       81
       81
       +
                               <InviteUserModalContent

     

       82
       82
       +
                                   setShowInviteModal={setShowInviteModal}

     

       83
       83
       +
                                   channelAtUri={channelAtUri}

     

       84
       84
       +
                                   channelCid={channel.cid}

     

       85
       85
       +
                               />

     

       86
       86
       +
                           </Pressable>

     

       87
       87
       +
                       </Pressable>

     

       88
       88
       +
                   </Modal>

     

       17
       89
        
               </View>

     

       18
       90
        
           );

     

       19
       91
        
       };

+15 -29

src/components/Settings/ChannelSettings.tsx

···

       9
       9
        
       import { getChannelRecordsFromPds } from "@/queries/get-channels-from-pds";

     

       10
       10
        
       import type { OAuthSession } from "@atproto/oauth-client";

     

       11
       11
        
       import { useQuery } from "@tanstack/react-query";

     

       12
       12
       -
       import { Gem, MessagesSquare } from "lucide-react-native";

     

       12
       12
       +
       import { MessagesSquare } from "lucide-react-native";

     

       13
       13
        
       import { View } from "react-native";

     

       14
       14
        
       

     

       15
       15
        
       export const ChannelSettings = () => {

     
···

       57
       57
        
                       </Text>

     

       58
       58
        
                   </View>

     

       59
       59
        
                   {channels && channels.length > 0 && (

     

       60
       60
       -
                       <View style={{ marginLeft: 10, gap: 8 }}>

     

       61
       61
       -
                           <View

     

       62
       62
       -
                               style={{

     

       63
       63
       -
                                   flexDirection: "row",

     

       64
       64
       -
                                   alignItems: "center",

     

       65
       65
       -
                                   gap: 4,

     

       66
       66
       -
                               }}

     

       67
       67
       -
                           >

     

       68
       68
       -
                               <Gem height={16} width={16} color={semantic.text} />

     

       69
       69
       -
                               <Text style={[typography.weights.byName.normal]}>

     

       70
       70
       -
                                   Your Shards

     

       71
       71
       -
                               </Text>

     

       72
       72
       -
                           </View>

     

       73
       73
       -
                           <View

     

       74
       74
       -
                               style={{

     

       75
       75
       -
                                   gap: 4,

     

       76
       76
       -
                                   marginLeft: 8,

     

       77
       77
       -
                               }}

     

       78
       78
       -
                           >

     

       79
       79
       -
                               {channels.map((channel, idx) => (

     

       80
       80
       -
                                   <ChannelInfo key={idx} channel={channel} />

     

       81
       81
       -
                               ))}

     

       82
       82
       -
                           </View>

     

       60
       60
       +
                       <View

     

       61
       61
       +
                           style={{

     

       62
       62
       +
                               gap: 4,

     

       63
       63
       +
                               marginLeft: 8,

     

       64
       64
       +
                           }}

     

       65
       65
       +
                       >

     

       66
       66
       +
                           {channels.map((channel, idx) => (

     

       67
       67
       +
                               <ChannelInfo key={idx} channel={channel} />

     

       68
       68
       +
                           ))}

     

       83
       69
        
                       </View>

     

       84
       70
        
                   )}

     

       85
       71
        
               </View>

     
···

       87
       73
        
       };

     

       88
       74
        
       

     

       89
       75
        
       const channelsQueryFn = async (session: OAuthSession) => {

     

       90
       90
       -
           const lattices = await getChannelRecordsFromPds({

     

       76
       76
       +
           const channels = await getChannelRecordsFromPds({

     

       91
       77
        
               pdsEndpoint: session.serverMetadata.issuer,

     

       92
       78
        
               did: session.did,

     

       93
       79
        
           });

     

       94
       80
        
       

     

       95
       95
       -
           if (!lattices.ok) {

     

       96
       96
       -
               console.error("latticeQueryFn error.", lattices.error);

     

       81
       81
       +
           if (!channels.ok) {

     

       82
       82
       +
               console.error("channelsQueryFn error.", channels.error);

     

       97
       83
        
               throw new Error(

     

       98
       84
        
                   `Something went wrong while getting the user's channel records.}`,

     

       99
       85
        
               );

     

       100
       86
        
           }

     

       101
       87
        
       

     

       102
       102
       -
           const results = lattices.data

     

       88
       88
       +
           const results = channels.data

     

       103
       89
        
               .map((record) => {

     

       104
       90
        
                   const convertResult = stringToAtUri(record.uri);

     

       105
       91
        
                   if (!convertResult.ok) {

     
···

       123
       109
        
                       collection: convertResult.data.collection,

     

       124
       110
        
                       rKey: convertResult.data.rKey,

     

       125
       111
        
                   };

     

       126
       126
       -
                   return { uri, value: record.value };

     

       112
       112
       +
                   return { cid: record.cid, uri, value: record.value };

     

       127
       113
        
               })

     

       128
       114
        
               .filter((atUri) => atUri !== undefined);

     

       129
       115

+278

src/components/Settings/InviteUserModalContent.tsx

···

       1
       1
       +
       import { Loading } from "@/components/primitives/Loading";

     

       2
       2
       +
       import { Text } from "@/components/primitives/Text";

     

       3
       3
       +
       import { useFacet } from "@/lib/facet";

     

       4
       4
       +
       import { lighten } from "@/lib/facet/src/lib/colors";

     

       5
       5
       +
       import type { AtUri } from "@/lib/types/atproto";

     

       6
       6
       +
       import { didSchema } from "@/lib/types/atproto";

     

       7
       7
       +
       import type { SystemsGmstnDevelopmentChannelInvite } from "@/lib/types/lexicon/systems.gmstn.development.channel.invite";

     

       8
       8
       +
       import { didDocResolver, stringToAtUri } from "@/lib/utils/atproto";

     

       9
       9
       +
       import { inviteNewUser } from "@/lib/utils/gmstn";

     

       10
       10
       +
       import {

     

       11
       11
       +
           useOAuthAgentGuaranteed,

     

       12
       12
       +
           useOAuthSessionGuaranteed,

     

       13
       13
       +
       } from "@/providers/OAuthProvider";

     

       14
       14
       +
       import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       15
       15
       +
       import { getInviteRecordsFromPds } from "@/queries/get-invites-from-pds";

     

       16
       16
       +
       import { type OAuthSession } from "@atproto/oauth-client";

     

       17
       17
       +
       import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

     

       18
       18
       +
       import { format } from "date-fns";

     

       19
       19
       +
       import { Plus } from "lucide-react-native";

     

       20
       20
       +
       import { useState, type Dispatch, type SetStateAction } from "react";

     

       21
       21
       +
       import { FlatList, Pressable, TextInput, View } from "react-native";

     

       22
       22
       +
       

     

       23
       23
       +
       export const InviteUserModalContent = ({

     

       24
       24
       +
           setShowInviteModal,

     

       25
       25
       +
           channelAtUri,

     

       26
       26
       +
           channelCid,

     

       27
       27
       +
       }: {

     

       28
       28
       +
           setShowInviteModal: Dispatch<SetStateAction<boolean>>;

     

       29
       29
       +
           channelAtUri: string;

     

       30
       30
       +
           channelCid: string;

     

       31
       31
       +
       }) => {

     

       32
       32
       +
           const { semantic } = useCurrentPalette();

     

       33
       33
       +
           const { atoms, typography } = useFacet();

     

       34
       34
       +
           const [inputText, setInputText] = useState("");

     

       35
       35
       +
           const session = useOAuthSessionGuaranteed();

     

       36
       36
       +
           const agent = useOAuthAgentGuaranteed();

     

       37
       37
       +
           const queryClient = useQueryClient();

     

       38
       38
       +
       

     

       39
       39
       +
           const { isLoading, data: invites } = useQuery({

     

       40
       40
       +
               queryKey: ["invites", session.did],

     

       41
       41
       +
               queryFn: async () => {

     

       42
       42
       +
                   return await invitesQueryFn({ session, channelAtUri });

     

       43
       43
       +
               },

     

       44
       44
       +
           });

     

       45
       45
       +
       

     

       46
       46
       +
           const { mutate: inviteUserMutation, isPending: mutationPending } =

     

       47
       47
       +
               useMutation({

     

       48
       48
       +
                   mutationFn: async () => {

     

       49
       49
       +
                       const {

     

       50
       50
       +
                           success,

     

       51
       51
       +
                           error,

     

       52
       52
       +
                           data: did,

     

       53
       53
       +
                       } = didSchema.safeParse(inputText);

     

       54
       54
       +
                       if (!success) throw new Error(error.message);

     

       55
       55
       +
                       const inviteRes = await inviteNewUser({

     

       56
       56
       +
                           agent,

     

       57
       57
       +
                           did,

     

       58
       58
       +
                           channel: {

     

       59
       59
       +
                               uri: channelAtUri,

     

       60
       60
       +
                               cid: channelCid,

     

       61
       61
       +
                               $type: "com.atproto.repo.strongRef",

     

       62
       62
       +
                           },

     

       63
       63
       +
                       });

     

       64
       64
       +
                       console.log(inviteRes)

     

       65
       65
       +
                       if (!inviteRes.ok) throw new Error(inviteRes.error);

     

       66
       66
       +
                   },

     

       67
       67
       +
                   onSuccess: async () => {

     

       68
       68
       +
                       await queryClient.invalidateQueries({

     

       69
       69
       +
                           queryKey: ["invites", session.did],

     

       70
       70
       +
                       });

     

       71
       71
       +
                   },

     

       72
       72
       +
               });

     

       73
       73
       +
       

     

       74
       74
       +
           const disableSubmitButton = (() => {

     

       75
       75
       +
               const { success } = didSchema.safeParse(inputText);

     

       76
       76
       +
               if (!success) return true;

     

       77
       77
       +
               return !inputText.trim();

     

       78
       78
       +
           })();

     

       79
       79
       +
       

     

       80
       80
       +
           return (

     

       81
       81
       +
               <View

     

       82
       82
       +
                   style={{

     

       83
       83
       +
                       backgroundColor: semantic.surface,

     

       84
       84
       +
                       borderRadius: atoms.radii.lg,

     

       85
       85
       +
                       display: "flex",

     

       86
       86
       +
                       gap: 12,

     

       87
       87
       +
                       padding: 16,

     

       88
       88
       +
                   }}

     

       89
       89
       +
               >

     

       90
       90
       +
                   <View style={{ gap: 4 }}>

     

       91
       91
       +
                       <Text>User DID:</Text>

     

       92
       92
       +
                       <View

     

       93
       93
       +
                           style={{

     

       94
       94
       +
                               flexDirection: "row",

     

       95
       95
       +
                               alignItems: "center",

     

       96
       96
       +
                               gap: 4,

     

       97
       97
       +
                           }}

     

       98
       98
       +
                       >

     

       99
       99
       +
                           <TextInput

     

       100
       100
       +
                               style={[

     

       101
       101
       +
                                   {

     

       102
       102
       +
                                       flex: 1,

     

       103
       103
       +
                                       borderWidth: 1,

     

       104
       104
       +
                                       borderColor: semantic.borderVariant,

     

       105
       105
       +
                                       borderRadius: atoms.radii.md,

     

       106
       106
       +
                                       padding: 10,

     

       107
       107
       +
                                       color: semantic.text,

     

       108
       108
       +
                                       outline: "0",

     

       109
       109
       +
                                       fontFamily: typography.families.primary,

     

       110
       110
       +
                                       minWidth: 256,

     

       111
       111
       +
                                   },

     

       112
       112
       +
                                   typography.weights.byName.extralight,

     

       113
       113
       +
                                   typography.sizes.sm,

     

       114
       114
       +
                               ]}

     

       115
       115
       +
                               value={inputText}

     

       116
       116
       +
                               onChangeText={(text) => {

     

       117
       117
       +
                                   setInputText(text);

     

       118
       118
       +
                               }}

     

       119
       119
       +
                               placeholder="did:plc:... or did:web:..."

     

       120
       120
       +
                               placeholderTextColor={semantic.textPlaceholder}

     

       121
       121
       +
                           />

     

       122
       122
       +
                           <Pressable

     

       123
       123
       +
                               onPress={() => {

     

       124
       124
       +
                                   console.log("mutating");

     

       125
       125
       +
                                   inviteUserMutation();

     

       126
       126
       +
                               }}

     

       127
       127
       +
                               disabled={disableSubmitButton}

     

       128
       128
       +
                           >

     

       129
       129
       +
                               {({ hovered }) =>

     

       130
       130
       +
                                   mutationPending ? (

     

       131
       131
       +
                                       <Loading size="small" />

     

       132
       132
       +
                                   ) : (

     

       133
       133
       +
                                       <Plus

     

       134
       134
       +
                                           height={20}

     

       135
       135
       +
                                           width={20}

     

       136
       136
       +
                                           style={{

     

       137
       137
       +
                                               backgroundColor: disableSubmitButton

     

       138
       138
       +
                                                   ? semantic.textPlaceholder

     

       139
       139
       +
                                                   : hovered

     

       140
       140
       +
                                                     ? lighten(semantic.primary, 7)

     

       141
       141
       +
                                                     : semantic.primary,

     

       142
       142
       +
                                               alignSelf: "flex-start",

     

       143
       143
       +
                                               padding: 10,

     

       144
       144
       +
                                               borderRadius: atoms.radii.md,

     

       145
       145
       +
                                               borderColor: semantic.borderVariant,

     

       146
       146
       +
                                           }}

     

       147
       147
       +
                                       />

     

       148
       148
       +
                                   )

     

       149
       149
       +
                               }

     

       150
       150
       +
                           </Pressable>

     

       151
       151
       +
                       </View>

     

       152
       152
       +
                   </View>

     

       153
       153
       +
                   <View style={{ gap: 4 }}>

     

       154
       154
       +
                       <Text>Invited users:</Text>

     

       155
       155
       +
                       {isLoading ? (

     

       156
       156
       +
                           <Loading size="small" />

     

       157
       157
       +
                       ) : (

     

       158
       158
       +
                           invites && (

     

       159
       159
       +
                               <FlatList

     

       160
       160
       +
                                   inverted

     

       161
       161
       +
                                   data={invites.toReversed()}

     

       162
       162
       +
                                   renderItem={({ item }) => (

     

       163
       163
       +
                                       <InvitedUser invite={item} />

     

       164
       164
       +
                                   )}

     

       165
       165
       +
                                   keyExtractor={(_, index) => index.toString()}

     

       166
       166
       +
                                   contentContainerStyle={{

     

       167
       167
       +
                                       flex: 1,

     

       168
       168
       +
                                       gap: 2,

     

       169
       169
       +
                                   }}

     

       170
       170
       +
                                   showsVerticalScrollIndicator={false}

     

       171
       171
       +
                               />

     

       172
       172
       +
                           )

     

       173
       173
       +
                       )}

     

       174
       174
       +
                   </View>

     

       175
       175
       +
               </View>

     

       176
       176
       +
           );

     

       177
       177
       +
       };

     

       178
       178
       +
       

     

       179
       179
       +
       const invitesQueryFn = async ({

     

       180
       180
       +
           session,

     

       181
       181
       +
           channelAtUri,

     

       182
       182
       +
       }: {

     

       183
       183
       +
           session: OAuthSession;

     

       184
       184
       +
           channelAtUri: string;

     

       185
       185
       +
       }) => {

     

       186
       186
       +
           const invites = await getInviteRecordsFromPds({

     

       187
       187
       +
               pdsEndpoint: session.serverMetadata.issuer,

     

       188
       188
       +
               did: session.did,

     

       189
       189
       +
           });

     

       190
       190
       +
       

     

       191
       191
       +
           if (!invites.ok) {

     

       192
       192
       +
               console.error("invitesQueryFn error.", invites.error);

     

       193
       193
       +
               throw new Error(

     

       194
       194
       +
                   `Something went wrong while getting the user's channel records.}`,

     

       195
       195
       +
               );

     

       196
       196
       +
           }

     

       197
       197
       +
       

     

       198
       198
       +
           const results = invites.data

     

       199
       199
       +
               .map((record) => {

     

       200
       200
       +
                   const convertResult = stringToAtUri(record.uri);

     

       201
       201
       +
                   if (!convertResult.ok) {

     

       202
       202
       +
                       console.error(

     

       203
       203
       +
                           "Could not convert",

     

       204
       204
       +
                           record,

     

       205
       205
       +
                           "into at:// URI object.",

     

       206
       206
       +
                           convertResult.error,

     

       207
       207
       +
                       );

     

       208
       208
       +
                       return;

     

       209
       209
       +
                   }

     

       210
       210
       +
                   if (!convertResult.data.collection || !convertResult.data.rKey) {

     

       211
       211
       +
                       console.error(

     

       212
       212
       +
                           record,

     

       213
       213
       +
                           "did not convert to a full at:// URI with collection and rkey.",

     

       214
       214
       +
                       );

     

       215
       215
       +
                       return;

     

       216
       216
       +
                   }

     

       217
       217
       +
                   const uri: Required<AtUri> = {

     

       218
       218
       +
                       authority: convertResult.data.authority,

     

       219
       219
       +
                       collection: convertResult.data.collection,

     

       220
       220
       +
                       rKey: convertResult.data.rKey,

     

       221
       221
       +
                   };

     

       222
       222
       +
                   return { uri, value: record.value };

     

       223
       223
       +
               })

     

       224
       224
       +
               .filter((atUri) => atUri !== undefined)

     

       225
       225
       +
               .filter((atUri) => atUri.value.channel.uri === channelAtUri);

     

       226
       226
       +
       

     

       227
       227
       +
           return results;

     

       228
       228
       +
       };

     

       229
       229
       +
       

     

       230
       230
       +
       const InvitedUser = ({

     

       231
       231
       +
           invite,

     

       232
       232
       +
       }: {

     

       233
       233
       +
           invite: {

     

       234
       234
       +
               value: SystemsGmstnDevelopmentChannelInvite;

     

       235
       235
       +
               uri: Required<AtUri>;

     

       236
       236
       +
           };

     

       237
       237
       +
       }) => {

     

       238
       238
       +
           const { isLoading, data: handle } = useQuery({

     

       239
       239
       +
               queryKey: ["handle", invite.value.recipient],

     

       240
       240
       +
               queryFn: async () => {

     

       241
       241
       +
                   const didDoc = await didDocResolver.resolve(invite.value.recipient);

     

       242
       242
       +
                   if (!didDoc.alsoKnownAs)

     

       243
       243
       +
                       throw new Error("DID did not resolve to handle");

     

       244
       244
       +
                   if (didDoc.alsoKnownAs.length === 0)

     

       245
       245
       +
                       throw new Error(

     

       246
       246
       +
                           "No alsoKnownAs in DID document. It might be malformed.",

     

       247
       247
       +
                       );

     

       248
       248
       +
                   return didDoc.alsoKnownAs[0].slice(5);

     

       249
       249
       +
               },

     

       250
       250
       +
           });

     

       251
       251
       +
       

     

       252
       252
       +
           return (

     

       253
       253
       +
               <View>

     

       254
       254
       +
                   {isLoading ? (

     

       255
       255
       +
                       <Loading size="small" />

     

       256
       256
       +
                   ) : (

     

       257
       257
       +
                       handle && (

     

       258
       258
       +
                           <View

     

       259
       259
       +
                               style={{

     

       260
       260
       +
                                   flexDirection: "row",

     

       261
       261
       +
                                   justifyContent: "space-between",

     

       262
       262
       +
                                   gap: 32,

     

       263
       263
       +
                               }}

     

       264
       264
       +
                           >

     

       265
       265
       +
                               <Text>@{handle}</Text>

     

       266
       266
       +
                               <Text>

     

       267
       267
       +
                                   since{" "}

     

       268
       268
       +
                                   {format(

     

       269
       269
       +
                                       invite.value.createdAt,

     

       270
       270
       +
                                       "do MMM y, h:mmaaa",

     

       271
       271
       +
                                   )}

     

       272
       272
       +
                               </Text>

     

       273
       273
       +
                           </View>

     

       274
       274
       +
                       )

     

       275
       275
       +
                   )}

     

       276
       276
       +
               </View>

     

       277
       277
       +
           );

     

       278
       278
       +
       };