From bac7867c0cacaf7726d64a035a0544f207dda678 Mon Sep 17 00:00:00 2001 From: subnub Date: Mon, 22 Jul 2024 09:51:06 -0400 Subject: [PATCH] improved uploaded and made axios interceptor typescript --- src/api/filesAPI.ts | 17 +- src/axiosInterceptor/{index.js => index.ts} | 64 +---- src/components/AddNewDropdown/index.tsx | 58 ++-- src/components/Dataform/index.tsx | 7 +- src/components/LeftSection/index.tsx | 4 +- src/components/LoginPage/index.jsx | 257 ------------------ .../LoginPage/{LoginPage.tsx => index.tsx} | 2 +- src/components/UploadItem/index.tsx | 6 +- src/hooks/utils.ts | 4 +- src/icons/CreateFolderIcon.tsx | 22 ++ src/icons/UploadFileIcon.tsx | 17 ++ src/utils/cancelTokenManager.ts | 6 - 12 files changed, 84 insertions(+), 380 deletions(-) rename src/axiosInterceptor/{index.js => index.ts} (56%) delete mode 100644 src/components/LoginPage/index.jsx rename src/components/LoginPage/{LoginPage.tsx => index.tsx} (98%) create mode 100644 src/icons/CreateFolderIcon.tsx create mode 100644 src/icons/UploadFileIcon.tsx diff --git a/src/api/filesAPI.ts b/src/api/filesAPI.ts index 06788c4..5e991f7 100644 --- a/src/api/filesAPI.ts +++ b/src/api/filesAPI.ts @@ -1,8 +1,6 @@ import { QueryFunctionContext } from "react-query"; import axios from "../axiosInterceptor"; import { getUserToken } from "./user"; -import { FileInterface } from "../types/file"; -import { AxiosRequestConfig } from "axios"; interface QueryKeyParams { parent: string; @@ -81,11 +79,10 @@ export const downloadFileAPI = async (fileID: string) => { export const getFileThumbnailAPI = async (thumbnailID: string) => { // TODO: Change this const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`; - const config = { - responseType: "arraybuffer", - }; - const response = await axios.get(url, config); + const response = await axios.get(url, { + responseType: "arraybuffer", + }); const imgFile = new Blob([response.data]); const imgUrl = URL.createObjectURL(imgFile); @@ -94,11 +91,10 @@ export const getFileThumbnailAPI = async (thumbnailID: string) => { }; export const getFileFullThumbnailAPI = async (fileID: string) => { - const config = { - responseType: "arraybuffer", - }; const url = `http://localhost:5173/api/file-service/full-thumbnail/${fileID}`; - const response = await axios.get(url, config); + const response = await axios.get(url, { + responseType: "arraybuffer", + }); return response.data; }; @@ -206,6 +202,7 @@ export const removeLinkAPI = async (fileID: string) => { }; // DELETE + export const deleteFileAPI = async (fileID: string) => { const response = await axios.delete(`/file-service/remove`, { data: { diff --git a/src/axiosInterceptor/index.js b/src/axiosInterceptor/index.ts similarity index 56% rename from src/axiosInterceptor/index.js rename to src/axiosInterceptor/index.ts index 1ad2452..3463bfb 100644 --- a/src/axiosInterceptor/index.js +++ b/src/axiosInterceptor/index.ts @@ -6,7 +6,7 @@ let browserIDCheck = localStorage.getItem("browser-id"); const sleep = () => { return new Promise((resolve, reject) => { setTimeout(() => { - resolve(); + resolve(true); }, 150); }); }; @@ -74,7 +74,7 @@ axiosRetry.interceptors.response.use( // The old request will still be open and it will not make a // Brand new request sometimes, so it will log users out // But adding a sleep function seems to fix this. - return sleep("sleepy boi"); + return sleep(); }) .then((sleepres) => { return axios3(originalRequest); @@ -90,64 +90,4 @@ axiosRetry.interceptors.response.use( } ); -// axios.interceptors.response.use( (response) => { - -// console.log("axios interceptor") -// // Return a successful response back to the calling service -// return response; -// }, (error) => { - -// const originalRequest = error.config; - -// if (originalRequest.ran) { -// console.log("Request already ran"); -// return Promise.reject(error); -// } - -// console.log("axios interceptor failed first request") -// // Return any error which is not due to authentication back to the calling service -// if (error.response.status !== 401) { -// console.log("error does not equal 401"); -// return new Promise((resolve, reject) => { -// reject(error); -// }); -// } - -// // Logout user if token refresh didn't work or user is disabled - -// console.log("error url", error.config.url); - -// if (error.config.url === "/user-service/get-token") { -// console.log("error url equal to refresh token route") -// return new Promise((resolve, reject) => { -// reject(error); -// }); -// } - -// // Try request again with new token - -// // return new Promise((resolve, reject) => { -// // }) - -// return axios.post("/user-service/get-token").then((cookieResponse) => { - -// console.log("cookie status", cookieResponse.status); - -// if (cookieResponse.status === 201) { -// console.log("cookie response", cookieResponse.data); - -// originalRequest.ran = true; -// return axios(originalRequest); - -// } else { -// return Promise.reject(error); -// } -// }) -// // .catch((cookieError) => { -// // console.log("cookieError", cookieError); -// // return Promise.reject(error); -// // }) - -// }); - export default axiosRetry; diff --git a/src/components/AddNewDropdown/index.tsx b/src/components/AddNewDropdown/index.tsx index f6eed52..32f5b6a 100644 --- a/src/components/AddNewDropdown/index.tsx +++ b/src/components/AddNewDropdown/index.tsx @@ -3,12 +3,10 @@ import { createFolderAPI } from "../../api/foldersAPI"; import { useFoldersClient } from "../../hooks/folders"; import { useClickOutOfBounds } from "../../hooks/utils"; import { showCreateFolderPopup } from "../../popups/folder"; -import { useAppDispatch } from "../../hooks/store"; -import { startAddFile } from "../../actions/files"; import { RefObject, useRef } from "react"; -import axiosNonInterceptor from "axios"; -import uuid from "uuid"; import { useUploader } from "../../hooks/files"; +import UploadFileIcon from "../../icons/UploadFileIcon"; +import CreateFolderIcon from "../../icons/CreateFolderIcon"; interface AddNewDropdownProps { closeDropdown: () => void; @@ -20,7 +18,6 @@ const AddNewDropdown: React.FC = (props) => { const { wrapperRef } = useClickOutOfBounds(props.closeDropdown); const uploadRef: RefObject = useRef(null); const { uploadFiles } = useUploader(); - const dispatch = useAppDispatch(); const createFolder = async () => { props.closeDropdown(); @@ -37,7 +34,6 @@ const AddNewDropdown: React.FC = (props) => { const handleUpload = (e: any) => { e.preventDefault(); props.closeDropdown(); - console.log("handle upload"); const files = uploadRef.current?.files; if (!files) return; @@ -45,44 +41,40 @@ const AddNewDropdown: React.FC = (props) => { uploadFiles(files); }; + const triggerFileUpload = () => { + if (uploadRef.current) { + uploadRef.current.click(); + } + }; + return (
-