refactor: removed unnecessary view context

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { FC } from "react";
 import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
@@ -7,15 +8,20 @@ import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/Tool
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { useViewContext } from "@/app/deals/contexts/ViewContext";
 import DealsTableFiltersModal from "@/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
-const TopToolPanel = () => {
+export type View = "board" | "table" | "schedule";
+
+type Props = {
+    view: View;
+    setView: (view: View) => void;
+};
+
+const TopToolPanel: FC<Props> = ({ view, setView }) => {
     const { dealsFiltersForm, isChangedFilters } = useDealsContext();
-    const { view } = useViewContext();
     const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
         useProjectsContext();
     const { openDrawer } = useDrawersContext();
@@ -45,7 +51,10 @@ const TopToolPanel = () => {
 
     return (
         <Group justify={"space-between"}>
-            <ViewSelector />
+            <ViewSelector
+                value={view}
+                onChange={setView}
+            />
             <Flex
                 wrap={"nowrap"}
                 align={"center"}

src/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.tsx

@@ -2,27 +2,26 @@
 
 import { FC, PropsWithChildren } from "react";
 import { Button } from "@mantine/core";
-import { useViewContext, View } from "@/app/deals/contexts/ViewContext";
 import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import style from "./ViewSelectButton.module.css";
 
 type Props = {
-    viewName: View;
+    selected: boolean;
+    onSelect: () => void;
 };
 
 const ViewSelectButton: FC<PropsWithChildren<Props>> = ({
-    viewName,
+    selected,
+    onSelect,
     children,
 }) => {
-    const { view, setView } = useViewContext();
-
     return (
         <SmallPageBlock
-            active={view === viewName}
+            active={selected}
             style={{ borderRadius: "var(--mantine-radius-xl)" }}>
             <Button
                 unstyled
-                onClick={() => setView(viewName)}
+                onClick={onSelect}
                 radius="xl"
                 className={style.container}>
                 {children}

src/app/deals/components/desktop/ViewSelector/ViewSelector.tsx

@@ -1,23 +1,44 @@
+import { FC } from "react";
 import {
     IconCalendarWeekFilled,
     IconLayoutDashboard,
     IconMenu2,
 } from "@tabler/icons-react";
 import { Group } from "@mantine/core";
+import { View } from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
 import ViewSelectButton from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton";
 
-const ViewSelector = () => {
+type Props = {
+    value: View;
+    onChange: (view: View) => void;
+};
+
+const ViewSelector: FC<Props> = ({ value, onChange }) => {
+    const views = [
+        {
+            value: "board" as View,
+            icon: <IconLayoutDashboard />,
+        },
+        {
+            value: "table" as View,
+            icon: <IconMenu2 />,
+        },
+        {
+            value: "schedule" as View,
+            icon: <IconCalendarWeekFilled />,
+        },
+    ];
+
     return (
         <Group>
-            <ViewSelectButton viewName={"board"}>
-                <IconLayoutDashboard />
-            </ViewSelectButton>
-            <ViewSelectButton viewName={"table"}>
-                <IconMenu2 />
-            </ViewSelectButton>
-            <ViewSelectButton viewName={"schedule"}>
-                <IconCalendarWeekFilled />
-            </ViewSelectButton>
+            {views.map(view => (
+                <ViewSelectButton
+                    key={view.value}
+                    selected={value === view.value}
+                    onSelect={() => onChange(view.value)}>
+                    {view.icon}
+                </ViewSelectButton>
+            ))}
         </Group>
     );
 };