fix: change subcategory format (#1026)

* fix: change subcategory format

* Fix sidebars

* Refactor

* Fix implementation

* Change format

v1/lib/core/BlogSidebar.js

@@ -27,8 +27,12 @@ class BlogSidebar extends React.Component {
 
     const contents = [
       {
-        name: blogSidebarTitle,
-        links: MetadataBlog.slice(0, blogSidebarCount),
+        type: 'CATEGORY',
+        title: blogSidebarTitle,
+        children: MetadataBlog.slice(0, blogSidebarCount).map(item => ({
+          type: 'LINK',
+          item,
+        })),
       },
     ];
     const title = this.props.current && this.props.current.title;

v1/lib/core/DocsLayout.js

@@ -53,7 +53,6 @@ class DocsLayout extends React.Component {
     const title =
       idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
-
     const previousTitle =
       idx(i18n, ['localized-strings', metadata.previous_id]) ||
       idx(i18n, ['localized-strings', 'previous']) ||

v1/lib/core/DocsSidebar.js

@@ -28,12 +28,13 @@ if (fs.existsSync(`../server/languages.js`)) {
 
 class DocsSidebar extends React.Component {
   render() {
-    const sidebar = this.props.metadata.sidebar;
+    const {category, sidebar} = this.props.metadata;
     const docsCategories = readCategories(sidebar, Metadata, languages);
-    const categoryName = this.props.metadata.category;
-    if (!categoryName) {
+
+    if (!category) {
       return null;
     }
+
     return (
       <Container className="docsNavContainer" id="docsNav" wrapper={false}>
         <SideNav

v1/lib/core/nav/SideNav.js

@@ -61,44 +61,48 @@ class SideNav extends React.Component {
     return null;
   }
 
-  renderCategory(category) {
-    return (
-      <div className="navGroup" key={category.name}>
-        <h3 className="navGroupCategoryTitle">
-          {this.getLocalizedCategoryString(category.name)}
-        </h3>
-        <ul>
-          {category.links.map(this.renderItemLink, this)}
-          {category.sub_categories &&
-            category.sub_categories.map(this.renderSubCategory, this)}
-        </ul>
-      </div>
-    );
-  }
+  renderCategory = categoryItem => (
+    <div className="navGroup" key={categoryItem.title}>
+      <h3 className="navGroupCategoryTitle">
+        {this.getLocalizedCategoryString(categoryItem.title)}
+      </h3>
+      <ul>
+        {categoryItem.children.map(item => {
+          switch (item.type) {
+            case 'LINK':
+              return this.renderItemLink(item);
+            case 'SUBCATEGORY':
+              return this.renderSubcategory(item);
+            default:
+              return null;
+          }
+        })}
+      </ul>
+    </div>
+  );
 
-  renderSubCategory(subCategory) {
-    return (
-      <div className="navGroup subNavGroup" key={subCategory.name}>
-        <h4 className="navGroupSubCategoryTitle">
-          {this.getLocalizedCategoryString(subCategory.name)}
-        </h4>
-        <ul>{subCategory.links.map(this.renderItemLink, this)}</ul>
-      </div>
-    );
-  }
+  renderSubcategory = subcategoryItem => (
+    <div className="navGroup subNavGroup" key={subcategoryItem.title}>
+      <h4 className="navGroupSubcategoryTitle">
+        {this.getLocalizedCategoryString(subcategoryItem.title)}
+      </h4>
+      <ul>{subcategoryItem.children.map(this.renderItemLink)}</ul>
+    </div>
+  );
 
-  renderItemLink(link) {
+  renderItemLink = linkItem => {
+    const linkMetadata = linkItem.item;
     const itemClasses = classNames('navListItem', {
-      navListItemActive: link.id === this.props.current.id,
+      navListItemActive: linkMetadata.id === this.props.current.id,
     });
     return (
-      <li className={itemClasses} key={link.id}>
-        <a className="navItem" href={this.getLink(link)}>
-          {this.getLocalizedString(link)}
+      <li className={itemClasses} key={linkMetadata.id}>
+        <a className="navItem" href={this.getLink(linkMetadata)}>
+          {this.getLocalizedString(linkMetadata)}
         </a>
       </li>
     );
-  }
+  };
 
   render() {
     return (
@@ -122,7 +126,7 @@ class SideNav extends React.Component {
               )}
             </div>
             <div className="navGroups">
-              {this.props.contents.map(this.renderCategory, this)}
+              {this.props.contents.map(this.renderCategory)}
             </div>
           </section>
         </div>