Merge branch 'mydrive-4-upgrade' of https://github.com/subnub/myDrive into mydrive-4-upgrade

src/api/filesAPI.ts

@@ -1,6 +1,6 @@
 import { QueryFunctionContext } from "react-query";
 import axios from "../axiosInterceptor";
-import { getUserToken } from "./user";
+import { getUserToken } from "./userAPI";
 import getBackendURL from "../utils/getBackendURL";
 
 interface QueryKeyParams {

src/api/foldersAPI.ts

@@ -1,6 +1,6 @@
 import { QueryFunctionContext } from "react-query";
 import axios from "../axiosInterceptor";
-import { getUserToken } from "./user";
+import { getUserToken } from "./userAPI";
 import getBackendURL from "../utils/getBackendURL";
 
 interface QueryKeyParams {

src/api/userAPI.ts

@@ -45,6 +45,15 @@ export const logoutAllAPI = async () => {
   return response.data;
 };
 
+export const getAccessToken = async (uuid: string) => {
+  const response = await axios.post("/user-service/get-token", undefined, {
+    headers: {
+      uuid,
+    },
+  });
+  return response.data;
+};
+
 // PATCH
 
 export const changePasswordAPI = async (

src/components/LoginPage/LoginPage.tsx

@@ -4,7 +4,7 @@ import {
   getUserAPI,
   loginAPI,
   sendPasswordResetAPI,
-} from "../../api/user";
+} from "../../api/userAPI";
 import { useLocation, useNavigate } from "react-router-dom";
 import { setUser } from "../../reducers/user";
 import { useAppDispatch } from "../../hooks/store";

src/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import Spinner from "../Spinner/Spinner";
 import { ToastContainer, toast } from "react-toastify";
 import { useState } from "react";
-import { resetPasswordAPI } from "../../api/user";
+import { resetPasswordAPI } from "../../api/userAPI";
 import AlertIcon from "../../icons/AlertIcon";
 
 const ResetPasswordPage = () => {

src/components/SettingsPage/SettingsAccountSection.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import SettingsChangePasswordPopup from "./SettingsChangePasswordPopup";
 import { toast } from "react-toastify";
-import { logoutAPI, resendVerifyEmailAPI } from "../../api/user";
+import { logoutAPI, resendVerifyEmailAPI } from "../../api/userAPI";
 import Swal from "sweetalert2";
 import { useNavigate } from "react-router-dom";
 

src/components/SettingsPage/SettingsChangePasswordPopup.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import CloseIcon from "../../icons/CloseIcon";
 import classNames from "classnames";
 import { toast } from "react-toastify";
-import { changePasswordAPI } from "../../api/user";
+import { changePasswordAPI } from "../../api/userAPI";
 
 interface SettingsChangePasswordPopupProps {
   closePopup: () => void;

src/components/SettingsPage/SettingsPage.tsx

@@ -6,7 +6,7 @@ import AccountIcon from "../../icons/AccountIcon";
 import TuneIcon from "../../icons/TuneIcon";
 import { useNavigate } from "react-router-dom";
 import SettingsAccountSection from "./SettingsAccountSection";
-import { getUserDetailedAPI, logoutAPI } from "../../api/user";
+import { getUserDetailedAPI, logoutAPI } from "../../api/userAPI";
 import Spinner from "../Spinner/Spinner";
 import Swal from "sweetalert2";
 import SettingsGeneralSection from "./SettingsGeneralSection";

src/components/VerifyEmailPage/VerifyEmailPage.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { verifyEmailAPI } from "../../api/user";
+import { verifyEmailAPI } from "../../api/userAPI";
 import { toast, ToastContainer } from "react-toastify";
 import { useEffect } from "react";
 

src/hooks/user.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from "react";
+import { getAccessToken } from "../api/userAPI";
+import uuid from "uuid";
+
+const useAccessTokenHandler = () => {
+  const refreshAccessToken = useCallback(async () => {
+    try {
+      const browserID = localStorage.getItem("browser-id") || uuid.v4();
+      if (!localStorage.getItem("browser-id")) {
+        localStorage.setItem("browser-id", browserID);
+      }
+      await getAccessToken(browserID);
+    } catch (e) {
+      console.log("Error refreshing access token", e);
+    }
+  }, []);
+
+  const visibilityChange = useCallback(() => {
+    if (document.visibilityState === "visible") {
+      refreshAccessToken();
+    }
+  }, [refreshAccessToken]);
+
+  useEffect(() => {
+    refreshAccessToken();
+
+    const timer = setInterval(refreshAccessToken, 60 * 1000 * 20);
+    document.addEventListener("visibilitychange", visibilityChange);
+
+    return () => {
+      clearInterval(timer);
+      document.removeEventListener("visibilitychange", visibilityChange);
+    };
+  }, [refreshAccessToken, visibilityChange]);
+};
+
+export default useAccessTokenHandler;

src/reducers/user.ts

@@ -4,11 +4,13 @@ import { UserType } from "../types/user";
 interface UserStateType {
   user?: null | UserType;
   loggedIn: boolean;
+  lastRefreshed: number;
 }
 
 const initialState: UserStateType = {
   user: null,
   loggedIn: false,
+  lastRefreshed: 0,
 };
 
 const userSlice = createSlice({
@@ -19,9 +21,12 @@ const userSlice = createSlice({
       state.user = action.payload;
       state.loggedIn = true;
     },
+    setLastRefreshed: (state) => {
+      state.lastRefreshed = Date.now();
+    },
   },
 });
 
-export const { setUser } = userSlice.actions;
+export const { setUser, setLastRefreshed } = userSlice.actions;
 
 export default userSlice.reducer;

src/routers/AppRouter.jsx

@@ -17,11 +17,13 @@ import ResetPasswordPage from "../components/ResetPasswordPage/ResetPasswordPage
 import SettingsPage from "../components/SettingsPage/SettingsPage";
 import Homepage from "../components/Homepage/Homepage";
 import { usePreferenceSetter } from "../hooks/preferenceSetter";
+import useAccessTokenHandler from "../hooks/user";
 
 // export const history = createHistory();
 
 const AppRouter = () => {
   usePreferenceSetter();
+  useAccessTokenHandler();
 
   return (
     <BrowserRouter>