From 993b06e880392849b79daa8dde336b1be1afb397 Mon Sep 17 00:00:00 2001 From: Luke Date: Fri, 1 Apr 2022 21:41:53 +0200 Subject: [PATCH] refactor(nui): Better organize components --- web/src/App.tsx | 21 +++++++++++++++++++ web/src/components/App.tsx | 21 ------------------- .../dialog}/InputDialog.tsx | 4 ++-- .../features/menu/ContextMenu.tsx | 8 +++---- .../{components => }/features/menu/Item.tsx | 4 ++-- .../notifications/NotificationWrapper.tsx} | 4 ++-- .../progress}/CircleProgressbar.tsx | 6 +++--- .../progress}/Progressbar.tsx | 6 +++--- .../textui}/TextUI.tsx | 4 ++-- web/src/index.tsx | 2 +- 10 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 web/src/App.tsx delete mode 100644 web/src/components/App.tsx rename web/src/{components => features/dialog}/InputDialog.tsx (95%) rename web/src/{components => }/features/menu/ContextMenu.tsx (93%) rename web/src/{components => }/features/menu/Item.tsx (96%) rename web/src/{components/Notifications.tsx => features/notifications/NotificationWrapper.tsx} (95%) rename web/src/{components => features/progress}/CircleProgressbar.tsx (94%) rename web/src/{components => features/progress}/Progressbar.tsx (93%) rename web/src/{components => features/textui}/TextUI.tsx (93%) diff --git a/web/src/App.tsx b/web/src/App.tsx new file mode 100644 index 0000000..dd9b2e0 --- /dev/null +++ b/web/src/App.tsx @@ -0,0 +1,21 @@ +import Notifications from "./features/notifications/NotificationWrapper"; +import CircleProgressbar from "./features/progress/CircleProgressbar"; +import Progressbar from "./features/progress/Progressbar"; +import TextUI from "./features/textui/TextUI"; +import InputDialog from "./features/dialog/InputDialog"; +import ContextMenu from "./features/menu/ContextMenu"; + +const App: React.FC = () => { + return ( + <> + + + + + + + + ); +}; + +export default App; diff --git a/web/src/components/App.tsx b/web/src/components/App.tsx deleted file mode 100644 index 35ba9eb..0000000 --- a/web/src/components/App.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Notifications from "./Notifications"; -import CircleProgressbar from "./CircleProgressbar"; -import Progressbar from "./Progressbar"; -import TextUI from "./TextUI"; -import InputDialog from "./InputDialog"; -import ContextMenu from "./features/menu/ContextMenu"; - -const App: React.FC = () => { - return ( - <> - - - - - - - - ); -}; - -export default App; diff --git a/web/src/components/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx similarity index 95% rename from web/src/components/InputDialog.tsx rename to web/src/features/dialog/InputDialog.tsx index 53c77e4..5a039b1 100644 --- a/web/src/components/InputDialog.tsx +++ b/web/src/features/dialog/InputDialog.tsx @@ -11,9 +11,9 @@ import { Button, } from "@chakra-ui/react"; import React from "react"; -import { useNuiEvent } from "../hooks/useNuiEvent"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; // import { debugData } from "../utils/debugData"; -import { fetchNui } from "../utils/fetchNui"; +import { fetchNui } from "../../utils/fetchNui"; interface Props { heading: string; diff --git a/web/src/components/features/menu/ContextMenu.tsx b/web/src/features/menu/ContextMenu.tsx similarity index 93% rename from web/src/components/features/menu/ContextMenu.tsx rename to web/src/features/menu/ContextMenu.tsx index 0b75c23..2bd53af 100644 --- a/web/src/components/features/menu/ContextMenu.tsx +++ b/web/src/features/menu/ContextMenu.tsx @@ -1,11 +1,11 @@ -import { useNuiEvent } from "../../../hooks/useNuiEvent"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react"; -import { debugData } from "../../../utils/debugData"; +import { debugData } from "../../utils/debugData"; import { useEffect, useState } from "react"; -import { ContextMenuProps } from "../../../interfaces"; +import { ContextMenuProps } from "../../interfaces"; import Item from "./Item"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { fetchNui } from "../../../utils/fetchNui"; +import { fetchNui } from "../../utils/fetchNui"; debugData([ { diff --git a/web/src/components/features/menu/Item.tsx b/web/src/features/menu/Item.tsx similarity index 96% rename from web/src/components/features/menu/Item.tsx rename to web/src/features/menu/Item.tsx index 8e52447..a0bc9a2 100644 --- a/web/src/components/features/menu/Item.tsx +++ b/web/src/features/menu/Item.tsx @@ -10,8 +10,8 @@ import { Spacer, } from "@chakra-ui/react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Option, ContextMenuProps } from "../../../interfaces"; -import { fetchNui } from "../../../utils/fetchNui"; +import { Option, ContextMenuProps } from "../../interfaces"; +import { fetchNui } from "../../utils/fetchNui"; interface DataProps { event?: string; diff --git a/web/src/components/Notifications.tsx b/web/src/features/notifications/NotificationWrapper.tsx similarity index 95% rename from web/src/components/Notifications.tsx rename to web/src/features/notifications/NotificationWrapper.tsx index 022ce93..f34572c 100644 --- a/web/src/components/Notifications.tsx +++ b/web/src/features/notifications/NotificationWrapper.tsx @@ -5,8 +5,8 @@ import { HStack, Text, } from "@chakra-ui/react"; -import { useNuiEvent } from "../hooks/useNuiEvent"; -import { debugData } from "../utils/debugData"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; +import { debugData } from "../../utils/debugData"; import { IconProp } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; diff --git a/web/src/components/CircleProgressbar.tsx b/web/src/features/progress/CircleProgressbar.tsx similarity index 94% rename from web/src/components/CircleProgressbar.tsx rename to web/src/features/progress/CircleProgressbar.tsx index 4a4b6a6..f13140e 100644 --- a/web/src/components/CircleProgressbar.tsx +++ b/web/src/features/progress/CircleProgressbar.tsx @@ -5,9 +5,9 @@ import { Flex, ScaleFade, } from "@chakra-ui/react"; -import { useNuiEvent } from "../hooks/useNuiEvent"; -import { debugData } from "../utils/debugData"; -import { fetchNui } from "../utils/fetchNui"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; +import { debugData } from "../../utils/debugData"; +import { fetchNui } from "../../utils/fetchNui"; interface Props { duration: number; diff --git a/web/src/components/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx similarity index 93% rename from web/src/components/Progressbar.tsx rename to web/src/features/progress/Progressbar.tsx index b41ee47..f9a12af 100644 --- a/web/src/components/Progressbar.tsx +++ b/web/src/features/progress/Progressbar.tsx @@ -6,9 +6,9 @@ import { Box, ScaleFade, } from "@chakra-ui/react"; -import { useNuiEvent } from "../hooks/useNuiEvent"; -import { debugData } from "../utils/debugData"; -import { fetchNui } from "../utils/fetchNui"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; +import { debugData } from "../../utils/debugData"; +import { fetchNui } from "../../utils/fetchNui"; interface Props { label: string; diff --git a/web/src/components/TextUI.tsx b/web/src/features/textui/TextUI.tsx similarity index 93% rename from web/src/components/TextUI.tsx rename to web/src/features/textui/TextUI.tsx index 44954c4..117673f 100644 --- a/web/src/components/TextUI.tsx +++ b/web/src/features/textui/TextUI.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { useNuiEvent } from "../hooks/useNuiEvent"; +import { useNuiEvent } from "../../hooks/useNuiEvent"; import { Box, Flex, ScaleFade } from "@chakra-ui/react"; -import { debugData } from "../utils/debugData"; +import { debugData } from "../../utils/debugData"; import ReactMarkdown from "react-markdown"; interface Props { diff --git a/web/src/index.tsx b/web/src/index.tsx index da2a9e9..4d902bb 100644 --- a/web/src/index.tsx +++ b/web/src/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; -import App from "./components/App"; +import App from "./App"; import { VisibilityProvider } from "./providers/VisibilityProvider"; import { ChakraProvider } from "@chakra-ui/react"; import { theme } from "./theme";