feat: move all sideload logic to added, drag and drop upload, update deps

This commit is contained in:
David Ralph 2022-10-28 14:47:34 +01:00
parent 05b787db5a
commit fadbb84b6e
7 changed files with 992 additions and 1096 deletions

View File

@ -11,23 +11,23 @@
"license": "BSD-3-Clause",
"version": "7.0.0",
"dependencies": {
"@eartharoid/i18n": "1.1.0",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@eartharoid/i18n": "1.2.1",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@floating-ui/react-dom": "^1.0.0",
"@fontsource/lexend-deca": "4.5.11",
"@fontsource/montserrat": "4.5.12",
"@mui/material": "5.10.2",
"@sentry/react": "^7.11.1",
"embla-carousel-autoplay": "^7.0.1",
"embla-carousel-react": "^7.0.1",
"@fontsource/lexend-deca": "4.5.12",
"@fontsource/montserrat": "4.5.13",
"@mui/material": "5.10.11",
"@sentry/react": "^7.17.2",
"embla-carousel-autoplay": "^7.0.3",
"embla-carousel-react": "^7.0.3",
"image-conversion": "^2.1.1",
"react": "^18.2.0",
"react-clock": "3.1.0",
"react-color-gradient-picker": "0.1.2",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-modal": "3.15.1",
"react-icons": "^4.6.0",
"react-modal": "3.16.1",
"react-sortable-hoc": "2.0.0",
"react-toastify": "9.0.8"
},
@ -35,16 +35,16 @@
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@eartharoid/deep-merge": "^0.0.2",
"@vitejs/plugin-react": "^2.0.1",
"eslint": "^8.22.0",
"@vitejs/plugin-react": "^2.2.0",
"eslint": "^8.26.0",
"eslint-config-react-app": "^7.0.1",
"husky": "^8.0.1",
"prettier": "^2.7.1",
"sass": "^1.54.5",
"stylelint": "^14.10.0",
"sass": "^1.55.0",
"stylelint": "^14.14.0",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard-scss": "^5.0.0",
"vite": "^3.0.9"
"stylelint-config-standard-scss": "^6.0.0",
"vite": "^3.2.1"
},
"scripts": {
"dev": "vite",

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { PureComponent, createRef } from 'react';
import { MdUpdate, MdOutlineExtensionOff, MdCode } from 'react-icons/md';
import { toast } from 'react-toastify';
import Modal from 'react-modal';
@ -29,6 +29,7 @@ export default class Added extends PureComponent {
</button>
),
};
this.customDnd = createRef(null);
}
installAddon(input) {
@ -163,6 +164,24 @@ export default class Added extends PureComponent {
componentDidMount() {
this.sortAddons(localStorage.getItem('sortAddons'), false);
const dnd = this.customDnd.current;
dnd.ondragover = dnd.ondragenter = (e) => {
e.preventDefault();
};
dnd.ondrop = (e) => {
e.preventDefault();
const reader = new FileReader();
const file = e.dataTransfer.files[0];
reader.readAsText(file, 'UTF-8');
reader.onload = (e) => {
console.log(e.target.result)
return this.installAddon(e.target.result);
};
e.preventDefault();
};
}
render() {
@ -197,11 +216,15 @@ export default class Added extends PureComponent {
<span className="mainTitle">{variables.getMessage('modals.main.navbar.addons')}</span>
</div>
<div className="filter">
{sideLoadBackendElements()}
<button className="sideload " onClick={() => document.getElementById('file-input').click()}>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
{sideLoadBackendElements()}
<button
className="sideload"
onClick={() => document.getElementById('file-input').click()}
ref={this.customDnd}
>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
</div>
<div className="emptyItems">
<div className="emptyNewMessage">
@ -234,14 +257,18 @@ export default class Added extends PureComponent {
<div className="filter">
{sideLoadBackendElements()}
<div className="buttonSection">
<button className="sideload " onClick={() => document.getElementById('file-input').click()}>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
<button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
<MdUpdate />
{variables.getMessage('modals.main.addons.check_updates')}
</button>
<button
className="sideload"
onClick={() => document.getElementById('file-input').click()}
ref={this.customDnd}
>
{variables.getMessage('modals.main.addons.sideload.title')}
<MdCode />
</button>
<button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
<MdUpdate />
{variables.getMessage('modals.main.addons.check_updates')}
</button>
</div>
<Dropdown
label={variables.getMessage('modals.main.addons.sort.title')}

View File

@ -1,97 +0,0 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdIntegrationInstructions, MdOutlineFileUpload } from 'react-icons/md';
import { toast } from 'react-toastify';
import Modal from 'react-modal';
import SideloadFailedModal from '../SideloadFailedModal';
import FileUpload from '../../settings/FileUpload';
import { install } from 'modules/helpers/marketplace';
export default class Sideload extends PureComponent {
constructor(props) {
super(props);
this.state = {
showFailed: false,
failedReason: '',
};
}
installAddon(input) {
let failedReason = '';
if (!input.name) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_name');
} else if (!input.author) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_author');
} else if (!input.type) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_type');
} else if (!input.version) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.no_version');
} else if (
input.type === 'photos' &&
(!input.photos ||
!input.photos.length ||
!input.photos[0].url ||
!input.photos[0].url.default ||
!input.photos[0].photographer ||
!input.photos[0].location)
) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.invalid_photos');
} else if (
input.type === 'quotes' &&
(!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)
) {
failedReason = variables.getMessage('modals.main.addons.sideload.errors.invalid_quotes');
}
if (failedReason !== '') {
return this.setState({
failedReason,
showFailed: true,
});
}
install(input.type, input);
toast(variables.getMessage('toasts.installed'));
variables.stats.postEvent('marketplace', 'Sideload');
}
render() {
return (
<div className="emptyItems">
<div className="emptyMessage">
<FileUpload
id="file-input"
type="settings"
accept="application/json"
loadFunction={(e) => this.installAddon(JSON.parse(e))}
/>
<MdIntegrationInstructions className="sideloadIcon" />
<span className="title">{variables.getMessage('modals.main.addons.sideload.title')}</span>
<span className="subtitle">
{variables.getMessage('modals.main.addons.sideload.description')}
</span>
<button onClick={() => document.getElementById('file-input').click()}>
<MdOutlineFileUpload />
{variables.getMessage('modals.main.settings.sections.background.source.upload')}
</button>
</div>
<Modal
closeTimeoutMS={100}
onRequestClose={() => this.setState({ showFailed: false })}
isOpen={this.state.showFailed}
className="Modal resetmodal mainModal sideloadModal"
overlayClassName="Overlay resetoverlay"
ariaHideApp={false}
>
<SideloadFailedModal
modalClose={() => this.setState({ showFailed: false })}
reason={this.state.failedReason}
/>
</Modal>
</div>
);
}
}

View File

@ -17,7 +17,6 @@ import Checkbox from '../../Checkbox';
import FileUpload from '../../FileUpload';
import Tooltip from '../../../../../helpers/tooltip/Tooltip'
import Modal from 'react-modal';
import CustomURLModal from './CustomURLModal';

View File

@ -2,7 +2,6 @@ import variables from 'modules/variables';
import Tabs from './backend/Tabs';
import Added from '../marketplace/sections/Added';
import Sideload from '../marketplace/sections/Sideload';
import Create from '../marketplace/sections/Create';
export default function Addons(props) {
@ -11,9 +10,6 @@ export default function Addons(props) {
<div label={variables.getMessage('modals.main.addons.added')} name="added">
<Added />
</div>
<div label={variables.getMessage('modals.main.addons.sideload.title')} name="sideload">
<Sideload />
</div>
<div label={variables.getMessage('modals.main.addons.create.title')} name="create">
<Create />
</div>

View File

@ -21,7 +21,6 @@ import {
MdOutlineAssessment as Stats,
MdOutlineNewReleases as Changelog,
MdInfoOutline as About,
MdCode as Sideload,
MdAddCircleOutline as Added,
MdAddCircleOutline as Create,
MdViewAgenda as Overview,
@ -116,9 +115,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
mue = true;
icon = <Added />;
break;
case variables.getMessage('modals.main.addons.sideload.title'):
icon = <Sideload />;
break;
case variables.getMessage('modals.main.addons.create.title'):
icon = <Create />;
break;