From 0eec8336e55d015148879c432c92d6337517db22 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 21 Jun 2023 11:29:55 +0530
Subject: [PATCH] Tailwind `LiveFeed.tsx` (#5718)

* fixes #4966

* fixes #4966
---
 .../Facility/Consultations/LiveFeed.tsx       | 168 ++++++------------
 1 file changed, 57 insertions(+), 111 deletions(-)

diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index 7db5bb2dfbb..84734b2a8f8 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable eqeqeq */
 import { useEffect, useState, useRef } from "react";
 import { useDispatch } from "react-redux";
 import screenfull from "screenfull";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import loadable from "@loadable/component";
 import {
   listAssetBeds,
   partialUpdateAssetBed,
@@ -15,23 +13,16 @@ import {
   useMSEMediaPlayer,
 } from "../../../Common/hooks/useMSEplayer";
 import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
-const PageTitle = loadable(() => import("../../Common/PageTitle"));
 import * as Notification from "../../../Utils/Notifications.js";
-import {
-  Card,
-  CardContent,
-  InputLabel,
-  Modal,
-  Tooltip,
-} from "@material-ui/core";
 import { FeedCameraPTZHelpButton } from "./Feed";
 import { AxiosError } from "axios";
-import { isNull } from "lodash";
 import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../models";
-import { LegacyTextInputField } from "../../Common/HelperInputFields";
 import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
+import Page from "../../Common/components/Page";
+import ConfirmDialogV2 from "../../Common/ConfirmDialogV2";
+import { FieldLabel } from "../../Form/FormFields/FormField";
 
 const LiveFeed = (props: any) => {
   const middlewareHostname =
@@ -294,85 +285,50 @@ const LiveFeed = (props: any) => {
   }
 
   return (
-    <div className="mt-4 px-6 mb-2">
-      <PageTitle title="Live Feed" hideBack={true} />
-
+    <Page title="Live Feed" hideBack>
       {toDelete && (
-        <Modal
-          className="flex h-fit justify-center items-center top-1/2"
-          open={!isNull(toDelete)}
-        >
-          <Card>
-            <CardContent>
-              <h5>
-                Confirm delete preset: {toDelete.meta.preset_name} (in bed:{" "}
-                {toDelete.bed_object.name})?
-              </h5>
-              <hr />
-              <div className="flex gap-3 justify-end mt-2">
-                <button
-                  className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
-                  onClick={() => deletePreset(toDelete.id)}
-                >
-                  Confirm
-                </button>
-                <button className="text-sm" onClick={() => setToDelete(null)}>
-                  Cancel
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-        </Modal>
+        <ConfirmDialogV2
+          show
+          title="Are you sure you want to delete this preset?"
+          description={
+            <span>
+              <p>
+                Preset: <strong>{toDelete.meta.preset_name}</strong>
+              </p>
+              <p>
+                Bed: <strong>{toDelete.bed_object.name}</strong>
+              </p>
+            </span>
+          }
+          action="Delete"
+          variant="danger"
+          onClose={() => setToDelete(null)}
+          onConfirm={() => deletePreset(toDelete.id)}
+        />
       )}
       {toUpdate && (
-        <Modal
-          className="flex h-fit justify-center items-center top-1/2"
-          open={!isNull(toUpdate)}
+        <ConfirmDialogV2
+          show
+          title="Update Preset"
+          description={"Preset: " + toUpdate.meta.preset_name}
+          action="Update"
+          variant="primary"
+          onClose={() => setToUpdate(null)}
+          onConfirm={() => updatePreset(toUpdate)}
         >
-          <Card>
-            <CardContent>
-              <h5>Update Preset</h5>
-              <hr />
-              <div>
-                <InputLabel id="asset-type">Bed</InputLabel>
-                <BedSelect
-                  name="bed"
-                  setSelected={(selected) => setBed(selected as BedModel)}
-                  selected={bed}
-                  error=""
-                  multiple={false}
-                  location={cameraAsset.location_id}
-                  facility={cameraAsset.facility_id}
-                />
-              </div>
-              <div>
-                <InputLabel id="location">Preset Name</InputLabel>
-                <LegacyTextInputField
-                  name="name"
-                  id="location"
-                  variant="outlined"
-                  margin="dense"
-                  type="text"
-                  value={preset}
-                  onChange={(e) => setNewPreset(e.target.value)}
-                  errors=""
-                />
-              </div>
-
-              <div className="flex gap-3 justify-end mt-2">
-                <button
-                  onClick={() => updatePreset(toUpdate)}
-                  className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
-                >
-                  Confirm
-                </button>
-                <button className="text-sm" onClick={() => setToUpdate(null)}>
-                  Cancel
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-        </Modal>
+          <div className="flex flex-col mt-4">
+            <FieldLabel required>Bed</FieldLabel>
+            <BedSelect
+              name="bed"
+              setSelected={(selected) => setBed(selected as BedModel)}
+              selected={bed}
+              error=""
+              multiple={false}
+              location={cameraAsset.location_id}
+              facility={cameraAsset.facility_id}
+            />
+          </div>
+        </ConfirmDialogV2>
       )}
       <div className="mt-4 flex flex-col">
         <div className="flex flex-col lg:flex-row gap-4 mt-4 relative">
@@ -451,30 +407,20 @@ const LiveFeed = (props: any) => {
                     .replace("ArrowRight", "→");
 
                 return (
-                  <Tooltip
-                    placement="top"
-                    arrow={true}
-                    title={
-                      <span className="text-sm font-semibold">
-                        {`${option.label}  (${shortcutKeyDescription})`}
-                      </span>
-                    }
-                    key={option.action}
+                  <button
+                    className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1 tooltip"
+                    onClick={option.callback}
                   >
-                    <button
-                      className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1"
-                      onClick={option.callback}
-                    >
-                      <span className="sr-only">{option.label}</span>
-                      {option.icon ? (
-                        <i className={`fas fa-${option.icon} md:p-2`}></i>
-                      ) : (
-                        <span className="px-2 font-bold h-full w-8 flex items-center justify-center">
-                          {option.value}x
-                        </span>
-                      )}
-                    </button>
-                  </Tooltip>
+                    <span className="sr-only">{option.label}</span>
+                    {option.icon ? (
+                      <i className={`fas fa-${option.icon} md:p-2`}></i>
+                    ) : (
+                      <span className="px-2 font-bold h-full w-8 flex items-center justify-center">
+                        {option.value}x
+                      </span>
+                    )}
+                    <span className="tooltip-text tooltip-top -translate-x-1/2 text-sm font-semibold">{`${option.label}  (${shortcutKeyDescription})`}</span>
+                  </button>
                 );
               })}
               <div className="pl-3 hideonmobilescreen">
@@ -644,7 +590,7 @@ const LiveFeed = (props: any) => {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };