Skip to content

Commit 76344fa

Browse files
agch-devagch-dev
committed
Refactor ContextSection to streamline subsection building
- Introduced helper functions for building subsections (page, library, browser, and other) to improve code organization and readability. - Replaced previous useMemo hooks with direct function calls for subsection creation, enhancing clarity and reducing complexity. - Ensured that subsections are built based on the current context, maintaining functionality while simplifying the component structure.
1 parent f41187d commit 76344fa

1 file changed

Lines changed: 73 additions & 80 deletions

File tree

‎src/pages/devtools/components/detail/sections/ContextSection.tsx‎

Lines changed: 73 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -39,99 +39,92 @@ function createSubsection(
3939
return { key, title, icon, entries };
4040
}
4141

42+
// Helper functions to build specific subsections
43+
function buildPageSubsection(page: unknown): SubsectionDefinition | null {
44+
if (!isValidObjectSection(page)) return null;
45+
return createSubsection(
46+
'page',
47+
'Page',
48+
<HugeiconsIcon icon={BrowserIcon} size={12} />,
49+
Object.entries(page).map(([key, value]) => ({ key, value }))
50+
);
51+
}
52+
53+
function buildLibrarySubsection(library: unknown): SubsectionDefinition | null {
54+
if (!isValidObjectSection(library)) return null;
55+
return createSubsection(
56+
'library',
57+
'Library',
58+
<HugeiconsIcon icon={Bookmark01Icon} size={12} />,
59+
Object.entries(library).map(([key, value]) => ({ key, value }))
60+
);
61+
}
62+
63+
function buildBrowserSubsection(
64+
userAgent: unknown,
65+
userAgentData: unknown
66+
): SubsectionDefinition | null {
67+
if (!userAgent && !userAgentData) return null;
68+
const uaData: Record<string, unknown> = {};
69+
if (userAgent) uaData.userAgent = userAgent;
70+
if (userAgentData) uaData.userAgentData = userAgentData;
71+
return createSubsection(
72+
'browser',
73+
'Browser',
74+
<HugeiconsIcon icon={Globe02Icon} size={12} />,
75+
Object.entries(uaData).map(([key, value]) => ({ key, value }))
76+
);
77+
}
78+
79+
function buildOtherSubsection(context: unknown): SubsectionDefinition | null {
80+
const otherContext: Record<string, unknown> = {};
81+
const knownKeys = ['page', 'library', 'userAgent', 'userAgentData'];
82+
83+
if (context && typeof context === 'object' && !Array.isArray(context)) {
84+
for (const [key, value] of Object.entries(context)) {
85+
if (!knownKeys.includes(key) && value !== undefined && value !== null) {
86+
otherContext[key] = value;
87+
}
88+
}
89+
}
90+
91+
if (Object.keys(otherContext).length === 0) return null;
92+
return createSubsection(
93+
'other',
94+
'Other',
95+
<HugeiconsIcon icon={Settings01Icon} size={12} />,
96+
Object.entries(otherContext).map(([key, value]) => ({ key, value }))
97+
);
98+
}
99+
42100
export function ContextSection({
43101
event,
44102
searchQuery = '',
45103
}: Readonly<ContextSectionProps>) {
46104
const context = useMemo(() => event.context || {}, [event.context]);
47105
const sectionDefaults = useConfigStore((state) => state.sectionDefaults);
48106

49-
// Helper to build page subsection
50-
const buildPageSubsection = useMemo(() => {
51-
if (context?.page && isValidObjectSection(context.page)) {
52-
return createSubsection(
53-
'page',
54-
'Page',
55-
<HugeiconsIcon icon={BrowserIcon} size={12} />,
56-
Object.entries(context.page).map(([key, value]) => ({ key, value }))
57-
);
58-
}
59-
return null;
60-
}, [context?.page]);
61-
62-
// Helper to build library subsection
63-
const buildLibrarySubsection = useMemo(() => {
64-
if (context?.library && isValidObjectSection(context.library)) {
65-
return createSubsection(
66-
'library',
67-
'Library',
68-
<HugeiconsIcon icon={Bookmark01Icon} size={12} />,
69-
Object.entries(context.library).map(([key, value]) => ({
70-
key,
71-
value,
72-
}))
73-
);
74-
}
75-
return null;
76-
}, [context?.library]);
77-
78-
// Helper to build other context subsection
79-
const buildOtherSubsection = useMemo(() => {
80-
const otherContext: Record<string, unknown> = {};
81-
const knownKeys = ['page', 'library', 'userAgent', 'userAgentData'];
82-
83-
if (context && typeof context === 'object' && !Array.isArray(context)) {
84-
for (const [key, value] of Object.entries(context)) {
85-
if (!knownKeys.includes(key) && value !== undefined && value !== null) {
86-
otherContext[key] = value;
87-
}
88-
}
89-
}
90-
91-
if (Object.keys(otherContext).length > 0) {
92-
return createSubsection(
93-
'other',
94-
'Other',
95-
<HugeiconsIcon icon={Settings01Icon} size={12} />,
96-
Object.entries(otherContext).map(([key, value]) => ({ key, value }))
97-
);
98-
}
99-
return null;
100-
}, [context]);
101-
102-
// Helper to build browser subsection
103-
const buildBrowserSubsection = useMemo(() => {
104-
if (context?.userAgent || context?.userAgentData) {
105-
const uaData: Record<string, unknown> = {};
106-
if (context.userAgent) uaData.userAgent = context.userAgent;
107-
if (context.userAgentData) uaData.userAgentData = context.userAgentData;
108-
109-
return createSubsection(
110-
'browser',
111-
'Browser',
112-
<HugeiconsIcon icon={Globe02Icon} size={12} />,
113-
Object.entries(uaData).map(([key, value]) => ({ key, value }))
114-
);
115-
}
116-
return null;
117-
}, [context?.userAgent, context?.userAgentData]);
118-
119107
// Organize context into subsections
120108
const subsections = useMemo<SubsectionDefinition[]>(() => {
121109
const sections: SubsectionDefinition[] = [];
122110

123-
if (buildPageSubsection) sections.push(buildPageSubsection);
124-
if (buildLibrarySubsection) sections.push(buildLibrarySubsection);
125-
if (buildOtherSubsection) sections.push(buildOtherSubsection);
126-
if (buildBrowserSubsection) sections.push(buildBrowserSubsection);
111+
const pageSubsection = buildPageSubsection(context?.page);
112+
if (pageSubsection) sections.push(pageSubsection);
113+
114+
const librarySubsection = buildLibrarySubsection(context?.library);
115+
if (librarySubsection) sections.push(librarySubsection);
116+
117+
const browserSubsection = buildBrowserSubsection(
118+
context?.userAgent,
119+
context?.userAgentData
120+
);
121+
if (browserSubsection) sections.push(browserSubsection);
122+
123+
const otherSubsection = buildOtherSubsection(context);
124+
if (otherSubsection) sections.push(otherSubsection);
127125

128126
return sections;
129-
}, [
130-
buildPageSubsection,
131-
buildLibrarySubsection,
132-
buildOtherSubsection,
133-
buildBrowserSubsection,
134-
]);
127+
}, [context]);
135128

136129
// Get default expanded subsections from config (map prefixed keys to unprefixed)
137130
const defaultExpandedSubsections = useMemo(() => {

0 commit comments

Comments
 (0)