oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed react files to jsx instead and added typescript support to the FE

Browse Source
This commit is contained in:
subnub
2024-06-19 16:00:39 -04:00
parent 40473eb0f2
commit 49e6bab79c
98 changed files with 1099 additions and 884 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/tsconfig.json
+85
View File
@@ -0,0 +1,85 @@
{
"compilerOptions": {
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "CommonJS" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
// "lib": [], /* Specify library files to be included in the compilation. */
"allowJs": true /* Allow javascript files to be compiled. */,
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "../dist" /* Redirect output structure to the directory. */,
"rootDir": "./" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": [
"./node_modules/@types"
] /* List of folders to include type definitions from. */,
"types": [
"node"
] /* Type declaration files to be included in compilation. */,
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"exclude": [
"serverUtils",
"src",
"tests",
"key",
"public",
"node_modules",
"webpack.config.js",
"dist",
"webUI",
"webUI.config.js",
"webUISetup",
"webUISetup.config.js",
"vite.config.js",
"tailwind.config.js",
"postcss.config.js"
]
}
index.html
+1 -1
View File
@@ -19,6 +19,6 @@
<body>
<div id="app"></div>
<!-- <script src="/socket.io/socket.io.js"></script> -->
<script type="module" src="/src/app.js"></script>
<script type="module" src="/src/app.tsx"></script>
</body>
</html>
package.json
+3 -2
View File
@@ -33,8 +33,7 @@
"remove-tokens:dev": "NODE_ENV=development node serverUtils/removeTokens.js",
"vite-test": "vite",
"dev-test": "concurrently \"vite\" \"nodemon server.js\"",
"watch:backend": "tsc -w",
"dev-hot": "concurrently \"vite\" \"tsc -w\" \"npm run dev:backend\"",
"dev-hot": "concurrently \"vite\" \"tsc -w -p ./backend/tsconfig.json\" \"npm run dev:backend\"",
"dev:backend": "nodemon dist/server/serverStart.js"
},
"dependencies": {
@@ -57,6 +56,8 @@
"@types/helmet": "0.0.45",
"@types/jsonwebtoken": "^8.3.9",
"@types/node": "^20.14.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/request": "^2.48.5",
"@types/request-ip": "0.0.35",
"@types/sharp": "^0.25.0",
src/app.js → src/app.tsx
-2
View File
@@ -1,4 +1,3 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import configStore from "./store/configureStore";
@@ -8,7 +7,6 @@ import "./styles/styles.scss";
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';
src/components/AddStorageItem/AddStorageItem.js → src/components/AddStorageItem/AddStorageItem.jsx
View File
src/components/AddStorageItem/index.js → src/components/AddStorageItem/index.jsx
View File
src/components/AddStoragePage/AddStoragePage.js → src/components/AddStoragePage/AddStoragePage.jsx
View File
src/components/AddStoragePage/index.js → src/components/AddStoragePage/index.jsx
View File
src/components/Dataform/DataForm.js → src/components/Dataform/DataForm.jsx
+2 -2
View File
@@ -1,5 +1,5 @@
import FileItem from ".././FileItem";
import FolderItem from ".././FolderItem";
import FileItem from "../FileItem";
import FolderItem from "../FolderItem";
import React from "react";
import QuickAccess from "../QuickAccess";
import ParentBar from "../ParentBar";
src/components/Dataform/index.js → src/components/Dataform/index.jsx
View File
src/components/DownloadPage/DownloadPage.js
-35
View File
@@ -1,35 +0,0 @@
import Spinner from ".././SpinnerLogin";
import React from "react";
const DownloadPage = ({download,state}) => {
if (state.size === "" && !state.error) {
return <div className="downloadpage__box">
<Spinner />
</div>
}
return (
<div className="downloadpage">
{!state.error ?
(<div className="downloadpage__box">
<p className="downloadpage__box__title">{state.title}</p>
<p className="downloadpage__box__subtitle">Type: {state.type}</p>
<p className="downloadpage__box__subtitle">Size: {state.size}</p>
<button className="button popup-window__button" onClick={download}>Download</button>
</div>)
:
<div className="downloadpage__box">
<p>Unauthorized/Not Found Download</p>
</div>
}
</div>)
}
export default DownloadPage;
src/components/DownloadPage/DownloadPage.jsx
+33
View File
@@ -0,0 +1,33 @@
import Spinner from "../SpinnerLogin";
import React from "react";
const DownloadPage = ({ download, state }) => {
if (state.size === "" && !state.error) {
return (
<div className="downloadpage__box">
<Spinner />
</div>
);
}
return (
<div className="downloadpage">
{!state.error ? (
<div className="downloadpage__box">
<p className="downloadpage__box__title">{state.title}</p>
<p className="downloadpage__box__subtitle">Type: {state.type}</p>
<p className="downloadpage__box__subtitle">Size: {state.size}</p>
<button className="button popup-window__button" onClick={download}>
Download
</button>
</div>
) : (
<div className="downloadpage__box">
<p>Unauthorized/Not Found Download</p>
</div>
)}
</div>
);
};
export default DownloadPage;
src/components/DownloadPage/index.js → src/components/DownloadPage/index.jsx
View File
src/components/FileItem/FileItem.js → src/components/FileItem/FileItem.jsx
View File
src/components/FileItem/index.js → src/components/FileItem/index.jsx
View File
src/components/FolderItem/FolderItem.js → src/components/FolderItem/FolderItem.jsx
View File
src/components/FolderItem/index.js → src/components/FolderItem/index.jsx
View File
src/components/FolderTree/FolderTree.js
-23
View File
@@ -1,23 +0,0 @@
import React from "react";
import env from "../../enviroment/envFrontEnd";
import FolderTreeStorage from ".././FolderTreeStorage"
const FolderTree = (props) => (
<div className="folder-tree__main">
<div className={props.state.showFolderTreeScrollBars ? "folder-tree__box" : "folder-tree__box-hide-scroll-bars"}>
{(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
{env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}
{env.googleDriveEnabled ? <FolderTreeStorage type={"drive"}/> : undefined}
</div>
</div>
// <div class="folder__structure" style={{overflow:"unset", maxHeight:"unset", maxWidth:"unset"}}>
// {(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
// {env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}
// {env.googleDriveEnabled ? <FolderTreeStorage type={"drive"}/> : undefined}
// </div>
)
export default FolderTree;
src/components/FolderTree/FolderTree.jsx
+31
View File
@@ -0,0 +1,31 @@
import React from "react";
import env from "../../enviroment/envFrontEnd";
import FolderTreeStorage from "../FolderTreeStorage";
const FolderTree = (props) => (
<div className="folder-tree__main">
<div
className={
props.state.showFolderTreeScrollBars
? "folder-tree__box"
: "folder-tree__box-hide-scroll-bars"
}
>
{env.activeSubscription || !env.commercialMode ? (
<FolderTreeStorage type={"mongo"} />
) : undefined}
{env.s3Enabled ? <FolderTreeStorage type={"s3"} /> : undefined}
{env.googleDriveEnabled ? (
<FolderTreeStorage type={"drive"} />
) : undefined}
</div>
</div>
// <div class="folder__structure" style={{overflow:"unset", maxHeight:"unset", maxWidth:"unset"}}>
// {(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
// {env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}
// {env.googleDriveEnabled ? <FolderTreeStorage type={"drive"}/> : undefined}
// </div>
);
export default FolderTree;
src/components/FolderTree/index.js → src/components/FolderTree/index.jsx
View File
src/components/FolderTreeStorage/FolderTreeStorage.js
-39
View File
@@ -1,39 +0,0 @@
import React from "react";
import FolderTreeStorageSub from ".././FolderTreeStorageSub";
const FolderTreeStorage = (props) => (
<div className="folder-tree__storage">
<div className="folder-tree__storage__box">
<div className="folder-tree__storage__image-div">
<img onClick={props.arrowClick} className="folder-tree__storage__image" src={(props.state.open && props.state.folders.length !== 0) ? "/images/menu-down.svg" : "/images/menu-right.svg"}/>
</div>
<div className="folder-tree__storage__text-div">
<p className="folder-tree__storage__text">{props.type === "drive" ? "Google Drive" : props.type === "mongo" ? "myDrive" : "Amazon S3"}</p>
</div>
</div>
<div className="folder-tree__storage-subview">
<div className="folder-tree__storage-subview-box">
{(props.state.open && props.state.folders.length !== 0) ? props.state.folders.map((folder) => {
return <FolderTreeStorageSub folder={folder} type={props.type}/>
}) : undefined}
</div>
</div>
</div>
//return
// <div class="elem__structure root__element">
// <div class={props.state.open ? "parent__structure active__parent" : "parent__structure"}>
// <span onClick={props.arrowClick}><img src="/assets/arrowstructure.svg" alt="arrowstructure"/></span>
// <div class="info__name">
// <p>{props.type === "drive" ? "Google Drive" : props.type === "mongo" ? "myDrive" : "Amazon S3"}</p>
// </div>
// </div>
// {(props.state.open && props.state.folders.length !== 0) ? props.state.folders.map((folder) => {
// return <FolderTreeStorageSub key={folder._id} folder={folder} type={props.type}/>
// }) : undefined}
// </div>
)
export default FolderTreeStorage;
src/components/FolderTreeStorage/FolderTreeStorage.jsx
+54
View File
@@ -0,0 +1,54 @@
import React from "react";
import FolderTreeStorageSub from "../FolderTreeStorageSub";
const FolderTreeStorage = (props) => (
<div className="folder-tree__storage">
<div className="folder-tree__storage__box">
<div className="folder-tree__storage__image-div">
<img
onClick={props.arrowClick}
className="folder-tree__storage__image"
src={
props.state.open && props.state.folders.length !== 0
? "/images/menu-down.svg"
: "/images/menu-right.svg"
}
/>
</div>
<div className="folder-tree__storage__text-div">
<p className="folder-tree__storage__text">
{props.type === "drive"
? "Google Drive"
: props.type === "mongo"
? "myDrive"
: "Amazon S3"}
</p>
</div>
</div>
<div className="folder-tree__storage-subview">
<div className="folder-tree__storage-subview-box">
{props.state.open && props.state.folders.length !== 0
? props.state.folders.map((folder) => {
return <FolderTreeStorageSub folder={folder} type={props.type} />;
})
: undefined}
</div>
</div>
</div>
//return
// <div class="elem__structure root__element">
// <div class={props.state.open ? "parent__structure active__parent" : "parent__structure"}>
// <span onClick={props.arrowClick}><img src="/assets/arrowstructure.svg" alt="arrowstructure"/></span>
// <div class="info__name">
// <p>{props.type === "drive" ? "Google Drive" : props.type === "mongo" ? "myDrive" : "Amazon S3"}</p>
// </div>
// </div>
// {(props.state.open && props.state.folders.length !== 0) ? props.state.folders.map((folder) => {
// return <FolderTreeStorageSub key={folder._id} folder={folder} type={props.type}/>
// }) : undefined}
// </div>
);
export default FolderTreeStorage;
src/components/FolderTreeStorage/index.js → src/components/FolderTreeStorage/index.jsx
View File
src/components/FolderTreeStorageSub/FolderTreeStorageSub.js → src/components/FolderTreeStorageSub/FolderTreeStorageSub.jsx
View File
src/components/FolderTreeStorageSub/index.js → src/components/FolderTreeStorageSub/index.jsx
+1 -1
View File
@@ -13,7 +13,7 @@ import {
} from "../../actions/folderTree";
// import { history } from "../../routers/AppRouter";
import { connect } from "react-redux";
import FolderTreeStorageSub2 from ".././FolderTreeStorageSub";
import FolderTreeStorageSub2 from ".";
import FolderTreeStorageSub from "./FolderTreeStorageSub";
class FolderTreeStorageSubContainer extends React.Component {
src/components/GoogleAccountPage/GoogleAccountPage.js → src/components/GoogleAccountPage/GoogleAccountPage.jsx
View File
src/components/GoogleAccountPage/index.js → src/components/GoogleAccountPage/index.jsx
View File
src/components/Header/Header.js → src/components/Header/Header.jsx
View File
src/components/Header/index.js → src/components/Header/index.jsx
View File
src/components/HocComponent/index.js → src/components/HocComponent/index.jsx
View File
src/components/Homepage/HomePage.js → src/components/Homepage/HomePage.jsx
+4 -4
View File
@@ -1,7 +1,7 @@
import Header from ".././Header";
import LeftSection from ".././LeftSection";
import MainSection from ".././MainSection";
import Uploader from ".././Uploader";
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 ShareModel from "../ShareModel";
src/components/Homepage/Homepage2.js → src/components/Homepage/Homepage2.jsx
View File
src/components/Homepage/Homepage2.tsxk → src/components/Homepage/Homepage2.txt
View File
src/components/Homepage/index.js → src/components/Homepage/index.jsx
View File
src/components/HomepageSpinner/index.js → src/components/HomepageSpinner/index.jsx
View File
src/components/InvoiceItem/InvoiceItem.js → src/components/InvoiceItem/InvoiceItem.jsx
View File
src/components/InvoiceItem/index.js → src/components/InvoiceItem/index.jsx
View File
src/components/LeftSection/LeftSection.js
-77
View File
@@ -1,77 +0,0 @@
import FolderTree from ".././FolderTree";
import React from "react";
import UploadStorageSwitcher from "../UploadStorageSwitcher";
import mobilecheck from "../../utils/mobileCheck";
class LeftSection extends React.Component {
constructor(props) {
super(props);
this.isMobile = mobilecheck();
this.nonDropMode = window.localStorage.getItem('non_drop-mode');
}
render() {
return (
<div className="menu__block" ref={this.props.leftSectionRef} style={this.props.leftSectionMode === '' ? {} : this.props.leftSectionMode === 'open' ? {left: "0px"} : {left:"-290px"}}>
<div class="navigation__block">
<div class="add__new">
<a onClick={this.props.showDropDown}>
<p>ADD NEW</p>
<span><img src="/assets/dropselect.svg" alt="dropselect"/></span>
</a>
<div class="dropdown__list" style={this.props.state.open ? {display:"block"} : {display:"none"}}>
<ul>
<li>
{this.isMobile || this.nonDropMode ?
<div>
<input className="upload__mobile" ref={this.props.uploadInput}
type="file" multiple={true} onChange={this.props.handleUpload}/>
<a onClick={this.props.showUploadOverlay} class="upload__files">
<span><img src="/assets/uploadicon.svg" alt="upload"/></span> Upload Files
</a>
</div>
:
<a onClick={this.props.showUploadOverlay} class="upload__files">
<span><img src="/assets/uploadicon.svg" alt="upload"/></span> Upload Files
</a>
}
</li>
<li>
<a onClick={this.props.createFolder}>
<span><img src="/assets/foldericon.svg" alt="folder"/></span> Create Folder
</a>
</li>
</ul>
</div>
</div>
<div class="page__navigation">
<ul>
<li class="active__page"><a onClick={this.props.goHome}><span><img src="/assets/homea.svg" alt="homeactive"/></span>Home</a></li>
</ul>
</div>
<UploadStorageSwitcher />
<div class="folder__structure">
<FolderTree />
</div>
<div class={this.props.state.hideFolderTree ? "utility__buttons utility__buttons_no_border" : "utility__buttons"}>
<ul>
{/* <li><a href="#"><span><img src="/assets/utility1.svg" alt="utility"/></span> Shared with me</a></li>
<li><a href="#"><span><img src="/assets/utility2.svg" alt="utility"/></span> Recent Files</a></li>
<li><a href="#"><span><img src="/assets/utility3.svg" alt="utility"/></span> Trash</a></li> */}
</ul>
</div>
</div>
</div>
)
}
}
export default LeftSection;
src/components/LeftSection/LeftSection.jsx
+122
View File
@@ -0,0 +1,122 @@
import FolderTree from "../FolderTree";
import React from "react";
import UploadStorageSwitcher from "../UploadStorageSwitcher";
import mobilecheck from "../../utils/mobileCheck";
class LeftSection extends React.Component {
constructor(props) {
super(props);
this.isMobile = mobilecheck();
this.nonDropMode = window.localStorage.getItem("non_drop-mode");
}
render() {
return (
<div
className="menu__block"
ref={this.props.leftSectionRef}
style={
this.props.leftSectionMode === ""
? {}
: this.props.leftSectionMode === "open"
? { left: "0px" }
: { left: "-290px" }
}
>
<div class="navigation__block">
<div class="add__new">
<a onClick={this.props.showDropDown}>
<p>ADD NEW</p>
<span>
<img src="/assets/dropselect.svg" alt="dropselect" />
</span>
</a>
<div
class="dropdown__list"
style={
this.props.state.open
? { display: "block" }
: { display: "none" }
}
>
<ul>
<li>
{this.isMobile || this.nonDropMode ? (
<div>
<input
className="upload__mobile"
ref={this.props.uploadInput}
type="file"
multiple={true}
onChange={this.props.handleUpload}
/>
<a
onClick={this.props.showUploadOverlay}
class="upload__files"
>
<span>
<img src="/assets/uploadicon.svg" alt="upload" />
</span>{" "}
Upload Files
</a>
</div>
) : (
<a
onClick={this.props.showUploadOverlay}
class="upload__files"
>
<span>
<img src="/assets/uploadicon.svg" alt="upload" />
</span>{" "}
Upload Files
</a>
)}
</li>
<li>
<a onClick={this.props.createFolder}>
<span>
<img src="/assets/foldericon.svg" alt="folder" />
</span>{" "}
Create Folder
</a>
</li>
</ul>
</div>
</div>
<div class="page__navigation">
<ul>
<li class="active__page">
<a onClick={this.props.goHome}>
<span>
<img src="/assets/homea.svg" alt="homeactive" />
</span>
Home
</a>
</li>
</ul>
</div>
<UploadStorageSwitcher />
<div class="folder__structure">
<FolderTree />
</div>
<div
class={
this.props.state.hideFolderTree
? "utility__buttons utility__buttons_no_border"
: "utility__buttons"
}
>
<ul>
{/* <li><a href="#"><span><img src="/assets/utility1.svg" alt="utility"/></span> Shared with me</a></li>
<li><a href="#"><span><img src="/assets/utility2.svg" alt="utility"/></span> Recent Files</a></li>
<li><a href="#"><span><img src="/assets/utility3.svg" alt="utility"/></span> Trash</a></li> */}
</ul>
</div>
</div>
</div>
);
}
}
export default LeftSection;
src/components/LeftSection/index.js → src/components/LeftSection/index.jsx
View File
src/components/LoginPage/LoginPage.js → src/components/LoginPage/LoginPage.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import SpinnerLogin from ".././SpinnerLogin";
import SpinnerLogin from "../SpinnerLogin";
import React from "react";
import env from "../../enviroment/envFrontEnd";
src/components/LoginPage/index.js → src/components/LoginPage/index.jsx
View File
src/components/MainSection/MainSection.js
-66
View File
@@ -1,66 +0,0 @@
import DataForm from ".././Dataform";
import RightSection from ".././RightSection";
import MoverMenu from ".././MoverMenu";
import PopupWindow from '.././PopupWindow'
import React from "react";
const MainSection = React.forwardRef((props, ref) => {
return (
<div class="content__block">
<div className="overlay" style={(props.leftSectionMode === "open" || props.rightSectionMode === "open") ? {display:"block"} : {display:"none"}}>
</div>
<div class="small__switcher--content">
<a onClick={props.switchLeftSectionMode} class="menu__button"><i class="fas fa-bars"></i></a>
<a onClick={props.switchRightSectionMode} class="image__viewer"><i class="fas fa-images"></i></a>
</div>
<div class="file__container" style={props.routeType === "search" ? {flexDirection: "column"} : {flexDirection:"row"}}>
{true ? undefined : <div class="file__control--panel empty__control--panel">
<div class="file__get--started">
<div class="get__started--image">
<img src="/assets/get_startedfile.svg" alt="get"/>
</div>
<h6>All your files in one place</h6>
<p>Drag and drop a file to get started</p>
</div>
</div>}
{props.routeType === "search" ?
<div class="file__control--panel folder__view" style={{paddingBottom:"0", marginBottom:"-50px"}}>
<div class="results__files">
<h2><span class="counter__result">{props.files.length + props.folders.length >= 50 ? "50+" : props.files.length + props.folders.length}</span> <span class="result__word">results</span> for <span class="result__search--word">{props.cachedSearch}</span></h2>
<p class="searching__result">You are searching in <span class="root__parent">{props.parent === "/" ? "Home" : props.parentNameList.length !== 0 ? props.parentNameList[props.parentNameList.length - 1] : "Unknown"}</span> <span class="spacer"><img style={{height:"11px", marginTop:"2px", display:"none"}} src="/assets/smallspacer.svg" alt="spacer"/></span><span class="current__folder"></span> <a href="#" style={{display:"none"}} class='search__filter--global'>Show results from everywhere</a></p>
</div>
</div> : undefined}
{props.showPopup ? <PopupWindow downloadFile={props.downloadFile} /> : undefined}
{props.moverID.length === 0 ? undefined :
<MoverMenu />
}
<DataForm
folderClick={props.folderClick}
fileClick={props.fileClick}
downloadFile={props.downloadFile}/>
<RightSection
folderClick={props.folderClick}
fileClick={props.fileClick}
downloadFile={props.downloadFile}
/>
</div>
</div>
)
})
export default MainSection
src/components/MainSection/MainSection.jsx
+116
View File
@@ -0,0 +1,116 @@
import DataForm from "../Dataform";
import RightSection from "../RightSection";
import MoverMenu from "../MoverMenu";
import PopupWindow from "../PopupWindow";
import React from "react";
const MainSection = React.forwardRef((props, ref) => {
return (
<div class="content__block">
<div
className="overlay"
style={
props.leftSectionMode === "open" || props.rightSectionMode === "open"
? { display: "block" }
: { display: "none" }
}
></div>
<div class="small__switcher--content">
<a onClick={props.switchLeftSectionMode} class="menu__button">
<i class="fas fa-bars"></i>
</a>
<a onClick={props.switchRightSectionMode} class="image__viewer">
<i class="fas fa-images"></i>
</a>
</div>
<div
class="file__container"
style={
props.routeType === "search"
? { flexDirection: "column" }
: { flexDirection: "row" }
}
>
{true ? undefined : (
<div class="file__control--panel empty__control--panel">
<div class="file__get--started">
<div class="get__started--image">
<img src="/assets/get_startedfile.svg" alt="get" />
</div>
<h6>All your files in one place</h6>
<p>Drag and drop a file to get started</p>
</div>
</div>
)}
{props.routeType === "search" ? (
<div
class="file__control--panel folder__view"
style={{ paddingBottom: "0", marginBottom: "-50px" }}
>
<div class="results__files">
<h2>
<span class="counter__result">
{props.files.length + props.folders.length >= 50
? "50+"
: props.files.length + props.folders.length}
</span>{" "}
<span class="result__word">results</span> for{" "}
<span class="result__search--word">{props.cachedSearch}</span>
</h2>
<p class="searching__result">
You are searching in{" "}
<span class="root__parent">
{props.parent === "/"
? "Home"
: props.parentNameList.length !== 0
? props.parentNameList[props.parentNameList.length - 1]
: "Unknown"}
</span>{" "}
<span class="spacer">
<img
style={{
height: "11px",
marginTop: "2px",
display: "none",
}}
src="/assets/smallspacer.svg"
alt="spacer"
/>
</span>
<span class="current__folder"></span>{" "}
<a
href="#"
style={{ display: "none" }}
class="search__filter--global"
>
Show results from everywhere
</a>
</p>
</div>
</div>
) : undefined}
{props.showPopup ? (
<PopupWindow downloadFile={props.downloadFile} />
) : undefined}
{props.moverID.length === 0 ? undefined : <MoverMenu />}
<DataForm
folderClick={props.folderClick}
fileClick={props.fileClick}
downloadFile={props.downloadFile}
/>
<RightSection
folderClick={props.folderClick}
fileClick={props.fileClick}
downloadFile={props.downloadFile}
/>
</div>
</div>
);
});
export default MainSection;
src/components/MainSection/index.js → src/components/MainSection/index.jsx
View File
src/components/MobileContextMenu/index.js → src/components/MobileContextMenu/index.jsx
View File
src/components/MoverMenu/MoverMenu.js → src/components/MoverMenu/MoverMenu.jsx
View File
src/components/MoverMenu/index.js → src/components/MoverMenu/index.jsx
View File
src/components/MoverModel/index.js → src/components/MoverModel/index.jsx
View File
src/components/NewContextMenu/NewContextMenu.js → src/components/NewContextMenu/NewContextMenu.jsx
View File
src/components/NewContextMenu/index.js → src/components/NewContextMenu/index.jsx
View File
src/components/ParentBar/ParentBar.js → src/components/ParentBar/ParentBar.jsx
View File
src/components/ParentBar/index.js → src/components/ParentBar/index.jsx
View File
src/components/ParentBarChild/index.js → src/components/ParentBarChild/index.jsx
View File
src/components/PhotoViewer/PhotoViewer.js → src/components/PhotoViewer/PhotoViewer.jsx
View File
src/components/PhotoViewer/index.js → src/components/PhotoViewer/index.jsx
View File
src/components/PopupWindow/PopupWindow.js
-97
View File
@@ -1,97 +0,0 @@
import Spinner from ".././Spinner";
import capitalize from "../../utils/capitalize";
import React from "react";
import moment from "moment";
import bytes from "bytes";
class PopupWindow extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={this.props.popupFile.metadata.isVideo ? "popup-window popup-window-video" : "popup-window"} ref={this.props.wrapperRef}>
<p className="popup-window__title">{capitalize(this.props.popupFile.filename)}</p>
<div className={this.props.popupFile.metadata.isVideo ? "popup-window-wrapper popup-window-wrapper-video" : "popup-window-wrapper"}>
{!this.props.popupFile.metadata.isVideo ?
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? <h3 className="popup-window__subtitle">No Preview Available</h3> : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? <img className={this.props.state.imageClassname} src={this.props.state.image}/>
: <img className={this.props.state.imageClassname} onClick={this.props.setPhotoViewerWindow} src={this.props.state.image} onError={this.props.thumbnailOnError}/>}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : <Spinner />}
</div>
</div>
:
<video className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls>
Your browser does not support the video tag.
</video>}
<div>
<div>
<p className="popup-file-details-title">Location: {this.props.popupFile.metadata.drive ? "Google Drive" : this.props.popupFile.metadata.personalFile ? "Amazon S3" : "myDrive"}</p>
<p className="popup-file-details-title">File Size: {bytes(+this.props.popupFile.metadata.size)}</p>
<p className="popup-file-details-title">Created: {moment(this.props.popupFile.uploadDate).format("L")}</p>
<div className="popup-window-button-wrapper">
<button className={this.props.popupFile.metadata.isVideo ? "button popup-window__button popup-window__button-video" : "button popup-window__button"} onClick={() => this.props.downloadFile(this.props.popupFile._id, this.props.popupFile)}>Download</button>
</div>
</div>
</div>
</div>
<img className="popup-window__close-button" onClick={this.props.hidePopupWindow} src="/images/close_icon.png"/>
</div>
)
return (
<div className="popup-window" ref={this.props.wrapperRef}>
<h3 className="popup-window__title">{capitalize(this.props.popupFile.filename)}</h3>
{!this.props.popupFile.metadata.isVideo ?
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? <h3 className="popup-window__subtitle">No Preview Available</h3> : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? <img className={this.props.state.imageClassname} src={this.props.state.image}/>
: <img className={this.props.state.imageClassname} onClick={this.props.setPhotoViewerWindow} src={this.props.state.image} onError={this.props.thumbnailOnError}/>}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : <Spinner />}
</div>
</div>
:
<video className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls>
Your browser does not support the video tag.
</video>
}
<button className="button popup-window__button" onClick={() => this.props.downloadFile(this.props.popupFile._id, this.props.popupFile)}>Download</button>
<img className="popup-window__close-button" onClick={this.props.hidePopupWindow} src="/images/close_icon.png"/>
</div>
)
}
}
export default PopupWindow
src/components/PopupWindow/PopupWindow.jsx
+180
View File
@@ -0,0 +1,180 @@
import Spinner from "../Spinner";
import capitalize from "../../utils/capitalize";
import React from "react";
import moment from "moment";
import bytes from "bytes";
class PopupWindow extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div
className={
this.props.popupFile.metadata.isVideo
? "popup-window popup-window-video"
: "popup-window"
}
ref={this.props.wrapperRef}
>
<p className="popup-window__title">
{capitalize(this.props.popupFile.filename)}
</p>
<div
className={
this.props.popupFile.metadata.isVideo
? "popup-window-wrapper popup-window-wrapper-video"
: "popup-window-wrapper"
}
>
{!this.props.popupFile.metadata.isVideo ? (
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? (
<h3 className="popup-window__subtitle">No Preview Available</h3>
) : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? (
<img
className={this.props.state.imageClassname}
src={this.props.state.image}
/>
) : (
<img
className={this.props.state.imageClassname}
onClick={this.props.setPhotoViewerWindow}
src={this.props.state.image}
onError={this.props.thumbnailOnError}
/>
)}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : (
<Spinner />
)}
</div>
</div>
) : (
<video
className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls
>
Your browser does not support the video tag.
</video>
)}
<div>
<div>
<p className="popup-file-details-title">
Location:{" "}
{this.props.popupFile.metadata.drive
? "Google Drive"
: this.props.popupFile.metadata.personalFile
? "Amazon S3"
: "myDrive"}
</p>
<p className="popup-file-details-title">
File Size: {bytes(+this.props.popupFile.metadata.size)}
</p>
<p className="popup-file-details-title">
Created: {moment(this.props.popupFile.uploadDate).format("L")}
</p>
<div className="popup-window-button-wrapper">
<button
className={
this.props.popupFile.metadata.isVideo
? "button popup-window__button popup-window__button-video"
: "button popup-window__button"
}
onClick={() =>
this.props.downloadFile(
this.props.popupFile._id,
this.props.popupFile
)
}
>
Download
</button>
</div>
</div>
</div>
</div>
<img
className="popup-window__close-button"
onClick={this.props.hidePopupWindow}
src="/images/close_icon.png"
/>
</div>
);
return (
<div className="popup-window" ref={this.props.wrapperRef}>
<h3 className="popup-window__title">
{capitalize(this.props.popupFile.filename)}
</h3>
{!this.props.popupFile.metadata.isVideo ? (
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? (
<h3 className="popup-window__subtitle">No Preview Available</h3>
) : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? (
<img
className={this.props.state.imageClassname}
src={this.props.state.image}
/>
) : (
<img
className={this.props.state.imageClassname}
onClick={this.props.setPhotoViewerWindow}
src={this.props.state.image}
onError={this.props.thumbnailOnError}
/>
)}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : (
<Spinner />
)}
</div>
</div>
) : (
<video
className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls
>
Your browser does not support the video tag.
</video>
)}
<button
className="button popup-window__button"
onClick={() =>
this.props.downloadFile(
this.props.popupFile._id,
this.props.popupFile
)
}
>
Download
</button>
<img
className="popup-window__close-button"
onClick={this.props.hidePopupWindow}
src="/images/close_icon.png"
/>
</div>
);
}
}
export default PopupWindow;
src/components/PopupWindow/index.js → src/components/PopupWindow/index.jsx
View File
src/components/QuickAccess/QuickAccess.js → src/components/QuickAccess/QuickAccess.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import QuickAccessItem from ".././QuickAccessItem";
import QuickAccessItem from "../QuickAccessItem";
import React from "react";
const QuickAccess = (props) => (
src/components/QuickAccess/index.js → src/components/QuickAccess/index.jsx
View File
src/components/QuickAccessItem/QuickAccessItem.js → src/components/QuickAccessItem/QuickAccessItem.jsx
View File
src/components/QuickAccessItem/index.js → src/components/QuickAccessItem/index.jsx
View File
src/components/ResetPasswordPage/ResetPasswordPage.js → src/components/ResetPasswordPage/ResetPasswordPage.jsx
View File
src/components/ResetPasswordPage/index.js → src/components/ResetPasswordPage/index.jsx
View File
src/components/RightSection/RightSection.js → src/components/RightSection/RightSection.jsx
View File
src/components/RightSection/index.js
-332
View File
@@ -1,332 +0,0 @@
import RightSection from "./RightSection";
import RightSectionDetail from ".././RightSectionDetail"
import {editFileMetadata, startRemoveFile, startRenameFile} from "../../actions/files"
import {resetSelectedItem} from "../../actions/selectedItem";
import env from "../../enviroment/envFrontEnd";
import axios from "../../axiosInterceptor";
import {connect} from "react-redux";
import React from "react";
import { setRightSectionMode } from "../../actions/main";
import Swal from "sweetalert2";
import { startRemoveFolder, startRenameFolder } from "../../actions/folders";
import { setMoverID } from "../../actions/mover";
import mobilecheck from "../../utils/mobileCheck";
import { setMobileContextMenu } from "../../actions/mobileContextMenu";
class RightSectionContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
optimizing: false,
optimizing_finished: false,
optimizing_removed: false,
contextSelected: false
}
this.prevID = ""
this.rightSectionRef = React.createRef()
}
getFileExtension = (filename) => {
const filenameSplit = filename.split(".");
if (filenameSplit.length > 1) {
const extension = filenameSplit[filenameSplit.length - 1]
return extension.toUpperCase();
} else {
return "Unknown"
}
}
getSidebarClassName = (value) => {
if (value==="gone") {
return "section section--right section--no-animation"
} else if (value) {
return "section section--right"
} else {
return "section section--right section--minimized"
}
}
removeTranscodeVideo = (props, e) => {
const data = {id: props.selectedItem.id}
axios.delete('/file-service/transcode-video/remove', {
data
}).then(() => {
this.props.dispatch(editFileMetadata(props.selectedItem.id, {transcoded: undefined}))
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: false,
optimizing_removed: true
}))
}).catch((err) => {
console.log(err)
})
}
transcodeVideo = (props, e) => {
const config = {
file: {_id: props.selectedItem.id}
};
const data = {file: {_id: props.selectedItem.id}}
this.setState(() => ({
...this.state,
optimizing: true
}))
axios.post('/file-service/transcode-video', data,config)
.then((response) => {
const data = response.data;
if (data === "Finished") {
this.props.dispatch(editFileMetadata(props.selectedItem.id, {isVideo: true, transcoded: true}))
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: true,
optimizing_removed: false
}))
}
}).catch((err) => {
console.log(err)
})
}
getTranscodeButton = (props) => {
if (!props.selectedItem.isVideo || !env.enableVideoTranscoding) {
return undefined;
}
if (this.state.optimizing && !this.state.optimizing_finished) {
return (<div>
<button disabled className="button--small button--small--disabled">Optimizing</button>
</div>)
} else if ((props.selectedItem.transcoded || this.state.optimizing_finished) && !this.state.optimizing_removed) {
return (<div>
<button onClick={(e) => this.removeTranscodeVideo(props, e)} className="button--small">Unoptimize Video</button>
</div>)
} else {
return (<div>
<button onClick={(e) => this.transcodeVideo(props, e)} className="button--small">Optimize Video</button>
</div>)
}
}
getPublicStatus = () => {
if (this.props.selectedItem.linkType === "one") {
return <RightSectionDetail first={false} title="One Time Link" body="True"/>
} else {
return <RightSectionDetail first={false} title="Public" body="True"/>
}
}
resetState = () => {
if (this.prevID !== "" && this.prevID !== this.props.selectedItem.id) {
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: false
}))
}
}
resetSelected = () => {
this.props.dispatch(resetSelectedItem());
}
handleClickOutside = (e) => {
if (this.rightSectionRef && !this.rightSectionRef.current.contains(event.target)) {
if (this.props.rightSectionMode === 'open') {
this.props.dispatch(setRightSectionMode('close'))
this.closeContext();
}
}
}
componentDidMount = () => {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount = () => {
document.removeEventListener('mousedown', this.handleClickOutside);
}
openItem = (e) => {
if (this.props.selectedItem.file) {
this.props.fileClick(this.props.selectedItem.id, this.props.selectedItem.data, false, true)
} else {
this.props.folderClick(this.props.selectedItem.id, this.props.selectedItem.data, true)
}
}
closeContext = () => {
this.setState(() => {
return {
...this.state,
contextSelected: false
}
})
}
selectContext = (e) => {
if (e) e.stopPropagation()
if (e) e.preventDefault();
// if (mobilecheck()) {
// this.props.dispatch(setMobileContextMenu(this.props.selectedItem.file, this.props.selectedItem.data));
// return;
// }
console.log("right props", this.props.selectedItem)
this.setState(() => {
return {
...this.state,
contextSelected: !this.state.contextSelected
}
})
}
clickStopPropagation = (e) => {
if (e) e.stopPropagation()
}
clickTest = (e) => {
console.log("click test")
}
changeEditNameMode = async() => {
let inputValue = this.props.selectedItem.name;
const { value: folderName} = await Swal.fire({
title: 'Enter A File Name',
input: 'text',
inputValue: inputValue,
showCancelButton: true,
inputValidator: (value) => {
if (!value) {
return 'Please Enter a Name'
}
}
})
if (folderName === undefined || folderName === null) {
return;
}
//this.props.selectedItem.drive
const parent = this.props.selectedItem.file ? this.props.selectedItem.data.metadata.parent : this.props.selectedItem.data.parent;
this.props.selectedItem.file ?
this.props.dispatch(startRenameFile(this.props.selectedItem.id, folderName, this.props.selectedItem.drive)) :
this.props.dispatch(startRenameFolder(this.props.selectedItem.id, folderName, this.props.selectedItem.drive, parent));
//this.props.dispatch(startRenameFolder(this.props.selectedItem.data._id, folderName, this.props.selectedItem.data.));
}
startMoveFolder = async() => {
const parent = this.props.selectedItem.file ? this.props.selectedItem.data.metadata.parent : this.props.selectedItem.data.parent;
const isPersonal = this.props.selectedItem.file ? this.props.selectedItem.data.metadata.personalFile : this.props.selectedItem.data.personalFolder;
this.props.dispatch(setMoverID(this.props.selectedItem.id, parent, this.props.selectedItem.file, this.props.selectedItem.drive, isPersonal));
}
changeDeleteMode = async() => {
const parent = this.props.selectedItem.file ? this.props.selectedItem.data.metadata.parent : this.props.selectedItem.data.parent;
Swal.fire({
title: 'Confirm Deletion',
text: "You cannot undo this action",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete'
}).then((result) => {
if (result.value) {
this.props.selectedItem.file ?
this.props.dispatch(startRemoveFile(this.props.selectedItem.id, this.props.selectedItem.drive, this.props.selectedItem.data.metadata.personalFile)) :
this.props.dispatch(startRemoveFolder(this.props.selectedItem.id, [...this.props.selectedItem.data.parentList, this.props.selectedItem.id], this.props.selectedItem.drive, parent, this.props.selectedItem.data.metadata.personalFolder));
}
})
}
render() {
return <RightSection
getPublicStatus={this.getPublicStatus}
getTranscodeButton={this.getTranscodeButton}
getFileExtension={this.getFileExtension}
getSidebarClassName={this.getSidebarClassName}
resetState={this.resetState}
resetSelected={this.resetSelected}
openItem={this.openItem}
rightSectionRef={this.rightSectionRef}
clickStopPropagation={this.clickStopPropagation}
closeContext={this.closeContext}
selectContext={this.selectContext}
changeEditNameMode={this.changeEditNameMode}
startMoveFolder={this.startMoveFolder}
changeDeleteMode={this.changeDeleteMode}
clickTest={this.clickTest}
state={this.state}
{...this.props}
/>
}
}
const connectPropToState = (state) => ({
selectedItem: state.selectedItem,
showSideBar: state.main.showSideBar,
selected: state.main.selected,
rightSectionMode: state.main.rightSectionMode
})
export default connect(connectPropToState)(RightSectionContainer)
src/components/RightSection/index.jsx
+394
View File
@@ -0,0 +1,394 @@
import RightSection from "./RightSection";
import RightSectionDetail from "../RightSectionDetail";
import {
editFileMetadata,
startRemoveFile,
startRenameFile,
} from "../../actions/files";
import { resetSelectedItem } from "../../actions/selectedItem";
import env from "../../enviroment/envFrontEnd";
import axios from "../../axiosInterceptor";
import { connect } from "react-redux";
import React from "react";
import { setRightSectionMode } from "../../actions/main";
import Swal from "sweetalert2";
import { startRemoveFolder, startRenameFolder } from "../../actions/folders";
import { setMoverID } from "../../actions/mover";
import mobilecheck from "../../utils/mobileCheck";
import { setMobileContextMenu } from "../../actions/mobileContextMenu";
class RightSectionContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
optimizing: false,
optimizing_finished: false,
optimizing_removed: false,
contextSelected: false,
};
this.prevID = "";
this.rightSectionRef = React.createRef();
}
getFileExtension = (filename) => {
const filenameSplit = filename.split(".");
if (filenameSplit.length > 1) {
const extension = filenameSplit[filenameSplit.length - 1];
return extension.toUpperCase();
} else {
return "Unknown";
}
};
getSidebarClassName = (value) => {
if (value === "gone") {
return "section section--right section--no-animation";
} else if (value) {
return "section section--right";
} else {
return "section section--right section--minimized";
}
};
removeTranscodeVideo = (props, e) => {
const data = { id: props.selectedItem.id };
axios
.delete("/file-service/transcode-video/remove", {
data,
})
.then(() => {
this.props.dispatch(
editFileMetadata(props.selectedItem.id, { transcoded: undefined })
);
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: false,
optimizing_removed: true,
}));
})
.catch((err) => {
console.log(err);
});
};
transcodeVideo = (props, e) => {
const config = {
file: { _id: props.selectedItem.id },
};
const data = { file: { _id: props.selectedItem.id } };
this.setState(() => ({
...this.state,
optimizing: true,
}));
axios
.post("/file-service/transcode-video", data, config)
.then((response) => {
const data = response.data;
if (data === "Finished") {
this.props.dispatch(
editFileMetadata(props.selectedItem.id, {
isVideo: true,
transcoded: true,
})
);
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: true,
optimizing_removed: false,
}));
}
})
.catch((err) => {
console.log(err);
});
};
getTranscodeButton = (props) => {
if (!props.selectedItem.isVideo || !env.enableVideoTranscoding) {
return undefined;
}
if (this.state.optimizing && !this.state.optimizing_finished) {
return (
<div>
<button disabled className="button--small button--small--disabled">
Optimizing
</button>
</div>
);
} else if (
(props.selectedItem.transcoded || this.state.optimizing_finished) &&
!this.state.optimizing_removed
) {
return (
<div>
<button
onClick={(e) => this.removeTranscodeVideo(props, e)}
className="button--small"
>
Unoptimize Video
</button>
</div>
);
} else {
return (
<div>
<button
onClick={(e) => this.transcodeVideo(props, e)}
className="button--small"
>
Optimize Video
</button>
</div>
);
}
};
getPublicStatus = () => {
if (this.props.selectedItem.linkType === "one") {
return (
<RightSectionDetail first={false} title="One Time Link" body="True" />
);
} else {
return <RightSectionDetail first={false} title="Public" body="True" />;
}
};
resetState = () => {
if (this.prevID !== "" && this.prevID !== this.props.selectedItem.id) {
this.setState(() => ({
...this.state,
optimizing: false,
optimizing_finished: false,
}));
}
};
resetSelected = () => {
this.props.dispatch(resetSelectedItem());
};
handleClickOutside = (e) => {
if (
this.rightSectionRef &&
!this.rightSectionRef.current.contains(event.target)
) {
if (this.props.rightSectionMode === "open") {
this.props.dispatch(setRightSectionMode("close"));
this.closeContext();
}
}
};
componentDidMount = () => {
document.addEventListener("mousedown", this.handleClickOutside);
};
componentWillUnmount = () => {
document.removeEventListener("mousedown", this.handleClickOutside);
};
openItem = (e) => {
if (this.props.selectedItem.file) {
this.props.fileClick(
this.props.selectedItem.id,
this.props.selectedItem.data,
false,
true
);
} else {
this.props.folderClick(
this.props.selectedItem.id,
this.props.selectedItem.data,
true
);
}
};
closeContext = () => {
this.setState(() => {
return {
...this.state,
contextSelected: false,
};
});
};
selectContext = (e) => {
if (e) e.stopPropagation();
if (e) e.preventDefault();
// if (mobilecheck()) {
// this.props.dispatch(setMobileContextMenu(this.props.selectedItem.file, this.props.selectedItem.data));
// return;
// }
console.log("right props", this.props.selectedItem);
this.setState(() => {
return {
...this.state,
contextSelected: !this.state.contextSelected,
};
});
};
clickStopPropagation = (e) => {
if (e) e.stopPropagation();
};
clickTest = (e) => {
console.log("click test");
};
changeEditNameMode = async () => {
let inputValue = this.props.selectedItem.name;
const { value: folderName } = await Swal.fire({
title: "Enter A File Name",
input: "text",
inputValue: inputValue,
showCancelButton: true,
inputValidator: (value) => {
if (!value) {
return "Please Enter a Name";
}
},
});
if (folderName === undefined || folderName === null) {
return;
}
//this.props.selectedItem.drive
const parent = this.props.selectedItem.file
? this.props.selectedItem.data.metadata.parent
: this.props.selectedItem.data.parent;
this.props.selectedItem.file
? this.props.dispatch(
startRenameFile(
this.props.selectedItem.id,
folderName,
this.props.selectedItem.drive
)
)
: this.props.dispatch(
startRenameFolder(
this.props.selectedItem.id,
folderName,
this.props.selectedItem.drive,
parent
)
);
//this.props.dispatch(startRenameFolder(this.props.selectedItem.data._id, folderName, this.props.selectedItem.data.));
};
startMoveFolder = async () => {
const parent = this.props.selectedItem.file
? this.props.selectedItem.data.metadata.parent
: this.props.selectedItem.data.parent;
const isPersonal = this.props.selectedItem.file
? this.props.selectedItem.data.metadata.personalFile
: this.props.selectedItem.data.personalFolder;
this.props.dispatch(
setMoverID(
this.props.selectedItem.id,
parent,
this.props.selectedItem.file,
this.props.selectedItem.drive,
isPersonal
)
);
};
changeDeleteMode = async () => {
const parent = this.props.selectedItem.file
? this.props.selectedItem.data.metadata.parent
: this.props.selectedItem.data.parent;
Swal.fire({
title: "Confirm Deletion",
text: "You cannot undo this action",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete",
}).then((result) => {
if (result.value) {
this.props.selectedItem.file
? this.props.dispatch(
startRemoveFile(
this.props.selectedItem.id,
this.props.selectedItem.drive,
this.props.selectedItem.data.metadata.personalFile
)
)
: this.props.dispatch(
startRemoveFolder(
this.props.selectedItem.id,
[
...this.props.selectedItem.data.parentList,
this.props.selectedItem.id,
],
this.props.selectedItem.drive,
parent,
this.props.selectedItem.data.metadata.personalFolder
)
);
}
});
};
render() {
return (
<RightSection
getPublicStatus={this.getPublicStatus}
getTranscodeButton={this.getTranscodeButton}
getFileExtension={this.getFileExtension}
getSidebarClassName={this.getSidebarClassName}
resetState={this.resetState}
resetSelected={this.resetSelected}
openItem={this.openItem}
rightSectionRef={this.rightSectionRef}
clickStopPropagation={this.clickStopPropagation}
closeContext={this.closeContext}
selectContext={this.selectContext}
changeEditNameMode={this.changeEditNameMode}
startMoveFolder={this.startMoveFolder}
changeDeleteMode={this.changeDeleteMode}
clickTest={this.clickTest}
state={this.state}
{...this.props}
/>
);
}
}
const connectPropToState = (state) => ({
selectedItem: state.selectedItem,
showSideBar: state.main.showSideBar,
selected: state.main.selected,
rightSectionMode: state.main.rightSectionMode,
});
export default connect(connectPropToState)(RightSectionContainer);
src/components/RightSectionDetail/index.js → src/components/RightSectionDetail/index.jsx
View File
src/components/SettingsPage/index.js → src/components/SettingsPage/index.jsx
View File
src/components/ShareMenu/ShareMenu.js → src/components/ShareMenu/ShareMenu.jsx
View File
src/components/ShareMenu/index.js → src/components/ShareMenu/index.jsx
View File
src/components/ShareModel/index.js → src/components/ShareModel/index.jsx
View File
src/components/ShareModelWrapper/index.js → src/components/ShareModelWrapper/index.jsx
View File
src/components/Spinner/index.js → src/components/Spinner/index.jsx
View File
src/components/SpinnerImage/index.js → src/components/SpinnerImage/index.jsx
View File
src/components/SpinnerLogin/index.js → src/components/SpinnerLogin/index.jsx
View File
src/components/SpinnerPage/index.js → src/components/SpinnerPage/index.jsx
View File
src/components/Subbar/Subbar.js → src/components/Subbar/Subbar.jsx
View File
src/components/Subbar/index.js → src/components/Subbar/index.jsx
View File
src/components/UploadItem/UploadItem.js → src/components/UploadItem/UploadItem.jsx
View File
src/components/UploadItem/index.js → src/components/UploadItem/index.jsx
View File
src/components/UploadOverlay/UploadOverlay.js → src/components/UploadOverlay/UploadOverlay.jsx
View File
src/components/UploadOverlay/index.js → src/components/UploadOverlay/index.jsx
View File
src/components/UploadStorageSwitcher/UploadStorageSwitcher.js → src/components/UploadStorageSwitcher/UploadStorageSwitcher.jsx
View File
src/components/UploadStorageSwitcher/index.js → src/components/UploadStorageSwitcher/index.jsx
View File
src/components/Uploader/Uploader.js
-24
View File
@@ -1,24 +0,0 @@
import UploadItem from ".././UploadItem";
import React from "react";
const Uploader = React.forwardRef((props, ref) => (
<div class="upload__status" style={props.uploads.length !== 0 ? {display:"block"} : {display:"none"}}>
<div class="head__upload">
<p>Uploading {props.uploads.length} {props.uploads.length === 1 ? "file" : "files"}</p>
<div class="hide__upload">
<a onClick={() => props.minimizeUploader()}><img src="/assets/upload_hide.svg" alt="upload__hide"/></a>
<a onClick={() => props.cancelAllUploadsEvent()}><img src="/assets/close-white.svg" style={{height:"24px"}} alt="upload__hide"/></a>
</div>
</div>
<div class="content__upload">
{props.uploaderShow ? props.uploads.map((upload) => {
return <UploadItem key={upload.id} {...upload}/>
}) : undefined}
</div>
</div>
))
export default Uploader;
src/components/Uploader/Uploader.jsx
+39
View File
@@ -0,0 +1,39 @@
import UploadItem from "../UploadItem";
import React from "react";
const Uploader = React.forwardRef((props, ref) => (
<div
class="upload__status"
style={
props.uploads.length !== 0 ? { display: "block" } : { display: "none" }
}
>
<div class="head__upload">
<p>
Uploading {props.uploads.length}{" "}
{props.uploads.length === 1 ? "file" : "files"}
</p>
<div class="hide__upload">
<a onClick={() => props.minimizeUploader()}>
<img src="/assets/upload_hide.svg" alt="upload__hide" />
</a>
<a onClick={() => props.cancelAllUploadsEvent()}>
<img
src="/assets/close-white.svg"
style={{ height: "24px" }}
alt="upload__hide"
/>
</a>
</div>
</div>
<div class="content__upload">
{props.uploaderShow
? props.uploads.map((upload) => {
return <UploadItem key={upload.id} {...upload} />;
})
: undefined}
</div>
</div>
));
export default Uploader;
src/components/Uploader/index.js → src/components/Uploader/index.jsx
View File
src/components/VerifyEmailPage/VerifyEmailPage.js → src/components/VerifyEmailPage/VerifyEmailPage.jsx
View File
src/components/VerifyEmailPage/index.js → src/components/VerifyEmailPage/index.jsx
View File
src/routers/AppRouter.js → src/routers/AppRouter.jsx
View File
src/routers/PrivateRoute.js → src/routers/PrivateRoute.jsx
View File
src/routers/PublicRoute.js → src/routers/PublicRoute.jsx
View File
tsconfig.json
+19 -79
View File
@@ -1,85 +1,25 @@
{
"compilerOptions": {
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "CommonJS" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
// "lib": [], /* Specify library files to be included in the compilation. */
"allowJs": true /* Allow javascript files to be compiled. */,
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist" /* Redirect output structure to the directory. */,
"rootDir": "./backend" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Module Resolution Options */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": [
"./node_modules/@types"
] /* List of folders to include type definitions from. */,
"types": [
"node"
] /* Type declaration files to be included in compilation. */,
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"exclude": [
"serverUtils",
"src",
"tests",
"key",
"public",
"node_modules",
"webpack.config.js",
"dist",
"webUI",
"webUI.config.js",
"webUISetup",
"webUISetup.config.js",
"vite.config.js",
"tailwind.config.js",
"postcss.config.js"
]
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
+11
View File
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}
vite.config.js → vite.config.ts
+2 -4
View File
@@ -3,10 +3,8 @@ import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
esbuild: {
include: /\.js$/,
exclude: [],
loader: "jsx",
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"], // Include these extensions
},
server: {
proxy: {
webpack.config.js
-94
View File
@@ -1,94 +0,0 @@
// Entry Point -> Output
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
//console.log("node env", process.env.NODE_ENV);
//process.env.NODE_ENV = process.env.NODE_ENV || "development"
//console.log("node env", process.env.NODE_ENV);
module.exports = (env) => {
//console.log("env docker", process.env.DOCKER);
if (env === "test") {
console.log("Loading test env variables");
require("dotenv").config({ path: ".env.test" });
} else if (env === "development") {
console.log("Loading development env variables");
require("dotenv").config({ path: ".env.development" });
} else {
console.log("Loading production env variables");
require("dotenv").config({ path: ".env.production" });
require("dotenv").config({ path: "docker-variables.env" });
}
console.log("env", env);
const isProduction = env === "production";
console.log("is prod", isProduction);
const CSSExtract = new MiniCssExtractPlugin({ filename: "styles.css" });
return {
entry: "./src/app.js",
output: {
path: path.join(__dirname, "public", "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/,
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
implementation: require("dart-sass"),
sourceMap: true,
},
},
],
},
],
},
plugins: [
CSSExtract,
new webpack.DefinePlugin({
"process.env.PORT": JSON.stringify(process.env.PORT),
"process.env.REMOTE_URL": JSON.stringify(process.env.REMOTE_URL),
"process.env.ENABLE_VIDEO_TRANSCODING": JSON.stringify(
process.env.ENABLE_VIDEO_TRANSCODING
),
"process.env.DISABLE_STORAGE": JSON.stringify(
process.env.DISABLE_STORAGE
),
"process.env.COMMERCIAL_MODE": JSON.stringify(
process.env.COMMERCIAL_MODE
),
}),
new CompressionPlugin(),
],
devtool: isProduction ? "source-map" : "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "public"),
historyApiFallback: true,
publicPath: "/dist/",
},
};
};