got sort by working, started css fixes for various screen sizes

2024-06-23 08:29:58 -04:00
parent 127760dba0
commit 0f1c0f0bbd
13 changed files with 428 additions and 247 deletions
@@ -121,7 +121,7 @@ class MongoFileService {
    let searchQuery = query.search || "";
    const parent = query.parent || "/";
    let limit = query.limit || 50;
-    let sortBy = query.soryBy || "DEFAULT";
+    let sortBy = query.sortBy || "DEFAULT";
    const startAt = query.startAt || undefined;
    const startAtDate = query.startAtDate || "0";
    const startAtName = query.startAtName || "";
@@ -129,6 +129,7 @@ class MongoFileService {
    const folderSearch = query.folder_search || undefined;
    sortBy = sortBySwitch(sortBy);
    limit = parseInt(limit);
+    console.log("sortBy", sortBy, query.sortBy);

    const s3Enabled = user.s3Enabled ? true : false;

@@ -2,6 +2,7 @@ import FileItem from "../FileItem";
 import FolderItem from "../FolderItem";
 import React from "react";
 import QuickAccess from "../QuickAccess";
+import Folders from "../Folders";
 import ParentBar from "../ParentBar";
 import Spinner from "../Spinner";
 import SpinnerImage from "../SpinnerImage";
@@ -28,12 +29,7 @@ const DataForm = (props) => {
          : "file__control--panel folder__view"
      }
    >
-      {!props.loading ? (
-        <QuickAccess
-          fileClick={props.fileClick}
-          downloadFile={props.downloadFile}
-        />
-      ) : undefined}
+      {!props.loading ? <QuickAccess /> : undefined}

      {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */}
      <button
@@ -48,40 +44,17 @@ const DataForm = (props) => {
      >
        Refresh
      </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 className="inner__folders">
-          {folders?.map((folder) => (
-            <FolderItem
-              folder={folder}
-              key={folder._id}
-              folderClick={props.folderClick}
-            />
-          ))}
-        </div>
-      </div>
+      <Folders />

      <div className="file__view noSelect">
-        <div class="recent__table--wrap">
+        <div className="recent__table--wrap">
          {props.parent === "/" ? (
            <div
-              class="head__recent--files noSelect"
+              className="head__recent--files noSelect"
              style={props.loading ? { display: "none" } : {}}
            >
              <h2>{props.search !== "" ? "Files" : "Home Files"}</h2>
-              <div class="view__recent">
+              <div className="view__recent">
                <ul>
                  <li onClick={props.changeListViewMode}>
                    <a
@@ -91,10 +64,13 @@ const DataForm = (props) => {
                          : { color: "#3c85ee" }
                      }
                    >
-                      <i class="fas fa-th-large"></i>
+                      <i className="fas fa-th-large"></i>
                    </a>
                  </li>
-                  <li onClick={props.changeListViewMode} class="active__view">
+                  <li
+                    onClick={props.changeListViewMode}
+                    className="active__view"
+                  >
                    <a
                      style={
                        !props.listView
@@ -102,7 +78,7 @@ const DataForm = (props) => {
                          : { color: "#3c85ee" }
                      }
                    >
-                      <i class="fas fa-list"></i>
+                      <i className="fas fa-list"></i>
                    </a>
                  </li>
                </ul>
@@ -110,13 +86,13 @@ const DataForm = (props) => {
            </div>
          ) : (
            <div
-              class="head__recent--files noSelect"
+              className="head__recent--files noSelect"
              style={
                props.loading ? { display: "none" } : { marginTop: "20px" }
              }
            >
              <ParentBar />
-              <div class="view__recent">
+              <div className="view__recent">
                <ul>
                  <li>
                    <a
@@ -127,10 +103,10 @@ const DataForm = (props) => {
                      }
                      onClick={props.changeListViewMode}
                    >
-                      <i class="fas fa-th-large"></i>
+                      <i className="fas fa-th-large"></i>
                    </a>
                  </li>
-                  <li class="active__view">
+                  <li className="active__view">
                    <a
                      style={
                        !props.listView
@@ -139,7 +115,7 @@ const DataForm = (props) => {
                      }
                      onClick={props.changeListViewMode}
                    >
-                      <i class="fas fa-list"></i>
+                      <i className="fas fa-list"></i>
                    </a>
                  </li>
                </ul>
@@ -166,52 +142,62 @@ const DataForm = (props) => {
            </div>
          ) : (
            <table
-              class="recent__table noSelect"
+              className="w-full"
              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)" }
-                          : {}
+                <th>
+                  <div className="flex flex-row items-center mb-2 ml-4">
+                    <p className="text-[#212b36] text-sm font-medium">Name</p>
+                    {/* <select
+                      className="sorting__select"
+                      onChange={props.onChangeSelect}
+                      value={
+                        props.sortBy === "alp_desc" ||
+                        props.sortBy === "alp_asc"
+                          ? "name"
+                          : "date"
                      }
-                    />
-                  </a>
+                    >
+                      <option value="date">Modified</option>
+                      <option value="name">Name</option>
+                    </select> */}
+                    {/* <a className="ml-2" onClick={props.switchSortBy}>
+                      <img
+                        className="w-3 h-3"
+                        src="/assets/sortarrow.svg"
+                        alt="sortarrow"
+                        style={
+                          props.sortBy === "date_desc" ||
+                          props.sortBy === "alp_desc"
+                            ? { transform: "scaleY(-1)" }
+                            : {}
+                        }
+                      />
+                    </a> */}
+                  </div>
+                </th>
+                <th className="hidden fileListShowDetails:table-cell">
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Size
+                  </p>
+                </th>
+                <th className="hidden fileListShowDetails:table-cell">
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Modified
+                  </p>
+                </th>
+                <th>
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Actions
+                  </p>
                </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={file}
-                      key={file._id}
-                      itemSelected={file._id === props.selected}
-                      downloadFile={props.downloadFile}
-                      removeFile={props.removeFile}
-                      fileClick={props.fileClick}
-                    />
+                    <FileItem file={file} key={file._id} />
                  ))}
                </React.Fragment>
              ))}
@@ -1,146 +1,152 @@
 import DataForm from "./DataForm";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import React from "react";
-import { enableListView, disableListView, setSortBy } from "../../actions/filter";
+import {
+  enableListView,
+  disableListView,
+  setSortBy,
+} from "../../actions/filter";
 import { startSetFiles, startLoadMoreFiles } from "../../actions/files";
 import { startSetFolders } from "../../actions/folders";
 import { resetItems } from "../../actions/main";

 class DataFormContainer extends React.Component {
+  constructor(props) {
+    super(props);

-    constructor(props) {
+    this.timeout = 0;
+  }

-        super(props);
+  changeListViewMode = () => {
+    if (!this.props.listView) {
+      this.props.dispatch(enableListView());
+    } else {
+      this.props.dispatch(disableListView());
+    }
+  };

-        this.timeout = 0;
+  onScrollEvent = () => {};
+
+  componentDidMount = () => {
+    document.addEventListener("scroll", this.scrollCheck);
+  };
+
+  scrollCheck = (e) => {
+    const heightValue = app.clientHeight - app.clientHeight / 4;
+
+    if (heightValue < window.scrollY) {
+      const date = new Date();
+
+      if (
+        this.props.loadMoreItems &&
+        this.timeout < date.getTime() &&
+        !this.props.loadingMoreItems
+      ) {
+        this.timeout = date.getTime() + 500;
+        this.loadMoreItems();
+      } else {
+      }
+    }
+  };
+
+  loadMoreItems = () => {
+    let limit = window.localStorage.getItem("list-size") || 50;
+    limit = parseInt(limit);
+
+    if (this.props.files.length >= limit) {
+      const parent = this.props.parent;
+      const search = this.props.search;
+      const sortBy = this.props.sortBy;
+      const lastFileDate =
+        this.props.files[this.props.files.length - 1].uploadDate;
+      const lastFileName =
+        this.props.files[this.props.files.length - 1].filename;
+      const lastPageToken =
+        this.props.files[this.props.files.length - 1].pageToken;
+      const isGoogle = this.props.isGoogle;
+
+      this.props.dispatch(
+        startLoadMoreFiles(
+          parent,
+          sortBy,
+          search,
+          lastFileDate,
+          lastFileName,
+          lastPageToken,
+          isGoogle
+        )
+      );
+    }
+  };
+
+  componentDidUpdate = () => {};
+
+  switchSortBy = () => {
+    let sortByString = this.props.sortBy.includes("date")
+      ? this.props.sortBy === "date_desc"
+        ? "date_asc"
+        : "date_desc"
+      : this.props.sortBy === "alp_desc"
+      ? "alp_asc"
+      : "alp_desc";
+
+    this.props.dispatch(setSortBy(sortByString));
+  };
+
+  onChangeSelect = (e) => {
+    const value = e.target.value;
+
+    let sortByString = "";
+
+    if (value === "date") {
+      if (this.props.sortBy.includes("asc")) {
+        sortByString = "date_asc";
+      } else {
+        sortByString = "date_desc";
+      }
+    } else if (value === "name") {
+      if (this.props.sortBy.includes("asc")) {
+        sortByString = "alp_asc";
+      } else {
+        sortByString = "alp_desc";
+      }
    }

-    changeListViewMode = () => {
+    const parent = this.props.parent;
+    const search = this.props.search;

-        if (!this.props.listView) {
-            this.props.dispatch(enableListView())
-        } else {
-            this.props.dispatch(disableListView())
-        }
-        
-    }
+    this.props.dispatch(setSortBy(sortByString));
+    this.props.dispatch(startSetFiles(parent, sortByString, search));
+    this.props.dispatch(startSetFolders(parent, sortByString, search));
+    this.props.dispatch(resetItems());
+  };

-    onScrollEvent = () => {
-    }
-
-
-    componentDidMount = () => {
-
-        document.addEventListener("scroll", this.scrollCheck)
-    }
-
-    scrollCheck = (e) => {
-
-        const heightValue = (app.clientHeight - (app.clientHeight / 4));  
-            
-        if (heightValue < window.scrollY) {
-            
-            const date = new Date();
-
-            if (this.props.loadMoreItems && this.timeout < date.getTime() && !this.props.loadingMoreItems) {
-                this.timeout = date.getTime() + 500;
-                this.loadMoreItems();
-            } else {
-                
-            }
-        }
-    }
-
-    loadMoreItems = () => {
-
-        let limit = window.localStorage.getItem("list-size") || 50
-        limit = parseInt(limit)
-
-        if (this.props.files.length >= limit) {
-
-            const parent = this.props.parent;
-            const search = this.props.search;
-            const sortBy = this.props.sortBy;
-            const lastFileDate = this.props.files[this.props.files.length - 1].uploadDate
-            const lastFileName = this.props.files[this.props.files.length - 1].filename
-            const lastPageToken = this.props.files[this.props.files.length - 1].pageToken
-            const isGoogle = this.props.isGoogle;
-
-            this.props.dispatch(startLoadMoreFiles(parent, sortBy, search, lastFileDate, lastFileName, lastPageToken, isGoogle))  
-        } 
-    }
-
-    componentDidUpdate = () => {
-
-    }
-
-    switchSortBy = () => {
-
-        let sortByString = this.props.sortBy.includes('date') ? 
-        this.props.sortBy === "date_desc" ? 'date_asc' : 'date_desc' : 
-        this.props.sortBy === 'alp_desc' ? 'alp_asc' : 'alp_desc';
-
-        const parent = this.props.parent;
-        const search = this.props.search;
-
-        this.props.dispatch(setSortBy(sortByString))
-        this.props.dispatch(startSetFiles(parent, sortByString, search))
-        this.props.dispatch(startSetFolders(parent, sortByString, search))
-        this.props.dispatch(resetItems())
-    }
-
-    onChangeSelect = (e) => {
-
-        const value = e.target.value;
-
-        let sortByString = ''
-
-        if (value === "date") {
-            if (this.props.sortBy.includes("asc")) {
-                sortByString = 'date_asc';
-            } else {
-                sortByString = 'date_desc';
-            }
-        } else if (value === 'name') {
-            if (this.props.sortBy.includes('asc')) {
-                sortByString = 'alp_asc'
-            } else {
-                sortByString = 'alp_desc'
-            }
-        }
-
-        const parent = this.props.parent;
-        const search = this.props.search;
-
-        this.props.dispatch(setSortBy(sortByString))
-        this.props.dispatch(startSetFiles(parent, sortByString, search))
-        this.props.dispatch(startSetFolders(parent, sortByString, search))
-        this.props.dispatch(resetItems())
-    }
-
-    render() {
-        return <DataForm 
-                {...this.props} 
-                onChangeSelect={this.onChangeSelect} 
-                changeListViewMode={this.changeListViewMode}
-                switchSortBy={this.switchSortBy} 
-                onScrollEvent={this.onScrollEvent}/>
-    }
+  render() {
+    return (
+      <DataForm
+        {...this.props}
+        onChangeSelect={this.onChangeSelect}
+        changeListViewMode={this.changeListViewMode}
+        switchSortBy={this.switchSortBy}
+        onScrollEvent={this.onScrollEvent}
+      />
+    );
+  }
 }

 const mapStateToProp = (state) => ({
-    files: state.files,
-    folders: state.folders,
-    selected: state.selectedItem.selected,
-    resetItems: state.main.resetItems,
-    parent: state.parent.parent,
-    listView: state.filter.listView,
-    sortBy: state.filter.sortBy,
-    search: state.filter.search,
-    isGoogle: state.filter.isGoogle,
-    loadMoreItems: state.main.loadMoreItems,
-    loading: state.main.loading,
-    loadingMoreItems: state.main.loadingMoreItems
-})
+  files: state.files,
+  folders: state.folders,
+  selected: state.selectedItem.selected,
+  resetItems: state.main.resetItems,
+  parent: state.parent.parent,
+  listView: state.filter.listView,
+  sortBy: state.filter.sortBy,
+  search: state.filter.search,
+  isGoogle: state.filter.isGoogle,
+  loadMoreItems: state.main.loadMoreItems,
+  loading: state.main.loading,
+  loadingMoreItems: state.main.loadingMoreItems,
+});

-export default connect(mapStateToProp)(DataFormContainer);
+export default connect(mapStateToProp)(DataFormContainer);
@@ -10,6 +10,7 @@ import { useThumbnail } from "../../hooks/files";
 import { getFileColor, getFileExtension } from "../../utils/files";
 import { startSetSelectedItem } from "../../actions/selectedItem";
 import { setPopupFile } from "../../actions/popupFile";
+import bytes from "bytes";

 const FileItem = (props) => {
  const { file } = props;
@@ -65,7 +66,12 @@ const FileItem = (props) => {
  if (listView) {
    return (
      <tr
-        className={!elementSelected ? "" : "active__recent"}
+        className={classNames(
+          "text-[14px] font-normal border-y",
+          !elementSelected
+            ? "text-[#212b36] hover:bg-[#f6f5fd]"
+            : "bg-[#3c85ee] animate text-white"
+        )}
        onClick={fileClick}
        onContextMenu={onContextMenu}
        onTouchStart={onTouchStart}
@@ -73,32 +79,34 @@ const FileItem = (props) => {
        onTouchEnd={onTouchEnd}
      >
        {/* <ContextMenu parent={props.metadata.parent} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/> */}
-        <td class="name__row">
-          <div class="inner__name--row">
-            <span class="extension__wrap noSelect">
+        <td className="p-5">
+          <div className="flex items-center fileTextXL:w-[600px] w-[100px] xxs:w-[200px] xs:w-[300px] fileTextXSM:w-[500px] fileTextLG:w-[500px] fileTextMD:w-[300px] mobileMode:w-[200px]">
+            <span className="inline-flex items-center mr-[15px] max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
              <div
-                className="no-extension__wrapper"
+                className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
                style={{ background: imageColor }}
              >
-                <span className="no-extension__title">{fileExtension}</span>
+                <span className="font-semibold text-[9.5px] text-white">
+                  {fileExtension}
+                </span>
              </div>
            </span>
-            <p className="name__row-filename noSelect">{props.file.filename}</p>
+            <p className="m-0 max-h-[30px] overflow-hidden whitespace-nowrap text-ellipsis block capitalize">
+              {props.file.filename}
+            </p>
          </div>
        </td>
-        <td class="location__row noSelect">
-          {props.file.metadata.drive
-            ? "Google Drive"
-            : props.file.metadata.personalFile
-            ? "Amazon S3"
-            : "myDrive"}
+        <td className="p-5 hidden fileListShowDetails:table-cell">
+          <p className="text-center">{bytes(props.file.length)}</p>
        </td>
-        <td class="modified__row noSelect">
-          {moment(props.uploadDate).format("L")}
+        <td className="p-5 hidden fileListShowDetails:table-cell">
+          <p className="text-center">
+            {moment(props.file.uploadDate).format("L")}
+          </p>
        </td>
-        <td class="settings__row noSelect">
-          <div class="settings__wrap">
-            <div>
+        <td>
+          <div className="flex justify-center items-center">
+            <div onClick={clickStopPropagation}>
              <ContextMenu
                gridMode={false}
                quickItemMode={false}
@@ -109,7 +117,22 @@ const FileItem = (props) => {
            </div>
            {/* <ContextMenu parent={props.metadata.parent} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/> */}
            <a onClick={onContextMenu}>
-              <i class="fas fa-ellipsis-h"></i>
+              <svg
+                class="w-4 h-4 text-[#919eab]"
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="fas"
+                data-icon="ellipsis-h"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+                data-fa-i2svg=""
+              >
+                <path
+                  fill="currentColor"
+                  d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"
+                ></path>
+              </svg>
            </a>
          </div>
        </td>
@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { startSetSelectedItem } from "../../actions/selectedItem";
 import mobilecheck from "../../utils/mobileCheck";
+import moment from "moment";

 const FolderItem = (props) => {
  const { folder } = props;
@@ -99,6 +100,14 @@ const FolderItem = (props) => {
      >
        <p>{props.folder.name}</p>
      </div>
+      <p
+        className={classNames(
+          "m-0 mt-2 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate",
+          elementSelected ? "text-white" : "text-[#637381]"
+        )}
+      >
+        Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")}
+      </p>
    </div>
  );
 };
@@ -0,0 +1,123 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useFolders } from "../../hooks/folders";
+import { setSortBy } from "../../actions/filter";
+import FolderItem from "../FolderItem";
+
+const Folder = () => {
+  const { data: folders } = useFolders();
+  const sortBy = useSelector((state) => state.filter.sortBy);
+  const parent = useSelector((state) => state.parent.parent);
+  const dispatch = useDispatch();
+  console.log("sortBy", sortBy);
+
+  const switchOrderSortBy = () => {
+    let newSortBy = "";
+    switch (sortBy) {
+      case "date_asc": {
+        newSortBy = "date_desc";
+        break;
+      }
+      case "date_desc": {
+        newSortBy = "date_asc";
+        break;
+      }
+      case "alp_asc": {
+        newSortBy = "alp_desc";
+        break;
+      }
+      case "alp_desc": {
+        newSortBy = "alp_asc";
+        break;
+      }
+      default: {
+        newSortBy = "date_desc";
+        break;
+      }
+    }
+    console.log("new sortBy", newSortBy);
+
+    dispatch(setSortBy(newSortBy));
+  };
+
+  const switchTypeOrderBy = (e) => {
+    const value = e.target.value;
+
+    let newSortBy = "date_desc";
+
+    if (value === "date") {
+      if (sortBy.includes("asc")) {
+        newSortBy = "date_asc";
+      } else {
+        newSortBy = "date_desc";
+      }
+    } else if (value === "name") {
+      if (sortBy.includes("asc")) {
+        newSortBy = "alp_asc";
+      } else {
+        newSortBy = "alp_desc";
+      }
+    }
+
+    dispatch(setSortBy(newSortBy));
+  };
+
+  return (
+    <div
+      className={
+        parent === "/"
+          ? "folders__panel"
+          : "folders__panel folders__panel__folder"
+      }
+      //   style={props.loading ? { display: "none" } : { display: "block" }}
+    >
+      <div className="flex flex-row justify-between text-[#212b36]">
+        <h2 className="m-0 mb-[20px] text-[22px] font-medium">
+          {folders?.length === 0 ? "No Folders" : "Folders"}
+        </h2>
+        <div className="flex flex-row items-center">
+          <a className="mr-2" onClick={switchOrderSortBy}>
+            <svg
+              className="h-3 w-3 cursor-pointer"
+              width="6"
+              height="10"
+              viewBox="0 0 6 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              style={
+                sortBy === "date_desc" || sortBy === "alp_desc"
+                  ? { transform: "scaleY(-1)" }
+                  : {}
+              }
+            >
+              <g id="upload">
+                <path
+                  id="Path"
+                  d="M5.58035 2.51616L3.20339 0.139199C3.01776 -0.0463997 2.71681 -0.0463997 2.53119 0.139199L0.154195 2.51616C-0.0282007 2.70502 -0.0229639 3.00597 0.165894 3.18836C0.350128 3.3663 0.642189 3.3663 0.826423 3.18836L2.39191 1.62288V9.50781C2.39191 9.77037 2.60475 9.98321 2.86731 9.98321C3.12988 9.98321 3.34272 9.77037 3.34272 9.50781V1.6229L4.90821 3.18839C5.09706 3.37079 5.39801 3.36555 5.58041 3.17669C5.75829 2.99246 5.75829 2.7004 5.58035 2.51616Z"
+                  fill="currentColor"
+                />
+              </g>
+            </svg>
+          </a>
+          <select
+            className=" text-sm font-medium"
+            onChange={switchTypeOrderBy}
+            value={
+              sortBy === "alp_desc" || sortBy === "alp_asc" ? "name" : "date"
+            }
+          >
+            <option value="date">Modified</option>
+            <option value="name">Name</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="inner__folders">
+        {folders?.map((folder) => (
+          <FolderItem folder={folder} key={folder._id} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Folder;
@@ -69,7 +69,6 @@ class HomePageContainer extends React.Component {
  };

  loginCheck = () => {
-    console.log("props", this.props);
    const pathname = this.props.location.pathname;

    if (this.props.isAuthenticated) {
@@ -14,7 +14,7 @@ class LeftSection extends React.Component {
  render() {
    return (
      <div
-        className="menu__block p-6"
+        className="menu__block p-6 hidden mobileMode:block"
        ref={this.props.leftSectionRef}
        style={
          this.props.leftSectionMode === ""
@@ -2,6 +2,7 @@ import bytes from "bytes";
 import moment from "moment";
 import React from "react";
 import ContextMenu from "../ContextMenu";
+import classNames from "classnames";

 class RightSection extends React.Component {
  constructor(props) {
@@ -20,21 +21,22 @@ class RightSection extends React.Component {
            ? { right: "0px" }
            : { right: "-260px" }
        }
-        class={
+        className={classNames(
+          "!hidden mobileMode:!flex",
          this.props.selectedItem.name === ""
            ? "file__details empty__details"
            : "file__details"
-        }
+        )}
      >
        {this.props.selectedItem.name === "" ? (
-          <div class="file__details--inner">
+          <div className="file__details--inner">
            <span>
              <img src="/assets/filedetailsicon.svg" alt="filedetailsicon" />
            </span>
            <p>Select a file or folder to view it’s details</p>
          </div>
        ) : (
-          <div class="file__info--wrap">
+          <div className="file__info--wrap">
            <img
              className={
                this.props.selected === ""
@@ -44,14 +46,14 @@ class RightSection extends React.Component {
              src="/images/close_icon.png"
              onClick={this.props.resetSelected}
            />
-            <div class="file__type">
+            <div className="file__type">
              <img src="/assets/typedetailed1.svg" alt="typedetailed1" />
            </div>
-            <div class="file__name">
+            <div className="file__name">
              <p>{this.props.selectedItem.name}</p>
            </div>
-            <div class="file__information">
-              <div class="elem__file--info">
+            <div className="file__information">
+              <div className="elem__file--info">
                <span>Type</span>
                <span>
                  {this.props.selectedItem.size
@@ -60,7 +62,7 @@ class RightSection extends React.Component {
                </span>
              </div>
              <div
-                class="elem__file--info"
+                className="elem__file--info"
                style={
                  !this.props.selectedItem.size
                    ? { display: "none" }
@@ -70,11 +72,11 @@ class RightSection extends React.Component {
                <span>Size</span>
                <span>{bytes(this.props.selectedItem.size)}</span>
              </div>
-              <div class="elem__file--info">
+              <div className="elem__file--info">
                <span>Created</span>
                <span>{moment(this.props.selectedItem.date).format("L")}</span>
              </div>
-              <div class="elem__file--info">
+              <div className="elem__file--info">
                <span>Location</span>
                <span>
                  {this.props.selectedItem.drive
@@ -85,7 +87,7 @@ class RightSection extends React.Component {
                </span>
              </div>
              <div
-                class="elem__file--info"
+                className="elem__file--info"
                style={
                  !this.props.selectedItem.size
                    ? { display: "none" }
@@ -98,13 +100,13 @@ class RightSection extends React.Component {
                </span>
              </div>
            </div>
-            <div class="file__control">
+            <div className="file__control">
              <a onClick={this.props.openItem}>
                {this.props.selectedItem.file ? "Open File" : "Open Folder"}
              </a>
-              <div class="file__settings">
+              <div className="file__settings">
                <a onClick={this.props.selectContext}>
-                  <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
+                  <i className="fas fa-ellipsis-h" aria-hidden="true"></i>
                </a>
              </div>
            </div>
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";

 export const useContextMenu = () => {
+  // 215 X 240
  const [contextData, setContextData] = useState({
    selected: false,
    X: 0,
@@ -11,11 +12,27 @@ export const useContextMenu = () => {
  const onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e) e.stopPropagation();
    if (e) e.preventDefault();
+
+    const contextWidth = 245;
+    const contextHeight = 260;
+
+    const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
+    let X = e.clientX;
+    let Y = e.clientY;
+
+    if (X + contextWidth > windowWidth) {
+      X = windowWidth - contextWidth;
+    }
+
+    if (Y + contextHeight > windowHeight) {
+      Y = windowHeight - contextHeight;
+    }
+
    setContextData({
      ...contextData,
      selected: true,
-      X: e.clientX,
-      Y: e.clientY,
+      X,
+      Y,
    });
  };

@@ -6,16 +6,19 @@ import {
  getQuickFilesList,
 } from "../api/filesAPI";
 import { useCallback, useEffect, useState } from "react";
+import { useSelector } from "react-redux";

 export const useFiles = () => {
  const params = useParams();
+  // TODO: Remove any
+  const sortBy = useSelector((state: any) => state.filter.sortBy);
  const filesReactQuery = useInfiniteQuery(
    [
      "files",
      {
        parent: params.id || "/",
        search: "",
-        sortBy: undefined,
+        sortBy: sortBy,
        limit: undefined,
      },
    ],
@@ -1157,8 +1157,6 @@
 }

 .name__row {
-  width: 100%;
-
  @media (max-width: 767px) {
    width: 46%;
  }
@@ -12,6 +12,20 @@ module.exports = {
      quickAccessTwo: "1210px",
      quickAccessThree: "1420px",
      quickAccessFour: "1600px",
+      xxs: "360px",
+      xs: "480px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      xxl: "1536px",
+      fileTextXL: "1600px",
+      fileTextLG: "1400px",
+      fileTextMD: "1200px",
+      fileTextSM: "1000px",
+      fileTextXSM: "900px",
+      fileListShowDetails: "680px",
+      mobileMode: "1100px",
    },
  },
  plugins: [],