refactor: streamline category ID management in CategoryList by replacing getLevel1CategoryId with setLevel1CategoryId and improving state handling
This commit is contained in:
@@ -30,111 +30,74 @@ class CategoryList extends Component {
|
||||
if (response.children && response.children.length > 0) {
|
||||
this.setState({
|
||||
categories: response.children,
|
||||
activeCategoryId: this.getLevel1CategoryId(this.props.activeCategoryId)
|
||||
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Categories are already loaded, set the initial activeCategoryId
|
||||
this.setState({
|
||||
activeCategoryId: this.getLevel1CategoryId(this.props.activeCategoryId)
|
||||
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
console.log("componentDidUpdate", this.props.activeCategoryId);
|
||||
if (prevProps.activeCategoryId !== this.props.activeCategoryId) {
|
||||
//detect path here
|
||||
console.log("activeCategoryId updated", this.props.activeCategoryId);
|
||||
|
||||
// Get the active category ID of level 1 when prop is seoName
|
||||
const level1CategoryId = this.getLevel1CategoryId(this.props.activeCategoryId);
|
||||
this.setLevel1CategoryId(this.props.activeCategoryId);
|
||||
|
||||
this.setState({
|
||||
activeCategoryId: level1CategoryId
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to get level 1 category ID from seoName or numeric ID
|
||||
getLevel1CategoryId = (categoryIdOrSeoName) => {
|
||||
if (!categoryIdOrSeoName) return null;
|
||||
|
||||
// If it's already a numeric ID, check if it's a level 1 category
|
||||
if (typeof categoryIdOrSeoName === 'number') {
|
||||
// Check if this ID is directly under Home (209)
|
||||
const level1Category = this.state.categories.find(cat => cat.id === categoryIdOrSeoName);
|
||||
return level1Category ? categoryIdOrSeoName : this.findLevel1ParentId(categoryIdOrSeoName);
|
||||
}
|
||||
setLevel1CategoryId = (seoName) => {
|
||||
if(seoName) {
|
||||
const categoryTreeCache = window.categoryService.getSync(209);
|
||||
console.log("categoryTreeCache", categoryTreeCache, seoName);
|
||||
|
||||
// If it's a string (seoName), find the category and get its level 1 parent
|
||||
if (typeof categoryIdOrSeoName === 'string') {
|
||||
const categoryTreeCache = window.productCache && window.productCache['categoryTree_209'];
|
||||
if (!categoryTreeCache || !categoryTreeCache.categoryTree) {
|
||||
return null;
|
||||
}
|
||||
// Helper function to recursively search for seoName in category tree
|
||||
const findLevel1CategoryId = (categories, targetSeoName, level1Id = null) => {
|
||||
for (const category of categories) {
|
||||
// If we're at level 1 (direct children of root), set this as potential level1Id
|
||||
const currentLevel1Id = level1Id || category.id;
|
||||
|
||||
const category = this.findCategoryBySeoName(categoryTreeCache.categoryTree, categoryIdOrSeoName);
|
||||
if (!category) return null;
|
||||
// Check if current category matches the seoName
|
||||
if (category.seoName === targetSeoName) {
|
||||
return currentLevel1Id;
|
||||
}
|
||||
|
||||
// If the found category is already level 1 (direct child of Home)
|
||||
if (category.parentId === 209) {
|
||||
return category.id;
|
||||
}
|
||||
|
||||
// Find the level 1 parent of this category
|
||||
return this.findLevel1ParentId(category.id);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Helper method to find category by seoName (similar to Content.js)
|
||||
findCategoryBySeoName = (categoryNode, seoName) => {
|
||||
if (!categoryNode) return null;
|
||||
|
||||
if (categoryNode.seoName === seoName) {
|
||||
return categoryNode;
|
||||
}
|
||||
|
||||
if (categoryNode.children) {
|
||||
for (const child of categoryNode.children) {
|
||||
const found = this.findCategoryBySeoName(child, seoName);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Helper method to find the level 1 parent category ID
|
||||
findLevel1ParentId = (categoryId) => {
|
||||
const categoryTreeCache = window.productCache && window.productCache['categoryTree_209'];
|
||||
if (!categoryTreeCache || !categoryTreeCache.categoryTree) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const findParentPath = (node, targetId, path = []) => {
|
||||
if (node.id === targetId) {
|
||||
return [...path, node.id];
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
const result = findParentPath(child, targetId, [...path, node.id]);
|
||||
if (result) return result;
|
||||
// If category has children, search recursively
|
||||
if (category.children && category.children.length > 0) {
|
||||
const result = findLevel1CategoryId(category.children, targetSeoName, currentLevel1Id);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Search in the children of the root category (209)
|
||||
if (categoryTreeCache && categoryTreeCache.children) {
|
||||
const level1CategoryId = findLevel1CategoryId(categoryTreeCache.children, seoName);
|
||||
console.log("Found level1CategoryId:", level1CategoryId, "for seoName:", seoName);
|
||||
this.setState({
|
||||
activeCategoryId: level1CategoryId
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({ activeCategoryId: null });
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const path = findParentPath(categoryTreeCache.categoryTree, categoryId);
|
||||
if (!path || path.length < 3) return null; // path should be [209, level1Id, ...]
|
||||
|
||||
return path[1]; // Return the level 1 category ID (second in path after Home/209)
|
||||
}else{
|
||||
this.setState({ activeCategoryId: null });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
handleMobileMenuToggle = () => {
|
||||
this.setState(prevState => ({
|
||||
mobileMenuOpen: !prevState.mobileMenuOpen
|
||||
|
||||
Reference in New Issue
Block a user