fix(ui): siteid and api client with refresh token

frontend/app/Router.tsx

@@ -74,11 +74,10 @@ const Router: React.FC<RouterProps> = (props) => {
   };
 
   const handleUserLogin = async () => {
-    props.mstore.initClient();
     await fetchUserInfo();
-
     const siteIdFromPath = parseInt(location.pathname.split('/')[1]);
     await fetchSiteList(siteIdFromPath);
+    props.mstore.initClient();
 
     const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
     if (

frontend/app/api_client.ts

@@ -1,5 +1,6 @@
 import store from 'App/store';
 import { queried } from './routes';
+import { setJwt } from 'Duck/user';
 
 const siteIdRequiredPaths: string[] = [
   '/dashboard',
@@ -73,7 +74,39 @@ export default class APIClient {
     this.siteId = siteId;
   }
 
-  fetch(path: string, params?: any, options: { clean?: boolean } = { clean: true }): Promise<Response> {
+  private decodeJwt(jwt: string): any {
+    const base64Url = jwt.split('.')[1];
+    const base64 = base64Url.replace('-', '+').replace('_', '/');
+    return JSON.parse(window.atob(base64));
+  }
+
+  isTokenExpired(token: string): boolean {
+    const decoded: any = this.decodeJwt(token);
+    const currentTime = Date.now() / 1000;
+    return decoded.exp < currentTime;
+  }
+
+  async refreshToken(): Promise<string> {
+    const response = await fetch('/refresh', {
+      method: 'GET',
+      headers: this.init.headers
+    });
+
+    const data = await response.json();
+    const refreshedJwt = data.jwt;
+    store.dispatch(setJwt(refreshedJwt));
+    return refreshedJwt;
+  }
+
+  async fetch(path: string, params?: any, options: {
+    clean?: boolean
+  } = { clean: true }): Promise<Response> {
+    const jwt = store.getState().getIn(['user', 'jwt']);
+    if (jwt && this.isTokenExpired(jwt)) {
+      const newJwt = await this.refreshToken();
+      (this.init.headers as Headers).set('Authorization', `Bearer ${newJwt}`);
+    }
+
     if (params !== undefined) {
       const cleanedParams = options.clean ? clean(params) : params;
       this.init.body = JSON.stringify(cleanedParams);
@@ -95,14 +128,14 @@ export default class APIClient {
     ) {
       edp = `${edp}/${this.siteId}`;
     }
-    return fetch(edp + path, this.init)
-      .then((response) => {
-        if (response.ok) {
-          return response;
-        } else {
-          return Promise.reject({ message: `! ${this.init.method} error on ${path}; ${response.status}`, response });
-        }
-      });
+
+    return fetch(edp + path, this.init).then((response) => {
+      if (response.ok) {
+        return response;
+      } else {
+        return Promise.reject({ message: `! ${this.init.method} error on ${path}; ${response.status}`, response });
+      }
+    });
   }
 
   get(path: string, params?: any, options?: any): Promise<Response> {
@@ -124,4 +157,4 @@ export default class APIClient {
     this.init.method = 'DELETE';
     return this.fetch(path, params);
   }
-}
+}