diff --git a/packages/desktop/.eslintrc.json b/packages/desktop/.eslintrc.json index 08b12dd..41954db 100644 --- a/packages/desktop/.eslintrc.json +++ b/packages/desktop/.eslintrc.json @@ -11,7 +11,12 @@ "plugin:import/recommended", "plugin:import/electron", "plugin:import/typescript", - "plugin:reac/recommended" + "plugin:react/recommended", + "plugin:react-hooks/recommended" ], - "parser": "@typescript-eslint/parser" + "parser": "@typescript-eslint/parser", + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn" + } } diff --git a/packages/desktop/package.json b/packages/desktop/package.json index 2851843..200d51d 100644 --- a/packages/desktop/package.json +++ b/packages/desktop/package.json @@ -82,6 +82,8 @@ "electron": "17.1.2", "eslint": "^8.0.1", "eslint-plugin-import": "^2.25.0", + "eslint-plugin-react": "^7.29.4", + "eslint-plugin-react-hooks": "^4.5.0", "fork-ts-checker-webpack-plugin": "^6.0.1", "mini-css-extract-plugin": "^2.6.0", "node-loader": "^2.0.0", @@ -98,8 +100,8 @@ }, "dependencies": { "@getstation/electron-google-oauth2": "^2.1.0", - "@nirvana/core": "*", "@nirvana/components": "*", + "@nirvana/core": "*", "antd": "^4.20.2", "axios": "^0.26.1", "electron-squirrel-startup": "^1.0.0", diff --git a/packages/desktop/src/pages/terminal/index.tsx b/packages/desktop/src/pages/terminal/index.tsx index a8a4fe2..eea03b3 100644 --- a/packages/desktop/src/pages/terminal/index.tsx +++ b/packages/desktop/src/pages/terminal/index.tsx @@ -1,29 +1,25 @@ -import { $desktopMode, $selectedLineId } from "../../controller/recoil"; -import { Avatar, Skeleton, Tooltip } from "antd"; -import { FiActivity, FiHeadphones, FiSettings, FiSun } from "react-icons/fi"; -import { GlobalHotKeys, KeyMap } from "react-hotkeys"; -import { useCallback, useEffect, useMemo, useState } from "react"; -import { useGetUserDetails, useUserLines } from "../../controller/index"; -import { useRecoilState, useSetRecoilState } from "recoil"; +import { $desktopMode, $selectedLineId } from '../../controller/recoil'; +import { Avatar, Skeleton, Tooltip } from 'antd'; +import { FiActivity, FiHeadphones, FiSettings, FiSun } from 'react-icons/fi'; +import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useGetUserDetails, useUserLines } from '../../controller/index'; +import { useRecoilState, useSetRecoilState } from 'recoil'; -import { FaPlus } from "react-icons/fa"; -import LineIcon from "../../components/lines/lineIcon/index"; -import { LineMemberState } from "@nirvana/core/models/line.model"; -import LineRow from "../../components/lines/lineRow.tsx/index"; -import MasterLineData from "@nirvana/core/models/masterLineData.model"; -import NewLineModal from "./newLine"; -import toast from "react-hot-toast"; -import { useLineDataProvider } from "../../controller/lineDataProvider"; +import { FaPlus } from 'react-icons/fa'; +import LineIcon from '../../components/lines/lineIcon/index'; +import { LineMemberState } from '@nirvana/core/models/line.model'; +import LineRow from '../../components/lines/lineRow.tsx/index'; +import MasterLineData from '@nirvana/core/models/masterLineData.model'; +import NewLineModal from './newLine'; +import toast from 'react-hot-toast'; +import { useLineDataProvider } from '../../controller/lineDataProvider'; /** * Socket Provider * Line Data Provider */ -export default function NirvanaTerminal({ - overlayOnly, -}: { - overlayOnly: boolean; -}) { +export default function NirvanaTerminal({ overlayOnly }: { overlayOnly: boolean }) { const [isModalVisible, setIsModalVisible] = useState(false); const { data: userDetails } = useGetUserDetails(); @@ -33,8 +29,7 @@ export default function NirvanaTerminal({ // simply using this query for specific data on loading // todo: add these properties in context provider value although more work down the line for control const { isLoading: isLoadingInitialLines } = useUserLines(); - const { linesMap, handleTuneToLine, handleUnTuneToLine } = - useLineDataProvider(); + const { linesMap, handleTuneToLine, handleUnTuneToLine } = useLineDataProvider(); useEffect(() => { // console.log("change/update in lines map"); @@ -52,8 +47,7 @@ export default function NirvanaTerminal({ // TODO: sort based on the audio blocks and currentMember lastActiveDate return masterLines.filter( - (masterLine) => - masterLine.currentUserMember.state === LineMemberState.INBOX + (masterLine) => masterLine.currentUserMember.state === LineMemberState.INBOX, ); }, [linesMap]); @@ -61,8 +55,7 @@ export default function NirvanaTerminal({ const masterLines: MasterLineData[] = Object.values(linesMap); return masterLines.filter( - (masterLine) => - masterLine.currentUserMember.state === LineMemberState.TUNED + (masterLine) => masterLine.currentUserMember.state === LineMemberState.TUNED, ); }, [linesMap]); @@ -76,11 +69,7 @@ export default function NirvanaTerminal({ const foundSelectedLine = linesMap[selectedLineId]; // on mount of this, we want to temporarily tune into the line if we are not already tuned in...which would happen if we toggle tuned in - if ( - !foundSelectedLine.tunedInMemberIds?.includes( - userDetails?.user?._id.toString() - ) - ) { + if (!foundSelectedLine.tunedInMemberIds?.includes(userDetails?.user?._id.toString())) { handleTuneToLine(selectedLineId, false); } @@ -93,7 +82,7 @@ export default function NirvanaTerminal({ // todo: sort/order based on activity and activity date and currently broadcasting/live const handleEscape = useCallback(() => { - console.log("deselecting line"); + console.log('deselecting line'); setSelectedLineId((prevSelectedLineId) => { // ! only want to untune if it's a temporarily tuned line @@ -111,31 +100,28 @@ export default function NirvanaTerminal({ setSelectedLineId((prevSelectedLineId) => { // untune myself from the previously selected if it was a temporary one/inbox // todo: p3: consolidate this logic as it's used in escape but different scenarios sort of so p3 - if ( - prevSelectedLineId && - selectedLine.currentUserMember?.state === LineMemberState.INBOX - ) + if (prevSelectedLineId && selectedLine.currentUserMember?.state === LineMemberState.INBOX) handleUnTuneToLine(prevSelectedLineId); return newLineIdToSelect; }); } }, - [setSelectedLineId, selectedLine] + [setSelectedLineId, selectedLine], ); const handleToggleTuneToLine = useCallback( (lineId: string, turnToggleOn: boolean) => { // inhibit if they are trying to turn on and already have 3 toggle tuned if (toggleTunedLines?.length >= 3 && turnToggleOn) { - toast.error("You cannot toggle more than 3 lines!"); + toast.error('You cannot toggle more than 3 lines!'); return; } handleTuneToLine(lineId, turnToggleOn); }, - [toggleTunedLines, handleTuneToLine] + [toggleTunedLines, handleTuneToLine], ); const handleStartBroadcast = useCallback( @@ -146,7 +132,7 @@ export default function NirvanaTerminal({ // if (lineId) handleUserBroadcast(lineId, true); }, - [] + [], ); const handleStopBroadcast = useCallback( @@ -157,22 +143,22 @@ export default function NirvanaTerminal({ // if (lineId) handleUserBroadcast(lineId, false); }, - [] + [], ); const keyMap: KeyMap = useMemo( () => ({ - DESELECT_LINE: "esc", + DESELECT_LINE: 'esc', START_BROADCAST: { - sequence: "`", - action: "keydown", + sequence: '`', + action: 'keydown', }, STOP_BROADCAST: { - sequence: "`", - action: "keyup", + sequence: '`', + action: 'keyup', }, }), - [] + [], ); const handlers = useMemo( @@ -181,7 +167,7 @@ export default function NirvanaTerminal({ START_BROADCAST: handleStartBroadcast(selectedLineId), STOP_BROADCAST: handleStopBroadcast(selectedLineId), }), - [selectedLineId] + [selectedLineId], ); return ( @@ -191,25 +177,20 @@ export default function NirvanaTerminal({
{/* modal for creating new line */} - setIsModalVisible(false)} - /> + setIsModalVisible(false)} /> {/* tuned in lines block */}
{/* tuned in header + general controls */} - +

Rooms

-

{`${ - toggleTunedLines?.length || 0 - }/3`}

+

{`${toggleTunedLines?.length || 0}/3`}
@@ -228,13 +209,12 @@ export default function NirvanaTerminal({ {!(allLines.length > 0) && !(toggleTunedLines.length > 0) && ( - You have no lines!
Create one to connect to your team - instantly. + You have no lines!
Create one to connect to your team instantly. )} {/* rest of the lines */} -
+
{isLoadingInitialLines ? ( ) : ( @@ -273,9 +253,7 @@ export default function NirvanaTerminal({ className="flex flex-col flex-1 justify-center items-center bg-gray-100 border-l border-l-gray-200" > - - {`Hi ${userDetails?.user?.givenName}!`} - + {`Hi ${userDetails?.user?.givenName}!`} You're all set!
)} @@ -293,21 +271,18 @@ function LineDetailsTerminal({ }) { const { data: userDetails } = useGetUserDetails(); - console.log("selected line", selectedLine); + console.log('selected line', selectedLine); const isUserToggleTuned = useMemo( () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED, - [selectedLine] + [selectedLine], ); // seeing if I am in the list of broadcasters // the source of truth from the socket connections telling me if my clicking actually made a round trip const isUserBroadcasting = useMemo( - () => - selectedLine?.currentBroadcastersUserIds?.includes( - userDetails?.user._id.toString() - ), - [userDetails, selectedLine] + () => selectedLine?.currentBroadcastersUserIds?.includes(userDetails?.user._id.toString()), + [userDetails, selectedLine], ); // showing all tuned in members...they may not hear me since they might be doing something else @@ -329,7 +304,7 @@ function LineDetailsTerminal({ } const otherUserObject = selectedLine.otherUserObjects?.find( - (userObj) => userObj._id.toString() === tunedInMemberUserId + (userObj) => userObj._id.toString() === tunedInMemberUserId, ); if (otherUserObject?.picture) pictureSources.push({ @@ -365,15 +340,12 @@ function LineDetailsTerminal({ className="p-4 flex flex-row items-center gap-2 justify-end border-b-gray-200 border-b" > - {profilePictures && ( - - )} + {profilePictures && }

- {selectedLine.lineDetails.name || - selectedLine.otherUserObjects[0].givenName} + {selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}