workspace create

src/pages/taskmanager/workspace/Create.tsx

@@ -1,20 +1,71 @@
+import { FC, useState } from "react";
 import { TickCircle } from "iconsax-react";
+import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
 import Button from "../../../components/Button";
 import Input from "../../../components/Input";
-import Select from "../../../components/Select";
 import Textarea from "../../../components/Textarea";
-import CreateWorkspaceSidebar from "./components/CreateWorkspaceSidebar";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useCreateWorkspace } from "./hooks/useWorkspaceData";
+import { CreateWorkspaceType } from "./types/WorkspaceTypes";
+import CreateWorkspaceSidebar, {
+  SelectedUser,
+} from "./components/CreateWorkspaceSidebar";
 
-const CreateWorkspace = () => {
+const CreateWorkspace: FC = () => {
   const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const createWorkspace = useCreateWorkspace();
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+
+  const handleCreateWorkspace = (values: CreateWorkspaceType) => {
+    createWorkspace.mutate(values, {
+      onSuccess: () => {
+        toast.success(t("success"));
+        navigate(Pages.taskmanager.workspace + "dpage");
+      },
+      onError: (error: ErrorType) => {
+        toast.error(error.response?.data?.error.message[0]);
+      },
+    });
+  };
+
+  const formik = useFormik<Pick<CreateWorkspaceType, "name" | "description">>({
+    initialValues: {
+      name: "",
+      description: "",
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required(t("errors.required")),
+      description: Yup.string(),
+    }),
+    onSubmit: (values) => {
+      handleCreateWorkspace({
+        ...values,
+        color: selectedColor,
+        isActive,
+        userIds: selectedUsers.map((user) => user.id),
+      });
+    },
+  });
 
   return (
     <div className="w-full mt-4">
       <div className="flex w-full justify-between items-center">
         <div>{t("taskmanager.new_workspace")}</div>
         <div>
-          <Button className="px-5" isLoading={false}>
+          <Button
+            className="px-5"
+            isLoading={createWorkspace.isPending}
+            onClick={() => formik.handleSubmit()}
+          >
             <div className="flex gap-2">
               <TickCircle className="size-5" color="#fff" />
               <div>{t("taskmanager.submit_workspace")}</div>
@@ -26,20 +77,42 @@ const CreateWorkspace = () => {
       <div className="flex gap-6">
         <div className="flex-1">
           <div className="flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
-            <div className="text-sm font-bold">اطلاعات</div>
+            <div className="text-sm font-bold">{t("taskmanager.workspace_info")}</div>
 
-            <div className="mt-8 rowTwoInput">
-              <Input label={t("taskmanager.workspacename")} />
-
-              <Select label={t("taskmanager.workspacetype")} items={[]} />
-            </div>
             <div className="mt-8">
-              <Textarea label={t("taskmanager.workspace_description")} />
+              <Input
+                label={t("taskmanager.workspacename")}
+                {...formik.getFieldProps("name")}
+                error_text={
+                  formik.touched.name && formik.errors.name
+                    ? formik.errors.name
+                    : ""
+                }
+              />
+            </div>
+
+            <div className="mt-8">
+              <Textarea
+                label={t("taskmanager.workspace_description")}
+                {...formik.getFieldProps("description")}
+                error_text={
+                  formik.touched.description && formik.errors.description
+                    ? formik.errors.description
+                    : ""
+                }
+              />
             </div>
           </div>
         </div>
 
-        <CreateWorkspaceSidebar />
+        <CreateWorkspaceSidebar
+          isActive={isActive}
+          onIsActiveChange={setIsActive}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
+          selectedUsers={selectedUsers}
+          onSelectedUsersChange={setSelectedUsers}
+        />
       </div>
     </div>
   );

src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx

@@ -7,18 +7,30 @@ import { useGetUsers } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
 import WorkspaceColorPicker from "./WorkspaceColorPicker";
 
-type SelectedUser = {
+export type SelectedUser = {
   id: string;
   name: string;
 };
 
-const CreateWorkspaceSidebar: FC = () => {
+type Props = {
+  isActive: boolean;
+  onIsActiveChange: (value: boolean) => void;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+  selectedUsers: SelectedUser[];
+  onSelectedUsersChange: (users: SelectedUser[]) => void;
+};
+
+const CreateWorkspaceSidebar: FC<Props> = ({
+  isActive,
+  onIsActiveChange,
+  selectedColor,
+  onColorChange,
+  selectedUsers,
+  onSelectedUsersChange,
+}) => {
   const { t } = useTranslation("global");
   const getUsers = useGetUsers("");
-
-  const [isActive, setIsActive] = useState(true);
-  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
-  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
   const [userSelectValue, setUserSelectValue] = useState("");
 
   const userItems =
@@ -41,8 +53,8 @@ const CreateWorkspaceSidebar: FC = () => {
     );
 
     if (user) {
-      setSelectedUsers((prev) => [
-        ...prev,
+      onSelectedUsersChange([
+        ...selectedUsers,
         { id: user.id, name: `${user.firstName} ${user.lastName}` },
       ]);
     }
@@ -51,7 +63,7 @@ const CreateWorkspaceSidebar: FC = () => {
   };
 
   const handleRemoveUser = (id: string) => {
-    setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
+    onSelectedUsersChange(selectedUsers.filter((user) => user.id !== id));
   };
 
   return (
@@ -60,7 +72,7 @@ const CreateWorkspaceSidebar: FC = () => {
         <div>{t("taskmanager.workspace_status")}</div>
         <div className="flex gap-2 text-xs items-center text-description">
           <div>{isActive ? t("slider.active") : t("slider.inactive")}</div>
-          <SwitchComponent active={isActive} onChange={setIsActive} />
+          <SwitchComponent active={isActive} onChange={onIsActiveChange} />
         </div>
       </div>
 
@@ -69,7 +81,7 @@ const CreateWorkspaceSidebar: FC = () => {
         <div className="mt-3">
           <WorkspaceColorPicker
             selectedColor={selectedColor}
-            onChange={setSelectedColor}
+            onChange={onColorChange}
           />
         </div>
       </div>

src/pages/taskmanager/workspace/hooks/useWorkspaceData.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/WorkspaceService";
+import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+
+export const useCreateWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateWorkspaceType) => api.createWorkspace(variables),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workspaces"],
+      });
+    },
+  });
+};

src/pages/taskmanager/workspace/service/WorkspaceService.ts

@@ -0,0 +1,7 @@
+import axios from "../../../../config/axios";
+import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+
+export const createWorkspace = async (params: CreateWorkspaceType) => {
+  const { data } = await axios.post(`/task-manager/workspaces`, params);
+  return data;
+};

src/pages/taskmanager/workspace/types/WorkspaceTypes.ts

@@ -0,0 +1,7 @@
+export type CreateWorkspaceType = {
+  name: string;
+  description: string;
+  color: string;
+  isActive: boolean;
+  userIds: string[];
+};