From faa36ad8a374512416962abcca0a816249289989 Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 6 May 2022 08:48:18 -0500 Subject: [PATCH] sexy flow with data --- .../components/lines/lineRow.tsx/index.tsx | 1 + .../src/controller/lineDataProvider.tsx | 59 ++++++++++++++++--- packages/desktop/src/index.ts | 2 - .../src/pages/lineDetailsTerminal/index.tsx | 49 +++++++++++++-- packages/desktop/src/pages/router/index.tsx | 16 +++-- packages/desktop/src/pages/terminal/index.tsx | 57 +++++++++++------- 6 files changed, 144 insertions(+), 40 deletions(-) diff --git a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx index 8fbebe5..6c21519 100644 --- a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx +++ b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx @@ -5,6 +5,7 @@ import { $selectedLineId } from "../../../controller/recoil"; import { Avatar } from "antd"; import { FiSun } from "react-icons/fi"; import LineIcon from "../lineIcon"; +import { LineMemberState } from "@nirvana/core/models/line.model"; import MasterLineData from "@nirvana/core/models/masterLineData.model"; import { useGetUserDetails } from "../../../controller/index"; diff --git a/packages/desktop/src/controller/lineDataProvider.tsx b/packages/desktop/src/controller/lineDataProvider.tsx index b8de2bd..516e12d 100644 --- a/packages/desktop/src/controller/lineDataProvider.tsx +++ b/packages/desktop/src/controller/lineDataProvider.tsx @@ -1,39 +1,50 @@ import React, { useContext } from "react"; +import { Socket, io } from "socket.io-client"; +import { useCallback, useEffect, useState } from "react"; import { $jwtToken } from "./recoil"; import MasterLineData from "@nirvana/core/models/masterLineData.model"; import SocketChannels from "@nirvana/core/sockets/channels"; import { User } from "@nirvana/core/models"; -import { io } from "socket.io-client"; import { queryClient } from "../pages/nirvanaApp"; import toast from "react-hot-toast"; -import { useEffect } from "react"; import { useRecoilValue } from "recoil"; import { useUserLines } from "./index"; +type LineIdToMasterLine = { + [lineId: string]: MasterLineData; +}; interface ILineDataContext { // represents the modified and up to date lines data with availability from session - lines: MasterLineData[]; + linesMap: LineIdToMasterLine; relevantUsers: User[]; } const LineDataContext = React.createContext({ - lines: [], + linesMap: {}, relevantUsers: [], }); -let $ws; +let $ws: Socket; export function LineDataProvider({ children }) { + // TODO: have internal loading to prevent showing even router and all if something is not ready + // or have it within each property within the context value + // persistent store of lines + // ?just do simple synchronous axios/fetch in useEffect and manage isLoading ourselves? const { data: basicUserLinesData } = useUserLines(); const jwtToken = useRecoilValue($jwtToken); + const [linesMap, setLinesMap] = useState({}); + useEffect(() => { $ws = io("http://localhost:5000", { query: { token: jwtToken }, }); + $ws.on("connection", () => toast.success("you are connected")); + // client-side errors $ws.on("connect_error", (err) => { console.error(err.message); // prints the message associated with the error @@ -55,12 +66,46 @@ export function LineDataProvider({ children }) { // $ws.on(SocketChannels.CONNECT, console.log()); $ws.on("test", () => console.log("test")); + + if (basicUserLinesData?.data?.masterLines.length > 0) { + setLinesMap((prevMappings) => { + // go through the lines from the persistent store + + // get all of the id's and map assign to the main object + + // ?prolly have no previous at this point...but I'm okay with override since this + // ?useeffect is triggered on the refetching of the persistent store so we + // ?are prolly looking to do a full app refresh and connection refresh + const newMap = { ...prevMappings }; + + basicUserLinesData.data.masterLines.map((masterLine) => { + newMap[masterLine.lineDetails._id.toString()] = masterLine; + }); + + return newMap; + }); + } }, [basicUserLinesData]); - // get updated associations with certain lines + /** + * get more audio blocks for a certain line + */ + const handleFetchMoreAudioBlocks = useCallback( + (lineId: string) => { + // simple axios fetch for this specific block + // update the specific line in lines map + // set the state to trigger the re-renders in the tree + }, + [setLinesMap] + ); + + const value: ILineDataContext = { + linesMap, // TODO send the updated map instead of this array + relevantUsers: [], + }; return ( - + {children} ); diff --git a/packages/desktop/src/index.ts b/packages/desktop/src/index.ts index f4d73ae..493e4af 100644 --- a/packages/desktop/src/index.ts +++ b/packages/desktop/src/index.ts @@ -47,8 +47,6 @@ const createWindow = (): void => { // backgroundColor: "#00000000", - alwaysOnTop: true, // testing purposes - frame: false, roundedCorners: false, }); diff --git a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx b/packages/desktop/src/pages/lineDetailsTerminal/index.tsx index 890d5b5..0d6c8d6 100644 --- a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx +++ b/packages/desktop/src/pages/lineDetailsTerminal/index.tsx @@ -5,11 +5,33 @@ import { useCallback, useMemo } from "react"; import { $selectedLineId } from "../../controller/recoil"; import { ILineDetails } from "../router"; import LineIcon from "../../components/lines/lineIcon/index"; +import { LineMemberState } from "@nirvana/core/models/line.model"; +import MasterLineData from "@nirvana/core/models/masterLineData.model"; +import { Tooltip } from "antd"; +import { useLineDataProvider } from "../../controller/lineDataProvider"; import { useRecoilState } from "recoil"; export default function LineDetailsTerminal() { const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId); + const { linesMap } = useLineDataProvider(); + + const selectedLine: MasterLineData | undefined = useMemo(() => { + if (!selectedLineId) return undefined; + + // find the line from the data provider + if (linesMap[selectedLineId]) { + return linesMap[selectedLineId]; + } + + return undefined; + }, [selectedLineId, linesMap]); + + const isUserToggleTuned = useMemo( + () => selectedLine.currentUserMember.state === LineMemberState.TUNED, + [selectedLine] + ); + const handleEscape = useCallback(() => { console.log("deselecting line"); @@ -59,16 +81,33 @@ export default function LineDetailsTerminal() { className="absolute bottom-0 p-4 shadow-2xl flex flex-row items-center gap-2 justify-end w-full" > - - + + + {/* TODO: change to border and inset color for when inactive button */} - diff --git a/packages/desktop/src/pages/router/index.tsx b/packages/desktop/src/pages/router/index.tsx index a2e4eaa..141c248 100644 --- a/packages/desktop/src/pages/router/index.tsx +++ b/packages/desktop/src/pages/router/index.tsx @@ -12,12 +12,16 @@ import Channels, { TERMINAL_PRESET, } from "../../electron/constants"; import { GlobalHotKeys, KeyMap } from "react-hotkeys"; +import { + LineDataProvider, + useLineDataProvider, +} from "../../controller/lineDataProvider"; import React, { useState } from "react"; import { useCallback, useEffect, useMemo } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; -import { LineDataProvider } from "../../controller/lineDataProvider"; import LineDetailsTerminal from "../lineDetailsTerminal"; +import MasterLineData from "@nirvana/core/models/masterLineData.model"; import NirvanaHeader from "../../components/header/index"; import NirvanaTerminal from "../terminal"; import Overlay from "../overlay"; @@ -269,7 +273,7 @@ export default function NirvanaRouter() { // send the final dimensions to main process window.electronAPI.window.resizeWindow({ - setAlwaysOnTop, + setAlwaysOnTop: true, // TODO: remove, just this for testing dimensions: { height: finalDimensions.height, width: finalDimensions.width, @@ -318,11 +322,11 @@ export default function NirvanaRouter() {
{(desktopMode === "terminal" || - desktopMode === "terminalDetails") && ( - - )} + desktopMode === "terminalDetails") && } - {desktopMode === "terminalDetails" && } + {desktopMode === "terminalDetails" && selectedLineId && ( + + )} {desktopMode === "overlayOnly" && }
diff --git a/packages/desktop/src/pages/terminal/index.tsx b/packages/desktop/src/pages/terminal/index.tsx index db69b8c..323486e 100644 --- a/packages/desktop/src/pages/terminal/index.tsx +++ b/packages/desktop/src/pages/terminal/index.tsx @@ -6,35 +6,45 @@ import { FaPlus } from "react-icons/fa"; import { FiActivity } from "react-icons/fi"; import { ILineDetails } from "../router"; import IconButton from "../../components/Button/IconButton/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 { useLineDataProvider } from "../../controller/lineDataProvider"; import { useSetRecoilState } from "recoil"; import { useUserLines } from "../../controller/index"; -export default function NirvanaTerminal({ - allLines, -}: { - allLines: ILineDetails[]; -}) { +export default function NirvanaTerminal() { const [isModalVisible, setIsModalVisible] = useState(false); const setSelectedLineId = useSetRecoilState($selectedLineId); const setDesktopMode = useSetRecoilState($desktopMode); - const { data: userLinesRes, isLoading } = useUserLines(); + // 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 } = useLineDataProvider(); + + const allLines: MasterLineData[] = useMemo(() => { + const masterLines: MasterLineData[] = Object.values(linesMap); + + return masterLines.filter( + (masterLine) => + masterLine.currentUserMember.state === LineMemberState.INBOX + ); + }, [linesMap]); + + const toggleTunedLines = useMemo(() => { + const masterLines: MasterLineData[] = Object.values(linesMap); + + return masterLines.filter( + (masterLine) => + masterLine.currentUserMember.state === LineMemberState.TUNED + ); + }, [linesMap]); // todo: sort/order based on activity and activity date and currently broadcasting/live - const toggleTunedLines = useMemo( - () => allLines.filter((line) => line.isUserToggleTunedIn), - [] - ); - - const restLines = useMemo( - () => allLines.filter((line) => !line.isUserToggleTunedIn), - [] - ); - return (
{/* modal for creating new line */} @@ -68,22 +78,29 @@ export default function NirvanaTerminal({
{/* list of toggle tuned lines */} -
+
+ {toggleTunedLines.map((masterLineData) => ( + + ))} +
{/* rest of the lines */}
- {isLoading ? ( + {isLoadingInitialLines ? ( ) : ( <> - {!userLinesRes?.data?.masterLines?.length && ( + {!allLines.length && ( You have no lines!
Create one to connect to your team instantly. )} - {userLinesRes?.data?.masterLines?.map((masterLineData) => ( + {allLines.map((masterLineData) => (