chore: sitemap builder 리펙토링

Author: MU-Software

apps/pyconkr/src/App.tsx

@@ -25,7 +25,10 @@ export const App: React.FC = () => {
       const currentSiteMapDepth: (BackendAPISchemas.NestedSiteMapSchema | undefined)[] = [siteMapNode];
 
       for (const routeCode of currentRouteCodes.splice(1)) {
-        currentSiteMapDepth.push(currentSiteMapDepth.at(-1)?.children[routeCode]);
+        const childrenMap = currentSiteMapDepth
+          .at(-1)
+          ?.children?.reduce((acc, child) => ({ ...acc, [child.route_code]: child }), {} as Record<string, BackendAPISchemas.NestedSiteMapSchema>);
+        currentSiteMapDepth.push(childrenMap?.[routeCode]);
         if (R.isNullish(currentSiteMapDepth.at(-1))) {
           console.warn(`Route not found in site map: ${routeCode}`);
           break;

packages/common/src/schemas/backendAPI.ts

@@ -31,7 +31,7 @@ namespace BackendAPISchemas {
     order: number;
     page: string;
     hide: boolean;
-    children: { [key: string]: NestedSiteMapSchema };
+    children: NestedSiteMapSchema[];
   };
 
   export type SectionSchema = {

packages/common/src/schemas/backendAdminAPI.ts

@@ -56,6 +56,29 @@ namespace BackendAdminAPISchemas {
     body_en: string | null;
   };
 
+  export type FlattenedSiteMapSchema = {
+    id: string;
+    route_code: string;
+    name_ko: string;
+    name_en: string;
+    order: number;
+    parent_sitemap: string | null;
+    page: string;
+    hide: boolean;
+  };
+
+  export type NestedSiteMapSchema = {
+    id: string;
+    route_code: string;
+    name_ko: string;
+    name_en: string;
+    order: number;
+    parent_sitemap: string | null;
+    page: string;
+    hide: boolean;
+    children: NestedSiteMapSchema[];
+  };
+
   export type PageSectionBulkUpdateSchema = PageSectionSchema | Omit<PageSectionSchema, "id">;
 }
 

packages/common/src/utils/api.ts

@@ -1,60 +1,50 @@
 import * as R from "remeda";
 
-import BackendAPISchemas from "../schemas/backendAPI";
-
-export const buildNestedSiteMap: (flattened: BackendAPISchemas.FlattenedSiteMapSchema[]) => {
-  [key: string]: BackendAPISchemas.NestedSiteMapSchema;
-} = (flattened) => {
-  const map: Record<string, BackendAPISchemas.NestedSiteMapSchema> = {};
-  const roots: BackendAPISchemas.NestedSiteMapSchema[] = [];
+type GFlatSiteMap = {
+  id: string;
+  route_code: string;
+  order: number;
+  parent_sitemap: string | null;
+  page: string;
+  hide: boolean;
+};
+type GNestedSiteMap<T = GFlatSiteMap> = T & { children: GNestedSiteMap<T>[] };
+type MultiRootGNestedSiteMap<T = GFlatSiteMap> = { [key: string]: GNestedSiteMap<T> };
 
-  const siteMapIdRouteCodeMap = flattened.reduce(
-    (acc, item) => {
-      acc[item.id] = item.route_code;
-      return acc;
-    },
-    {} as Record<string, string>
-  );
+const _sortChildren = <T extends GFlatSiteMap>(children: GNestedSiteMap<T>[]) => {
+  return children
+    .sort((a, b) => a.order - b.order)
+    .map(<Z extends GNestedSiteMap<T>>(child: Z): Z => ({ ...child, children: _sortChildren(child.children) }));
+};
 
-  flattened.forEach((item) => {
-    map[item.id] = {
-      ...item,
-      children: {},
-    };
-  });
+export const buildNestedSiteMap = <T extends GFlatSiteMap>(flat: T[]) => {
+  const roots: GNestedSiteMap<T>[] = [];
+  const flatWithChildren = flat.map((item) => ({ ...item, children: [] as GNestedSiteMap<T>[] }));
+  const map = flatWithChildren.reduce((a, i) => ({ ...a, [i.id]: i }), {} as MultiRootGNestedSiteMap<T>);
 
-  flattened.forEach((item) => {
+  flat.forEach((item) => {
     if (item.parent_sitemap) {
-      map[item.parent_sitemap].children[siteMapIdRouteCodeMap[item.id]] = map[item.id];
+      map[item.parent_sitemap].children.push(map[item.id]);
     } else {
       roots.push(map[item.id]);
     }
   });
 
-  return roots.reduce(
-    (acc, item) => {
-      acc[item.route_code] = item;
-      return acc;
-    },
-    {} as Record<string, BackendAPISchemas.NestedSiteMapSchema>
-  );
+  return roots
+    .map((root) => ({ ...root, children: _sortChildren(root.children) }))
+    .reduce((a, i) => ({ ...a, [i.route_code]: i }), {} as MultiRootGNestedSiteMap<T>);
 };
 
-export const findSiteMapUsingRoute = (
-  route: string,
-  siteMapData: BackendAPISchemas.NestedSiteMapSchema
-): BackendAPISchemas.NestedSiteMapSchema | null => {
-  const currentRouteCodes = ["", ...route.split("/").filter((code) => !R.isEmpty(code))];
+export const buildFlatSiteMap = <T extends GNestedSiteMap>(nested: GNestedSiteMap<T>) => {
+  const flat: T[] = [];
 
-  let currentSitemap: BackendAPISchemas.NestedSiteMapSchema | null | undefined = siteMapData.children[currentRouteCodes[0]];
-  if (currentSitemap === undefined) return null;
+  const traverse = (node: GNestedSiteMap<T>) => {
+    flat.push(node);
+    node.children.forEach(traverse);
+  };
 
-  for (const routeCode of currentRouteCodes.slice(1)) {
-    if ((currentSitemap = currentSitemap.children[routeCode] || null) === null) {
-      break;
-    }
-  }
-  return currentSitemap;
+  traverse(nested);
+  return flat;
 };
 
 export const parseCss = (t: unknown): React.CSSProperties => {

packages/common/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { buildNestedSiteMap as _buildNestedSiteMap, findSiteMapUsingRoute as _findSiteMapUsingRoute, parseCss as _parseCss } from "./api";
+import { buildFlatSiteMap as _buildFlatSiteMap, buildNestedSiteMap as _buildNestedSiteMap, parseCss as _parseCss } from "./api";
 import { getCookie as _getCookie } from "./cookie";
 import { getFormValue as _getFormValue, isFormValid as _isFormValid } from "./form";
 import {
@@ -9,8 +9,8 @@ import {
 import { isFilledString as _isFilledString, isValidHttpUrl as _isValidHttpUrl, rtrim as _rtrim } from "./string";
 
 namespace Utils {
+  export const buildFlatSiteMap = _buildFlatSiteMap;
   export const buildNestedSiteMap = _buildNestedSiteMap;
-  export const findSiteMapUsingRoute = _findSiteMapUsingRoute;
   export const parseCss = _parseCss;
   export const getCookie = _getCookie;
   export const isFormValid = _isFormValid;