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"}>
+            {views.map(view => (
-                <IconLayoutDashboard />
+                <ViewSelectButton
-            </ViewSelectButton>
+                    key={view.value}
-            <ViewSelectButton viewName={"table"}>
+                    selected={value === view.value}
-                <IconMenu2 />
+                    onSelect={() => onChange(view.value)}>
-            </ViewSelectButton>
+                    {view.icon}
-            <ViewSelectButton viewName={"schedule"}>
-                <IconCalendarWeekFilled />
                 </ViewSelectButton>
+            ))}
         </Group>
     );
 };

src/app/deals/components/shared/PageBody/PageBody.tsx

@@ -1,36 +1,22 @@
 "use client";
 
-import { Space } from "@mantine/core";
+import { useState } from "react";
-import TopToolPanel from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
+import TopToolPanel, {
-import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
+    View,
-import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
+} from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
+import {
+    BoardView,
+    ScheduleView,
+    TableView,
+} from "@/app/deals/components/shared/views";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { useViewContext } from "@/app/deals/contexts/ViewContext";
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
-import DealsTable from "../../desktop/DealsTable/DealsTable";
-
-const BoardView = () => (
-    <PageBlock>
-        <MainBlockHeader />
-        <Space h="md" />
-        <Funnel />
-    </PageBlock>
-);
-
-const TableView = () => (
-    <PageBlock>
-        <DealsTable />
-    </PageBlock>
-);
-
-const ScheduleView = () => <PageBlock>-</PageBlock>;
 
 const PageBody = () => {
     const { selectedBoard } = useBoardsContext();
     const { selectedProject } = useProjectsContext();
-    const { view } = useViewContext();
+    const [view, setView] = useState<View>("board");
 
     const getViewContent = () => {
         switch (view) {
@@ -52,7 +38,10 @@ const PageBody = () => {
 
     return (
         <DealsContextProvider {...getContextProps()}>
-            <TopToolPanel />
+            <TopToolPanel
+                view={view}
+                setView={setView}
+            />
             {getViewContent()}
         </DealsContextProvider>
     );

src/app/deals/components/shared/views/BoardView.tsx

@@ -0,0 +1,12 @@
+import { Space } from "@mantine/core";
+import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
+import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+
+export const BoardView = () => (
+    <PageBlock>
+        <MainBlockHeader />
+        <Space h="md" />
+        <Funnel />
+    </PageBlock>
+);

src/app/deals/components/shared/views/ScheduleView.tsx

@@ -0,0 +1,5 @@
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+
+export const ScheduleView = () => {
+    return <PageBlock>-</PageBlock>;
+};

src/app/deals/components/shared/views/TableView.tsx

@@ -0,0 +1,8 @@
+import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+
+export const TableView = () => (
+    <PageBlock>
+        <DealsTable />
+    </PageBlock>
+);

src/app/deals/components/shared/views/index.ts

@@ -0,0 +1,3 @@
+export { BoardView } from "./BoardView";
+export { TableView } from "./TableView";
+export { ScheduleView } from "./ScheduleView";

src/app/deals/contexts/ViewContext.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import makeContext from "@/lib/contextFactory/contextFactory";
-
-export type View = "board" | "table" | "schedule";
-
-type ViewContextState = {
-    view: View;
-    setView: (view: View) => void;
-};
-
-const useViewContextState = (): ViewContextState => {
-    const [view, setView] = useState<View>("board");
-
-    return {
-        view,
-        setView,
-    };
-};
-
-export const [ViewContextProvider, useViewContext] =
-    makeContext<ViewContextState>(useViewContextState, "View");

src/app/deals/page.tsx

@@ -9,7 +9,6 @@ import PageBody from "@/app/deals/components/shared/PageBody/PageBody";
 import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
 import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
 import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
-import { ViewContextProvider } from "@/app/deals/contexts/ViewContext";
 import PageContainer from "@/components/layout/PageContainer/PageContainer";
 import {
     getBoardsOptions,
@@ -38,8 +37,7 @@ export default async function DealsPage() {
         [HydrationBoundary, { state: dehydrate(queryClient) }],
         [ProjectsContextProvider],
         [BoardsContextProvider],
-        [StatusesContextProvider],
+        [StatusesContextProvider]
-        [ViewContextProvider]
     );
 
     return (