cleaning up logic and showing hi when nothing is selected

2022-05-09 08:02:12 -05:00
parent 6413843059
commit e4233889f2
3 changed files with 107 additions and 116 deletions
@@ -40,7 +40,7 @@ type DesktopMode = "flowState" | "overlayOnly" | "terminal";

 export const $desktopMode = atom<DesktopMode>({
  key: "DESKTOP_MODE",
-  default: "flowState",
+  default: "terminal",
 });

 export const $selectedLineId = atom<string>({
@@ -1,109 +0,0 @@
-import { FiActivity, FiSettings, FiSun } from "react-icons/fi";
-import { GlobalHotKeys, KeyMap } from "react-hotkeys";
-import { useCallback, useEffect, useMemo } from "react";
-
-import { $selectedLineId } from "../../../controller/recoil";
-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 { useGetUserDetails } from "../../../controller/index";
-import { useLineDataProvider } from "../../../controller/lineDataProvider";
-import { useRecoilState } from "recoil";
-
-export default function LineDetailsTerminal({
-  selectedLine,
-  handleToggleTuneToLine,
-}: {
-  selectedLine?: MasterLineData;
-  handleToggleTuneToLine: (lineId: string, turnToggleOn: boolean) => void;
-}) {
-  const { data: userDetails } = useGetUserDetails();
-
-  console.log("selected line", selectedLine);
-
-  const isUserToggleTuned = useMemo(
-    () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
-    [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]
-  );
-
-  return (
-    <>
-      <div
-        className="flex flex-col flex-1 bg-gray-100 relative 
-      border-l border-l-gray-200"
-      >
-        {selectedLine && (
-          <>
-            {/* controls */}
-            <div
-              className="absolute bottom-0 p-4 shadow-2xl
-        flex flex-row items-center gap-2 justify-end w-full"
-            >
-              <span className="mr-auto text-teal-800">{`${
-                selectedLine?.tunedInMemberIds?.length ?? 0
-              } on the line`}</span>
-
-              <button
-                className={`p-3 flex justify-center items-center hover:bg-gray-300
-           transition-all hover:scale-105`}
-              >
-                <FiSettings className="text-gray-400 text-md" />
-              </button>
-
-              {/* TODO: move to on hover of line row  */}
-              <Tooltip
-                title={`${
-                  isUserToggleTuned
-                    ? "click to untoggle"
-                    : "click to stay tuned in"
-                }`}
-              >
-                <button
-                  className={`p-3 flex justify-center items-center shadow-lg
-          hover:scale-105 transition-all animate-pulse ${
-            isUserToggleTuned ? "bg-gray-800 text-white" : "text-black"
-          }`}
-                  onClick={() =>
-                    isUserToggleTuned
-                      ? handleToggleTuneToLine(
-                          selectedLine.lineDetails._id.toString(),
-                          false
-                        )
-                      : handleToggleTuneToLine(
-                          selectedLine.lineDetails._id.toString(),
-                          true
-                        )
-                  }
-                >
-                  <FiActivity className="text-lg" />
-                </button>
-              </Tooltip>
-
-              <button
-                className={`p-3 flex justify-center items-center shadow-lg
-          hover:scale-105 transition-all ${
-            isUserBroadcasting
-              ? "bg-teal-800 text-white"
-              : "text-teal-800 border-teal-800 border"
-          }`}
-              >
-                <FiSun className="text-lg" />
-              </button>
-            </div>
-          </>
-        )}
-      </div>
-    </>
-  );
-}
@@ -1,4 +1,5 @@
 import { $desktopMode, $selectedLineId } from "../../controller/recoil";
+import { FiActivity, FiSettings, FiSun } from "react-icons/fi";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { Skeleton, Tooltip } from "antd";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -6,9 +7,7 @@ import { useGetUserDetails, useUserLines } from "../../controller/index";
 import { useRecoilState, useSetRecoilState } from "recoil";

 import { FaPlus } from "react-icons/fa";
-import { FiActivity } from "react-icons/fi";
 import IconButton from "../../components/Button/IconButton/index";
-import LineDetailsTerminal from "./details";
 import { LineMemberState } from "@nirvana/core/models/line.model";
 import LineRow from "../../components/lines/lineRow.tsx/index";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
@@ -257,11 +256,112 @@ export default function NirvanaTerminal({
          </div>
        </div>

-        <LineDetailsTerminal
-          handleToggleTuneToLine={handleToggleTuneToLine}
-          selectedLine={selectedLine}
-        />
+        {selectedLine ? (
+          <LineDetailsTerminal
+            handleToggleTuneToLine={handleToggleTuneToLine}
+            selectedLine={selectedLine}
+          />
+        ) : (
+          <div
+            className="flex flex-col flex-1 justify-center items-center bg-gray-100 
+      border-l border-l-gray-200"
+          >
+            <span className="text-xl text-gray-800">
+              {`Hi ${userDetails?.user?.givenName}!`}
+            </span>
+            <span className="text-md text-gray-400">You're all set!</span>
+          </div>
+        )}
      </div>
    </>
  );
 }
+
+function LineDetailsTerminal({
+  selectedLine,
+  handleToggleTuneToLine,
+}: {
+  selectedLine: MasterLineData;
+  handleToggleTuneToLine: (lineId: string, turnToggleOn: boolean) => void;
+}) {
+  const { data: userDetails } = useGetUserDetails();
+
+  console.log("selected line", selectedLine);
+
+  const isUserToggleTuned = useMemo(
+    () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
+    [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]
+  );
+
+  return (
+    <div
+      className="flex flex-col flex-1 bg-gray-100 relative 
+      border-l border-l-gray-200"
+    >
+      {/* controls */}
+      <div
+        className="absolute bottom-0 p-4 shadow-2xl
+        flex flex-row items-center gap-2 justify-end w-full"
+      >
+        <span className="mr-auto text-teal-800">{`${
+          selectedLine?.tunedInMemberIds?.length ?? 0
+        } on the line`}</span>
+
+        <button
+          className={`p-3 flex justify-center items-center hover:bg-gray-300
+           transition-all hover:scale-105`}
+        >
+          <FiSettings className="text-gray-400 text-md" />
+        </button>
+
+        {/* TODO: move to on hover of line row  */}
+        <Tooltip
+          title={`${
+            isUserToggleTuned ? "click to untoggle" : "click to stay tuned in"
+          }`}
+        >
+          <button
+            className={`p-3 flex justify-center items-center shadow-lg
+          hover:scale-105 transition-all animate-pulse ${
+            isUserToggleTuned ? "bg-gray-800 text-white" : "text-black"
+          }`}
+            onClick={() =>
+              isUserToggleTuned
+                ? handleToggleTuneToLine(
+                    selectedLine.lineDetails._id.toString(),
+                    false
+                  )
+                : handleToggleTuneToLine(
+                    selectedLine.lineDetails._id.toString(),
+                    true
+                  )
+            }
+          >
+            <FiActivity className="text-lg" />
+          </button>
+        </Tooltip>
+
+        <button
+          className={`p-3 flex justify-center items-center shadow-lg
+          hover:scale-105 transition-all ${
+            isUserBroadcasting
+              ? "bg-teal-800 text-white"
+              : "text-teal-800 border-teal-800 border"
+          }`}
+        >
+          <FiSun className="text-lg" />
+        </button>
+      </div>
+    </div>
+  );
+}