Skip to content

Commit

Permalink
refactor:関数の移動
Browse files Browse the repository at this point in the history
Split reusable hooks into dedicated modules

Refactored hooks for Department, Employee, and Product into separate modules under the `hooks` folder for better modularity and maintainability. Updated imports in affected components to reflect the new structure. Removed the original consolidated `hooks.ts` file.
  • Loading branch information
k2works committed Dec 27, 2024
1 parent 85c3dcf commit af45d87
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 146 deletions.
2 changes: 1 addition & 1 deletion app/frontend/src/components/master/Department.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {useEffect, useState} from "react";
import {useMessage} from "../application/Message.tsx";
import {useModal} from "../application/hooks.ts";
import {useDepartment, useEmployee, useFetchDepartments, useFetchEmployees} from "./hooks.ts";
import {useDepartment, useEmployee, useFetchDepartments, useFetchEmployees} from "./hooks";
import {showErrorMessage} from "../application/utils.ts";
import {DepartmentIdType, DepartmentType, EmployeeType} from "../../models";
import Modal from "react-modal";
Expand Down
2 changes: 1 addition & 1 deletion app/frontend/src/components/master/Employee.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Modal from "react-modal";
import {showErrorMessage} from "../application/utils.ts";
import {useMessage} from "../application/Message.tsx";
import {useModal} from "../application/hooks.ts";
import {useDepartment, useEmployee, useFetchDepartments, useFetchEmployees} from "./hooks.ts";
import {useDepartment, useEmployee, useFetchDepartments, useFetchEmployees} from "./hooks";
import {EmployeeType} from "../../models";
import {usePageNation} from "../../views/application/PageNation.tsx";
import {SiteLayout} from "../../views/SiteLayout.tsx";
Expand Down
4 changes: 1 addition & 3 deletions app/frontend/src/components/master/ProductCategory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {usePageNation} from "../../views/application/PageNation.tsx";
import LoadingIndicator from "../../views/application/LoadingIndicatior.tsx";
import {ProductCategoryType, ProductType} from "../../models";

import {useFetchProductCategories, useFetchProducts, useProduct, useProductCategory} from "./hooks.ts";
import {useFetchProductCategories, useFetchProducts, useProduct, useProductCategory} from "./hooks";
import Modal from "react-modal";
import {ProductCategoryCollectionView} from "../../views/master/product/ProductCategoryCollection.tsx";
import {ProductCategorySingleView} from "../../views/master/product/ProductCategorySingle.tsx";
Expand Down Expand Up @@ -280,7 +280,6 @@ export const ProductCategory: React.FC = () => {
}

return (
<>
<ProductCategoryCollectionView
error={error}
message={message}
Expand All @@ -289,7 +288,6 @@ export const ProductCategory: React.FC = () => {
collectionItems={{productCategories, handleDeleteProductCategory, handleCheckProductCategory}}
pageNationItems={{pageNation, fetchProductCategories: fetchProductCategories.load}}
/>
</>
)
};

Expand Down
6 changes: 1 addition & 5 deletions app/frontend/src/components/master/ProductItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {useMessage} from "../application/Message.tsx";
import {useModal, useTab} from "../application/hooks.ts";
import {usePageNation} from "../../views/application/PageNation.tsx";
import LoadingIndicator from "../../views/application/LoadingIndicatior.tsx";
import {useFetchBoms, useFetchProducts, useFetchSubstitutes, useProduct} from "./hooks.ts";
import {useFetchBoms, useFetchProducts, useFetchSubstitutes, useProduct} from "./hooks";
import {ProductType} from "../../models";
import {ProductCollectionView} from "../../views/master/product/ProductCollection.tsx";
import {ProductSingleView} from "../../views/master/product/ProductSingle.tsx";
Expand Down Expand Up @@ -156,7 +156,6 @@ export const ProductItem: React.FC = () => {
{bomModal().bomEditModalView()}

{isEditing && (
<>
<Tabs>
<TabList>
<Tab>代替品</Tab>
Expand Down Expand Up @@ -228,7 +227,6 @@ export const ProductItem: React.FC = () => {
/>
</TabPanel>
</Tabs>
</>
)
}
</Modal>
Expand Down Expand Up @@ -423,7 +421,6 @@ export const ProductItem: React.FC = () => {
}

return (
<>
<ProductCollectionView
error={error}
message={message}
Expand All @@ -432,7 +429,6 @@ export const ProductItem: React.FC = () => {
contentItems={{products, handleDeleteProduct, handleCheckProduct}}
pageNationItems={{pageNation, fetchProducts: fetchProducts.load}}
/>
</>
)
};

Expand Down
52 changes: 52 additions & 0 deletions app/frontend/src/components/master/hooks/department.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {useState} from "react";
import {
DepartmentIdType,
DepartmentType,
LowerType,
SlitYnType
} from "../../../models";
import {DepartmentService, DepartmentServiceType} from "../../../services/department.ts";
import {PageNationType} from "../../../views/application/PageNation.tsx";
import {useFetchEntities} from "../../application/hooks.ts";

export const useDepartment = () => {
const initialDepartment = {
departmentId: {deptCode: {value: ""}, departmentStartDate: {value: ""}},
endDate: {value: ""},
departmentName: "",
layer: 0,
path: {value: ""},
lowerType: LowerType.NO,
slitYn: SlitYnType.NO,
employees: [],
checked: false
};

const [departments, setDepartments] = useState<DepartmentType[]>([]);
const [newDepartment, setNewDepartment] = useState<DepartmentType>(initialDepartment);
const [searchDepartmentId, setSearchDepartmentId] = useState<DepartmentIdType>({
deptCode: {value: ""},
departmentStartDate: {value: ""}
});
const departmentService = DepartmentService();

return {
initialDepartment,
departments,
newDepartment,
setNewDepartment,
searchDepartmentId,
setSearchDepartmentId,
setDepartments,
departmentService,
}
}

export const useFetchDepartments = (
setLoading: (loading: boolean) => void,
setList: (list: DepartmentType[]) => void,
setPageNation: (pageNation: PageNationType) => void,
setError: (error: string) => void,
showErrorMessage: (message: string, callback: (error: string) => void) => void,
service: DepartmentServiceType
) => useFetchEntities(setLoading, setList, setPageNation, setError, showErrorMessage, service, "部門情報の取得に失敗しました:");
89 changes: 89 additions & 0 deletions app/frontend/src/components/master/hooks/employee.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import {useState} from "react";
import {
EmployeeType,
LowerType,
SlitYnType
} from "../../../models";
import {EmployeeService, EmployeeServiceType} from "../../../services/employee.ts";
import {PageNationType} from "../../../views/application/PageNation.tsx";
import {useFetchEntities} from "../../application/hooks.ts";

export const useEmployee = () => {
const initialEmployee: EmployeeType = {
empCode: {value: ""},
empName: {
firstName: "",
lastName: "",
firstNameKana: "",
lastNameKana: ""
},
loginPassword: "",
tel: {
value: "",
areaCode: "",
localExchange: "",
subscriberNumber: ""
},
fax: {
value: "",
areaCode: "",
localExchange: "",
subscriberNumber: ""
},
occuCode: {
value: ""
},
approvalCode: "",
department: {
departmentId: {deptCode: {value: ""}, departmentStartDate: {value: ""}},
endDate: {value: ""},
departmentName: "",
layer: 0,
path: {value: ""},
lowerType: LowerType.NO,
slitYn: SlitYnType.NO,
employees: [],
checked: false
},
user: {
userId: {value: ""},
name: {
firstName: "",
lastName: ""
},
password: {
value: ""
},
roleName: ""
},
addFlag: false,
deleteFlag: false,
checked: false
};

const [employees, setEmployees] = useState<EmployeeType[]>([]);
const [newEmployee, setNewEmployee] = useState<EmployeeType>(initialEmployee);
const [searchEmployeeCode, setSearchEmployeeCode] = useState<string>("");

const employeeService = EmployeeService();

return {
initialEmployee,
employees,
newEmployee,
setNewEmployee,
setEmployees,
searchEmployeeCode,
setSearchEmployeeCode,
employeeService,
};
}

export const useFetchEmployees = (
setLoading: (loading: boolean) => void,
setList: (list: EmployeeType[]) => void,
setPageNation: (pageNation: PageNationType) => void,
setError: (error: string) => void,
showErrorMessage: (message: string, callback: (error: string) => void) => void,
service: EmployeeServiceType
) => useFetchEntities(setLoading, setList, setPageNation, setError, showErrorMessage, service, "社員情報の取得に失敗しました:");
3 changes: 3 additions & 0 deletions app/frontend/src/components/master/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './department';
export * from './employee';
export * from './product';
Original file line number Diff line number Diff line change
@@ -1,142 +1,12 @@
import {useState} from "react";
import {
DepartmentIdType,
DepartmentType,
EmployeeType,
LowerType,
ProductCategoryType,
ProductType,
SlitYnType
} from "../../models";
import {DepartmentService, DepartmentServiceType} from "../../services/department.ts";
import {EmployeeService, EmployeeServiceType} from "../../services/employee.ts";
import {PageNationType} from "../../views/application/PageNation.tsx";
import {ProductCategoryService, ProductCategoryServiceType} from "../../services/product_category.ts";
import {ProductService, ProductServiceType} from "../../services/product.ts";
import {useFetchEntities} from "../application/hooks.ts";

export const useDepartment = () => {
const initialDepartment = {
departmentId: {deptCode: {value: ""}, departmentStartDate: {value: ""}},
endDate: {value: ""},
departmentName: "",
layer: 0,
path: {value: ""},
lowerType: LowerType.NO,
slitYn: SlitYnType.NO,
employees: [],
checked: false
};

const [departments, setDepartments] = useState<DepartmentType[]>([]);
const [newDepartment, setNewDepartment] = useState<DepartmentType>(initialDepartment);
const [searchDepartmentId, setSearchDepartmentId] = useState<DepartmentIdType>({
deptCode: {value: ""},
departmentStartDate: {value: ""}
});
const departmentService = DepartmentService();

return {
initialDepartment,
departments,
newDepartment,
setNewDepartment,
searchDepartmentId,
setSearchDepartmentId,
setDepartments,
departmentService,
}
}

export const useFetchDepartments = (
setLoading: (loading: boolean) => void,
setList: (list: DepartmentType[]) => void,
setPageNation: (pageNation: PageNationType) => void,
setError: (error: string) => void,
showErrorMessage: (message: string, callback: (error: string) => void) => void,
service: DepartmentServiceType
) => useFetchEntities(setLoading, setList, setPageNation, setError, showErrorMessage, service, "部門情報の取得に失敗しました:");


export const useEmployee = () => {
const initialEmployee: EmployeeType = {
empCode: {value: ""},
empName: {
firstName: "",
lastName: "",
firstNameKana: "",
lastNameKana: ""
},
loginPassword: "",
tel: {
value: "",
areaCode: "",
localExchange: "",
subscriberNumber: ""
},
fax: {
value: "",
areaCode: "",
localExchange: "",
subscriberNumber: ""
},
occuCode: {
value: ""
},
approvalCode: "",
department: {
departmentId: {deptCode: {value: ""}, departmentStartDate: {value: ""}},
endDate: {value: ""},
departmentName: "",
layer: 0,
path: {value: ""},
lowerType: LowerType.NO,
slitYn: SlitYnType.NO,
employees: [],
checked: false
},
user: {
userId: {value: ""},
name: {
firstName: "",
lastName: ""
},
password: {
value: ""
},
roleName: ""
},
addFlag: false,
deleteFlag: false,
checked: false
};

const [employees, setEmployees] = useState<EmployeeType[]>([]);
const [newEmployee, setNewEmployee] = useState<EmployeeType>(initialEmployee);
const [searchEmployeeCode, setSearchEmployeeCode] = useState<string>("");

const employeeService = EmployeeService();

return {
initialEmployee,
employees,
newEmployee,
setNewEmployee,
setEmployees,
searchEmployeeCode,
setSearchEmployeeCode,
employeeService,
};
}

export const useFetchEmployees = (
setLoading: (loading: boolean) => void,
setList: (list: EmployeeType[]) => void,
setPageNation: (pageNation: PageNationType) => void,
setError: (error: string) => void,
showErrorMessage: (message: string, callback: (error: string) => void) => void,
service: EmployeeServiceType
) => useFetchEntities(setLoading, setList, setPageNation, setError, showErrorMessage, service, "社員情報の取得に失敗しました:");
ProductType
} from "../../../models";
import {PageNationType} from "../../../views/application/PageNation.tsx";
import {ProductCategoryService, ProductCategoryServiceType} from "../../../services/product_category.ts";
import {ProductService, ProductServiceType} from "../../../services/product.ts";
import {useFetchEntities} from "../../application/hooks.ts";

export const useProductCategory = () => {
const initialProductCategory: ProductCategoryType = {
Expand Down

0 comments on commit af45d87

Please sign in to comment.