Merge pull request #25 from tnfAngel-Chat:dev

connection status bar & loading screen & slice
tnfAngel-Chat · May 10, 2024 · d5547d6 · d5547d6
2 parents 3999077 + d27e53e
commit d5547d6
Show file tree

Hide file tree

Showing 17 changed files with 278 additions and 127 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,54 +1,54 @@
 {
-	"$schema": "https://json.schemastore.org/package.json",
-	"type": "module",
-	"name": "@tnfangel-chat/web-app",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"build": "bun next build",
-		"dev": "bun next dev",
-		"lint": "bun run lint:biome && bun run lint:tsc",
-		"lint:biome": "bun biome check --apply .",
-		"lint:tsc": "bun tsc --noEmit",
-		"prod": "bun run build && bun run start",
-		"start": "bun next start"
-	},
-	"dependencies": {
-		"@chakra-ui/icons": "^2.1.1",
-		"@chakra-ui/next-js": "^2.2.0",
-		"@chakra-ui/react": "^2.8.2",
-		"@chakra-ui/system": "^2.6.2",
-		"@discordjs/collection": "^2.0.0",
-		"@fontsource/inter": "^5.0.17",
-		"@reduxjs/toolkit": "^2.2.3",
-		"framer-motion": "^11.1.3",
-		"ky": "^1.2.3",
-		"million": "^3.0.6",
-		"next": "14.2.1",
-		"react": "18.2.0",
-		"react-device-detect": "^2.2.3",
-		"react-dom": "18.2.0",
-		"react-easy-emoji": "^1.8.1",
-		"react-icons": "^5.1.0",
-		"react-intersection-observer": "^9.8.2",
-		"react-redux": "^9.1.1",
-		"sharp": "^0.33.3",
-		"socket.io-client": "^4.7.5",
-		"swr": "^2.2.5",
-		"twemoji": "^14.0.2",
-		"typescript": "5.4.5",
-		"use-file-picker": "^2.1.1"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^1.7.0",
-		"@types/bun": "^1.1.0",
-		"@types/react": "18.2.79",
-		"@types/react-dom": "18.2.25",
-		"eslint": "9.0.0",
-		"eslint-config-next": "14.2.1"
-	},
-	"packageManager": "bun@1.1.3",
-	"trustedDependencies": [
-		"@biomejs/biome"
-	]
+  "$schema": "https://json.schemastore.org/package.json",
+  "type": "module",
+  "name": "@tnfangel-chat/web-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "bun next build",
+    "dev": "bun next dev",
+    "lint": "bun run lint:biome && bun run lint:tsc",
+    "lint:biome": "bun biome check --apply .",
+    "lint:tsc": "bun tsc --noEmit",
+    "prod": "bun run build && bun run start",
+    "start": "bun next start"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/system": "^2.6.2",
+    "@discordjs/collection": "^2.1.0",
+    "@fontsource/inter": "^5.0.18",
+    "@reduxjs/toolkit": "^2.2.4",
+    "framer-motion": "^11.1.9",
+    "ky": "^1.2.4",
+    "million": "^3.0.6",
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "18.3.1",
+    "react-easy-emoji": "^1.8.1",
+    "react-icons": "^5.2.1",
+    "react-intersection-observer": "^9.10.2",
+    "react-redux": "^9.1.2",
+    "sharp": "^0.33.3",
+    "socket.io-client": "^4.7.5",
+    "swr": "^2.2.5",
+    "twemoji": "^14.0.2",
+    "typescript": "5.4.5",
+    "use-file-picker": "^2.1.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.7.3",
+    "@types/bun": "^1.1.1",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "eslint": "9.2.0",
+    "eslint-config-next": "14.2.3"
+  },
+  "packageManager": "bun@1.1.3",
+  "trustedDependencies": [
+    "@biomejs/biome"
+  ]
 }
diff --git a/public/logo-nobg.svg b/public/logo-nobg.svg
diff --git a/src/app/channels/[channelId]/page.tsx b/src/app/channels/[channelId]/page.tsx
@@ -2,7 +2,6 @@
 
 import ChannelScreen from '@/components/screens/ChannelScreen';
 import { setActivePage, setSelectedChannel } from '@/store/slices/selectionsSlice';
-import { Flex } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 export default function SelectedChannelPage({
@@ -17,9 +16,5 @@ export default function SelectedChannelPage({
 	dispatch(setSelectedChannel({ channelId }));
 	dispatch(setActivePage('direct'));
 
-	return (
-		<Flex h='100%' w='100%'>
-			<ChannelScreen />
-		</Flex>
-	);
+	return <ChannelScreen />;
 }
diff --git a/src/app/friends/page.tsx b/src/app/friends/page.tsx
@@ -2,17 +2,12 @@
 
 import FriendsScreen from '@/components/screens/FriendsScreen';
 import { setActivePage } from '@/store/slices/selectionsSlice';
-import { Flex } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 export default function FriendsPage() {
 	const dispatch = useDispatch();
 
 	dispatch(setActivePage('direct'));
 
-	return (
-		<Flex h='100%' w='100%'>
-			<FriendsScreen />
-		</Flex>
-	);
+	return <FriendsScreen />;
 }
diff --git a/src/app/guilds/[guildId]/[channelId]/page.tsx b/src/app/guilds/[guildId]/[channelId]/page.tsx
@@ -2,7 +2,6 @@
 
 import GuildChannelScreen from '@/components/screens/GuildChannelScreen';
 import { setActivePage, setSelectedChannel, setSelectedGuild } from '@/store/slices/selectionsSlice';
-import { Flex } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 export default function SelectedGuildChannelPage({
@@ -18,9 +17,5 @@ export default function SelectedGuildChannelPage({
 	dispatch(setSelectedGuild({ guildId }));
 	dispatch(setActivePage('guild'));
 
-	return (
-		<Flex h='100%' w='100%'>
-			<GuildChannelScreen />
-		</Flex>
-	);
+	return <GuildChannelScreen />;
 }
diff --git a/src/app/guilds/[guildId]/page.tsx b/src/app/guilds/[guildId]/page.tsx
@@ -2,7 +2,6 @@
 
 import GuildScreen from '@/components/screens/GuildScreen';
 import { setActivePage, setSelectedGuild } from '@/store/slices/selectionsSlice';
-import { Flex } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 export default function SelectedGuildPage({
@@ -17,9 +16,5 @@ export default function SelectedGuildPage({
 	dispatch(setActivePage('guild'));
 	dispatch(setSelectedGuild({ guildId }));
 
-	return (
-		<Flex h='100%' w='100%'>
-			<GuildScreen />
-		</Flex>
-	);
+	return <GuildScreen />;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,11 +2,12 @@
 
 import AppWrapper from '@/components/general/AppWrapper';
 import { CacheProvider } from '@chakra-ui/next-js';
-import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react';
+import { Box, ChakraProvider, ColorModeScript, Flex, extendTheme } from '@chakra-ui/react';
 import { Provider } from 'react-redux';
 import { SWRConfig } from 'swr';
 import { store } from '../store';
 import '../styles/global.css';
+import ConnectionStatus from '@/components/general/ConnectionStatus';
 
 const config = {
 	initialColorMode: 'dark',
@@ -38,7 +39,14 @@ export default function RootLayout({
 									fetcher: (resource, init) => fetch(resource, init).then((res) => res.json())
 								}}
 							>
-								<AppWrapper>{children}</AppWrapper>
+								<AppWrapper>
+									<Flex h='100%' w='100%' direction='column'>
+										<ConnectionStatus />
+										<Box w='100%' h='100%' zIndex={1}>
+											{children}
+										</Box>
+									</Flex>
+								</AppWrapper>
 							</SWRConfig>
 						</Provider>
 					</CacheProvider>

diff --git a/src/components/general/AppSocket.tsx b/src/components/general/AppSocket.tsx
@@ -2,6 +2,7 @@ import { client } from '@/client';
 import useTheme from '@/hooks/useTheme';
 import { modifyChannel, setChannels } from '@/store/slices/channelsSlice';
 import { addMessage } from '@/store/slices/chatsSlice';
+import { setConnected } from '@/store/slices/connectionSlice';
 import { setGuilds } from '@/store/slices/guildsSlice';
 import type { IRawChannel } from '@/types/interfaces/Channel';
 import type { IRawGuild } from '@/types/interfaces/Guild';
@@ -10,54 +11,26 @@ import type { IRawUser } from '@/types/interfaces/User';
 import normalizeChannel from '@/util/normalizeChannel';
 import normalizeGuild from '@/util/normalizeGuild';
 import normalizeMessage from '@/util/normalizeMessage';
-import { useToast } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 interface IUserPreferences {
 	theme: string;
 }
 
-let isReconnection = false;
-
 export default function AppSocket({ children, onConnectionReady }: any) {
 	const [_theme, setTheme] = useTheme();
-	const [_isConnected, setIsConnected] = useState(false);
 	const dispatch = useDispatch();
-	const toast = useToast();
 
 	useEffect(() => {
 		const socket = client.socket.connect();
 
 		function onConnect() {
-			setIsConnected(true);
-
-			toast.closeAll();
-
-			setTimeout(() => {
-				if (isReconnection) {
-					toast({
-						title: 'Back online',
-						description: 'You are connected to chat again.',
-						status: 'success',
-						position: 'top-right',
-						duration: 5000,
-						isClosable: true
-					});
-				}
-			}, 500);
+			dispatch(setConnected(true));
 		}
 
 		function onDisconnect() {
-			setIsConnected(false);
-			toast({
-				title: 'Disconnected',
-				description: 'You have been disconnected from chat.',
-				status: 'error',
-				position: 'top-right',
-				duration: null
-			});
-			isReconnection = true;
+			dispatch(setConnected(false));
 		}
 
 		function onReady({
@@ -81,6 +54,7 @@ export default function AppSocket({ children, onConnectionReady }: any) {
 			dispatch(setChannels(channels.map((channel) => normalizeChannel(channel))));
 
 			setTheme(preferences.theme);
+
 			onConnectionReady();
 		}