refactor(nui): Better organize components

web/src/features/progress/CircleProgressbar.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+  CircularProgress,
+  CircularProgressLabel,
+  Flex,
+  ScaleFade,
+} from "@chakra-ui/react";
+import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { debugData } from "../../utils/debugData";
+import { fetchNui } from "../../utils/fetchNui";
+
+interface Props {
+  duration: number;
+  position?: "middle" | "bottom";
+  percent?: boolean;
+}
+
+debugData([
+  {
+    action: "circleProgress",
+    data: {
+      duration: 8000,
+    },
+  },
+]);
+
+const CircleProgressbar: React.FC = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [progressDuration, setProgressDuration] = React.useState(0);
+  const [position, setPosition] = React.useState<"middle" | "bottom">("middle");
+  const [value, setValue] = React.useState(0);
+  const [cancelled, setCancelled] = React.useState(false);
+
+  const progressComplete = () => {
+    setVisible(false);
+    fetchNui("progressComplete");
+  };
+
+  const progressCancel = () => {
+    setCancelled(true);
+    setValue(99); // Sets the final value to 100% kek
+    setTimeout(() => {
+      setVisible(false);
+    }, 2500);
+  };
+
+  useNuiEvent("progressCancel", progressCancel);
+
+  useNuiEvent<Props>("circleProgress", (data) => {
+    if (visible) return;
+    setCancelled(false);
+    setVisible(true);
+    setValue(0);
+    setProgressDuration(data.duration);
+    setPosition(data.position || "middle");
+    const onePercent = data.duration * 0.01;
+    const updateProgress = setInterval(() => {
+      setValue((previousValue) => {
+        const newValue = previousValue + 1;
+        newValue >= 100 && clearInterval(updateProgress);
+        return newValue;
+      });
+    }, onePercent);
+  });
+
+  return (
+    <Flex
+      h={position === "middle" ? "100%" : "20%"}
+      w="100%"
+      position="absolute"
+      bottom="0"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <ScaleFade in={visible} unmountOnExit>
+        <CircularProgress
+          value={value}
+          size="5rem"
+          trackColor="rgba(0, 0, 0, 0.6)"
+          onAnimationEnd={progressComplete}
+          thickness={6}
+          color={cancelled ? "rgb(198, 40, 40)" : "white"}
+          sx={
+            !cancelled
+              ? {
+                  ".chakra-progress__indicator": {
+                    transition: "none !important",
+                    animation: "progress linear forwards !important",
+                    animationDuration: `${progressDuration}ms !important`,
+                    opacity: "1 !important",
+                  },
+                }
+              : {
+                  ".chakra-progress__indicator": {
+                    transition: "none !important",
+                    strokeDasharray: "264, 0 !important", // sets circle to full
+                  },
+                }
+          }
+        >
+          <CircularProgressLabel fontFamily="Fira Mono">
+            {value}%
+          </CircularProgressLabel>
+        </CircularProgress>
+      </ScaleFade>
+    </Flex>
+  );
+};
+
+export default CircleProgressbar;

web/src/features/progress/Progressbar.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import {
+  Progress,
+  ProgressLabel,
+  Flex,
+  Box,
+  ScaleFade,
+} from "@chakra-ui/react";
+import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { debugData } from "../../utils/debugData";
+import { fetchNui } from "../../utils/fetchNui";
+
+interface Props {
+  label: string;
+  duration: number;
+}
+
+debugData([
+  {
+    action: "progress",
+    data: {
+      label: "Using Lockpick",
+      duration: 8000,
+    },
+  },
+]);
+
+const Progressbar: React.FC = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [label, setLabel] = React.useState("");
+  const [duration, setDuration] = React.useState(0);
+  const [cancelled, setCancelled] = React.useState(false);
+
+  const progressComplete = () => {
+    setVisible(false);
+    fetchNui("progressComplete");
+  };
+
+  const progressCancel = () => {
+    setCancelled(true);
+    setTimeout(() => {
+      setVisible(false);
+    }, 2500);
+  };
+
+  useNuiEvent("progressCancel", progressCancel);
+
+  useNuiEvent<Props>("progress", (data) => {
+    if (visible) return;
+    setCancelled(false);
+    setVisible(true);
+    setLabel(data.label);
+    setDuration(data.duration);
+  });
+
+  return (
+    <Flex
+      h="20%"
+      w="100%"
+      position="absolute"
+      bottom="0"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Box width="22rem">
+        <ScaleFade in={visible} unmountOnExit>
+          <Progress
+            value={100}
+            height="2.8rem"
+            borderRadius="sm"
+            fontFamily="Inter"
+            flex="1 1 auto"
+            boxShadow="lg"
+            onAnimationEnd={progressComplete}
+            sx={
+              !cancelled
+                ? {
+                    // really scuffed solution but works, wonder if there's a better way to do this?
+                    "> div:first-of-type": {
+                      animation: `progress-bar linear ${duration}ms`,
+                      borderRadius: "none",
+                    },
+                  }
+                : {
+                    "> div:first-of-type": {
+                      width: "100%",
+                      backgroundColor: "rgb(198, 40, 40)",
+                    },
+                  }
+            }
+          >
+            <ProgressLabel fontSize={22} fontWeight="light">
+              {label}
+            </ProgressLabel>
+          </Progress>
+        </ScaleFade>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Progressbar;