Groups management (netbirdio#246)

src/index.css

@@ -477,7 +477,9 @@ ul.ant-list-items {
 .route-form.edit-form-wrapper .ant-form-item {
   margin-bottom: 39px;
 }
-
+.delete-button {
+  cursor: auto !important;
+}
 .groupsSelect {
   max-width: 200px;
   width: 100%;
@@ -488,4 +490,4 @@ ul.ant-list-items {
     margin-left: 0;
     margin-top: 15px;
   }
-}
+}

src/store/group/sagas.ts

@@ -74,13 +74,13 @@ export function* setDeleteGroup(action: ReturnType<typeof  actions.setDeleteGrou
 
 export function* deleteGroup(action: ReturnType<typeof actions.deleteGroup.request>): Generator {
   try {
-    yield call(actions.setDeleteGroup,{
+    yield put(actions.setDeleteGroup({
       loading: true,
       success: false,
       failure: false,
       error: null,
       data: null
-    } as DeleteResponse<string | null>)
+    } as DeleteResponse<string | null>))
 
     const effect = yield call(service.deleteGroup, action.payload);
     const response = effect as ApiResponse<any>;
@@ -93,8 +93,8 @@ export function* deleteGroup(action: ReturnType<typeof actions.deleteGroup.reque
       data: response.body
     } as DeleteResponse<string | null>));
 
-    const rules = (yield select(state => state.rule.data)) as Group[]
-    yield put(actions.getGroups.success(rules.filter((p:Group) => p.id !== action.payload.payload)))
+    const groups = (yield select(state => state.group.data)) as Group[]
+    yield put(actions.getGroups.success(groups.filter((p:Group) => p.id !== action.payload.payload)))
   } catch (err) {
     yield put(actions.deleteGroup.failure({
       loading: false,

src/utils/pageSize.tsx

@@ -1,25 +1,25 @@
-import { useState } from "react";
-import { storeFilterState } from "./filterState";
+import {useState} from "react";
+import {storeFilterState} from "./filterState";
 
-export const usePageSizeHelpers = () => {
-  const [pageSize, setPageSize] = useState(10);
+export const usePageSizeHelpers = (defaultSize = 10) => {
+    const [pageSize, setPageSize] = useState(defaultSize);
 
-  const onChangePageSize = (value: string, pageName: string) => {
-    setPageSize(parseInt(value.toString()));
-    storeFilterState(pageName, "pageSize", parseInt(value.toString()));
-  };
+    const onChangePageSize = (value: string, pageName: string) => {
+        setPageSize(parseInt(value.toString()));
+        storeFilterState(pageName, "pageSize", parseInt(value.toString()));
+    };
 
-  const pageSizeOptions = [
-    { label: "10", value: "10" },
-    { label: "25", value: "25" },
-    { label: "50", value: "50" },
-    { label: "100", value: "100" },
-    { label: "1000", value: "1000" },
-  ];
+    const pageSizeOptions = [
+        {label: "10", value: "10"},
+        {label: "25", value: "25"},
+        {label: "50", value: "50"},
+        {label: "100", value: "100"},
+        {label: "1000", value: "1000"},
+    ];
 
-  return {
-    onChangePageSize,
-    pageSize,
-    pageSizeOptions,
-  };
+    return {
+        onChangePageSize,
+        pageSize,
+        pageSizeOptions,
+    };
 };