Adding posts count to dashboard (#2476)

* Revert "Merge branch 'master' into postsCount"

This reverts commit 9208611, reversing
changes made to dec2f47.

* commit b4 revert

* This reverts commit 4108258.

* All commits
  rebased
  Make functions more precise
  Fixed PR
  commit before rebasing
  added files back after aborting rebase
  commit after rebase
  final fix
  update package.json of posts
  commit b4 rebase
  commit 2
  fixed before rebase

* deleted tatus file

* fix PR with adding .js extension

src/api/status/public/index.html

@@ -353,23 +353,44 @@ <h4 class="mb-0" id="total-contributors-satellite">&nbsp;</h4>
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 mt-4">
-          <div class="card">
-            <div class="card-header p-3 pt-2">
-              <div
-                class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute"
-              >
-                <i class="material-icons opacity-10">person</i>
+          <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 mt-4">
+            <div class="card card--telescope">
+              <div class="card-header card-header--telescope p-3 pt-2">
+                <div
+                  class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute"
+                >
+                  <i class="material-icons opacity-10">person</i>
+                </div>
+                <div class="text-end pt-1">
+                  <h6 class="mb-0 text-capitalize">Telescope</h6>
+                  <p class="text-sm mb-0 text-capitalize">Total posts</p>
+                  <h4 class="mb-0" id="totalPosts">&nbsp;</h4>
+                </div>
               </div>
-              <div class="text-end pt-1">
-                <p class="text-sm mb-0 text-capitalize">Total feeds</p>
-                <h4 class="mb-0" id="feeds-count"></h4>
+              <hr class="dark horizontal my-0" />
+              <div class="card-footer p-3"></div>
+            </div>
+          </div>
+          <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 mt-4">
+            <div class="card card--telescope">
+              <div class="card-header card-header--telescope p-3 pt-2">
+                <div
+                  class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute"
+                >
+                  <i class="material-icons opacity-10">person</i>
+                </div>
+                <div class="text-end pt-1">
+                  <h6 class="mb-0 text-capitalize">Telescope</h6>
+                  <p class="text-sm mb-0 text-capitalize">Total feeds</p>
+                  <h4 class="mb-0" id="feeds-count">&nbsp;</h4>
+                </div>
               </div>
+              <hr class="dark horizontal my-0" />
+              <div class="card-footer p-3"></div>
             </div>
-            <div class="card-footer"></div>
           </div>
         </div>
+
         <div class="row mt-4">
           <div class="col-lg-4 col-md-6 mt-4 mb-4">
             <div class="card z-index-2">
@@ -1133,7 +1154,6 @@ <h6 class="mt-3">Thank you for sharing!</h6>
     <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
     <script src="assets/js/material-dashboard.min.js?v=3.0.0"></script>
     <!-- Telescope JS Files -->
-    <script src="js/github-stats.js"></script>
-    <script src="js/feed/index.js"></script>
+    <script type="module" src="js/pages/dashboard.js"></script>
   </body>
 </html>

src/api/status/public/js/feed/index.js

@@ -1,6 +1,6 @@
 const apiHost = new URL(location).origin;
 
-async function getFeedCount() {
+export async function getFeedCount() {
   try {
     const data = await fetch(`${apiHost}/v1/posts/feeds`, {
       method: 'HEAD',
@@ -12,7 +12,3 @@ async function getFeedCount() {
     console.error(err);
   }
 }
-
-window.onload = () => {
-  getFeedCount();
-};

src/api/status/public/js/github-stats.js

@@ -3,7 +3,7 @@ const fetchGitHubApi = (owner, repo, path) =>
     headers: { Accept: 'application/vnd.github.v3+json' },
   });
 
-const getGitHubData = (owner, repo) => {
+export const getGitHubData = (owner, repo) => {
   let weeklyCommits = 0;
 
   // get weekly commits for last year: https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-count
@@ -60,8 +60,3 @@ const getGitHubData = (owner, repo) => {
     })
     .catch((error) => console.log(error));
 };
-
-document.addEventListener('DOMContentLoaded', () => {
-  getGitHubData('Seneca-CDOT', 'telescope');
-  getGitHubData('Seneca-CDOT', 'satellite');
-});

src/api/status/public/js/pages/dashboard.js

@@ -0,0 +1,10 @@
+import { getPostsCount } from '../post/index.js';
+import { getFeedCount } from '../feed/index.js';
+import { getGitHubData } from '../github-stats.js';
+
+window.addEventListener('load', (event) => {
+  getGitHubData('Seneca-CDOT', 'telescope');
+  getGitHubData('Seneca-CDOT', 'satellite');
+  getFeedCount();
+  getPostsCount();
+});

src/api/status/public/js/post/index.js

@@ -0,0 +1,14 @@
+const apiUrl = new URL(location).origin;
+
+const fetchPostsCount = () =>
+  fetch(`${apiUrl}/v1/posts`, { method: 'HEAD' }).then((res) => res.headers.get('x-total-count'));
+
+export const getPostsCount = async () => {
+  try {
+    const numberOfPosts = await fetchPostsCount();
+    const totalPostsEl = document.getElementById('totalPosts');
+    totalPostsEl.innerText = numberOfPosts ?? 'N/A';
+  } catch (error) {
+    console.log(error);
+  }
+};