diff --git a/package.json b/package.json index f9e8588..d686d56 100755 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@types/uuid": "^7.0.2", "@types/validator": "^13.0.0", "@vitejs/plugin-react": "^4.3.0", + "autoprefixer": "^10.4.19", "aws-sdk": "^2.657.0", "axios": "^1.7.2", "babel-polyfill": "^6.26.0", @@ -84,58 +85,48 @@ "helmet": "^3.21.2", "history": "^4.10.1", "jsonwebtoken": "^9.0.2", - "mini-css-extract-plugin": "^0.8.2", "moment": "^2.24.0", "mongodb": "^6.7.0", "mongoose": "^8.4.1", "normalize.css": "^8.0.1", "password-prompt": "^1.1.2", + "postcss": "^8.4.38", "progress-stream": "^2.0.0", "prompts": "^2.3.1", "raf": "^3.4.1", "react": "^18.3.1", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.3.1", + "react-query": "^3.39.3", "react-redux": "^9.1.2", "react-router-dom": "^6.23.1", "redux": "^5.0.1", "regenerator-runtime": "^0.13.3", - "request": "^2.88.2", "sharp": "^0.33.4", "stream-skip": "^1.0.3", "supertest-session": "^4.1.0", - "sweetalert2": "^11.11.1", + "sweetalert2": "^11.6.13", "temp": "^0.9.1", "typescript": "^5.4.5", "uuid": "^3.4.0", "validator": "^13.12.0", - "vite": "^5.2.13", - "webpack": "^4.41.6" + "vite": "^5.2.13" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.20.0", "@typescript-eslint/parser": "^2.20.0", - "babel-loader": "^8.0.6", - "compression-webpack-plugin": "^5.0.0", "concurrently": "^8.2.2", "cross-env": "^6.0.3", - "css-loader": "^3.4.2", "dart-sass": "^1.25.0", "env-cmd": "^10.1.0", "eslint": "^6.8.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-react": "^7.18.3", "jest": "^29.7.0", - "json-loader": "^0.5.7", - "live-server": "^1.2.1", "nodemon": "^3.1.3", "sass": "^1.77.4", - "sass-loader": "^8.0.2", - "style-loader": "^1.1.3", "superagent-binary-parser": "^1.0.1", "supertest": "^6.0.1", - "webpack-bundle-analyzer": "^3.6.0", - "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3" + "tailwindcss": "^3.4.4" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/api/filesAPI.js b/src/api/filesAPI.js new file mode 100644 index 0000000..b54d031 --- /dev/null +++ b/src/api/filesAPI.js @@ -0,0 +1,10 @@ +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/foldersAPI.js b/src/api/foldersAPI.js new file mode 100644 index 0000000..d81a080 --- /dev/null +++ b/src/api/foldersAPI.js @@ -0,0 +1,9 @@ +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/app.js b/src/app.js index 851cd21..9036fbd 100755 --- a/src/app.js +++ b/src/app.js @@ -9,14 +9,18 @@ import "core-js/stable"; import "regenerator-runtime/runtime"; import "react-circular-progressbar/dist/styles.css"; import { AuthProvider } from "./providers/AuthProvider"; +import { QueryClient, QueryClientProvider } from "react-query"; // import '../node_modules/@fortawesome/fontawesome-free/css/all.css'; // import '../node_modules/@fortawesome/fontawesome-free/js/all.js'; const store = configStore(); +const queryClient = new QueryClient(); const jsxWrapper = ( - + + + ); diff --git a/src/components/Dataform/DataForm.js b/src/components/Dataform/DataForm.js index ab159ec..5d85fdc 100644 --- a/src/components/Dataform/DataForm.js +++ b/src/components/Dataform/DataForm.js @@ -5,140 +5,257 @@ import QuickAccess from "../QuickAccess"; import ParentBar from "../ParentBar"; import Spinner from "../Spinner"; import SpinnerImage from "../SpinnerImage"; +import { useParams } from "react-router-dom"; +import { useInfiniteQuery, useQuery } from "react-query"; +import { getFilesList } from "../../api/filesAPI"; +import { getFoldersList } from "../../api/foldersAPI"; -const DataForm = (props) => ( -
- - {!props.loading ? - : undefined - } +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); - {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */} -
-
-

{props.folders.length === 0 ? "No Folders" : "Folders"}

-
+ return ( +
+ {!props.loading ? ( + + ) : undefined} -
- {props.folders.map((folder) => ( - - ))} -
-
- -
- - -
- - - {props.parent === "/" ? ( -
-

{props.search !== "" ? "Files" : "Home Files"}

-
- -
+ {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */} + +
+
+

+ {folders?.length === 0 ? "No Folders" : "Folders"} +

- ) : ( -
- -
- -
-
- )} - - {!props.listView ? -
- - {props.files.map((file) => ())} - -
- - : - - - - - - - - - - {props.files.map((file) => ( - + {folders?.map((folder) => ( + ))} -
- - - sortarrow - - LocationModified
- } - -
-
- - {/* {props.loading ? -
- -
: undefined} */} - - {/* */} +
+ +
+
+ {props.parent === "/" ? ( +
+

{props.search !== "" ? "Files" : "Home Files"}

+
+ +
+
+ ) : ( +
+ +
+ +
+
+ )} + + {!props.listView ? ( +
+ {files?.pages.map((file) => ( + + ))} +
+ ) : ( + + + + + + + + + {files?.pages.map((filePage, index) => ( + + {filePage.map((file) => ( + + ))} + + ))} +
+ + + sortarrow + + LocationModified
+ )} + +
+ +
+ + {/* {props.loading ? +
+ +
: undefined} */} + + {/* */} +
-
- -); + ); +}; export default DataForm; diff --git a/src/components/Homepage/HomePage.js b/src/components/Homepage/HomePage.js index 06b9111..bb4c2eb 100644 --- a/src/components/Homepage/HomePage.js +++ b/src/components/Homepage/HomePage.js @@ -1,9 +1,9 @@ import Header from ".././Header"; -import LeftSection from ".././LeftSection" +import LeftSection from ".././LeftSection"; import MainSection from ".././MainSection"; import Uploader from ".././Uploader"; import React from "react"; -import PhotoViewer from "../PhotoViewer" +import PhotoViewer from "../PhotoViewer"; import ShareModel from "../ShareModel"; import UploadOverlay from "../UploadOverlay"; import HomepageSpinner from "../HomepageSpinner"; @@ -11,33 +11,24 @@ import MobileContextMenuContainer from "../MobileContextMenu"; import ShareModelWrapper from "../ShareModelWrapper"; const HomePage = (props) => ( +
+ -
- - - -
-
-
- - - - - {props.photoID.length === 0 ? undefined : - } - -
-
- - - {/* */} - - - +
+
+
+ + + + {props.photoID.length === 0 ? undefined : } +
- -) - -export default HomePage + + {/* */} + + +
+); +export default HomePage; diff --git a/src/components/Homepage/Homepage2.js b/src/components/Homepage/Homepage2.js new file mode 100644 index 0000000..8557f32 --- /dev/null +++ b/src/components/Homepage/Homepage2.js @@ -0,0 +1,84 @@ +import Header from "../Header"; +import LeftSection from "../LeftSection"; +import MainSection from "../MainSection"; +import Uploader from "../Uploader"; +import React from "react"; +import PhotoViewer from "../PhotoViewer"; +import UploadOverlay from "../UploadOverlay"; +import HomepageSpinner from "../HomepageSpinner"; +import MobileContextMenuContainer from "../MobileContextMenu"; +import ShareModelWrapper from "../ShareModelWrapper"; +import { useLocation, useNavigate, useParams } from "react-router-dom"; +import { useSelector } from "react-redux"; +import { useInfiniteQuery, useQuery } from "react-query"; +import { getFilesList } from "../../api/filesAPI"; +import { getFoldersList } from "../../api/foldersAPI"; +import { useFiles } from "../../hooks/files"; + +const Homepage2 = () => { + const navigate = useNavigate(); + 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 + ); + + const goHome = () => { + navigate("/home"); + }; + + return ( +
+ + +
+
+
+ + + + {/* {photoID.length === 0 ? undefined : } */} +
+
+ + + + +
+ ); +}; + +export default Homepage2; diff --git a/src/components/Homepage/Homepage2.tsxk b/src/components/Homepage/Homepage2.tsxk new file mode 100644 index 0000000..8557f32 --- /dev/null +++ b/src/components/Homepage/Homepage2.tsxk @@ -0,0 +1,84 @@ +import Header from "../Header"; +import LeftSection from "../LeftSection"; +import MainSection from "../MainSection"; +import Uploader from "../Uploader"; +import React from "react"; +import PhotoViewer from "../PhotoViewer"; +import UploadOverlay from "../UploadOverlay"; +import HomepageSpinner from "../HomepageSpinner"; +import MobileContextMenuContainer from "../MobileContextMenu"; +import ShareModelWrapper from "../ShareModelWrapper"; +import { useLocation, useNavigate, useParams } from "react-router-dom"; +import { useSelector } from "react-redux"; +import { useInfiniteQuery, useQuery } from "react-query"; +import { getFilesList } from "../../api/filesAPI"; +import { getFoldersList } from "../../api/foldersAPI"; +import { useFiles } from "../../hooks/files"; + +const Homepage2 = () => { + const navigate = useNavigate(); + 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 + ); + + const goHome = () => { + navigate("/home"); + }; + + return ( +
+ + +
+
+
+ + + + {/* {photoID.length === 0 ? undefined : } */} +
+
+ + + + +
+ ); +}; + +export default Homepage2; diff --git a/src/components/LoginPage/index.js b/src/components/LoginPage/index.js index a3d008b..da7cb48 100644 --- a/src/components/LoginPage/index.js +++ b/src/components/LoginPage/index.js @@ -33,9 +33,11 @@ class LoginPageContainer extends React.Component { loginWithToken = async () => { const loginSuccessful = await this.props.dispatch(startLoginCheck()); - console.log("login check"); + const loginRedirectRoute = + this.props.location.state?.from?.pathname || this.props.currentRoute; + console.log("login check", loginRedirectRoute); if (loginSuccessful) { - this.props.navigate(this.props.currentRoute); + this.props.navigate(loginRedirectRoute); } }; diff --git a/src/hooks/files.js b/src/hooks/files.js new file mode 100644 index 0000000..958ac0b --- /dev/null +++ b/src/hooks/files.js @@ -0,0 +1,31 @@ +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/routers/AppRouter.js b/src/routers/AppRouter.js index 99db7a7..8fbf456 100755 --- a/src/routers/AppRouter.js +++ b/src/routers/AppRouter.js @@ -17,6 +17,7 @@ import ResetPasswordPage from "../components/ResetPasswordPage"; import GoogleAccountPage from "../components/GoogleAccountPage"; import AddStoragePage from "../components/AddStoragePage"; import SettingsPage from "../components/SettingsPage"; +import Homepage2 from "../components/Homepage/Homepage2"; // export const history = createHistory(); @@ -30,7 +31,7 @@ const AppRouter = () => { path="/home" element={ - + } /> @@ -38,8 +39,24 @@ const AppRouter = () => { path="/download-page/:id/:tempToken" element={} /> - } /> - } /> + + + + } + /> + + + + } + /> } /> } /> } /> diff --git a/src/routers/PrivateRoute.js b/src/routers/PrivateRoute.js index aea95f7..969e820 100644 --- a/src/routers/PrivateRoute.js +++ b/src/routers/PrivateRoute.js @@ -1,12 +1,13 @@ import React from "react"; import { connect, useSelector } from "react-redux"; -import { Route, Navigate } from "react-router-dom"; +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 ; + return ; } return children; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index df1e864..2cc0af4 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + @import "./base/settings"; @import "./base/base"; @import "./components/content-container"; @@ -35,4 +39,4 @@ @import "./components/UploadSwitcher"; @import "./components/main.scss"; @import "./components/settings.scss"; -@import "./components/MobileContextMenu" \ No newline at end of file +@import "./components/MobileContextMenu"; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..5733b61 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + "./public/index.html", + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/tsconfig.json b/tsconfig.json index cb0ed3b..690a838 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -78,6 +78,8 @@ "webUI.config.js", "webUISetup", "webUISetup.config.js", - "vite.config.js" + "vite.config.js", + "tailwind.config.js", + "postcss.config.js" ] }