Fixed duplicated variables, some changes in navigation functions, changed pages.twig and navigator.twig

src/backend/models/pageOrder.ts

@@ -93,7 +93,7 @@ class PageOrder {
    * @param {string} pageId - page's id
    * @returns {Promise<string | null>} - previous page id
    */
-  public static async getPreviousNavigationPage(pageId: string): Promise<string | null> {
+  public static async getPreviousNavigationPage(pageId: string): Promise<string> {
     const page = await Pages.get(pageId);
 
     const pageParent =  await page.getParent();
@@ -133,7 +133,7 @@ class PageOrder {
       previousPageId = newOrder._order[newOrder._order.length - 1];
     }
 
-    return previousPageId;
+    return previousPageId || '';
   }
 
   /**
@@ -142,7 +142,7 @@ class PageOrder {
    * @param {string} pageId - page's id
    * @returns {Promise<string | null>} - next page id
    */
-  public static async getNextNavigationPage(pageId: string): Promise<string | null> {
+  public static async getNextNavigationPage(pageId: string): Promise<string> {
     const page = await Pages.get(pageId);
     const pageParent = await page.getParent();
 
@@ -165,7 +165,7 @@ class PageOrder {
 
       nextPageId = order.getSubPageAfter(pageParent._id);
 
-      return nextPageId;
+      return nextPageId || '';
     }
 
     // Get order by page id
@@ -183,7 +183,7 @@ class PageOrder {
 
     nextPageId = order.getSubPageAfter(pageId);
 
-    return nextPageId;
+    return nextPageId || '';
   }
 
   /**

src/backend/routes/aliases.ts

@@ -34,21 +34,11 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
 
         const pageParent = await page.getParent();
 
-        let previousPage;
-
-        let nextPage;
-
         const previousPageId = await PageOrder.getPreviousNavigationPage(alias.id);
-
         const nextPageId = await PageOrder.getNextNavigationPage(alias.id);
 
-        if (previousPageId){
-          previousPage = await Page.get(previousPageId);
-        }
-
-        if (nextPageId) {
-          nextPage = await Page.get(nextPageId);
-        }
+        const previousPage = await Page.get(previousPageId);
+        const nextPage = await Page.get(nextPageId);
 
         res.render('pages/page', {
           page,

src/backend/routes/pages.ts

@@ -64,21 +64,11 @@ router.get('/page/:id', verifyToken, async (req: Request, res: Response, next: N
 
     const pageParent = await page.parent;
 
-    let previousPage;
-
-    let nextPage;
-
     const previousPageId = await PageOrder.getPreviousNavigationPage(pageId);
-
     const nextPageId = await PageOrder.getNextNavigationPage(pageId);
 
-    if (previousPageId) {
-      previousPage = await Page.get(previousPageId);
-    }
-
-    if (nextPageId) {
-      nextPage = await Page.get(nextPageId);
-    }
+    const previousPage = await Page.get(previousPageId);
+    const nextPage = await Page.get(nextPageId);
 
     res.render('pages/page', {
       page,

src/backend/views/components/navigator.twig

@@ -19,15 +19,19 @@ Usage example:
   {% set tag = 'a' %}
 {% endif %}
 
-<{{tag}}
-  {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
-class="{{ mainClass }} {{ mainClass }}--{{ direction|default('previous') }} {{ class ?? '' }}"
-{{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
->
-<div class="{{mainClass}}__direction">
-  {{ direction }}
+<div class="navigator_wrapper">
+  {% if label and url %}
+    <{{ tag }}
+      {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
+        class="{{ mainClass }} {{ mainClass }}--{{ direction|default('previous') }} {{ class ?? '' }}"
+      {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
+      >
+      <div class="{{ mainClass }}__direction">
+       {{ direction }}
+      </div>
+      <div class="{{ mainClass }}__label">
+       {{ label }}
+      </div>
+    </{{ tag }}>
+  {% endif %}
 </div>
-<div class="{{mainClass}}__label">
-  {{ label }}
-</div>
-</{{tag}}>

src/backend/views/pages/page.twig

@@ -40,16 +40,8 @@
       {%  endfor %}
     </section>
     <footer class="page_footer">
-      <div class="navigator_wrapper">
-        {% if previousPage  %}
-          {% include 'components/navigator.twig' with {label:  previousPage.title, direction: 'previous', url: '/' ~ previousPage.uri} %}
-       {% endif %}
-      </div>
-      <div class="navigator_wrapper">
-        {% if nextPage  %}
-           {% include 'components/navigator.twig' with {label:  nextPage.title, direction: 'next', url: '/' ~ nextPage.uri} %}
-        {% endif %}
-      </div>
+        {% include 'components/navigator.twig' with {label:  previousPage.title, direction: 'previous', url: '/' ~ previousPage.uri} %}
+        {% include 'components/navigator.twig' with {label:  nextPage.title, direction: 'next', url: '/' ~ nextPage.uri} %}
     </footer>
   </article>
 

src/frontend/styles/components/navigator.pcss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: var(--color-bg-navigation);
+  background-color: var(--color-link-hover);
   border-radius: 10px;
   padding: 12px 16px 12px 16px;
   color: black;

src/frontend/styles/vars.pcss

@@ -20,8 +20,6 @@
   --color-button-warning-hover: #D65151;
   --color-button-warning-active: #BD4848;
 
-  --color-bg-navigation: #F3F6F8;
-
 
   /**
    * Site layout sizes