commit b45c2a41eb680446fb45a8dff710dc9462abf4bf · gmstn.systems/gemstone-app

+81

src/components/Navigation/ChannelsPicker/ChannelPickerSpace.tsx

···

       1
       +
       import { ChannelPickerItem } from "@/components/Navigation/ChannelsPicker/ChannelPickerItem";

     

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

     

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

     

       4
       +
       import type { AtUri, Did } from "@/lib/types/atproto";

     

       5
       +
       import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channels";

     

       6
       +
       import { getBskyProfile } from "@/queries/get-profile";

     

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

     

       8
       +
       import { Image } from "expo-image";

     

       9
       +
       import { View } from "react-native";

     

       10
       +
       

     

       11
       +
       export const ChannelPickerSpace = ({

     

       12
       +
           space,

     

       13
       +
       }: {

     

       14
       +
           space: [

     

       15
       +
               string,

     

       16
       +
               Array<{

     

       17
       +
                   channel: SystemsGmstnDevelopmentChannel;

     

       18
       +
                   channelAtUri: AtUri;

     

       19
       +
               }>,

     

       20
       +
           ];

     

       21
       +
       }) => {

     

       22
       +
           const spaceDid = space[0];

     

       23
       +
       

     

       24
       +
           const { isLoading, data, error } = useQuery({

     

       25
       +
               queryKey: ["handle", spaceDid],

     

       26
       +
               queryFn: async () => {

     

       27
       +
                   return await getBskyProfile(spaceDid as Did);

     

       28
       +
               },

     

       29
       +
               staleTime: Infinity,

     

       30
       +
           });

     

       31
       +
       

     

       32
       +
           const channels = space[1];

     

       33
       +
           return (

     

       34
       +
               <>

     

       35
       +
                   {isLoading ? (

     

       36
       +
                       <Loading />

     

       37
       +
                   ) : error ? (

     

       38
       +
                       <Text>{error.message}</Text>

     

       39
       +
                   ) : (

     

       40
       +
                       <View style={{ paddingRight: 16 }}>

     

       41
       +
                           <View

     

       42
       +
                               style={{

     

       43
       +
                                   display: "flex",

     

       44
       +
                                   flexDirection: "row",

     

       45
       +
                                   gap: 6,

     

       46
       +
                                   alignItems: "center",

     

       47
       +
                                   padding: 4,

     

       48
       +
                               }}

     

       49
       +
                           >

     

       50
       +
                               <Image

     

       51
       +
                                   style={{

     

       52
       +
                                       width: 42,

     

       53
       +
                                       height: 42,

     

       54
       +
                                       borderRadius: 2000000000,

     

       55
       +
                                   }}

     

       56
       +
                                   source={{ uri: data?.avatar ?? spaceDid }}

     

       57
       +
                               />

     

       58
       +
                               <Text>@{data?.handle ?? spaceDid}</Text>

     

       59
       +
                           </View>

     

       60
       +
                           <View

     

       61
       +
                               style={{

     

       62
       +
                                   paddingLeft: 8,

     

       63
       +
                                   display: "flex",

     

       64
       +
                                   gap: 2,

     

       65
       +
                                   paddingTop: 4,

     

       66
       +
                                   paddingBottom: 4,

     

       67
       +
                               }}

     

       68
       +
                           >

     

       69
       +
                               {channels.map(({ channel, channelAtUri }, idx) => (

     

       70
       +
                                   <ChannelPickerItem

     

       71
       +
                                       channel={channel}

     

       72
       +
                                       channelAtUri={channelAtUri}

     

       73
       +
                                       key={idx}

     

       74
       +
                                   />

     

       75
       +
                               ))}

     

       76
       +
                           </View>

     

       77
       +
                       </View>

     

       78
       +
                   )}

     

       79
       +
               </>

     

       80
       +
           );

     

       81
       +
       };

+53

src/components/Navigation/ChannelsPicker/index.tsx

···

       1
       +
       import { ChannelPickerSpace } from "@/components/Navigation/ChannelsPicker/ChannelPickerSpace";

     

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

     

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

     

       4
       +
       import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channels";

     

       5
       +
       import { useChannelRecords } from "@/providers/authed/ChannelsProvider";

     

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

     

       7
       +
       import { useMemo } from "react";

     

       8
       +
       import { View } from "react-native";

     

       9
       +
       

     

       10
       +
       export const ChannelsPicker = () => {

     

       11
       +
           const { channels } = useChannelRecords();

     

       12
       +
           const { semantic } = useCurrentPalette();

     

       13
       +
           const { atoms } = useFacet();

     

       14
       +
       

     

       15
       +
           // we consider a did to be a space.

     

       16
       +
           const channelsBySpace = useMemo(

     

       17
       +
               () =>

     

       18
       +
                   channels.reduce(

     

       19
       +
                       (map, channel) => {

     

       20
       +
                           const { authority } = channel.channelAtUri;

     

       21
       +
                           const group = map.get(authority) ?? [];

     

       22
       +
                           group.push(channel);

     

       23
       +
                           map.set(authority, group);

     

       24
       +
                           return map;

     

       25
       +
                       },

     

       26
       +
                       new Map<

     

       27
       +
                           string,

     

       28
       +
                           Array<{

     

       29
       +
                               channel: SystemsGmstnDevelopmentChannel;

     

       30
       +
                               channelAtUri: AtUri;

     

       31
       +
                           }>

     

       32
       +
                       >(),

     

       33
       +
                   ),

     

       34
       +
               [channels],

     

       35
       +
           );

     

       36
       +
       

     

       37
       +
           const spaces = channelsBySpace.entries().toArray();

     

       38
       +
       

     

       39
       +
           return (

     

       40
       +
               <View

     

       41
       +
                   style={{

     

       42
       +
                       backgroundColor: semantic.backgroundDarker,

     

       43
       +
                       padding: 12,

     

       44
       +
                       paddingTop: 6,

     

       45
       +
                       borderTopRightRadius: atoms.radii.xl,

     

       46
       +
                   }}

     

       47
       +
               >

     

       48
       +
                   {spaces.map((space) => (

     

       49
       +
                       <ChannelPickerSpace key={space[0]} space={space} />

     

       50
       +
                   ))}

     

       51
       +
               </View>

     

       52
       +
           );

     

       53
       +
       };