chore(web): add prettier and format

2026-08-17 23:16:03 +01:00 · 2022-08-27 15:58:36 +02:00
parent cc76d23419
commit 4a5251b60b
44 changed files with 2933 additions and 1984 deletions
--- a/web/src/features/menu/context/ContextMenu.tsx
+++ b/web/src/features/menu/context/ContextMenu.tsx
@@ -1,25 +1,25 @@
-import { useNuiEvent } from "../../../hooks/useNuiEvent";
-import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { ContextMenuProps } from "../../../interfaces/context";
-import Item from "./Item";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { fetchNui } from "../../../utils/fetchNui";
+import { useNuiEvent } from '../../../hooks/useNuiEvent';
+import { Box, Text, Flex, ScaleFade } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { ContextMenuProps } from '../../../interfaces/context';
+import Item from './Item';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { fetchNui } from '../../../utils/fetchNui';

 const openMenu = (id: string | undefined) => {
-  fetchNui<ContextMenuProps>("openContext", id);
+  fetchNui<ContextMenuProps>('openContext', id);
 };

 const ContextMenu: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [contextMenu, setContextMenu] = useState<ContextMenuProps>({
-    title: "",
-    options: { "": { description: "", metadata: [] } },
+    title: '',
+    options: { '': { description: '', metadata: [] } },
  });

  const closeContext = () => {
    setVisible(false);
-    fetchNui("closeContext");
+    fetchNui('closeContext');
  };

  // Hides the context menu on ESC
@@ -27,17 +27,17 @@ const ContextMenu: React.FC = () => {
    if (!visible) return;

    const keyHandler = (e: KeyboardEvent) => {
-      if (["Escape"].includes(e.code)) closeContext();
+      if (['Escape'].includes(e.code)) closeContext();
    };

-    window.addEventListener("keydown", keyHandler);
+    window.addEventListener('keydown', keyHandler);

-    return () => window.removeEventListener("keydown", keyHandler);
+    return () => window.removeEventListener('keydown', keyHandler);
  }, [visible]);

-  useNuiEvent("hideContext", () => setVisible(false));
+  useNuiEvent('hideContext', () => setVisible(false));

-  useNuiEvent<ContextMenuProps>("showContext", async (data) => {
+  useNuiEvent<ContextMenuProps>('showContext', async (data) => {
    if (visible) {
      setVisible(false);
      await new Promise((resolve) => setTimeout(resolve, 100));
@@ -47,13 +47,7 @@ const ContextMenu: React.FC = () => {
  });

  return (
-    <Flex
-      position="absolute"
-      w="75%"
-      h="80%"
-      justifyContent="flex-end"
-      alignItems="center"
-    >
+    <Flex position="absolute" w="75%" h="80%" justifyContent="flex-end" alignItems="center">
      <ScaleFade in={visible} unmountOnExit>
        <Box w="xs" h={580}>
          <Flex justifyContent="center" alignItems="center" mb={3}>
@@ -68,7 +62,7 @@ const ContextMenu: React.FC = () => {
                alignItems="center"
                marginRight={2}
                p={2}
-                _hover={{ bg: "gray.700" }}
+                _hover={{ bg: 'gray.700' }}
                transition="300ms"
                onClick={() => openMenu(contextMenu.menu)}
              >
@@ -76,13 +70,7 @@ const ContextMenu: React.FC = () => {
              </Flex>
            )}
            <Box borderRadius="md" bg="gray.800" flex="1 85%">
-              <Text
-                fontFamily="Poppins"
-                fontSize="md"
-                p={2}
-                textAlign="center"
-                fontWeight="light"
-              >
+              <Text fontFamily="Poppins" fontSize="md" p={2} textAlign="center" fontWeight="light">
                {contextMenu.title}
              </Text>
            </Box>
@@ -96,7 +84,7 @@ const ContextMenu: React.FC = () => {
              alignItems="center"
              marginLeft={2}
              p={2}
-              _hover={{ bg: "gray.700" }}
+              _hover={{ bg: 'gray.700' }}
              transition="300ms"
              onClick={() => closeContext()}
            >
--- a/web/src/features/menu/context/Item.tsx
+++ b/web/src/features/menu/context/Item.tsx
@@ -10,17 +10,17 @@ import {
  Spacer,
  Image,
  HStack,
-} from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Option, ContextMenuProps } from "../../../interfaces/context";
-import { fetchNui } from "../../../utils/fetchNui";
+} from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Option, ContextMenuProps } from '../../../interfaces/context';
+import { fetchNui } from '../../../utils/fetchNui';

 const openMenu = (id: string | undefined) => {
-  fetchNui<ContextMenuProps>("openContext", id);
+  fetchNui<ContextMenuProps>('openContext', id);
 };

 const clickContext = (id: string) => {
-  fetchNui("clickContext", id);
+  fetchNui('clickContext', id);
 };

 const Item: React.FC<{
@@ -28,12 +28,7 @@ const Item: React.FC<{
 }> = ({ option }) => {
  return (
    <>
-      <Popover
-        placement="right-start"
-        trigger="hover"
-        eventListeners={{ scroll: true }}
-        isLazy
-      >
+      <Popover placement="right-start" trigger="hover" eventListeners={{ scroll: true }} isLazy>
        <PopoverTrigger>
          <Box
            bg="gray.800"
@@ -45,16 +40,12 @@ const Item: React.FC<{
            fontFamily="Poppins"
            fontSize="md"
            transition="300ms"
-            _hover={{ bg: "gray.700" }}
+            _hover={{ bg: 'gray.700' }}
          >
            <Flex
              w="100%"
              alignItems="center"
-              onClick={() =>
-                option[1].menu
-                  ? openMenu(option[1].menu)
-                  : clickContext(option[0])
-              }
+              onClick={() => (option[1].menu ? openMenu(option[1].menu) : clickContext(option[0]))}
            >
              {option[1]?.icon && (
                <FontAwesomeIcon
@@ -63,7 +54,7 @@ const Item: React.FC<{
                  fontSize={20}
                  style={{
                    marginRight: 10,
-                    justifySelf: "center",
+                    justifySelf: 'center',
                    color: option[1].iconColor,
                  }}
                />
@@ -83,12 +74,7 @@ const Item: React.FC<{
              {(option[1].menu || option[1].arrow) && (
                <>
                  <Spacer />
-                  <Box
-                    alignSelf="center"
-                    justifySelf="center"
-                    mr={4}
-                    fontSize="xl"
-                  >
+                  <Box alignSelf="center" justifySelf="center" mr={4} fontSize="xl">
                    <FontAwesomeIcon icon="chevron-right" />
                  </Box>
                </>
@@ -108,28 +94,19 @@ const Item: React.FC<{
                    <>
                      {option[1].image && <Image src={option[1].image} />}
                      {Array.isArray(option[1].metadata) ? (
-                        option[1].metadata.map(
-                          (
-                            metadata: string | { label: string; value: any },
-                            index: number
-                          ) => (
-                            <Text key={`context-metadata-${index}`}>
-                              {typeof metadata === "string"
-                                ? `${metadata}`
-                                : `${metadata.label}: ${metadata.value}`}
-                            </Text>
-                          )
-                        )
+                        option[1].metadata.map((metadata: string | { label: string; value: any }, index: number) => (
+                          <Text key={`context-metadata-${index}`}>
+                            {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`}
+                          </Text>
+                        ))
                      ) : (
                        <>
-                          {typeof option[1].metadata === "object" &&
-                            Object.entries(option[1].metadata).map(
-                              (metadata: { [key: string]: any }, index) => (
-                                <Text key={`context-metadata-${index}`}>
-                                  {metadata[0]}: {metadata[1]}
-                                </Text>
-                              )
-                            )}
+                          {typeof option[1].metadata === 'object' &&
+                            Object.entries(option[1].metadata).map((metadata: { [key: string]: any }, index) => (
+                              <Text key={`context-metadata-${index}`}>
+                                {metadata[0]}: {metadata[1]}
+                              </Text>
+                            ))}
                        </>
                      )}
                    </>
--- a/web/src/features/menu/list/Header.tsx
+++ b/web/src/features/menu/list/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Text } from '@chakra-ui/react';

 const Header: React.FC<{ title: string }> = ({ title }) => {
  return (
--- a/web/src/features/menu/list/ListItem.tsx
+++ b/web/src/features/menu/list/ListItem.tsx
@@ -1,7 +1,7 @@
-import { Box, Flex, Stack, Spacer, Text, IconProps } from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { forwardRef } from "react";
-import type { MenuItem } from "./index";
+import { Box, Flex, Stack, Spacer, Text, IconProps } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { forwardRef } from 'react';
+import type { MenuItem } from './index';

 interface Props {
  item: MenuItem;
@@ -19,7 +19,7 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
      p={2}
      height="60px"
      key={`item-${index}`}
-      _focus={{ bg: "#373A40", outline: "none" }}
+      _focus={{ bg: '#373A40', outline: 'none' }}
      ref={(element) => {
        if (ref)
          // @ts-ignore i cba
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -1,13 +1,13 @@
-import { Box, Stack, Tooltip } from "@chakra-ui/react";
-import { useEffect, useRef, useState } from "react";
-import { useNuiEvent } from "../../../hooks/useNuiEvent";
-import ListItem from "./ListItem";
-import Header from "./Header";
-import FocusTrap from "focus-trap-react";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { fetchNui } from "../../../utils/fetchNui";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
+import { Box, Stack, Tooltip } from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
+import { useNuiEvent } from '../../../hooks/useNuiEvent';
+import ListItem from './ListItem';
+import Header from './Header';
+import FocusTrap from 'focus-trap-react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { fetchNui } from '../../../utils/fetchNui';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';

 export interface MenuItem {
  label: string;
@@ -19,15 +19,15 @@ export interface MenuItem {
 }

 export interface MenuSettings {
-  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  title: string;
  items: Array<MenuItem>;
 }

 const ListMenu: React.FC = () => {
  const [menu, setMenu] = useState<MenuSettings>({
-    position: "top-left",
-    title: "",
+    position: 'top-left',
+    title: '',
    items: [],
  });
  const [selected, setSelected] = useState(0);
@@ -37,53 +37,47 @@ const ListMenu: React.FC = () => {

  const closeMenu = (ignoreFetch?: boolean) => {
    setVisible(false);
-    if (!ignoreFetch) fetchNui("closeMenu");
+    if (!ignoreFetch) fetchNui('closeMenu');
  };

  const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
    switch (e.code) {
-      case "ArrowDown":
+      case 'ArrowDown':
        setSelected((selected) => {
          if (selected >= menu.items.length - 1) return (selected = 0);
          return selected + 1;
        });
        break;
-      case "ArrowUp":
+      case 'ArrowUp':
        setSelected((selected) => {
          if (selected <= 0) return (selected = menu.items.length - 1);
          return selected - 1;
        });
        break;
-      case "ArrowRight":
+      case 'ArrowRight':
        if (!Array.isArray(menu.items[selected].values)) return;
        setIndexStates({
          ...indexStates,
          [selected]:
-            indexStates[selected] + 1 <=
-            menu.items[selected].values?.length! - 1
+            indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1
              ? indexStates[selected] + 1
              : (indexStates[selected] = 0),
        });
        break;
-      case "ArrowLeft":
+      case 'ArrowLeft':
        if (!Array.isArray(menu.items[selected].values)) return;
        setIndexStates({
          ...indexStates,
          [selected]:
            indexStates[selected] - 1 >= 0
              ? indexStates[selected] - 1
-              : (indexStates[selected] =
-                  menu.items[selected].values?.length! - 1),
+              : (indexStates[selected] = menu.items[selected].values?.length! - 1),
        });
        break;
-      case "Enter":
+      case 'Enter':
        if (!menu.items[selected]) return;
-        fetchNui("confirmSelected", [selected, indexStates[selected]]).catch();
-        if (
-          menu.items[selected].close === undefined ||
-          menu.items[selected].close
-        )
-          setVisible(false);
+        fetchNui('confirmSelected', [selected, indexStates[selected]]).catch();
+        if (menu.items[selected].close === undefined || menu.items[selected].close) setVisible(false);
        break;
    }
  };
@@ -91,7 +85,7 @@ const ListMenu: React.FC = () => {
  useEffect(() => {
    if (!menu.items[selected]?.values) return;
    const timer = setTimeout(() => {
-      fetchNui("changeIndex", [selected, indexStates[selected]]).catch();
+      fetchNui('changeIndex', [selected, indexStates[selected]]).catch();
    }, 100);
    return () => clearTimeout(timer);
  }, [indexStates]);
@@ -99,13 +93,13 @@ const ListMenu: React.FC = () => {
  useEffect(() => {
    if (!menu.items[selected]) return;
    listRefs.current[selected]?.scrollIntoView({
-      block: "nearest",
-      inline: "start",
+      block: 'nearest',
+      inline: 'start',
    });
    listRefs.current[selected]?.focus({ preventScroll: true });
    // debounces the callback to avoid spam
    const timer = setTimeout(() => {
-      fetchNui("changeSelected", [selected, indexStates[selected]]).catch();
+      fetchNui('changeSelected', [selected, indexStates[selected]]).catch();
    }, 100);
    return () => clearTimeout(timer);
  }, [selected, menu]);
@@ -114,26 +108,25 @@ const ListMenu: React.FC = () => {
    if (!visible) return;

    const keyHandler = (e: KeyboardEvent) => {
-      if (["Escape", "Backspace"].includes(e.code)) closeMenu();
+      if (['Escape', 'Backspace'].includes(e.code)) closeMenu();
    };

-    window.addEventListener("keydown", keyHandler);
+    window.addEventListener('keydown', keyHandler);

-    return () => window.removeEventListener("keydown", keyHandler);
+    return () => window.removeEventListener('keydown', keyHandler);
  }, [visible]);

-  useNuiEvent("closeMenu", () => closeMenu(true));
+  useNuiEvent('closeMenu', () => closeMenu(true));

-  useNuiEvent("setMenu", (data: MenuSettings) => {
+  useNuiEvent('setMenu', (data: MenuSettings) => {
    setSelected(0);
-    if (!data.position) data.position = "top-left";
+    if (!data.position) data.position = 'top-left';
    listRefs.current = [];
    setMenu(data);
    setVisible(true);
    let arrayIndexes: { [key: number]: number } = {};
    for (let i = 0; i < data.items.length; i++) {
-      if (Array.isArray(data.items[i].values))
-        arrayIndexes[i] = (data.items[i].defaultIndex || 1) - 1;
+      if (Array.isArray(data.items[i].values)) arrayIndexes[i] = (data.items[i].defaultIndex || 1) - 1;
    }
    setIndexStates(arrayIndexes);
    listRefs.current[0]?.focus();
@@ -154,39 +147,13 @@ const ListMenu: React.FC = () => {
          <Box
            position="absolute"
            pointerEvents="none"
-            mt={
-              menu.position === "top-left" || menu.position === "top-right"
-                ? 5
-                : 0
-            }
-            ml={
-              menu.position === "top-left" || menu.position === "bottom-left"
-                ? 5
-                : 0
-            }
-            mr={
-              menu.position === "top-right" || menu.position === "bottom-right"
-                ? 5
-                : 0
-            }
-            mb={
-              menu.position === "bottom-left" ||
-              menu.position === "bottom-right"
-                ? 5
-                : 0
-            }
-            right={
-              menu.position === "top-right" || menu.position === "bottom-right"
-                ? 1
-                : undefined
-            }
-            left={menu.position === "bottom-left" ? 1 : undefined}
-            bottom={
-              menu.position === "bottom-left" ||
-              menu.position === "bottom-right"
-                ? 1
-                : undefined
-            }
+            mt={menu.position === 'top-left' || menu.position === 'top-right' ? 5 : 0}
+            ml={menu.position === 'top-left' || menu.position === 'bottom-left' ? 5 : 0}
+            mr={menu.position === 'top-right' || menu.position === 'bottom-right' ? 5 : 0}
+            mb={menu.position === 'bottom-left' || menu.position === 'bottom-right' ? 5 : 0}
+            right={menu.position === 'top-right' || menu.position === 'bottom-right' ? 1 : undefined}
+            left={menu.position === 'bottom-left' ? 1 : undefined}
+            bottom={menu.position === 'bottom-left' || menu.position === 'bottom-right' ? 1 : undefined}
          >
            <Header title={menu.title} />
            <Box
@@ -194,11 +161,7 @@ const ListMenu: React.FC = () => {
              height="fit-content"
              maxHeight={415}
              overflow="hidden"
-              borderRadius={
-                menu.items.length <= 6 || selected === menu.items.length - 1
-                  ? "md"
-                  : undefined
-              }
+              borderRadius={menu.items.length <= 6 || selected === menu.items.length - 1 ? 'md' : undefined}
              bg="#141517"
              fontFamily="Nunito"
              borderTopLeftRadius="none"
@@ -210,12 +173,7 @@ const ListMenu: React.FC = () => {
                  {menu.items.map((item, index) => (
                    <React.Fragment key={`menu-item-${index}`}>
                      {item.label && (
-                        <ListItem
-                          index={index}
-                          item={item}
-                          scrollIndex={indexStates[index]}
-                          ref={listRefs}
-                        />
+                        <ListItem index={index} item={item} scrollIndex={indexStates[index]} ref={listRefs} />
                      )}
                    </React.Fragment>
                  ))}
@@ -223,18 +181,8 @@ const ListMenu: React.FC = () => {
              </FocusTrap>
            </Box>
            {menu.items.length > 6 && selected !== menu.items.length - 1 && (
-              <Box
-                bg="#141517"
-                textAlign="center"
-                borderBottomLeftRadius="md"
-                borderBottomRightRadius="md"
-                height={25}
-              >
-                <FontAwesomeIcon
-                  icon="chevron-down"
-                  color="#909296"
-                  fontSize={20}
-                />
+              <Box bg="#141517" textAlign="center" borderBottomLeftRadius="md" borderBottomRightRadius="md" height={25}>
+                <FontAwesomeIcon icon="chevron-down" color="#909296" fontSize={20} />
              </Box>
            )}
          </Box>