FEATURE | Secret mod controller

src/api/secret-mod/requests.ts

@@ -18,8 +18,18 @@ const getUsers = (params: Req.IGetUsersListParams) => {
   }>("admin/secret-mod-users", { params });
 };
 
+const getStatus = () => {
+  return http.get<boolean>("admin/secret-mod/is-active");
+};
+
+const changeStatus = (value: boolean) => {
+  return http.post("admin/secret-mod/turn", { value });
+};
+
 export const secretModApi = {
   hideUser,
   revealUser,
   getUsers,
+  getStatus,
+  changeStatus,
 };

src/containers/SecretMod/components/index.ts

@@ -1,3 +1,3 @@
 export * from "./add-users-modal.component";
-export * from "./header.component";
+export * from "./users-table-header.component";
 export * from "./users-table.component";

src/containers/SecretMod/components/users-table-header.component.tsx

@@ -3,7 +3,7 @@ import { useAddUsersModalState, useSearchState } from "../states";
 import { SearchInput } from "@/shared";
 import { Button } from "reactstrap";
 
-export const Header = () => {
+export const UsersTableHeader = () => {
   const addUsers = useAddUsersModalState((s) => s.open);
   const { value, onChange } = useSearchState();
 
@@ -17,7 +17,7 @@ export const Header = () => {
       }}
     >
       <div>
-        <h3>Приховані користувачі</h3>
+        <h4>Приховані користувачі</h4>
       </div>
       <div
         style={{

src/containers/SecretMod/hooks/index.ts

@@ -1 +1,2 @@
+export * from "./use-secret-mod.hook";
 export * from "./use-secret-users-edit.hook";

src/containers/SecretMod/hooks/use-secret-mod.hook.ts

@@ -0,0 +1,39 @@
+import { secretModApi } from "@/api/secret-mod/requests";
+import { useEffect, useState } from "react";
+
+export const useSecretMod = () => {
+  const [isLoading, setLoading] = useState(false);
+  const [isActive, setActive] = useState(false);
+
+  const load = async () => {
+    try {
+      setLoading(true);
+
+      const { data } = await secretModApi.getStatus();
+      setActive(data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const turn = async () => {
+    try {
+      setLoading(true);
+
+      await secretModApi.changeStatus(!isActive);
+    } catch (e) {
+    } finally {
+      load();
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return {
+    isActive,
+    isLoading,
+    turn,
+  };
+};

src/containers/SecretMod/secret-mod.page.tsx

@@ -1,17 +1,12 @@
-import { Container, CardBody, Row } from "reactstrap";
 import React from "react";
-import { AddUsersModal, Header, SecretUsersTable } from "./components";
+import { Container } from "reactstrap";
+import { SecretModControllerWidget, SecretUsersWidget } from "./widgets";
 
 export const SecretModPage = () => {
   return (
     <Container className="factory">
-      <CardBody>
-        <Header />
-
-        <SecretUsersTable />
-      </CardBody>
-
-      <AddUsersModal />
+      <SecretModControllerWidget />
+      <SecretUsersWidget />
     </Container>
   );
 };

src/containers/SecretMod/widgets/index.ts

@@ -0,0 +1,2 @@
+export * from "./secret-mod-controller";
+export * from "./secret-users.widget";

src/containers/SecretMod/widgets/secret-mod-controller/index.ts

@@ -0,0 +1 @@
+export * from "./secret-mod-controller.widget";

src/containers/SecretMod/widgets/secret-mod-controller/secret-mod-controller.style.scss

@@ -0,0 +1,20 @@
+.secret-mod-controller {
+
+
+    .custom-row {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    h3 { 
+        margin-right: 20px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0;
+    }
+}

src/containers/SecretMod/widgets/secret-mod-controller/secret-mod-controller.widget.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { CardBody, Button } from "reactstrap";
+import "./secret-mod-controller.style.scss";
+import { Tag } from "antd";
+import { useSecretMod } from "../../hooks";
+import { Loader } from "@/shared";
+
+export const SecretModControllerWidget = () => {
+  const { isActive, isLoading, turn } = useSecretMod();
+  return (
+    <div className="secret-mod-controller" style={{ marginBottom: 40 }}>
+      <CardBody>
+        <div className="header">
+          <div className="custom-row">
+            <h3>Прихований режим</h3>
+            {isLoading ? (
+              <Tag color="processing">Завантаження</Tag>
+            ) : (
+              <Tag color={isActive ? "magenta" : "green"}>
+                {isActive ? "Активний" : "Не активний"}
+              </Tag>
+            )}
+          </div>
+
+          <Button color="primary" size="sm" onClick={turn}>
+            {isActive ? "Вимкнути" : "Увімкнути"}
+          </Button>
+        </div>
+      </CardBody>
+    </div>
+  );
+};

src/containers/SecretMod/widgets/secret-users.widget.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CardBody } from "reactstrap";
+import {
+  AddUsersModal,
+  UsersTableHeader,
+  SecretUsersTable,
+} from "../components";
+
+export const SecretUsersWidget = () => {
+  return (
+    <div>
+      <CardBody>
+        <UsersTableHeader />
+
+        <SecretUsersTable />
+      </CardBody>
+
+      <AddUsersModal />
+    </div>
+  );
+};