Merge pull request #41 from Solovev-A/improvement-method-groups-order

Add method groups sorting

Author: 0w1afk

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 6.1.0 (01.02.2024)
+
+Added an option to sort method groups by name.
+
 ## 6.0.0 (06.06.2023)
 
 Dropped support for Node.js 12.

CHANGELOG.ru.md

@@ -1,5 +1,9 @@
 # История изменений проекта
 
+## 6.1.0 (01.02.2024)
+
+Добавлена возможность сортировки групп методов по названию.
+
 ## 6.0.0 (06.06.2023)
 
 Node.js 12 больше не поддерживается.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@funboxteam/blueprinter",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Replacement of Aglio library for rendering generated AST as HTML page.",
   "repository": {
     "type": "git",

package.json

@@ -71,7 +71,7 @@ class ThemeProvider extends React.Component {
 
   updateTheme(theme) {
     this.applyTheme(theme);
-    cookies.set({ name: themeCookieName, value: theme, options: { domain: this.documentationDomain } });
+    cookies.set({ name: themeCookieName, value: theme });
     this.darkQuery.removeListener(this.applySystemTheme);
   }
 
@@ -81,10 +81,6 @@ class ThemeProvider extends React.Component {
     this.updateTheme(newTheme);
   }
 
-  get documentationDomain() {
-    return window.location.hostname.split('.').slice(-2).join('.');
-  }
-
   render() {
     return (
       <ThemeContext.Provider value={this.state}>

src/app/common/providers/theme-provider/theme-provider.jsx

@@ -0,0 +1,29 @@
+import cookies from 'app/common/utils/helpers/cookies';
+
+import { SORT_METHOD_GROUPS_COOKIE_NAME } from 'app/constants/sort';
+
+class SortService {
+  constructor() {
+    this.isGroupsSortingEnabled = !!cookies.get({
+      name: SORT_METHOD_GROUPS_COOKIE_NAME,
+    });
+
+    this.toggleGroupsSorting = this.toggleGroupsSorting.bind(this);
+  }
+
+  sortGroups(groups) {
+    return [...groups].sort((a, b) => a.title.localeCompare(b.title));
+  }
+
+  toggleGroupsSorting() {
+    if (this.isGroupsSortingEnabled) {
+      cookies.remove({ name: SORT_METHOD_GROUPS_COOKIE_NAME });
+    } else {
+      cookies.set({ name: SORT_METHOD_GROUPS_COOKIE_NAME, value: true });
+    }
+
+    window.location.reload();
+  }
+}
+
+export const sortService = new SortService();

src/app/common/services/sort-service.js

@@ -1,28 +1,52 @@
+const DEFAULT_OPTIONS = {
+  domain: window.location.hostname.split('.').slice(-2).join('.'),
+};
+
 const getCookie = ({ name }) => {
   const regex = `(?:^|; )${name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1')}=([^;]*)`;
   const matches = document.cookie.match(new RegExp(regex));
   return matches ? decodeURIComponent(matches[1]) : undefined;
 };
 
-const setCookie = ({ name, value, options = { path: '/' } }) => {
+const setCookie = ({
+  name,
+  value,
+  options = {},
+}) => {
   const encodedValue = encodeURIComponent(value);
   let updatedCookie = `${name}=${encodedValue}`;
 
-  if (!options.expires) {
+  const updatedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+  };
+
+  if (!updatedOptions.expires) {
     const date = new Date();
     date.setFullYear(2100);
-    options.expires = date.toUTCString();
+    updatedOptions.expires = date.toUTCString();
   }
 
-  Object.keys(options).forEach(propKey => {
-    const propValue = options[propKey];
+  Object.keys(updatedOptions).forEach(propKey => {
+    const propValue = updatedOptions[propKey];
     updatedCookie += `; ${propKey}=${propValue}`;
   });
 
   document.cookie = updatedCookie;
 };
 
+const removeCookie = ({ name }) => {
+  setCookie({
+    name,
+    value: '',
+    options: {
+      expires: new Date(0).toUTCString(),
+    },
+  });
+};
+
 export default {
   get: getCookie,
   set: setCookie,
+  remove: removeCookie,
 };

src/app/common/utils/helpers/cookies.js

@@ -4,6 +4,7 @@ import parseSourceFile from 'app/common/utils/helpers/parse-source-file';
 import { HASH_DELIMITER } from 'app/common/utils/helpers/hash';
 import IdProvider from 'app/common/utils/helpers/id-provider';
 import sourceMock from 'app/source';
+import { sortService } from 'app/common/services/sort-service';
 
 import MainLayout from 'app/components/main-layout';
 import PageDescription from 'app/components/page-description';
@@ -28,6 +29,10 @@ const {
   actions,
 } = parsedSource;
 
+const groupsToDisplay = sortService.isGroupsSortingEnabled
+  ? sortService.sortGroups(groups)
+  : groups;
+
 const isModal = location => {
   const modalPaths = ['/service-help'];
   return modalPaths.indexOf(location.pathname) >= 0;
@@ -98,7 +103,7 @@ export default class App extends React.Component {
     return (
       <MainLayout
         topLevelMeta={topLevelMeta}
-        groups={groups}
+        groups={groupsToDisplay}
         resources={resources}
         actions={actions}
       >
@@ -127,7 +132,7 @@ export default class App extends React.Component {
                 }
                 <ManualSearch
                   {...props}
-                  groups={groups}
+                  groups={groupsToDisplay}
                 />
               </ViewContext.Provider>
             )}

src/app/components/app/app.jsx

@@ -19,6 +19,7 @@ import Link from 'app/components/link';
 import SearchStripe from 'app/components/search-stripe';
 import ThemeToggler from 'app/components/theme-toggler';
 import InfoButton from 'app/components/info-button';
+import SortToggler from 'app/components/sort-toggler';
 
 import { API_DEFAULT_TITLE } from 'app/constants/defaults';
 
@@ -105,6 +106,10 @@ class MainLayout extends React.PureComponent {
                 <SideMenu data={groups}/>
                 <PrintMenu data={groups}/>
               </Page__Navigation>
+
+              <Page__Stripe mods={{ for: 'sort' }}>
+                <SortToggler/>
+              </Page__Stripe>
             </Page__Aside>
           </Sidebar>
 

src/app/components/main-layout/main-layout.jsx

@@ -6,7 +6,7 @@
   top: 0;
   box-sizing: border-box;
   height: 100vh;
-  padding: 24px 0;
+  padding-top: 24px;
   background-color: var(--background-color--sidebar);
 
   @media print {

src/app/components/page/__aside/_for/_navigation/page__aside_for_navigation.scss

@@ -0,0 +1,9 @@
+.page__stripe_for_sort {
+  margin-top: auto;
+  padding: 16px 18px 16px 30px;
+  border-top: 1px solid var(--stroke-color--primary);
+
+  @media print {
+    display: none;
+  }
+}

src/app/components/page/__stripe/_for/_sort/page-stripe_for_sort.scss

@@ -13,6 +13,7 @@ require('./__navigation/page__navigation.scss');
 require('./__stripe/_for/_api-host/page__stripe_for_api-host.scss');
 require('./__stripe/_for/_search/page__stripe_for_search.scss');
 require('./__stripe/_for/_group/page__stripe_for_group.scss');
+require('./__stripe/_for/_sort/page-stripe_for_sort.scss');
 require('./__title/page__title.scss');
 
 require('./_type/_error/page_type_error.scss');

src/app/components/page/index.js

@@ -0,0 +1,3 @@
+export { default } from './sort-toggler';
+
+require('./sort-toggler.scss');

src/app/components/sort-toggler/index.js

@@ -0,0 +1,21 @@
+import { t } from '@lingui/macro';
+import Toggler from 'app/components/toggler';
+
+import { sortService } from 'app/common/services/sort-service';
+
+const SortToggler = (props) => (
+  <div className={b('sort-toggler', props)}>
+    <span>
+      {t`Sort by name`}
+    </span>
+
+    <Toggler
+      mods={{ checked: sortService.isGroupsSortingEnabled }}
+      onChange={sortService.toggleGroupsSorting}
+    >
+      {t`Toggle sort by name`}
+    </Toggler>
+  </div>
+);
+
+export default SortToggler;

src/app/components/sort-toggler/sort-toggler.jsx

@@ -0,0 +1,7 @@
+.sort-toggler {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  color: var(--color--secondary);
+}

src/app/components/sort-toggler/sort-toggler.scss

@@ -0,0 +1,3 @@
+import cookiePrefix from './cookie-prefix';
+
+export const SORT_METHOD_GROUPS_COOKIE_NAME = `${cookiePrefix}_is_groups_sorting_enabled`;

src/app/constants/sort.js

@@ -25,11 +25,13 @@
   "Search modifiers": "Search modifiers",
   "Show Body example": "Show Body example",
   "Show help": "Show help",
+  "Sort by name": "Sort by name",
   "This message has no content": "This message has no content",
   "This request has no content": "This request has no content",
   "This response has no content": "This response has no content",
   "To manual search page": "To manual search page",
   "Toggle dark theme": "Toggle dark theme",
+  "Toggle sort by name": "Toggle sort by name",
   "Type a modifier in the search field before the search query.": "Type a modifier in the search field before the search query.",
   "URI Parameters": "URI Parameters",
   "Useful information": "Useful information",

src/locales/en/messages.js

@@ -25,11 +25,13 @@
   "Search modifiers": "Модификаторы поиска",
   "Show Body example": "Показать пример Body",
   "Show help": "Открыть окно помощи",
+  "Sort by name": "Сортировать по названию",
   "This message has no content": "Пустое сообщение",
   "This request has no content": "Пустой запрос",
   "This response has no content": "Пустой ответ",
   "To manual search page": "Перейти на страницу ручного поиска",
   "Toggle dark theme": "Включить тёмную тему",
+  "Toggle sort by name": "Включить сортировку по названию",
   "Type a modifier in the search field before the search query.": "Модификатор указывается в строке поиска перед поисковым запросом.",
   "URI Parameters": "URI параметры",
   "Useful information": "Полезная информация",