From 4a427e23d8a5a1a88333d0627ed2ca71ddab58c0 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 7 Mar 2021 19:06:49 +0000 Subject: [PATCH] Fix marketplace and addons (WIP) --- package.json | 4 +- src/components/ErrorBoundary.jsx | 12 +- src/components/modals/marketplace/Items.jsx | 31 +-- .../modals/marketplace/sections/Added.jsx | 93 +++++++ .../marketplace/sections/Marketplace.jsx | 176 +++++++++++++ src/components/modals/tabs/Addons.jsx | 137 ++--------- src/components/modals/tabs/Marketplace.jsx | 232 ++---------------- src/components/modals/tabs/backend/Tab.jsx | 2 +- src/scss/modules/_marketplace.scss | 2 +- 9 files changed, 319 insertions(+), 370 deletions(-) create mode 100644 src/components/modals/marketplace/sections/Added.jsx create mode 100644 src/components/modals/marketplace/sections/Marketplace.jsx diff --git a/package.json b/package.json index 74f721e7..df27b166 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "version": "5.0.0", "dependencies": { "@eartharoid/dtf": "^1.0.8", - "@fontsource/lexend-deca": "^4.2.2", - "@fontsource/roboto": "^4.2.1", + "@fontsource/lexend-deca": "^4.2.3", + "@fontsource/roboto": "^4.2.2", "@material-ui/core": "4.11.3", "@material-ui/icons": "4.11.2", "react": "17.0.1", diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx index 514e5891..40870073 100644 --- a/src/components/ErrorBoundary.jsx +++ b/src/components/ErrorBoundary.jsx @@ -3,16 +3,18 @@ import React from 'react'; export default class ErrorBoundary extends React.PureComponent { constructor(props) { super(props); - this.state = { hasError: false, error: '' }; + this.state = { + error: false + }; } static getDerivedStateFromError(error) { - console.log(error); - return { hasError: true, error: error }; + console.log(error); + return { error: true }; } render() { - if (this.state.hasError) { + if (this.state.error) { return (

Error

@@ -24,4 +26,4 @@ export default class ErrorBoundary extends React.PureComponent { return this.props.children; } - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/marketplace/Items.jsx index e62ef487..acf55904 100644 --- a/src/components/modals/marketplace/Items.jsx +++ b/src/components/modals/marketplace/Items.jsx @@ -2,28 +2,19 @@ import React from 'react'; export default function Items(props) { if (props.items.length === 0) { - return null; // if there are no items in category don't render it - } - - let seeMoreHTML; - if (props.seeMoreFunction && props.items.length === 3) { - seeMoreHTML = ; // only render see more button if there are enough addons + return null; // todo: add message here } return ( -
- {seeMoreHTML} -

{props.title}

-
- {props.items.map((item) => -
props.toggleFunction(item.name)} key={item.name}> - icon -
-

{item.display_name ? item.display_name : item.name}

-

{item.author}

-
-
)} -
-
+
+ {props.items.map((item) => +
props.toggleFunction(item.name)} key={item.name}> + icon +
+

{item.display_name ? item.display_name : item.name}

+

{item.author}

+
+
)} +
); } \ No newline at end of file diff --git a/src/components/modals/marketplace/sections/Added.jsx b/src/components/modals/marketplace/sections/Added.jsx new file mode 100644 index 00000000..f127ab3c --- /dev/null +++ b/src/components/modals/marketplace/sections/Added.jsx @@ -0,0 +1,93 @@ +import React from 'react'; + +import LocalMallIcon from '@material-ui/icons/LocalMall'; +import Item from '../Item'; +import Items from '../Items'; +import FileUpload from '../../settings/FileUpload'; + +export default class Added extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + installed: JSON.parse(localStorage.getItem('installed')), + current_data: { + type: '', + name: '', + content: {} + }, + item_data: { + name: 'Name', + author: 'Author', + description: 'Description', + updated: '???', + version: '1.0.0', + icon: '' + }, + button: '' + } + this.buttons = { + uninstall: , + } + } + + toggle(type, type2, data) { + if (type === 'item') { + const installed = JSON.parse(localStorage.getItem('installed')); + const info = installed.find(i => i.name === data); + + this.setState({ + current_data: { + type: type2, + name: data, + content: info + }, + item_data: { + name: info.name, + author: info.author, + description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '
')), + updated: 'Not Implemented', + version: info.version, + icon: info.screenshot_url + } + }); + + document.getElementById('item').style.display = 'block'; + document.getElementById('marketplace').style.display = 'none'; + } else { + document.getElementById('marketplace').style.display = 'block'; + document.getElementById('item').style.display = 'none'; + } + + this.setState({ + button: this.buttons.uninstall + }); +} + + + render() { + let content = this.toggle('item', 'addon', input)} />; + + if (this.state.installed.length === 0) { + content = ( +
+
+ +

Empty

+

Nothing here (yet)

+ +
+
+ ); + } + + return ( + +
+ this.manage('install', JSON.parse(e.target.result))} /> + + {content} +
+ + ); + } +} \ No newline at end of file diff --git a/src/components/modals/marketplace/sections/Marketplace.jsx b/src/components/modals/marketplace/sections/Marketplace.jsx new file mode 100644 index 00000000..748f417b --- /dev/null +++ b/src/components/modals/marketplace/sections/Marketplace.jsx @@ -0,0 +1,176 @@ +import React from 'react'; + +import WifiOffIcon from '@material-ui/icons/WifiOff'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import Item from '../Item'; +import Items from '../Items'; + +import MarketplaceFunctions from '../../../../modules/helpers/marketplace'; + +import { toast } from 'react-toastify'; + +import * as Constants from '../../../../modules/constants'; + +export default class Marketplace extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + items: [], + current_data: { + type: '', + name: '', + content: {} + }, + button: '', + featured: {}, + done: false, + item_data: { + name: 'Name', + author: 'Author', + description: 'Description', + updated: '???', + version: '1.0.0', + icon: '' + } + } + this.buttons = { + uninstall: , + install: + } + } + + async toggle(type, data) { + switch (type) { + case 'item': + let info; // get item info + try { + info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json(); + } catch (e) { + return toast(this.props.toastLanguage.error); + } + + // check if already installed + let button = this.buttons.install; + + const installed = JSON.parse(localStorage.getItem('installed')); + + if (installed.some(item => item.name === data)) { + button = this.buttons.uninstall; + } + + this.setState({ + current_data: { type: this.props.type, name: data, content: info }, + item_data: { + name: info.data.name, + author: info.data.author, + description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '
')), + updated: info.updated, + version: info.data.version, + icon: info.data.screenshot_url + }, + button: button + }); + + document.getElementById('marketplace').style.display = 'none'; + document.getElementById('item').style.display = 'block'; + break; + + default: + document.getElementById('marketplace').style.display = 'block'; + document.getElementById('item').style.display = 'none'; + break; + } + } + + async getItems() { + const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); + const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); + + this.setState({ + items: data[this.props.type], + featured: featured.data, + done: true + }); + } + + manage(type) { + switch (type) { + case 'install': + MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); + break; + case 'uninstall': + MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); + break; + default: + break; + } + + toast(this.props.toastLanguage[type + 'ed']); + this.setState({ + button: (type === 'install') ? this.buttons.uninstall : this.buttons.install + }); + } + + componentDidMount() { + if (localStorage.getItem('animations') === 'true') { + document.getElementById('marketplace').classList.add('marketplaceanimation'); + } + + if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { + return; + } + + this.getItems(); + } + + render() { + const errorMessage = (msg) => { + return ( +
+
+ {msg} +
+
+ ); + } + + if (navigator.onLine === false) { + return errorMessage( + + +

Offline

+

Mue down!

+ + ); + } + + if (localStorage.getItem('offlineMode') === 'true') { + return errorMessage( + + +

Offline mode is enabled

+

Please turn off offline mode to access the marketplace

+ + ); + } + + if (this.state.done === false) { + return errorMessage(

Loading

); + } + + return ( + +
+
+

{this.state.featured.title}

+

{this.state.featured.name}

+ +
+ this.toggle('item', input)} /> +
+ + ); + } +} \ No newline at end of file diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx index 4a4e6b21..fd599da8 100644 --- a/src/components/modals/tabs/Addons.jsx +++ b/src/components/modals/tabs/Addons.jsx @@ -1,129 +1,20 @@ import React from 'react'; -import LocalMallIcon from '@material-ui/icons/LocalMall'; -import Item from '../marketplace/Item'; -import Items from '../marketplace/Items'; -import FileUpload from '../settings/FileUpload'; +import Added from '../marketplace/sections/Added'; -import { toast } from 'react-toastify'; - -import MarketplaceFunctions from '../../../modules/helpers/marketplace'; - -export default class Addons extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - installed: JSON.parse(localStorage.getItem('installed')), - current_data: { - type: '', - name: '', - content: {} - }, - item_data: { - name: 'Name', - author: 'Author', - description: 'Description', - updated: '???', - version: '1.0.0', - icon: '' - }, - button: '' - } - this.buttons = { - uninstall: , - } - } - - toggle(type, type2, data) { - if (type === 'item') { - const installed = JSON.parse(localStorage.getItem('installed')); - const info = installed.find(i => i.name === data); - - this.setState({ - current_data: { - type: type2, - name: data, - content: info - }, - item_data: { - name: info.name, - author: info.author, - description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '
')), - updated: 'Not Implemented', - version: info.version, - icon: info.screenshot_url - } - }); - - document.getElementById('item').style.display = 'block'; - document.getElementById('marketplace').style.display = 'none'; - } else { - document.getElementById('marketplace').style.display = 'block'; - document.getElementById('item').style.display = 'none'; - } - - this.setState({ - button: this.buttons.uninstall - }); - } - - manage(type, input) { - switch (type) { - case 'install': - MarketplaceFunctions.install(input.type, input, true); - break; - case 'uninstall': - MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); - break; - default: - break; - } - - toast(this.props.toastLanguage[type + 'ed']); - - let button = ''; - if (type === 'install') { - button = this.buttons.uninstall; - } - - this.setState({ - button: button, - installed: JSON.parse(localStorage.getItem('installed')) - }); - } - - componentDidMount() { - if (localStorage.getItem('animations') === 'true') { - document.getElementById('marketplace').classList.add('marketplaceanimation'); - } - } - - render() { - let content = this.toggle('item', 'addon', input)} />; - - if (this.state.installed.length === 0) { - content = ( -
-
- -

{this.props.language.empty.title}

-

{this.props.language.empty.description}

- -
-
- ); - } +import AddonsTabs from './backend/Tabs'; +export default function Addons (props) { return ( - -
- this.manage('install', JSON.parse(e.target.result))} /> - -

{this.props.language.added}

- {content} -
- this.toggle()} language={this.props.marketplaceLanguage.product} /> - - ); - } + + +
+ +
+
+ +
+ + + ); } \ No newline at end of file diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx index 4e508134..cb660da6 100644 --- a/src/components/modals/tabs/Marketplace.jsx +++ b/src/components/modals/tabs/Marketplace.jsx @@ -1,223 +1,19 @@ import React from 'react'; -import WifiOffIcon from '@material-ui/icons/WifiOff'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import Item from '../marketplace/Item'; -import Items from '../marketplace/Items'; - -import MarketplaceFunctions from '../../../modules/helpers/marketplace'; - -import { toast } from 'react-toastify'; - -import * as Constants from '../../../modules/constants'; - -export default class Marketplace extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - settings: [], - photo_packs: [], - quote_packs: [], - see_more: [], - see_more_type: '', - current_data: { - type: '', - name: '', - content: {} - }, - button: '', - featured: {}, - done: false, - item_data: { - name: 'Name', - author: 'Author', - description: 'Description', - updated: '???', - version: '1.0.0', - icon: '' - } - } - this.buttons = { - uninstall: , - install: - } - } - - async toggle(type, type2, data) { - switch (type) { - case 'seemore': - document.getElementById('marketplace').style.display = 'none'; - document.getElementById('seemore').style.display = 'block'; - - this.setState({ - see_more: this.state[type2], - see_more_type: type2 - }); - break; - - case 'item': - let info; // get item info - try { - info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); - } catch (e) { - return toast(this.props.toastLanguage.error); - } - - // check if already installed - let button = this.buttons.install; - - const installed = JSON.parse(localStorage.getItem('installed')); - - if (installed.some(item => item.name === data)) { - button = this.buttons.uninstall; - } - - this.setState({ - current_data: { type: type2, name: data, content: info }, - item_data: { - name: info.data.name, - author: info.data.author, - description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '
')), - updated: info.updated, - version: info.data.version, - icon: info.data.screenshot_url - }, - button: button - }); - - document.getElementById('marketplace').style.display = 'none'; - document.getElementById('seemore').style.display = 'none'; - document.getElementById('item').style.display = 'block'; - break; - - default: - document.getElementById('marketplace').style.display = 'block'; - document.getElementById('item').style.display = 'none'; - document.getElementById('seemore').style.display = 'none'; - break; - } - } - - async getItems() { - const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json(); - const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json(); - - this.setState({ - settings: data.settings, - photo_packs: data.photo_packs, - quote_packs: data.quote_packs, - see_more: data.photo_packs, - featured: featured.data, - done: true - }); - } - - manage(type) { - switch (type) { - case 'install': - MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); - break; - case 'uninstall': - MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); - break; - default: - break; - } - - toast(this.props.toastLanguage[type + 'ed']); - this.setState({ - button: (type === 'install') ? this.buttons.uninstall : this.buttons.install - }); - } - - componentDidMount() { - if (localStorage.getItem('animations') === 'true') { - document.getElementById('marketplace').classList.add('marketplaceanimation'); - } - - if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { - return; - } - - this.getItems(); - } - - render() { - const errorMessage = (msg) => { - return ( -
-
- {msg} -
-
- ); - } - - if (navigator.onLine === false) { - return errorMessage( - - -

{this.props.language.offline.title}

-

{this.props.language.offline.description}

- - ); - } - - if (localStorage.getItem('offlineMode') === 'true') { - return errorMessage( - - -

Offline mode is enabled

-

Please turn off offline mode to access the marketplace

- - ); - } - - if (this.state.done === false) { - return errorMessage(

{this.props.updateLanguage.loading}

); - } +import MarketplaceBackend from '../marketplace/sections/Marketplace'; +import MarketplaceTabs from './backend/Tabs'; +export default function Marketplace (props) { return ( - -
-
-

{this.state.featured.title}

-

{this.state.featured.name}

- -
- this.toggle('item', 'photo_packs', input)} - seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} /> - this.toggle('item', 'settings', input)} - seeMoreFunction={() => this.toggle('seemore', 'settings')} /> - this.toggle('item', 'quote_packs', input)} - seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} /> -
- this.toggle()} language={this.props.language.product} /> -
- this.toggle()} /> - this.toggle('item', this.state.see_more_type, input)} - items={this.state.see_more} /> -
- - ); - } + + +
+ +
+
+ +
+ + + ); } \ No newline at end of file diff --git a/src/components/modals/tabs/backend/Tab.jsx b/src/components/modals/tabs/backend/Tab.jsx index 21492d7c..4d098e14 100644 --- a/src/components/modals/tabs/backend/Tab.jsx +++ b/src/components/modals/tabs/backend/Tab.jsx @@ -67,7 +67,7 @@ export default class Tab extends React.PureComponent { // Store case 'Themes': icon = ; break; case 'Photo Packs': icon = ; break; - case 'Quotes Packs': icon = ; break; + case 'Quote Packs': icon = ; break; case 'Plugins': icon = ; divider =
; diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 7703ebe7..c4e19158 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -9,7 +9,7 @@ .items { display: flex; - margin-top: -10px; + margin-top: 15px; .item { position: relative;