refactor: files will now be grouped by features, also added ts path a…

…liases

babel.config.js

@@ -2,13 +2,29 @@ module.exports = function (api) {
   api.cache(true);
   const plugins = [];
 
-  plugins.push([
-    '@tamagui/babel-plugin',
-    {
-      components: ['tamagui'],
-      config: './tamagui.config.ts',
-    },
-  ]);
+  plugins.push(
+    [
+      '@tamagui/babel-plugin',
+      {
+        components: ['tamagui'],
+        config: './tamagui.config.ts',
+      },
+    ],
+    [
+      'module-resolver',
+      {
+        alias: {
+          '@api': './src/api/*',
+          '@components': './src/components/*',
+          '@modules': './src/modules/*',
+          '@screens': './src/screens/*',
+          '@utils': './src/utils/*',
+          '@types': './src/types/*',
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    ]
+  );
 
   return {
     presets: ['babel-preset-expo'],

src/app/(auth)/(tabs)/notification.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Button } from 'tamagui';
 
-import useAuth from '../../../hooks/useAuth';
+import useAuth from '../../../modules/auth/useAuth';
 import { router } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 

src/app/(auth)/_layout.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { ActivityIndicator } from 'react-native';
 import { YStack } from 'tamagui';
 
-import useAuth from '../../hooks/useAuth';
+import useAuth from '../../modules/auth/useAuth';
 
 export default function AppLayout() {
   const { isLoading, session } = useAuth();

src/app/(auth)/stream/[streamId]/_layout.tsx

@@ -1,7 +1,7 @@
 import { Slot } from 'expo-router';
 import React from 'react';
 
-import WebSocketProvider from '../../../../components/providers/WebSocketProvider';
+import WebSocketProvider from '../../../../modules/ws/WebSocketProvider';
 
 const StreamLayout = () => {
   return (

src/app/(auth)/stream/[streamId]/index.tsx

@@ -1,31 +1,30 @@
+import useSocket from '@modules/ws/useSocket';
 import { useLocalSearchParams } from 'expo-router';
 import { Device } from 'mediasoup-client';
+import { RtpCapabilities } from 'mediasoup-client/lib/types';
 import React, { useContext, useEffect, useState } from 'react';
-import { Platform, SafeAreaView, StatusBar, View } from 'react-native';
+import { View } from 'react-native';
 import { mediaDevices, RTCView, MediaStream } from 'react-native-webrtc';
 import { YStack, Button } from 'tamagui';
 
-import { WebSocketContext } from '../../../../context/WebSocketContext';
-
 const Stream = () => {
   const { streamId } = useLocalSearchParams();
 
   const [flag, setFlag] = useState(false);
 
-  const { socket } = useContext(WebSocketContext); // Todo add useSocket hook for this
+  const { socket } = useSocket(); // Todo add useSocket hook for this
 
-  const [device, setDevice] = useState<Device | null>(null);
   const [stream, setStream] = useState<MediaStream | null>(null);
 
   useEffect(() => {
     startMedia();
   }, []);
 
   useEffect(() => {
-    if (socket) {
+    if (socket && !flag) {
       console.log('call create_stream');
 
-      socket.emit('create_stream', { streamId }, (data) => {
+      socket.emit('create_stream', { streamId }, (data: any) => {
         console.log(data);
         socket.emit('connect_as_streamer');
         setFlag(true);
@@ -44,17 +43,22 @@ const Stream = () => {
           recvTransportOptions,
           sendTransportOptions,
         }) => {
+          console.log(
+            streamId,
+            peerId,
+            routerRtpCapabilities,
+            recvTransportOptions,
+            sendTransportOptions
+          );
           // Todo use response
-          await loadDevice(routerRtpCapabilities);
+          // await loadDevice(routerRtpCapabilities);
         }
       );
     }
   }, [socket]);
 
-  const loadDevice = async (routerRtpCapabilities) => {
-    const newDevice = getDevice();
-    await newDevice.load({ routerRtpCapabilities });
-    setDevice(newDevice);
+  const loadDevice = async (device: Device, routerRtpCapabilities: RtpCapabilities) => {
+    await device.load({ routerRtpCapabilities });
   };
 
   const startMedia = async () => {

src/app/(auth)/stream/index.tsx

@@ -5,7 +5,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { Button, H3, XStack, YStack } from 'tamagui';
 
 import GenreBadge from '../../../components/GenreBadge';
-import useAuth from '../../../hooks/useAuth';
+import useAuth from '../../../modules/auth/useAuth';
 
 const StreamPage = () => {
   const { user } = useAuth();
@@ -86,21 +86,21 @@ const StreamPage = () => {
   const addSelectedGenre = (idx: number) => {
     if (
       selectedGenre.filter((g) => g.selected === true).length >= 3 ||
-      selectedGenre[idx].selected
+      selectedGenre[idx]?.selected
     ) {
       return;
     }
 
     const updatedGenres = [...selectedGenre];
-    updatedGenres[idx].selected = true;
+    updatedGenres[idx]!.selected = true;
     setSelectedGenre(updatedGenres);
   };
 
   const removeSelectedGenre = (idx: number) => {
-    if (!selectedGenre[idx].selected) return;
+    if (!selectedGenre[idx]?.selected) return;
 
     const updatedGenres = [...selectedGenre];
-    updatedGenres[idx].selected = false;
+    updatedGenres[idx]!.selected = false;
     setSelectedGenre(updatedGenres);
   };
 
@@ -158,7 +158,7 @@ const StreamPage = () => {
                   color={g.color}
                   selected={g.selected}
                   onPress={() => {
-                    if (selectedGenre[idx].selected) {
+                    if (selectedGenre[idx]?.selected) {
                       removeSelectedGenre(idx);
                     } else {
                       addSelectedGenre(idx);

src/app/_layout.tsx

@@ -12,7 +12,7 @@ import { TamaguiProvider } from 'tamagui';
 
 import config from '../../tamagui.config';
 import { APIProvider } from '../api/APIProvider';
-import AuthProvider from '../components/providers/AuthProvider';
+import AuthProvider from '../modules/auth/AuthProvider';
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.

src/app/login.tsx

@@ -1,12 +1,11 @@
+import useAuth from '@modules/auth/useAuth';
 import React from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Svg, { Path } from 'react-native-svg';
-import { YStack, Button, Text } from 'tamagui';
-
-import useAuth from '../hooks/useAuth';
+import { YStack, Text, Button } from 'tamagui';
 
 const LoginPage = () => {
-  const { isLoading, session, signIn } = useAuth();
+  const { signIn } = useAuth();
   return (
     <SafeAreaView style={{ backgroundColor: '#151718' }}>
       <YStack

src/context/AuthContext.ts → src/modules/auth/AuthContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-import { AuthContextData } from '../types/auth';
+import { AuthContextData } from '../../types/auth';
 
 export const AuthContext = createContext({} as AuthContextData);

src/components/providers/AuthProvider.tsx → src/modules/auth/AuthProvider.tsx

@@ -8,13 +8,12 @@ import {
   useAutoDiscovery,
   revokeAsync,
   refreshAsync,
-  TokenResponseConfig,
 } from 'expo-auth-session';
 import { router } from 'expo-router';
 import { jwtDecode } from 'jwt-decode';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { AuthContext } from '../../context/AuthContext';
+import { AuthContext } from './AuthContext';
 import { AuthContextData, KeycloakConfiguration } from '../../types/auth';
 
 // This is needed for ios

src/modules/auth/useAuth.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { AuthContext } from './AuthContext';
+
+const useAuth = () => {
+  const authContext = useContext(AuthContext);
+  if (!authContext) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return authContext;
+};
+
+export default useAuth;

src/stores/useStreamStore.ts → src/modules/webrtc/stores/useStreamStore.ts

@@ -1,6 +1,6 @@
 import { Device } from 'mediasoup-client';
 import { detectDevice, Transport } from 'mediasoup-client/lib/types';
-import create from 'zustand';
+import { create } from 'zustand';
 import { combine } from 'zustand/middleware';
 
 export const getDevice = async () => {
@@ -16,7 +16,7 @@ export const getDevice = async () => {
   }
 };
 
-export const useVoiceStore = create(
+export const useStreamStore = create(
   combine(
     {
       streamId: '',

src/components/providers/WebSocketProvider.tsx → src/modules/ws/WebSocketProvider.tsx

@@ -2,8 +2,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Socket, io } from 'socket.io-client';
 
-import { WebSocketContext } from '../../context/WebSocketContext';
-import useAuth from '../../hooks/useAuth';
+import { WebSocketContext } from './WebSocketContext';
+import useAuth from '../auth/useAuth';
 
 const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [socket, setSocket] = useState<Socket>(null as any);

src/modules/ws/useSocket.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { WebSocketContext } from './WebSocketContext';
+
+const useSocket = () => {
+  const socketContext = useContext(WebSocketContext);
+  if (!socketContext) {
+    throw new Error('useSocket must be used within an WebSocketProvider');
+  }
+  return socketContext;
+};
+
+export default useSocket;

src/utils/formatNumber.ts

@@ -6,17 +6,17 @@
  * @returns {string} The formatted number as a string.
  */
 export const formatNumber = (number: number): string => {
-  if (isNaN(number) || number === null) return "0";
+  if (isNaN(number) || number === null) return '0';
 
   let absNumber: number = Math.abs(number);
-  const abbrev: string[] = ["", "k", "M", "B", "T"];
+  const abbrev: string[] = ['', 'k', 'M', 'B', 'T'];
   let index = 0;
 
   while (absNumber >= 1000 && index < abbrev.length - 1) {
     absNumber /= 1000;
     index++;
   }
 
-  const formattedNumber: string = absNumber.toFixed(1).replace(/\.0$/, "");
-  return (number < 0 ? "-" : "") + formattedNumber + abbrev[index];
+  const formattedNumber: string = absNumber.toFixed(1).replace(/\.0$/, '');
+  return (number < 0 ? '-' : '') + formattedNumber + abbrev[index];
 };

tsconfig.app.json

@@ -14,7 +14,7 @@
       "**/*.tsx", 
       ".expo/types/**/*.ts", 
       "expo-env.d.ts",
-
+      "./src/**/*",
       "jest.config.ts",
       "metro.config.js",
       "tamagui.config.ts",

tsconfig.json

@@ -20,9 +20,12 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": [
-        "./src/*"
-      ]
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@modules/*": ["./src/modules/*"],
+      "@screens/*": ["./src/screens/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@types/*": ["./src/types/*"],
     },
     "strict": true,
     "strictNullChecks": true,
@@ -43,7 +46,8 @@
   "files": [],
   "include": [
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "./src/**/*"
   ],
   "exclude": [
     "node_modules",

tsconfig.spec.json

@@ -15,7 +15,8 @@
       "src/**/*.spec.js",
       "src/**/*.test.jsx",
       "src/**/*.spec.jsx",
-      "src/**/*.d.ts"
+      "src/**/*.d.ts",
+      "./src/**/*"
     ]
   }