diff --git a/package.json b/package.json index 38bd595..c7bdac0 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "libphonenumber-js": "^1.12.10", "next": "15.3.3", "react": "19.1.0", - "react-device-detect": "^2.2.3", "react-dom": "19.1.0", "react-imask": "^7.6.1", "react-redux": "^9.2.0", diff --git a/src/app/deals/components/Board/BoardMenu.tsx b/src/app/deals/components/Board/BoardMenu.tsx index c4ad362..c04ac42 100644 --- a/src/app/deals/components/Board/BoardMenu.tsx +++ b/src/app/deals/components/Board/BoardMenu.tsx @@ -1,8 +1,8 @@ import React, { FC } from "react"; import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react"; -import { isMobile } from "react-device-detect"; import { Box, Group, Menu, Text } from "@mantine/core"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; +import useIsMobile from "@/hooks/useIsMobile"; import { BoardSchema } from "@/lib/client"; type Props = { @@ -12,8 +12,14 @@ type Props = { menuIconSize?: number; }; -const BoardMenu: FC = ({ board, startEditing, isHovered = true, menuIconSize = 16 }) => { +const BoardMenu: FC = ({ + board, + startEditing, + isHovered = true, + menuIconSize = 16, +}) => { const { selectedBoard, onDeleteBoard } = useBoardsContext(); + const isMobile = useIsMobile(); return ( diff --git a/src/app/deals/components/Boards/Boards.tsx b/src/app/deals/components/Boards/Boards.tsx index 2aba06a..0721357 100644 --- a/src/app/deals/components/Boards/Boards.tsx +++ b/src/app/deals/components/Boards/Boards.tsx @@ -6,11 +6,12 @@ import Board from "@/app/deals/components/Board/Board"; import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import SortableDnd from "@/components/dnd/SortableDnd"; +import useIsMobile from "@/hooks/useIsMobile"; import { BoardSchema } from "@/lib/client"; -import { isMobile } from "react-device-detect"; const Boards = () => { const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext(); + const isMobile = useIsMobile(); const renderBoard = (board: BoardSchema) => { return ; diff --git a/src/app/deals/components/Funnel/Funnel.tsx b/src/app/deals/components/Funnel/Funnel.tsx index 6a2303a..8995320 100644 --- a/src/app/deals/components/Funnel/Funnel.tsx +++ b/src/app/deals/components/Funnel/Funnel.tsx @@ -1,7 +1,6 @@ "use client"; import React, { FC, ReactNode } from "react"; -import { isMobile } from "react-device-detect"; import { Group, ScrollArea } from "@mantine/core"; import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton"; import DealCard from "@/app/deals/components/DealCard/DealCard"; @@ -10,11 +9,13 @@ import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/Stat import { useDealsContext } from "@/app/deals/contexts/DealsContext"; import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd"; import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd"; +import useIsMobile from "@/hooks/useIsMobile"; import { DealSchema, StatusSchema } from "@/lib/client"; import { sortByLexorank } from "@/utils/lexorank"; const Funnel: FC = () => { const { deals } = useDealsContext(); + const isMobile = useIsMobile(); const { sortedStatuses, diff --git a/src/app/deals/components/Header/Header.tsx b/src/app/deals/components/Header/Header.tsx index d365cb6..7253f5d 100644 --- a/src/app/deals/components/Header/Header.tsx +++ b/src/app/deals/components/Header/Header.tsx @@ -1,17 +1,18 @@ "use client"; import { IconChevronLeft, IconSettings } from "@tabler/icons-react"; -import { isMobile } from "react-device-detect"; import { Box, Group, Text } from "@mantine/core"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect"; import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle"; +import useIsMobile from "@/hooks/useIsMobile"; const Header = () => { const { projects, setSelectedProject, selectedProject } = useProjectsContext(); const { setIsEditorDrawerOpened } = useBoardsContext(); + const isMobile = useIsMobile(); const getDesktopHeader = () => { return ( diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index 40f47f5..272a6bd 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -12,7 +12,6 @@ import { horizontalListSortingStrategy, SortableContext, } from "@dnd-kit/sortable"; -import { isMobile } from "react-device-detect"; import Slider from "react-slick"; import { Group } from "@mantine/core"; import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton"; @@ -20,6 +19,7 @@ import useDndSensors from "@/app/deals/hooks/useSensors"; import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn"; import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay"; import { BaseDraggable } from "@/components/dnd/types/types"; +import useIsMobile from "@/hooks/useIsMobile"; import SortableItem from "../SortableItem"; type Props = { @@ -62,6 +62,7 @@ const FunnelDnd = < disabledColumns = false, }: Props) => { const sensors = useDndSensors(); + const isMobile = useIsMobile(); const settings = { dots: true, diff --git a/src/components/ui/InPlaceInput/InPlaceInput.tsx b/src/components/ui/InPlaceInput/InPlaceInput.tsx index be61112..d3abcf6 100644 --- a/src/components/ui/InPlaceInput/InPlaceInput.tsx +++ b/src/components/ui/InPlaceInput/InPlaceInput.tsx @@ -1,8 +1,8 @@ import React, { FC, ReactNode, useEffect, useRef, useState } from "react"; import { TextInput } from "@mantine/core"; import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types"; -import { isMobile } from "react-device-detect"; import { modals } from "@mantine/modals"; +import useIsMobile from "@/hooks/useIsMobile"; type Props = { defaultValue?: string; @@ -24,6 +24,7 @@ const InPlaceInput: FC = ({ const [isWriting, setIsWriting] = useState(false); const [value, setValue] = useState(defaultValue); const inputRef = useRef(null); + const isMobile = useIsMobile(); useEffect(() => { if (isWriting && inputRef.current) { diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 0000000..68fa0b5 --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,8 @@ +import { em } from "@mantine/core"; +import { useMediaQuery } from "@mantine/hooks"; + +const useIsMobile = () => { + return useMediaQuery(`(max-width: ${em(750)})`); +}; + +export default useIsMobile; diff --git a/yarn.lock b/yarn.lock index 989b56b..5771c8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6139,7 +6139,6 @@ __metadata: postcss-simple-vars: "npm:^7.0.1" prettier: "npm:^3.5.3" react: "npm:19.1.0" - react-device-detect: "npm:^2.2.3" react-dom: "npm:19.1.0" react-imask: "npm:^7.6.1" react-redux: "npm:^9.2.0" @@ -11591,18 +11590,6 @@ __metadata: languageName: node linkType: hard -"react-device-detect@npm:^2.2.3": - version: 2.2.3 - resolution: "react-device-detect@npm:2.2.3" - dependencies: - ua-parser-js: "npm:^1.0.33" - peerDependencies: - react: ">= 0.14.0" - react-dom: ">= 0.14.0" - checksum: 10c0/396bbeeab0cb21da084c67434d204c9cf502fad6c683903313084d3f6487950a36a34f9bf67ccf5c1772a1bb5b79a2a4403fcfe6b51d93877db4c2d9f3a3a925 - languageName: node - linkType: hard - "react-docgen-typescript@npm:^2.2.2": version: 2.4.0 resolution: "react-docgen-typescript@npm:2.4.0" @@ -13751,15 +13738,6 @@ __metadata: languageName: node linkType: hard -"ua-parser-js@npm:^1.0.33": - version: 1.0.40 - resolution: "ua-parser-js@npm:1.0.40" - bin: - ua-parser-js: script/cli.js - checksum: 10c0/2b6ac642c74323957dae142c31f72287f2420c12dced9603d989b96c132b80232779c429b296d7de4012ef8b64e0d8fadc53c639ef06633ce13d785a78b5be6c - languageName: node - linkType: hard - "ufo@npm:^1.5.4": version: 1.6.1 resolution: "ufo@npm:1.6.1"