feat: fetch dashboard data

client/.env

@@ -0,0 +1,3 @@
+VITE_API_BASE=/api
+VITE_API_HOST=http://localhost
+VITE_API_PORT=8081

client/src/api/api.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const VITE_API_BASE = import.meta.env.VITE_API_BASE;
+const VITE_API_HOST = import.meta.env.VITE_API_HOST;
+const VITE_API_PORT = import.meta.env.VITE_API_PORT;
+
+export const api = axios.create({
+  baseURL: `${VITE_API_HOST}:${VITE_API_PORT}${VITE_API_BASE}`,
+});

client/src/api/certificates.ts

@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Certificate {}
+
+export const getCertificates = api.get<never, Certificate[]>('/certificates');

client/src/api/index.ts

@@ -0,0 +1,4 @@
+export * from './certificates';
+export * from './servers';
+export * from './templates';
+export * from './users';

client/src/api/servers.ts

@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Server {}
+
+export const getServers = api.get<never, Server[]>('/servers');

client/src/api/templates.ts

@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface Template {}
+
+export const getTemplates = api.get<never, Template[]>('/templates');

client/src/api/users.ts

@@ -0,0 +1,5 @@
+import { api } from './api';
+
+export interface User {}
+
+export const getUsers = api.get<never, User[]>('/users');

client/src/pages/dashboard/dashboard.tsx

@@ -1,21 +1,81 @@
 import type { RouteObject } from 'react-router';
+import {
+  getServers,
+  getTemplates,
+  getCertificates,
+  getUsers,
+  type Server,
+  type Template,
+  type Certificate,
+  type User,
+} from '../../api';
+import { useEffect, useState } from 'react';
+
+export const loadDashboard = async () => {
+  try {
+    const [servers, templates, certificates, users] = await Promise.all([
+      getServers.then((data) => data),
+      getTemplates.then((data) => data),
+      getCertificates.then((data) => data),
+      getUsers.then((data) => data),
+    ]);
+
+    return [servers, templates, certificates, users];
+  } catch (error) {
+    console.log(error);
+    alert('loading error');
+  }
+};
 
 export const Dashboard = () => {
+  const [servers, setServers] = useState<Server[] | undefined>(undefined);
+  const [templates, setTemplates] = useState<Template[] | undefined>(undefined);
+  const [certificates, setCertificates] = useState<Certificate[] | undefined>(
+    undefined,
+  );
+  const [users, setUsers] = useState<User[] | undefined>(undefined);
+
+  useEffect(() => {
+    loadDashboard()
+      .then((res) => {
+        if (res) {
+          const [servers, templates, certificates, users] = res;
+          setServers(servers);
+          setTemplates(templates);
+          setCertificates(certificates);
+          setUsers(users);
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
+
   return (
     <div id="dashboard" className="tab-content active">
       <div className="section">
         <h2>Statistics</h2>
         <p>
-          Servers: <span id="serverCount">Loading...</span>
+          Servers:{' '}
+          <span id="serverCount">
+            {servers ? servers.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Templates: <span id="templateCount">Loading...</span>
+          Templates:{' '}
+          <span id="templateCount">
+            {templates ? templates.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Certificates: <span id="certCount">Loading...</span>
+          Certificates:{' '}
+          <span id="certCount">
+            {certificates ? certificates.length || 0 : 'Loading...'}
+          </span>
         </p>
         <p>
-          Users: <span id="userCount">Loading...</span>
+          Users:{' '}
+          <span id="userCount">{users ? users.length || 0 : 'Loading...'}</span>
         </p>
       </div>
     </div>