refactor(web/dialog): Separate fields into individual components

web/src/features/dialog/InputDialog.tsx

@@ -5,35 +5,22 @@ import {
   ModalFooter,
   ModalHeader,
   ModalBody,
-  Box,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Text,
   Button,
-  Checkbox,
-  Select,
-  InputLeftElement,
 } from "@chakra-ui/react";
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
 import { useLocales } from "../../providers/LocaleProvider";
 import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
+import { Row } from "../../interfaces/dialog";
 
-type RowType = "input" | "checkbox" | "select";
+import Input from "./components/input";
+import CheckboxField from "./components/checkbox";
+import SelectField from "./components/select";
 
 interface Props {
   heading: string;
-  rows: {
+  rows: Row[];
-    type: RowType;
-    label: string;
-    options?: { value: string; label: string }[];
-    password?: boolean;
-    icon?: IconProp;
-  }[];
 }
 
 debugData<Props>([
@@ -99,6 +86,7 @@ const InputDialog: React.FC = () => {
 
   const handleConfirm = () => {
     setVisible(false);
+    console.log(inputData);
     fetchNui("inputData", inputData);
   };
 
@@ -119,65 +107,28 @@ const InputDialog: React.FC = () => {
             {fields.rows.map((row, index) => (
               <React.Fragment key={`row-${index}`}>
                 {row.type === "input" && (
-                  <Box mb={3} key={`input-${index}`} textAlign="left">
+                  <Input
-                    <Text>{row.label}</Text>
+                    key={`input-${index}`}
-                    <InputGroup>
+                    row={row}
-                      {row.icon && (
+                    index={index}
-                        <InputLeftElement
+                    handleChange={handleChange}
-                          pointerEvents="none"
+                    passwordStates={passwordStates}
-                          children={<FontAwesomeIcon icon={row.icon} />}
+                    handlePasswordStates={handlePasswordStates}
-                        />
+                  />
-                      )}
-                      <Input
-                        onChange={(e) => handleChange(e.target.value, index)}
-                        type={
-                          !row.password || passwordStates[index]
-                            ? "text"
-                            : "password"
-                        }
-                      />
-                      {row.password && (
-                        <InputRightElement
-                          cursor="pointer"
-                          onClick={() => handlePasswordStates(index)}
-                          children={
-                            <FontAwesomeIcon
-                              fixedWidth
-                              icon={passwordStates[index] ? "eye" : "eye-slash"}
-                              fontSize="1em"
-                              style={{ paddingRight: 8 }}
-                            />
-                          }
-                        />
-                      )}
-                    </InputGroup>
-                  </Box>
                 )}
                 {row.type === "checkbox" && (
-                  <Box mb={3} key={`checkbox-${index}`}>
+                  <CheckboxField
-                    <Checkbox
+                    row={row}
-                      onChange={(e) => handleChange(e.target.checked, index)}
+                    index={index}
-                    >
+                    handleChange={handleChange}
-                      {row.label}
+                  />
-                    </Checkbox>
-                  </Box>
                 )}
                 {row.type === "select" && (
-                  <Box mb={3} key={`select-${index}`}>
+                  <SelectField
-                    <Select
+                    row={row}
-                      onChange={(e) => handleChange(e.target.value, index)}
+                    index={index}
-                    >
+                    handleChange={handleChange}
-                      {/* Hacky workaround for selectable placeholder issue */}
+                  />
-                      <option value="" selected hidden disabled>
-                        {row.label}
-                      </option>
-                      {row.options?.map((option, index) => (
-                        <option key={`option-${index}`} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  </Box>
                 )}
               </React.Fragment>
             ))}

web/src/features/dialog/components/checkbox.tsx

@@ -0,0 +1,24 @@
+import { Box, Checkbox } from "@chakra-ui/react";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+}
+
+const CheckboxField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} key={`checkbox-${props.index}`}>
+        <Checkbox
+          onChange={(e) => props.handleChange(e.target.checked, props.index)}
+        >
+          {props.row.label}
+        </Checkbox>
+      </Box>
+    </>
+  );
+};
+
+export default CheckboxField;

web/src/features/dialog/components/input.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  Text,
+  Input,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+  passwordStates: boolean[];
+  handlePasswordStates: (index: number) => void;
+}
+
+const InputField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} textAlign="left">
+        <Text>{props.row.label}</Text>
+        <InputGroup>
+          {props.row.icon && (
+            <InputLeftElement
+              pointerEvents="none"
+              children={<FontAwesomeIcon icon={props.row.icon} />}
+            />
+          )}
+          <Input
+            onChange={(e) => props.handleChange(e.target.value, props.index)}
+            type={
+              !props.row.password || props.passwordStates[props.index]
+                ? "text"
+                : "password"
+            }
+          />
+          {props.row.password && (
+            <InputRightElement
+              cursor="pointer"
+              onClick={() => props.handlePasswordStates(props.index)}
+              children={
+                <FontAwesomeIcon
+                  fixedWidth
+                  icon={props.passwordStates[props.index] ? "eye" : "eye-slash"}
+                  fontSize="1em"
+                  style={{ paddingRight: 8 }}
+                />
+              }
+            />
+          )}
+        </InputGroup>
+      </Box>
+    </>
+  );
+};
+
+export default InputField;

web/src/features/dialog/components/select.tsx

@@ -0,0 +1,32 @@
+import { Box, Select } from "@chakra-ui/react";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+}
+
+const SelectField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} key={`select-${props.index}`}>
+        <Select
+          onChange={(e) => props.handleChange(e.target.value, props.index)}
+        >
+          {/* Hacky workaround for selectable placeholder issue */}
+          <option value="" selected hidden disabled>
+            {props.row.label}
+          </option>
+          {props.row.options?.map((option, index) => (
+            <option key={`option-${index}`} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+      </Box>
+    </>
+  );
+};
+
+export default SelectField;

web/src/features/menu/ContextMenu.tsx

@@ -2,7 +2,7 @@ import { useNuiEvent } from "../../hooks/useNuiEvent";
 import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
 import { debugData } from "../../utils/debugData";
 import { useEffect, useState } from "react";
-import { ContextMenuProps } from "../../interfaces";
+import { ContextMenuProps } from "../../interfaces/context";
 import Item from "./Item";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { fetchNui } from "../../utils/fetchNui";

web/src/features/menu/Item.tsx

@@ -10,7 +10,7 @@ import {
   Spacer,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Option, ContextMenuProps } from "../../interfaces";
+import { Option, ContextMenuProps } from "../../interfaces/context";
 import { fetchNui } from "../../utils/fetchNui";
 
 interface DataProps {

web/src/interfaces/dialog.ts

@@ -0,0 +1,11 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type RowType = "input" | "checkbox" | "select";
+
+export interface Row {
+  type: RowType;
+  label: string;
+  options?: { value: string; label: string }[];
+  password?: boolean;
+  icon?: IconProp;
+}