From 55142b29f9db7c6091738a2fdc3e27f04c2d0a0e Mon Sep 17 00:00:00 2001 From: subnub Date: Wed, 19 Jun 2024 18:44:42 -0400 Subject: [PATCH] made query into hook, converted more files to typescript --- backend/services/FileService/index.ts | 4 +-- src/actions/auth.js | 2 -- src/api/filesAPI.js | 10 ------- src/api/filesAPI.ts | 40 +++++++++++++++++++++++++++ src/api/foldersAPI.js | 9 ------ src/api/foldersAPI.ts | 24 ++++++++++++++++ src/components/Dataform/DataForm.jsx | 40 +++------------------------ src/components/Homepage/Homepage2.jsx | 36 +----------------------- src/components/LoginPage/index.jsx | 1 - src/hooks/files.js | 31 --------------------- src/hooks/files.ts | 35 +++++++++++++++++++++++ src/hooks/folders.ts | 21 ++++++++++++++ src/routers/PrivateRoute.jsx | 1 - 13 files changed, 127 insertions(+), 127 deletions(-) delete mode 100644 src/api/filesAPI.js create mode 100644 src/api/filesAPI.ts delete mode 100644 src/api/foldersAPI.js create mode 100644 src/api/foldersAPI.ts delete mode 100644 src/hooks/files.js create mode 100644 src/hooks/files.ts create mode 100644 src/hooks/folders.ts diff --git a/backend/services/FileService/index.ts b/backend/services/FileService/index.ts index 360d0b3..450ee75 100644 --- a/backend/services/FileService/index.ts +++ b/backend/services/FileService/index.ts @@ -122,7 +122,7 @@ class MongoFileService { let searchQuery = query.search || ""; const parent = query.parent || "/"; let limit = query.limit || 50; - let sortBy = query.sortby || "DEFAULT"; + let sortBy = query.soryBy || "DEFAULT"; const startAt = query.startAt || undefined; const startAtDate = query.startAtDate || "0"; const startAtName = query.startAtName || ""; @@ -136,7 +136,7 @@ class MongoFileService { const queryObj = createQuery( userID.toString(), parent, - query.sortby, + query.sortBy, startAt, startAtDate, searchQuery, diff --git a/src/actions/auth.js b/src/actions/auth.js index 4b63b62..ea49135 100755 --- a/src/actions/auth.js +++ b/src/actions/auth.js @@ -114,8 +114,6 @@ export const startLoginCheck = (currentRoute) => { env.emailAddress = response.data.email; env.name = response.data.name || ""; - console.log("login checked"); - if (emailVerified) { dispatch(setLoginFailed(false)); dispatch(login(id)); diff --git a/src/api/filesAPI.js b/src/api/filesAPI.js deleted file mode 100644 index b54d031..0000000 --- a/src/api/filesAPI.js +++ /dev/null @@ -1,10 +0,0 @@ -import axios from "../axiosInterceptor"; - -export const getFilesList = async ({ queryKey, pageParam }) => { - console.log("quer", queryKey, pageParam); - const [_key, { parent, search, sortBy, limit }] = queryKey; - const response = await axios.get( - `/file-service/list?parent=${parent}&sortby=${sortBy}&search=${search}&limit=${limit}` - ); - return response.data; -}; diff --git a/src/api/filesAPI.ts b/src/api/filesAPI.ts new file mode 100644 index 0000000..ca8a85d --- /dev/null +++ b/src/api/filesAPI.ts @@ -0,0 +1,40 @@ +import { QueryFunctionContext } from "react-query"; +import axios from "../axiosInterceptor"; + +interface QueryKeyParams { + parent: string; + search?: string; + sortBy?: string; + limit?: number; + startAtDate?: string; + startAtName?: string; + startAt?: boolean; +} + +export const getFilesList = async ({ + queryKey, + pageParam, +}: QueryFunctionContext<[string, QueryKeyParams]>) => { + const [ + _key, + { parent = "/", search = "", sortBy = "date_desc", limit = 50 }, + ] = queryKey; + + const queryParams: QueryKeyParams = { + parent, + search, + sortBy, + limit, + }; + + if (pageParam?.startAtDate && pageParam?.startAtName) { + queryParams.startAtDate = pageParam.startAtDate; + queryParams.startAtName = pageParam.startAtName; + queryParams.startAt = true; + } + + const response = await axios.get(`/file-service/list`, { + params: queryParams, + }); + return response.data; +}; diff --git a/src/api/foldersAPI.js b/src/api/foldersAPI.js deleted file mode 100644 index d81a080..0000000 --- a/src/api/foldersAPI.js +++ /dev/null @@ -1,9 +0,0 @@ -import axios from "../axiosInterceptor"; - -export const getFoldersList = async ({ queryKey }) => { - const [_key, { parent, search, sortBy, limit }] = queryKey; - const response = await axios.get( - `/folder-service/list?parent=${parent}&sortby=${sortBy}&search=${search}&limit=${limit}` - ); - return response.data; -}; diff --git a/src/api/foldersAPI.ts b/src/api/foldersAPI.ts new file mode 100644 index 0000000..e7fc1a9 --- /dev/null +++ b/src/api/foldersAPI.ts @@ -0,0 +1,24 @@ +import { QueryFunctionContext } from "react-query"; +import axios from "../axiosInterceptor"; + +interface QueryKeyParams { + parent: string; + search?: string; + sortBy?: string; + limit?: number; +} + +export const getFoldersList = async ({ + queryKey, +}: QueryFunctionContext<[string, QueryKeyParams]>) => { + const [_key, { parent, search, sortBy, limit }] = queryKey; + const response = await axios.get(`/folder-service/list`, { + params: { + parent, + search, + sortBy, + limit, + }, + }); + return response.data; +}; diff --git a/src/components/Dataform/DataForm.jsx b/src/components/Dataform/DataForm.jsx index 4b284a0..e8a7dce 100644 --- a/src/components/Dataform/DataForm.jsx +++ b/src/components/Dataform/DataForm.jsx @@ -9,45 +9,13 @@ import { useParams } from "react-router-dom"; import { useInfiniteQuery, useQuery } from "react-query"; import { getFilesList } from "../../api/filesAPI"; import { getFoldersList } from "../../api/foldersAPI"; +import { useFiles } from "../../hooks/files"; +import { useFolders } from "../../hooks/folders"; const DataForm = (props) => { const params = useParams(); - const { data: files, fetchNextPage: filesFetchNextPage } = useInfiniteQuery({ - queryKey: [ - "files", - { - parent: params.id || "/", - search: "", - sortBy: undefined, - limit: undefined, - }, - ], - queryFn: getFilesList, - initialPageParam: { - startAtDate: undefined, - startAtName: undefined, - }, - getNextPageParam: (lastPage, pages) => { - console.log("last page", lastPage); - return { - startAtDate: "test", - startAtName: "tes2", - }; - }, - }); - const { data: folders } = useQuery( - [ - "folders", - { - parent: params.id || "/", - search: "", - sortBy: undefined, - limit: undefined, - }, - ], - getFoldersList - ); - console.log(" files", files, folders); + const { data: files, fetchNextPage: filesFetchNextPage } = useFiles(); + const { data: folders } = useFolders(); return (
{ const location = useLocation(); const params = useParams(); const photoID = useSelector((state) => state.photoViewer.id); - useInfiniteQuery({ - queryKey: [ - "files", - { - parent: params.id || "/", - search: "", - sortBy: undefined, - limit: undefined, - }, - ], - queryFn: getFilesList, - initialPageParam: { - startAtDate: undefined, - startAtName: undefined, - }, - getNextPageParam: (lastPage, pages) => { - console.log("last page", lastPage); - return { - startAtDate: "test", - startAtName: "tes2", - }; - }, - }); - useQuery( - [ - "folders", - { - parent: params.id || "/", - search: "", - sortBy: undefined, - limit: undefined, - }, - ], - getFoldersList - ); + useFiles(); const goHome = () => { navigate("/home"); diff --git a/src/components/LoginPage/index.jsx b/src/components/LoginPage/index.jsx index da7cb48..325dbcd 100644 --- a/src/components/LoginPage/index.jsx +++ b/src/components/LoginPage/index.jsx @@ -35,7 +35,6 @@ class LoginPageContainer extends React.Component { const loginSuccessful = await this.props.dispatch(startLoginCheck()); const loginRedirectRoute = this.props.location.state?.from?.pathname || this.props.currentRoute; - console.log("login check", loginRedirectRoute); if (loginSuccessful) { this.props.navigate(loginRedirectRoute); } diff --git a/src/hooks/files.js b/src/hooks/files.js deleted file mode 100644 index 958ac0b..0000000 --- a/src/hooks/files.js +++ /dev/null @@ -1,31 +0,0 @@ -import { useInfiniteQuery } from "react-query"; -import { useParams } from "react-router-dom"; - -export const useFiles = async () => { - const params = useParams(); - const filesReactQuery = useInfiniteQuery({ - queryKey: [ - "files", - { - parent: params.id || "/", - search: "", - sortBy: undefined, - limit: undefined, - }, - ], - queryFn: getFilesList, - initialPageParam: { - startAtDate: undefined, - startAtName: undefined, - }, - getNextPageParam: (lastPage, pages) => { - console.log("last page", lastPage); - return { - startAtDate: "test", - startAtName: "tes2", - }; - }, - }); - - return filesReactQuery; -}; diff --git a/src/hooks/files.ts b/src/hooks/files.ts new file mode 100644 index 0000000..c14f364 --- /dev/null +++ b/src/hooks/files.ts @@ -0,0 +1,35 @@ +import { useInfiniteQuery } from "react-query"; +import { useParams } from "react-router-dom"; +import { getFilesList } from "../api/filesAPI"; + +export const useFiles = () => { + const params = useParams(); + const filesReactQuery = useInfiniteQuery( + [ + "files", + { + parent: params.id || "/", + search: "", + sortBy: undefined, + limit: undefined, + }, + ], + getFilesList, + { + getNextPageParam: (lastPage, pages) => { + const lastElement = lastPage[lastPage.length - 1]; + if (!lastElement) return undefined; + return { + startAtDate: lastElement.uploadDate, + startAtName: lastElement.filename, + }; + }, + } + ); + + const testFunction = () => { + console.log("this is a test function"); + }; + + return { ...filesReactQuery, testFunction }; +}; diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts new file mode 100644 index 0000000..c204caa --- /dev/null +++ b/src/hooks/folders.ts @@ -0,0 +1,21 @@ +import { useQuery } from "react-query"; +import { useParams } from "react-router-dom"; +import { getFoldersList } from "../api/foldersAPI"; + +export const useFolders = () => { + const params = useParams(); + const foldersReactQuery = useQuery( + [ + "folders", + { + parent: params.id || "/", + search: "", + sortBy: undefined, + limit: undefined, + }, + ], + getFoldersList + ); + + return foldersReactQuery; +}; diff --git a/src/routers/PrivateRoute.jsx b/src/routers/PrivateRoute.jsx index 969e820..07ee47a 100644 --- a/src/routers/PrivateRoute.jsx +++ b/src/routers/PrivateRoute.jsx @@ -5,7 +5,6 @@ import { Route, Navigate, useLocation } from "react-router-dom"; const PrivateRoute = ({ children }) => { const isAuthenticated = useSelector((state) => !!state.auth.id); const location = useLocation(); - console.log("auth", isAuthenticated); if (!isAuthenticated) { return ; }