Added tailwind, react query, removed lots of depends

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"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

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

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 = (
   <Provider store={store}>
-    <AppRouter />
+    <QueryClientProvider client={queryClient}>
+      <AppRouter />
+    </QueryClientProvider>
   </Provider>
 );
 

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) => (
-  <div className={props.parent === "/" ? "file__control--panel" : "file__control--panel folder__view"}>
-    
-    {!props.loading ? 
-      <QuickAccess
-        fileClick={props.fileClick}
-        downloadFile={props.downloadFile}
-      /> : 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"} */}
-    <div className={props.parent === "/" ? "folders__panel" : "folders__panel folders__panel__folder"} style={props.loading ? {display: "none"} : {display:"block"}}>
-      <div class="head__folders">
-        <h2 className="noSelect">{props.folders.length === 0 ? "No Folders" : "Folders"}</h2>
-      </div>
+  return (
+    <div
+      className={
+        props.parent === "/"
+          ? "file__control--panel"
+          : "file__control--panel folder__view"
+      }
+    >
+      {!props.loading ? (
+        <QuickAccess
+          fileClick={props.fileClick}
+          downloadFile={props.downloadFile}
+        />
+      ) : undefined}
 
-      <div className="inner__folders">
-        {props.folders.map((folder) => (
-          <FolderItem
-            {...folder}
-            key={folder._id}
-            itemSelected={folder._id === props.selected}
-            folderClick={props.folderClick}
-            deleteFolder={props.deleteFolder}
-          />
-        ))}
-      </div>
-    </div>
-
-    <div className="file__view noSelect">
-      
-
-      <div class="recent__table--wrap">
-
-
-        {props.parent === "/" ? (
-        <div class="head__recent--files noSelect" style={props.loading ? {display: "none"} : {}}>
-          <h2>{props.search !== "" ? "Files" : "Home Files"}</h2>
-          <div class="view__recent">
-            <ul>
-              <li onClick={props.changeListViewMode}>
-                <a style={props.listView ? {color:"#919eab"} : {color:"#3c85ee"}}>
-                  <i class="fas fa-th-large"></i>
-                </a>
-              </li>
-              <li onClick={props.changeListViewMode} class="active__view">
-                <a style={!props.listView ? {color:"#919eab"} : {color:"#3c85ee"}}>
-                  <i class="fas fa-list"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
+      {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */}
+      <button
+        className="p-2 bg-blue-500 rounded-md text-white"
+        onClick={filesFetchNextPage}
+      >
+        Next page
+      </button>
+      <div
+        className={
+          props.parent === "/"
+            ? "folders__panel"
+            : "folders__panel folders__panel__folder"
+        }
+        style={props.loading ? { display: "none" } : { display: "block" }}
+      >
+        <div class="head__folders">
+          <h2 className="noSelect">
+            {folders?.length === 0 ? "No Folders" : "Folders"}
+          </h2>
         </div>
-      ) : (
-        <div class="head__recent--files noSelect" style={props.loading ? {display: "none"} : {marginTop: "20px"}}>
-            <ParentBar/>
-          <div class="view__recent">
-            <ul>
-              <li>
-                <a style={props.listView ? {color:"#919eab"} : {color:"#3c85ee"}} onClick={props.changeListViewMode}>
-                  <i class="fas fa-th-large"></i>
-                </a>
-              </li>
-              <li class="active__view">
-                <a style={!props.listView ? {color:"#919eab"} : {color:"#3c85ee"}} onClick={props.changeListViewMode}>
-                  <i class="fas fa-list"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
 
-
-      {!props.listView ? 
-      <div className="main__access">
-
-      {props.files.map((file) => (<FileItem
-              {...file}
-              key={file._id}
-              itemSelected={file._id === props.selected}
-              downloadFile={props.downloadFile}
-              removeFile={props.removeFile}
-              fileClick={props.fileClick}
-            />))}
-
-      </div>
-    
-    :
-
-    <table class="recent__table noSelect" style={props.loading ? {display: "none"} : {}}>
-          <tr>
-            <th class="name__row">
-              <select className="sorting__select" onChange={props.onChangeSelect} value={props.sortBy === "alp_desc" || props.sortBy === "alp_asc" ? 'name' : 'date'}>
-                <option value="date">Modified</option>
-                <option value="name">Name</option>
-              </select>
-              <a onClick={props.switchSortBy}>
-                <img src="/assets/sortarrow.svg" alt="sortarrow" style={props.sortBy === "date_desc" || props.sortBy === "alp_desc" ? {transform: "scaleY(-1)"} : {}}/>
-              </a>
-            </th>
-            <th class="location__row">Location</th>
-            <th class="modified__row">Modified</th>
-            <th class="settings__row"></th>
-          </tr>
-
-          {props.files.map((file) => (
-            <FileItem
-              {...file}
-              key={file._id}
-              itemSelected={file._id === props.selected}
-              downloadFile={props.downloadFile}
-              removeFile={props.removeFile}
-              fileClick={props.fileClick}
+        <div className="inner__folders">
+          {folders?.map((folder) => (
+            <FolderItem
+              {...folder}
+              key={folder._id}
+              itemSelected={folder._id === props.selected}
+              folderClick={props.folderClick}
+              deleteFolder={props.deleteFolder}
             />
           ))}
-        </table> 
-        }
-
-        <div className="dataform-loadmore-files" style={props.loadingMoreItems ? {} : {display: "none"}}>
-          <SpinnerImage />
         </div>
-  
-        {/* {props.loading ? 
-        <div className="dataform__spinner__wrapper">
-          <Spinner />
-        </div> : undefined} */}
-        
-        {/* */}
+      </div>
+
+      <div className="file__view noSelect">
+        <div class="recent__table--wrap">
+          {props.parent === "/" ? (
+            <div
+              class="head__recent--files noSelect"
+              style={props.loading ? { display: "none" } : {}}
+            >
+              <h2>{props.search !== "" ? "Files" : "Home Files"}</h2>
+              <div class="view__recent">
+                <ul>
+                  <li onClick={props.changeListViewMode}>
+                    <a
+                      style={
+                        props.listView
+                          ? { color: "#919eab" }
+                          : { color: "#3c85ee" }
+                      }
+                    >
+                      <i class="fas fa-th-large"></i>
+                    </a>
+                  </li>
+                  <li onClick={props.changeListViewMode} class="active__view">
+                    <a
+                      style={
+                        !props.listView
+                          ? { color: "#919eab" }
+                          : { color: "#3c85ee" }
+                      }
+                    >
+                      <i class="fas fa-list"></i>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          ) : (
+            <div
+              class="head__recent--files noSelect"
+              style={
+                props.loading ? { display: "none" } : { marginTop: "20px" }
+              }
+            >
+              <ParentBar />
+              <div class="view__recent">
+                <ul>
+                  <li>
+                    <a
+                      style={
+                        props.listView
+                          ? { color: "#919eab" }
+                          : { color: "#3c85ee" }
+                      }
+                      onClick={props.changeListViewMode}
+                    >
+                      <i class="fas fa-th-large"></i>
+                    </a>
+                  </li>
+                  <li class="active__view">
+                    <a
+                      style={
+                        !props.listView
+                          ? { color: "#919eab" }
+                          : { color: "#3c85ee" }
+                      }
+                      onClick={props.changeListViewMode}
+                    >
+                      <i class="fas fa-list"></i>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          )}
+
+          {!props.listView ? (
+            <div className="main__access">
+              {files?.pages.map((file) => (
+                <FileItem
+                  {...file}
+                  key={file._id}
+                  itemSelected={file._id === props.selected}
+                  downloadFile={props.downloadFile}
+                  removeFile={props.removeFile}
+                  fileClick={props.fileClick}
+                />
+              ))}
+            </div>
+          ) : (
+            <table
+              class="recent__table noSelect"
+              style={props.loading ? { display: "none" } : {}}
+            >
+              <tr>
+                <th class="name__row">
+                  <select
+                    className="sorting__select"
+                    onChange={props.onChangeSelect}
+                    value={
+                      props.sortBy === "alp_desc" || props.sortBy === "alp_asc"
+                        ? "name"
+                        : "date"
+                    }
+                  >
+                    <option value="date">Modified</option>
+                    <option value="name">Name</option>
+                  </select>
+                  <a onClick={props.switchSortBy}>
+                    <img
+                      src="/assets/sortarrow.svg"
+                      alt="sortarrow"
+                      style={
+                        props.sortBy === "date_desc" ||
+                        props.sortBy === "alp_desc"
+                          ? { transform: "scaleY(-1)" }
+                          : {}
+                      }
+                    />
+                  </a>
+                </th>
+                <th class="location__row">Location</th>
+                <th class="modified__row">Modified</th>
+                <th class="settings__row"></th>
+              </tr>
+
+              {files?.pages.map((filePage, index) => (
+                <React.Fragment key={index}>
+                  {filePage.map((file) => (
+                    <FileItem
+                      {...file}
+                      key={file._id}
+                      itemSelected={file._id === props.selected}
+                      downloadFile={props.downloadFile}
+                      removeFile={props.removeFile}
+                      fileClick={props.fileClick}
+                    />
+                  ))}
+                </React.Fragment>
+              ))}
+            </table>
+          )}
+
+          <div
+            className="dataform-loadmore-files"
+            style={props.loadingMoreItems ? {} : { display: "none" }}
+          >
+            <SpinnerImage />
+          </div>
+
+          {/* {props.loading ? 
+      <div className="dataform__spinner__wrapper">
+        <Spinner />
+      </div> : undefined} */}
+
+          {/* */}
+        </div>
       </div>
     </div>
-  </div>
-
-);
+  );
+};
 
 export default DataForm;

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) => (
+  <div>
+    <HomepageSpinner />
 
-    <div>
-
-        <HomepageSpinner />
-
-        <div className="main-wrapper">
-            <Header goHome={props.goHome}/>
-            <div className="main__wrapper--container" >
-
-                <LeftSection goHome={props.goHome}/>
-                <MainSection />           
-                <Uploader />         
-                {props.photoID.length === 0 ? undefined :
-                <PhotoViewer />}
-                
-            </div>
-        </div>
-
-        <UploadOverlay />
-        {/* <ShareModel /> */}
-        <ShareModelWrapper />
-        <MobileContextMenuContainer />
-
+    <div className="main-wrapper">
+      <Header goHome={props.goHome} />
+      <div className="main__wrapper--container">
+        <LeftSection goHome={props.goHome} />
+        <MainSection />
+        <Uploader />
+        {props.photoID.length === 0 ? undefined : <PhotoViewer />}
+      </div>
     </div>
-    
 
-)
-
-export default HomePage
+    <UploadOverlay />
+    {/* <ShareModel /> */}
+    <ShareModelWrapper />
+    <MobileContextMenuContainer />
+  </div>
+);
 
+export default HomePage;

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 (
+    <div>
+      <HomepageSpinner />
+
+      <div className="">
+        <Header goHome={goHome} />
+        <div className="flex space-between mt-20">
+          <LeftSection goHome={goHome} />
+          <MainSection />
+          <Uploader />
+          {/* {photoID.length === 0 ? undefined : <PhotoViewer />} */}
+        </div>
+      </div>
+
+      <UploadOverlay />
+      <ShareModelWrapper />
+      <MobileContextMenuContainer />
+    </div>
+  );
+};
+
+export default Homepage2;

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 (
+    <div>
+      <HomepageSpinner />
+
+      <div className="">
+        <Header goHome={goHome} />
+        <div className="flex space-between mt-20">
+          <LeftSection goHome={goHome} />
+          <MainSection />
+          <Uploader />
+          {/* {photoID.length === 0 ? undefined : <PhotoViewer />} */}
+        </div>
+      </div>
+
+      <UploadOverlay />
+      <ShareModelWrapper />
+      <MobileContextMenuContainer />
+    </div>
+  );
+};
+
+export default Homepage2;

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

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

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={
             <PrivateRoute>
-              <HomePage />
+              <Homepage2 />
             </PrivateRoute>
           }
         />
@@ -38,8 +39,24 @@ const AppRouter = () => {
           path="/download-page/:id/:tempToken"
           element={<DownloadPage />}
         />
-        <Route key={1} path="/folder/:id" element={<HomePage />} />
-        <Route key={1} path="/search/:id" element={<HomePage />} />
+        <Route
+          key={1}
+          path="/folder/:id"
+          element={
+            <PrivateRoute>
+              <Homepage2 />
+            </PrivateRoute>
+          }
+        />
+        <Route
+          key={1}
+          path="/search/:id"
+          element={
+            <PrivateRoute>
+              <Homepage2 />
+            </PrivateRoute>
+          }
+        />
         <Route path="/verify-email/:id" element={<VerifyEmailPage />} />
         <Route path="/reset-password/:id" element={<ResetPasswordPage />} />
         <Route path="/settings" element={<SettingsPage />} />

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

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"
+@import "./components/MobileContextMenu";

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: [],
+};

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"
   ]
 }