made query into hook, converted more files to typescript

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,

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));

src/api/filesAPI.js

@@ -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;
-};

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;
+};

src/api/foldersAPI.js

@@ -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;
-};

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;
+};

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 (
     <div

src/components/Homepage/Homepage2.jsx

@@ -20,41 +20,7 @@ const Homepage2 = () => {
   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");

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);
     }

src/hooks/files.js

@@ -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;
-};

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 };
+};

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;
+};

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 <Navigate to="/" state={{ from: location }} />;
   }