workspace create

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>