Merge pull request #51 from DevClad-Inc/messages

Messages

apps/web/package.json

@@ -26,8 +26,8 @@
 		"react-dom": "^18.2.0",
 		"react-helmet": "^6.1.0",
 		"react-hot-toast": "^2.3.0",
+		"react-intersection-observer": "^9.4.0",
 		"react-router-dom": "^6.4.0",
-		"satori": "^0.0.38",
 		"stream-chat": "^7.1.0",
 		"vite-plugin-svgr": "^2.2.1"
 	},

apps/web/src/components/AppShell.tsx

@@ -12,7 +12,6 @@ import {
 import { checkIOS, checkMacOS, classNames } from '@devclad/lib';
 import { DevCladSVG } from '@devclad/ui';
 import { Profile, initialProfileState } from '@/lib/InterfacesStates.lib';
-import QueryLoader from '@/lib/QueryLoader.lib';
 import { profileQuery } from '@/lib/queriesAndLoaders';
 import CheckChild from '@/lib/CheckChild.lib';
 import { useAuth } from '@/services/useAuth.services';
@@ -283,10 +282,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 							)}
 						</div>
 						<div className="mx-auto w-auto px-4 sm:px-6 md:px-8">
-							<div className="mb-12 py-4">
-								<QueryLoader />
-								{children}
-							</div>
+							<div className="mb-12 py-4">{children}</div>
 						</div>
 					</div>
 				</main>

apps/web/src/components/forms/Profile.forms.tsx

@@ -6,7 +6,6 @@ import { updateProfile, updateProfileAvatar } from '@/services/profile.services'
 import { PrimaryButton } from '@/lib/Buttons.lib';
 import { Profile, initialProfileState, UpdateProfileFormValues } from '@/lib/InterfacesStates.lib';
 import { Error, Success } from '@/components/Feedback';
-import QueryLoader from '@/lib/QueryLoader.lib';
 import { ThemeContext } from '@/context/Theme.context';
 import { invalidateAndStoreIDB } from '@/context/User.context';
 import { profileQuery } from '@/lib/queriesAndLoaders';
@@ -253,7 +252,7 @@ export function AvatarUploadForm() {
 		profileData = profileQueryData.data;
 	}
 	if (profileQueryLoading) {
-		return <QueryLoader />;
+		return <ProfileLoading />;
 	}
 	const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
 		event.preventDefault();

apps/web/src/context/Stream.context.tsx

@@ -0,0 +1,81 @@
+import React, { createContext } from 'react';
+import { StreamChat } from 'stream-chat';
+import { useQuery } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
+import { useAuth } from '@/services/useAuth.services';
+import { initialProfileState, Profile } from '@/lib/InterfacesStates.lib';
+import { profileQuery } from '@/lib/queriesAndLoaders';
+import { Error } from '@/components/Feedback';
+
+interface StreamProviderProps {
+	children?: React.ReactNode;
+}
+
+interface StreamContextInterface {
+	client: StreamChat;
+	connected: boolean;
+	toggleConnection: (connected: boolean) => void;
+}
+
+export const StreamContext = createContext({} as StreamContextInterface);
+
+export function StreamProvider({ children }: StreamProviderProps) {
+	const client = StreamChat.getInstance(import.meta.env.VITE_STREAM_API_KEY as string);
+	const [connected, setConnected] = React.useState(false);
+	const { loggedInUser, streamToken } = useAuth();
+	let profileData: Profile = { ...initialProfileState };
+	const { data: profileQueryData, isSuccess: profileQuerySuccess } = useQuery({
+		...profileQuery(),
+	});
+	if (profileQuerySuccess && profileQueryData !== null) {
+		profileData = profileQueryData.data;
+	}
+
+	if (loggedInUser && streamToken && !connected) {
+		const connect = async () => {
+			setConnected(true);
+			await client
+				.connectUser(
+					{
+						id: streamToken?.uid as string,
+						first_name: loggedInUser.first_name as string,
+						last_name: loggedInUser.last_name as string,
+						username: loggedInUser.username,
+						email: loggedInUser.email,
+						image: profileData.avatar as string,
+					},
+					streamToken?.token as string
+				)
+				.then(() => {
+					// console.log('connected to stream');
+				})
+				.catch(() => {
+					// console.log(err);
+					setConnected(false);
+					toast.custom(<Error error="Cannot connect to Stream. Try refreshing the page." />, {
+						id: 'stream-connect-error',
+					});
+				});
+		};
+		if (connected === false) {
+			connect();
+		}
+	}
+
+	const toggleConnection = (conn: boolean) => {
+		setConnected(conn);
+	};
+	const value = React.useMemo(() => ({ client, connected, toggleConnection }), [client, connected]);
+	return <StreamContext.Provider value={value}>{children}</StreamContext.Provider>;
+}
+
+StreamProvider.defaultProps = {
+	children: null,
+};
+
+export const useStreamContext = () => {
+	const context = React.useContext(StreamContext);
+	return context;
+};
+
+export default StreamProvider;

apps/web/src/context/User.context.tsx

@@ -60,7 +60,6 @@ export function UserProvider({ children }: UserProviderProps) {
 		delMany(['loggedInUser', 'profile']);
 		Cookies.remove('token');
 		Cookies.remove('refresh');
-		Cookies.remove('streamConnected');
 	}
 	return (
 		<UserContext.Provider value={loggedInUser}>

apps/web/src/main.tsx

@@ -8,7 +8,6 @@ import '@devclad/ui/fontscss';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { UserProvider } from '@/context/User.context';
 import { ThemeProvider } from '@/context/Theme.context';
-import { SpeedProvider } from '@/context/Speed.context';
 import Root from '@/routes/_root';
 import { ForgotPassword, PassReset } from '@/routes/PasswordReset';
 import VerifyEmail from '@/routes/VerifyEmail';
@@ -27,6 +26,7 @@ import OneOne from '@/routes/social/OneOne';
 import Circle from '@/routes/social/Circle';
 import Profile from '@/routes/Profile';
 import Messages, { MessageChild } from '@/routes/Messages';
+import StreamProvider from '@/context/Stream.context';
 
 axios.defaults.headers.common.withCredentials = true;
 
@@ -166,11 +166,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 	<React.StrictMode>
 		<QueryClientProvider client={queryClient}>
 			<UserProvider>
-				<SpeedProvider>
+				<StreamProvider>
 					<ThemeProvider>
 						<RouterProvider router={router} fallbackElement={<ProfileLoading />} />
 					</ThemeProvider>
-				</SpeedProvider>
+				</StreamProvider>
 			</UserProvider>
 			<ReactQueryDevtools initialIsOpen={false} />
 		</QueryClientProvider>