commit a5409c0778e2014f23dba19b0a446d71b0f4405f · gmstn.systems/gemstone-app

+14 -1

src/app/(protected)/index.tsx

···

       1
       1
        
       import ChatComponentProfiled from "@/components/ChatComponentProfiled";

     

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

     

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

     

       4
       4
       +
       import { useSessions } from "@/providers/authed/SessionsProvider";

     

       2
       5
        
       import { useOAuthSession } from "@/providers/OAuthProvider";

     

       3
       6
        
       import { Redirect } from "expo-router";

     

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

     

       5
       8
        
       

     

       6
       9
        
       export default function Index() {

     

       7
       10
        
           const oAuthSession = useOAuthSession();

     

       11
       11
       +
           const { channels } = useChannelRecords();

     

       12
       12
       +
           const { isInitialising } = useSessions();

     

       8
       13
        
       

     

       14
       14
       +
           const isAppReady = channels.length > 0 && !isInitialising;

     

       9
       15
        
           return (

     

       10
       16
        
               <View

     

       11
       17
        
                   style={{

     
···

       15
       21
        
                   }}

     

       16
       22
        
               >

     

       17
       23
        
                   {oAuthSession ? (

     

       18
       18
       -
                       <ChatComponentProfiled did={oAuthSession.did} />

     

       24
       24
       +
                       isAppReady ? (

     

       25
       25
       +
                           <ChatComponentProfiled

     

       26
       26
       +
                               did={oAuthSession.did}

     

       27
       27
       +
                               channelAtUri={channels[0].channelAtUri}

     

       28
       28
       +
                           />

     

       29
       29
       +
                       ) : (

     

       30
       30
       +
                           <Loading />

     

       31
       31
       +
                       )

     

       19
       32
        
                   ) : (

     

       20
       33
        
                       <Redirect href={"/login"} />

     

       21
       34
        
                   )}

+8 -4

src/components/ChatComponentProfiled.tsx

···

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

     

       2
       2
        
       import { Message } from "@/components/Message";

     

       3
       3
       -
       import { useWebSocket } from "@/lib/hooks/useWebSocket";

     

       4
       4
       -
       import type { DidPlc, DidWeb } from "@/lib/types/atproto";

     

       3
       3
       +
       import { useChannel } from "@/lib/hooks/useChannel";

     

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

     

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

     

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

     

       7
       7
        
       import { useState } from "react";

     
···

       17
       17
        
       

     

       18
       18
        
       export default function ChatComponentProfiled({

     

       19
       19
        
           did,

     

       20
       20
       +
           channelAtUri,

     

       20
       21
        
       }: {

     

       21
       22
        
           did: DidPlc | DidWeb;

     

       23
       23
       +
           channelAtUri: AtUri

     

       22
       24
        
       }) {

     

       23
       25
        
           const [inputText, setInputText] = useState("");

     

       24
       24
       -
           const { messages, isConnected, sendMessage } = useWebSocket();

     

       26
       26
       +
           const { messages, sendMessageToChannel, isConnected } = useChannel(

     

       27
       27
       +
               channelAtUri,

     

       28
       28
       +
           );

     

       25
       29
        
       

     

       26
       30
        
           const handleSend = () => {

     

       27
       31
        
               if (inputText.trim()) {

     

       28
       28
       -
                   sendMessage({ text: inputText, did });

     

       32
       32
       +
                   sendMessageToChannel(inputText);

     

       29
       33
        
                   setInputText("");

     

       30
       34
        
               }

     

       31
       35
        
           };

+91

src/lib/hooks/useChannel.ts

···

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

     

       2
       2
       +
       import type { ShardMessage } from "@/lib/types/messages";

     

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

     

       4
       4
       +
       import { sendShardMessage } from "@/lib/utils/messages";

     

       5
       5
       +
       import {

     

       6
       6
       +
           validateWsMessageString,

     

       7
       7
       +
           validateWsMessageType,

     

       8
       8
       +
       } from "@/lib/validators";

     

       9
       9
       +
       import { useSessions } from "@/providers/authed/SessionsProvider";

     

       10
       10
       +
       import { useOAuthSession } from "@/providers/OAuthProvider";

     

       11
       11
       +
       import { useEffect, useState } from "react";

     

       12
       12
       +
       

     

       13
       13
       +
       export const useChannel = (channel: AtUri) => {

     

       14
       14
       +
           const [messages, setMessages] = useState<Array<ShardMessage>>([]);

     

       15
       15
       +
           const [isConnected, setIsConnected] = useState(false);

     

       16
       16
       +
           const { findChannelSession } = useSessions();

     

       17
       17
       +
           const oAuthSession = useOAuthSession();

     

       18
       18
       +
       

     

       19
       19
       +
           const { sessionInfo, socket } = findChannelSession(channel);

     

       20
       20
       +
       

     

       21
       21
       +
           useEffect(() => {

     

       22
       22
       +
               if (!sessionInfo)

     

       23
       23
       +
                   throw new Error(

     

       24
       24
       +
                       "Channel did not resolve to a valid sessionInfo object.",

     

       25
       25
       +
                   );

     

       26
       26
       +
               if (!socket)

     

       27
       27
       +
                   throw new Error(

     

       28
       28
       +
                       "Session info did not resolve to a valid websocket connection. This should not happen and is likely a bug. Check the sessions map object.",

     

       29
       29
       +
                   );

     

       30
       30
       +
       

     

       31
       31
       +
               // attach handlers here

     

       32
       32
       +
       

     

       33
       33
       +
               socket.addEventListener("open", () => {

     

       34
       34
       +
                   console.log("Connected to WebSocket");

     

       35
       35
       +
                   setIsConnected(true);

     

       36
       36
       +
               });

     

       37
       37
       +
       

     

       38
       38
       +
               socket.addEventListener("message", (event) => {

     

       39
       39
       +
                   const validateEventResult = validateWsMessageString(event.data);

     

       40
       40
       +
                   if (!validateEventResult.ok) return;

     

       41
       41
       +
       

     

       42
       42
       +
                   const data: unknown = JSON.parse(validateEventResult.data);

     

       43
       43
       +
                   const validateTypeResult = validateWsMessageType(data);

     

       44
       44
       +
                   if (!validateTypeResult.ok) return;

     

       45
       45
       +
       

     

       46
       46
       +
                   const { type: messageType } = validateTypeResult.data;

     

       47
       47
       +
       

     

       48
       48
       +
                   switch (messageType) {

     

       49
       49
       +
                       case "shard/message":

     

       50
       50
       +
                           setMessages((prev) => [

     

       51
       51
       +
                               ...prev,

     

       52
       52
       +
                               validateTypeResult.data as ShardMessage,

     

       53
       53
       +
                           ]);

     

       54
       54
       +
                   }

     

       55
       55
       +
               });

     

       56
       56
       +
       

     

       57
       57
       +
               socket.addEventListener("error", (error) => {

     

       58
       58
       +
                   console.error("WebSocket error:", error);

     

       59
       59
       +
               });

     

       60
       60
       +
       

     

       61
       61
       +
               socket.addEventListener("close", () => {

     

       62
       62
       +
                   console.log("Disconnected from WebSocket");

     

       63
       63
       +
                   setIsConnected(false);

     

       64
       64
       +
               });

     

       65
       65
       +
           }, [socket, sessionInfo]);

     

       66
       66
       +
       

     

       67
       67
       +
           if (!oAuthSession) throw new Error("No OAuth session");

     

       68
       68
       +
           if (!sessionInfo)

     

       69
       69
       +
               throw new Error(

     

       70
       70
       +
                   "Channel did not resolve to a valid sessionInfo object.",

     

       71
       71
       +
               );

     

       72
       72
       +
           if (!socket)

     

       73
       73
       +
               throw new Error(

     

       74
       74
       +
                   "Session info did not resolve to a valid websocket connection. This should not happen and is likely a bug. Check the sessions map object.",

     

       75
       75
       +
               );

     

       76
       76
       +
       

     

       77
       77
       +
           const channelStringified = atUriToString(channel);

     

       78
       78
       +
       

     

       79
       79
       +
           const sendMessageToChannel = (content: string) => {

     

       80
       80
       +
               sendShardMessage(

     

       81
       81
       +
                   {

     

       82
       82
       +
                       content,

     

       83
       83
       +
                       channel: channelStringified,

     

       84
       84
       +
                       sentBy: oAuthSession.did,

     

       85
       85
       +
                   },

     

       86
       86
       +
                   socket,

     

       87
       87
       +
               );

     

       88
       88
       +
           };

     

       89
       89
       +
       

     

       90
       90
       +
           return { sessionInfo, socket, messages, isConnected, sendMessageToChannel };

     

       91
       91
       +
       };

-79

src/lib/hooks/useWebSocket.ts

···

       1
       1
       -
       import type { DidPlc, DidWeb } from "@/lib/types/atproto";

     

       2
       2
       -
       import type { ShardMessage } from "@/lib/types/messages";

     

       3
       3
       -
       import {

     

       4
       4
       -
           validateHistoryMessage,

     

       5
       5
       -
           validateNewMessage,

     

       6
       6
       -
           validateWsMessageString,

     

       7
       7
       -
           validateWsMessageType,

     

       8
       8
       -
       } from "@/lib/validators";

     

       9
       9
       -
       import { useFirstSessionWsTemp } from "@/providers/authed/SessionsProvider";

     

       10
       10
       -
       import { useEffect, useState } from "react";

     

       11
       11
       -
       

     

       12
       12
       -
       export function useWebSocket() {

     

       13
       13
       -
           const [messages, setMessages] = useState<Array<ShardMessage>>([]);

     

       14
       14
       -
           const [isConnected, setIsConnected] = useState(false);

     

       15
       15
       -
           const ws = useFirstSessionWsTemp();

     

       16
       16
       -
       

     

       17
       17
       -
           useEffect(() => {

     

       18
       18
       -
               if (!ws) return;

     

       19
       19
       -
               ws.onopen = () => {

     

       20
       20
       -
                   console.log("Connected to WebSocket");

     

       21
       21
       -
                   setIsConnected(true);

     

       22
       22
       -
               };

     

       23
       23
       -
       

     

       24
       24
       -
               ws.onmessage = (event) => {

     

       25
       25
       -
                   const eventData = validateWsMessageString(event.data);

     

       26
       26
       -
                   if (!eventData) return;

     

       27
       27
       -
       

     

       28
       28
       -
                   const data: unknown = JSON.parse(eventData);

     

       29
       29
       -
                   const validateResult = validateWsMessageType(data);

     

       30
       30
       -
                   if (!validateResult.ok) return;

     

       31
       31
       -
       

     

       32
       32
       -
                   const { data: wsMessage } = validateResult;

     

       33
       33
       -
                   if (wsMessage.type === "shard/history") {

     

       34
       34
       -
                       const history = validateHistoryMessage(wsMessage);

     

       35
       35
       -
                       if (!history) return;

     

       36
       36
       -
                       if (history.messages) setMessages(history.messages);

     

       37
       37
       -
                   } else {

     

       38
       38
       -
                       const message = validateNewMessage(wsMessage);

     

       39
       39
       -
                       if (!message) return;

     

       40
       40
       -
                       setMessages((prev) => [...prev, message]);

     

       41
       41
       -
                   }

     

       42
       42
       -
               };

     

       43
       43
       -
       

     

       44
       44
       -
               ws.onerror = (error) => {

     

       45
       45
       -
                   console.error("WebSocket error:", error);

     

       46
       46
       -
               };

     

       47
       47
       -
       

     

       48
       48
       -
               ws.onclose = () => {

     

       49
       49
       -
                   console.log("Disconnected from WebSocket");

     

       50
       50
       -
                   setIsConnected(false);

     

       51
       51
       -
               };

     

       52
       52
       -
       

     

       53
       53
       -
               // Cleanup on unmount

     

       54
       54
       -
               return () => {

     

       55
       55
       -
                   ws.close();

     

       56
       56
       -
               };

     

       57
       57
       -
           }, [ws]);

     

       58
       58
       -
       

     

       59
       59
       -
           const sendMessage = ({ text, did }: SendMessageOpts) => {

     

       60
       60
       -
               if (!ws) return;

     

       61
       61
       -
               if (ws.readyState === WebSocket.OPEN) {

     

       62
       62
       -
                   ws.send(

     

       63
       63
       -
                       JSON.stringify({

     

       64
       64
       -
                           type: "shard/message",

     

       65
       65
       -
                           text,

     

       66
       66
       -
                           did,

     

       67
       67
       -
                           timestamp: new Date(),

     

       68
       68
       -
                       }),

     

       69
       69
       -
                   );

     

       70
       70
       -
               }

     

       71
       71
       -
           };

     

       72
       72
       -
       

     

       73
       73
       -
           return { messages, isConnected, sendMessage };

     

       74
       74
       -
       }

     

       75
       75
       -
       

     

       76
       76
       -
       export interface SendMessageOpts {

     

       77
       77
       -
           text: string;

     

       78
       78
       -
           did: DidPlc | DidWeb;

     

       79
       79
       -
       }

+36

src/lib/utils/messages.ts

···

       1
       1
       +
       import type { Did } from "@/lib/types/atproto";

     

       2
       2
       +
       import type { ShardMessage } from "@/lib/types/messages";

     

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

     

       4
       4
       +
       

     

       5
       5
       +
       export const sendShardMessage = (

     

       6
       6
       +
           {

     

       7
       7
       +
               content,

     

       8
       8
       +
               channel,

     

       9
       9
       +
               sentBy,

     

       10
       10
       +
           }: {

     

       11
       11
       +
               content: string;

     

       12
       12
       +
               channel: string;

     

       13
       13
       +
               sentBy: Did;

     

       14
       14
       +
           },

     

       15
       15
       +
           latticeSocket: WebSocket,

     

       16
       16
       +
       ) => {

     

       17
       17
       +
           const message: ShardMessage = {

     

       18
       18
       +
               type: "shard/message",

     

       19
       19
       +
               content,

     

       20
       20
       +
               channel,

     

       21
       21
       +
               sentBy,

     

       22
       22
       +
               sentAt: new Date(),

     

       23
       23
       +
           };

     

       24
       24
       +
           if (latticeSocket.readyState === WebSocket.OPEN)

     

       25
       25
       +
               latticeSocket.send(JSON.stringify(message));

     

       26
       26
       +
       };

     

       27
       27
       +
       

     

       28
       28
       +
       export const shardMessageHandler = ({

     

       29
       29
       +
           incomingMessage,

     

       30
       30
       +
           setMessages,

     

       31
       31
       +
       }: {

     

       32
       32
       +
           incomingMessage: ShardMessage;

     

       33
       33
       +
           setMessages: Dispatch<SetStateAction<Array<ShardMessage>>>;

     

       34
       34
       +
       }) => {

     

       35
       35
       +
           setMessages((prev) => [...prev, incomingMessage]);

     

       36
       36
       +
       };

-34

src/lib/validators.ts

···

       1
       1
        
       import type { WebsocketMessage } from "@/lib/types/messages";

     

       2
       2
        
       import {

     

       3
       3
       -
           historyMessageSchema,

     

       4
       4
       -
           shardMessageSchema,

     

       5
       3
        
           websocketMessageSchema,

     

       6
       4
        
       } from "@/lib/types/messages";

     

       7
       5
        
       import type { Result } from "@/lib/utils/result";

     
···

       36
       34
        
           }

     

       37
       35
        
           return { ok: true, data: wsMessage };

     

       38
       36
        
       };

     

       39
       39
       -
       

     

       40
       40
       -
       export const validateHistoryMessage = (data: unknown) => {

     

       41
       41
       -
           const {

     

       42
       42
       -
               success: historySuccess,

     

       43
       43
       -
               error: historyError,

     

       44
       44
       -
               data: history,

     

       45
       45
       -
           } = historyMessageSchema.safeParse(data);

     

       46
       46
       -
           if (!historySuccess) {

     

       47
       47
       -
               console.error(

     

       48
       48
       -
                   "History message schema parsing failed. Did your type drift?",

     

       49
       49
       -
               );

     

       50
       50
       -
               console.error(historyError);

     

       51
       51
       -
               return;

     

       52
       52
       -
           }

     

       53
       53
       -
           return history;

     

       54
       54
       -
       };

     

       55
       55
       -
       

     

       56
       56
       -
       export const validateNewMessage = (data: unknown) => {

     

       57
       57
       -
           const {

     

       58
       58
       -
               success: messageSuccess,

     

       59
       59
       -
               error: messageError,

     

       60
       60
       -
               data: message,

     

       61
       61
       -
           } = shardMessageSchema.safeParse(data);

     

       62
       62
       -
           if (!messageSuccess) {

     

       63
       63
       -
               console.error(

     

       64
       64
       -
                   "New message schema parsing failed. Did your type drift?",

     

       65
       65
       -
               );

     

       66
       66
       -
               console.error(messageError);

     

       67
       67
       -
               return;

     

       68
       68
       -
           }

     

       69
       69
       -
           return message;

     

       70
       70
       -
       };

+2 -1

src/providers/authed/HandshakesProvider.tsx

···

       69
       69
        
       

     

       70
       70
        
           const handshakeQueries = useQueries({

     

       71
       71
        
               queries: channels.map((channelObj) => ({

     

       72
       72
       +
                   enabled: !channelsInitialising && !membershipsInitialising,

     

       72
       73
        
                   queryKey: ["handshakes", channelObj.channel.name],

     

       73
       74
        
                   queryFn: () =>

     

       74
       75
        
                       handshakesQueryFn({

     
···

       83
       84
        
           });

     

       84
       85
        
       

     

       85
       86
        
           const isInitialising =

     

       86
       86
       -
               isOAuthReady ||

     

       87
       87
       +
               !isOAuthReady ||

     

       87
       88
        
               membershipsInitialising ||

     

       88
       89
        
               channelsInitialising ||

     

       89
       90
        
               handshakeQueries.some((q) => q.isLoading);

+16 -6

src/providers/authed/SessionsProvider.tsx

···

       40
       40
        
       };

     

       41
       41
        
       

     

       42
       42
        
       export const SessionsProvider = ({ children }: { children: ReactNode }) => {

     

       43
       43
       -
           const { handshakesMap } = useHandshakes();

     

       43
       43
       +
           const { handshakesMap, isInitialising: handshakesInitialising } =

     

       44
       44
       +
               useHandshakes();

     

       44
       45
        
           const handshakes = handshakesMap.entries().toArray();

     

       45
       46
        
       

     

       46
       47
        
           const endpointQueries = useQueries({

     

       47
       48
        
               queries: handshakes.map((handshake) => ({

     

       49
       49
       +
                   enabled: !handshakesInitialising,

     

       48
       50
        
                   queryKey: ["lattice-endpoints", handshake[0].rKey],

     

       49
       51
        
                   queryFn: async () => {

     

       50
       52
        
                       return await endpointQueryFn(handshake);

     
···

       53
       55
        
               })),

     

       54
       56
        
           });

     

       55
       57
        
       

     

       56
       56
       -
           const isInitialising = endpointQueries.some((q) => q.isLoading);

     

       58
       58
       +
           console.log(endpointQueries);

     

       59
       59
       +
       

     

       60
       60
       +
           const isInitialising =

     

       61
       61
       +
               handshakesInitialising || endpointQueries.some((q) => q.isLoading);

     

       57
       62
        
           const error = endpointQueries.find((q) => q.error)?.error ?? null;

     

       58
       63
        
       

     

       59
       64
        
           const sessionsMap = new Map<LatticeSessionInfo, WebSocket>();

     
···

       76
       81
        
               getSession: (sessionInfo: LatticeSessionInfo) =>

     

       77
       82
        
                   sessionsMap.get(sessionInfo),

     

       78
       83
        
               findChannelSession: (channel: AtUri) => {

     

       79
       79
       -
                   const sessionInfo = sessionsMap

     

       80
       80
       -
                       .keys()

     

       81
       81
       -
                       .find((sessionInfo) =>

     

       82
       82
       -
                           sessionInfo.allowedChannels.includes(channel),

     

       84
       84
       +
                   console.log("sessionsMap", sessionsMap);

     

       85
       85
       +
                   const sessionInfo = sessionsMap.keys().find((sessionInfo) => {

     

       86
       86
       +
                       const foundInfo = sessionInfo.allowedChannels.some(

     

       87
       87
       +
                           (allowedChannel) => allowedChannel.rKey === channel.rKey,

     

       83
       88
        
                       );

     

       89
       89
       +
                       if (!foundInfo) return;

     

       90
       90
       +
                       return sessionInfo;

     

       91
       91
       +
                   });

     

       92
       92
       +
       

     

       93
       93
       +
                   console.log("tried to find", channel);

     

       84
       94
        
                   if (!sessionInfo)

     

       85
       95
        
                       throw new Error(

     

       86
       96
        
                           "Provided channel at:// URI (object) could not be found in any existing lattice sessions",