refactor(services): Standardize services and lib organization (#226)

* refactor(Notification): use instance methods
* refactor(Audio): move to lib layer
* refactor(EncryptionService): rename instance to encryption
* refactor(ConnectionTest): move to lib
* refactor(FileTransfer): move to lib
* refactor(PeerRoom): move to lib
* refactor(sleep): move to lib
* refactor(type-guards): move to lib
* refactor(SerializationService): use standard instance name
* refactor(SettingsService): use standard instance name

src/Bootstrap.test.tsx

@@ -3,7 +3,7 @@ import localforage from 'localforage'
 
 import { PersistedStorageKeys } from 'models/storage'
 import {
-  mockSerializationService,
+  mockSerialization,
   mockSerializedPrivateKey,
   mockSerializedPublicKey,
 } from 'test-utils/mocks/mockSerializationService'
@@ -34,7 +34,7 @@ const renderBootstrap = async (overrides: Partial<BootstrapProps> = {}) => {
     <Bootstrap
       persistedStorage={mockPersistedStorage as any as typeof localforage}
       initialUserSettings={userSettingsStub}
-      serializationService={mockSerializationService}
+      serializationService={mockSerialization}
       {...overrides}
     />
   )

src/Bootstrap.tsx

@@ -27,15 +27,12 @@ import {
   PostMessageEvent,
   PostMessageEventName,
 } from 'models/sdk'
-import {
-  serializationService as serializationServiceInstance,
-  SerializedUserSettings,
-} from 'services/Serialization'
+import { serialization, SerializedUserSettings } from 'services/Serialization'
 
 export interface BootstrapProps {
   persistedStorage?: typeof localforage
   initialUserSettings: UserSettings
-  serializationService?: typeof serializationServiceInstance
+  serializationService?: typeof serialization
 }
 
 const configListenerTimeout = 3000
@@ -82,7 +79,7 @@ const Bootstrap = ({
     description: 'Persisted settings data for chitchatter',
   }),
   initialUserSettings,
-  serializationService = serializationServiceInstance,
+  serializationService = serialization,
 }: BootstrapProps) => {
   const queryParams = useMemo(
     () => new URLSearchParams(window.location.search),

src/Init.tsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { v4 as uuid } from 'uuid'
 
-import { encryptionService } from 'services/Encryption'
+import { encryption } from 'services/Encryption'
 import {
   EnvironmentUnsupportedDialog,
   isEnvironmentSupported,
@@ -32,8 +32,7 @@ const Init = ({ getUuid = uuid, ...props }: InitProps) => {
       if (userSettings !== null) return
 
       try {
-        const { publicKey, privateKey } =
-          await encryptionService.generateKeyPair()
+        const { publicKey, privateKey } = await encryption.generateKeyPair()
 
         setUserSettings({
           userId: getUuid(),

src/components/Message/InlineMedia.tsx

@@ -3,7 +3,7 @@ import { TorrentFile } from 'webtorrent'
 import CircularProgress from '@mui/material/CircularProgress'
 import Typography from '@mui/material/Typography'
 
-import { fileTransfer } from 'services/FileTransfer'
+import { fileTransfer } from 'lib/FileTransfer'
 import { ShellContext } from 'contexts/ShellContext'
 
 type TorrentFiles = Awaited<ReturnType<typeof fileTransfer.download>>

src/components/PublicKey/PublicKey.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { CopyableBlock } from 'components/CopyableBlock/CopyableBlock'
-import { encryptionService } from 'services/Encryption/Encryption'
+import { encryption } from 'services/Encryption/Encryption'
 
 interface PeerPublicKeyProps {
   publicKey: CryptoKey
@@ -13,7 +13,7 @@ export const PublicKey = ({ publicKey }: PeerPublicKeyProps) => {
 
   useEffect(() => {
     ;(async () => {
-      setPublicKeyString(await encryptionService.stringifyCryptoKey(publicKey))
+      setPublicKeyString(await encryption.stringifyCryptoKey(publicKey))
     })()
   }, [publicKey])
 

src/components/Room/Room.tsx

@@ -12,7 +12,7 @@ import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
 import { MessageForm } from 'components/MessageForm'
 import { ChatTranscript } from 'components/ChatTranscript'
-import { encryptionService as encryptionServiceInstance } from 'services/Encryption'
+import { encryption } from 'services/Encryption'
 import { SettingsContext } from 'contexts/SettingsContext'
 
 import { useRoom } from './useRoom'
@@ -30,13 +30,13 @@ export interface RoomProps {
   password?: string
   roomId: string
   userId: string
-  encryptionService?: typeof encryptionServiceInstance
+  encryptionService?: typeof encryption
 }
 
 export function Room({
   appId = `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
   getUuid = uuid,
-  encryptionService = encryptionServiceInstance,
+  encryptionService = encryption,
   roomId,
   password,
   userId,

src/components/Room/RoomAudioControls.tsx

@@ -9,7 +9,7 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import Tooltip from '@mui/material/Tooltip'
 
-import { PeerRoom } from 'services/PeerRoom/PeerRoom'
+import { PeerRoom } from 'lib/PeerRoom'
 
 import { useRoomAudio } from './useRoomAudio'
 import { MediaButton } from './MediaButton'

src/components/Room/RoomFileUploadControls.tsx

@@ -6,7 +6,7 @@ import Tooltip from '@mui/material/Tooltip'
 import CircularProgress from '@mui/material/CircularProgress'
 
 import { RoomContext } from 'contexts/RoomContext'
-import { PeerRoom } from 'services/PeerRoom/PeerRoom'
+import { PeerRoom } from 'lib/PeerRoom'
 
 import { useRoomFileShare } from './useRoomFileShare'
 import { MediaButton } from './MediaButton'

src/components/Room/RoomScreenShareControls.tsx

@@ -3,7 +3,7 @@ import ScreenShare from '@mui/icons-material/ScreenShare'
 import StopScreenShare from '@mui/icons-material/StopScreenShare'
 import Tooltip from '@mui/material/Tooltip'
 
-import { PeerRoom } from 'services/PeerRoom/PeerRoom'
+import { PeerRoom } from 'lib/PeerRoom'
 
 import { useRoomScreenShare } from './useRoomScreenShare'
 import { MediaButton } from './MediaButton'

src/components/Room/RoomVideoControls.tsx

@@ -9,7 +9,7 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import Tooltip from '@mui/material/Tooltip'
 
-import { PeerRoom } from 'services/PeerRoom/PeerRoom'
+import { PeerRoom } from 'lib/PeerRoom'
 
 import { useRoomVideo } from './useRoomVideo'
 import { MediaButton } from './MediaButton'

src/components/Room/usePeerVerification.ts

@@ -1,22 +1,22 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { ShellContext } from 'contexts/ShellContext'
 import { Peer, PeerVerificationState } from 'models/chat'
-import { encryptionService as encryptionServiceInstance } from 'services/Encryption'
-import { PeerRoom } from 'services/PeerRoom'
+import { encryption } from 'services/Encryption'
+import { PeerRoom } from 'lib/PeerRoom'
 import { PeerActions } from 'models/network'
 import { verificationTimeout } from 'config/messaging'
 import { usePeerNameDisplay } from 'components/PeerNameDisplay'
 
 interface UserPeerVerificationProps {
   peerRoom: PeerRoom
   privateKey: CryptoKey
-  encryptionService?: typeof encryptionServiceInstance
+  encryptionService?: typeof encryption
 }
 
 export const usePeerVerification = ({
   peerRoom,
   privateKey,
-  encryptionService = encryptionServiceInstance,
+  encryptionService = encryption,
 }: UserPeerVerificationProps) => {
   const { updatePeer, peerList, showAlert } = useContext(ShellContext)
 

src/components/Room/useRoom.ts

@@ -25,14 +25,11 @@ import {
   PeerVerificationState,
 } from 'models/chat'
 import { getPeerName, usePeerNameDisplay } from 'components/PeerNameDisplay'
-import { NotificationService } from 'services/Notification'
-import { Audio as AudioService } from 'services/Audio'
-import { PeerRoom, PeerHookType } from 'services/PeerRoom'
-import { fileTransfer } from 'services/FileTransfer'
-import {
-  AllowedKeyType,
-  encryptionService as encryptionServiceInstance,
-} from 'services/Encryption'
+import { Audio } from 'lib/Audio'
+import { notification } from 'services/Notification'
+import { PeerRoom, PeerHookType } from 'lib/PeerRoom'
+import { fileTransfer } from 'lib/FileTransfer'
+import { AllowedKeyType, encryption } from 'services/Encryption'
 
 import { messageTranscriptSizeLimit } from 'config/messaging'
 
@@ -43,7 +40,7 @@ interface UseRoomConfig {
   userId: string
   publicKey: CryptoKey
   getUuid?: typeof uuid
-  encryptionService?: typeof encryptionServiceInstance
+  encryptionService?: typeof encryption
 }
 
 interface UserMetadata {
@@ -59,7 +56,7 @@ export function useRoom(
     userId,
     publicKey,
     getUuid = uuid,
-    encryptionService = encryptionServiceInstance,
+    encryptionService = encryption,
   }: UseRoomConfig
 ) {
   const isPrivate = password !== undefined
@@ -87,7 +84,7 @@ export function useRoom(
     []
   )
   const [newMessageAudio] = useState(
-    () => new AudioService(process.env.PUBLIC_URL + '/sounds/new-message.aac')
+    () => new Audio(process.env.PUBLIC_URL + '/sounds/new-message.aac')
   )
 
   const { getDisplayUsername } = usePeerNameDisplay()
@@ -323,9 +320,7 @@ export function useRoom(
       if (userSettings.showNotificationOnNewMessage) {
         const displayUsername = getDisplayUsername(message.authorId)
 
-        NotificationService.showNotification(
-          `${displayUsername}: ${message.text}`
-        )
+        notification.showNotification(`${displayUsername}: ${message.text}`)
       }
     }
 
@@ -433,7 +428,7 @@ export function useRoom(
       }
 
       if (userSettings.showNotificationOnNewMessage) {
-        NotificationService.showNotification(
+        notification.showNotification(
           `${getDisplayUsername(inlineMedia.authorId)} shared media`
         )
       }

src/components/Room/useRoomAudio.ts

@@ -3,7 +3,7 @@ import { useContext, useEffect, useCallback, useState } from 'react'
 import { ShellContext } from 'contexts/ShellContext'
 import { PeerActions } from 'models/network'
 import { AudioState, Peer } from 'models/chat'
-import { PeerRoom, PeerHookType, PeerStreamType } from 'services/PeerRoom'
+import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
 
 interface UseRoomAudioConfig {
   peerRoom: PeerRoom

src/components/Room/useRoomFileShare.ts

@@ -1,13 +1,12 @@
 import { useContext, useEffect, useState } from 'react'
 
-import { sleep } from 'utils'
+import { sleep } from 'lib/sleep'
 import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
 import { PeerActions } from 'models/network'
 import { FileOfferMetadata, Peer } from 'models/chat'
-import { PeerRoom, PeerHookType } from 'services/PeerRoom'
-
-import { fileTransfer } from 'services/FileTransfer/index'
+import { PeerRoom, PeerHookType } from 'lib/PeerRoom'
+import { fileTransfer } from 'lib/FileTransfer'
 
 interface UseRoomFileShareConfig {
   onInlineMediaUpload: (files: File[]) => void

src/components/Room/useRoomScreenShare.ts

@@ -1,11 +1,11 @@
 import { useContext, useEffect, useCallback, useState } from 'react'
 
-import { isRecord } from 'utils'
+import { isRecord } from 'lib/type-guards'
 import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
 import { PeerActions } from 'models/network'
 import { ScreenShareState, Peer, VideoStreamType } from 'models/chat'
-import { PeerRoom, PeerHookType, PeerStreamType } from 'services/PeerRoom'
+import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
 
 interface UseRoomScreenShareConfig {
   peerRoom: PeerRoom

src/components/Room/useRoomVideo.ts

@@ -4,9 +4,8 @@ import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
 import { PeerActions } from 'models/network'
 import { VideoState, Peer, VideoStreamType } from 'models/chat'
-import { PeerRoom, PeerHookType, PeerStreamType } from 'services/PeerRoom'
-
-import { isRecord } from 'utils'
+import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
+import { isRecord } from 'lib/type-guards'
 
 interface UseRoomVideoConfig {
   peerRoom: PeerRoom

src/components/Shell/ConnectionTestResults.tsx

@@ -6,7 +6,7 @@ import Circle from '@mui/icons-material/FiberManualRecord'
 import { Box } from '@mui/system'
 import ReportIcon from '@mui/icons-material/Report'
 
-import { TrackerConnection } from 'services/ConnectionTest/ConnectionTest'
+import { TrackerConnection } from 'lib/ConnectionTest'
 import { ShellContext } from 'contexts/ShellContext'
 
 import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'

src/components/Shell/PeerDownloadFileButton.tsx

@@ -5,8 +5,8 @@ import Tooltip from '@mui/material/Tooltip'
 import Download from '@mui/icons-material/Download'
 import CircularProgress from '@mui/material/CircularProgress'
 
-import { isError } from 'utils'
-import { fileTransfer } from 'services/FileTransfer/index'
+import { isError } from 'lib/type-guards'
+import { fileTransfer } from 'lib/FileTransfer'
 import { Peer } from 'models/chat'
 import { ShellContext } from 'contexts/ShellContext'
 

src/components/Shell/PeerList.tsx

@@ -10,8 +10,8 @@ import CircularProgress from '@mui/material/CircularProgress'
 
 import { UserInfo } from 'components/UserInfo'
 import { AudioState, Peer } from 'models/chat'
-import { PeerConnectionType } from 'services/PeerRoom'
-import { TrackerConnection } from 'services/ConnectionTest'
+import { PeerConnectionType } from 'lib/PeerRoom'
+import { TrackerConnection } from 'lib/ConnectionTest'
 
 import { PeerListHeader } from './PeerListHeader'
 import { PeerListItem } from './PeerListItem'

src/components/Shell/PeerListItem.tsx

@@ -19,7 +19,7 @@ import { AudioVolume } from 'components/AudioVolume'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 import { PublicKey } from 'components/PublicKey'
 import { Peer, PeerVerificationState } from 'models/chat'
-import { PeerConnectionType } from 'services/PeerRoom/PeerRoom'
+import { PeerConnectionType } from 'lib/PeerRoom'
 
 import { PeerDownloadFileButton } from './PeerDownloadFileButton'
 

src/components/Shell/RoomShareDialog.tsx

@@ -14,8 +14,8 @@ import CloseIcon from '@mui/icons-material/Close'
 
 import { AlertOptions } from 'models/shell'
 import { useEffect, useState, SyntheticEvent } from 'react'
-import { sleep } from 'utils'
-import { encryptionService } from 'services/Encryption'
+import { sleep } from 'lib/sleep'
+import { encryption } from 'services/Encryption'
 
 export interface RoomShareDialogProps {
   isOpen: boolean
@@ -51,10 +51,7 @@ export function RoomShareDialog(props: RoomShareDialogProps) {
   const url = window.location.href.split('#')[0]
 
   const copyWithPass = async () => {
-    const encoded = await encryptionService.encodePassword(
-      props.roomId,
-      password
-    )
+    const encoded = await encryption.encodePassword(props.roomId, password)
 
     if (encoded === props.password) {
       const params = new URLSearchParams()

src/components/Shell/Shell.tsx

@@ -21,8 +21,7 @@ import { SettingsContext } from 'contexts/SettingsContext'
 import { AlertOptions, QueryParamKeys } from 'models/shell'
 import { AudioState, ScreenShareState, VideoState, Peer } from 'models/chat'
 import { ErrorBoundary } from 'components/ErrorBoundary'
-
-import { PeerConnectionType } from 'services/PeerRoom/PeerRoom'
+import { PeerConnectionType } from 'lib/PeerRoom'
 
 import { Drawer } from './Drawer'
 import { UpgradeDialog } from './UpgradeDialog'

src/components/Shell/useConnectionTest.ts

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react'
-import { sleep } from 'utils'
+
+import { sleep } from 'lib/sleep'
 import {
   ConnectionTest,
   ConnectionTestEvent,
   ConnectionTestEvents,
   TrackerConnection,
-} from 'services/ConnectionTest/ConnectionTest'
+} from 'lib/ConnectionTest'
 
 export interface ConnectionTestResults {
   hasHost: boolean