mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-12 02:42:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(marketplace & achievements): Structural achanges and fixes

Browse Source 
Co-authored-by: Isaac <contact@eartharoid.me>
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
2024-02-19 23:37:25 +00:00
parent e0ced3de08
commit 4975bd3077
26 changed files with 318 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/features/modals/main/marketplace/components/Collection/Collection.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
import { Button } from 'components/Elements';
import variables from 'config/variables';
const Collection = ({ collection, toggle, collectionFunction }) => {
const { news, background_colour, img, display_name, description, name } = collection;
const getStyle = () => {
if (news) {
return { backgroundColor: background_colour };
}
return {
backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
};
};
return (
<div className="collection" style={getStyle()}>
<div className="content">
<span className="title">{display_name} using component</span>
<span className="subtitle">{description}</span>
</div>
{collection.news === true ? (
<a
className="btn-collection"
href={collection.news_link}
target="_blank"
rel="noopener noreferrer"
>
{variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
</a>
) : (
<Button
type="collection"
onClick={() => collectionFunction(collection.name)}
icon={<MdOutlineArrowForward />}
label={variables.getMessage('modals.main.marketplace.explore_collection')}
iconPlacement={'right'}
/>
)}
{/*<Button
type="collection"
onClick={() => toggle('collection', name)}
icon={<MdOutlineArrowForward />}
label={variables.getMessage('modals.main.marketplace.explore_collection')}
iconPlacement="right"
/>*/}
</div>
);
};
export default Collection;
export { Collection };

1
src/features/modals/main/marketplace/components/Collection/index.jsx Normal file
View File

@@ -0,0 +1 @@
export * from './Collection';

4
src/features/helpers/carousel/Carousel.jsx → src/features/modals/main/marketplace/components/Elements/Carousel/Carousel.jsx
View File

@@ -86,4 +86,6 @@ function EmblaCarousel({ data }) {
);
}
export default memo(EmblaCarousel);
const Carousel = memo(EmblaCarousel);
export { Carousel as default, Carousel };

1
src/features/helpers/carousel/carousel.scss → src/features/modals/main/marketplace/components/Elements/Carousel/carousel.scss
View File

@@ -22,6 +22,7 @@
.carousel_container {
display: flex;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
margin-left: -10px;

1
src/features/modals/main/marketplace/components/Elements/Carousel/index.jsx Normal file
View File

@@ -0,0 +1 @@
export * from './Carousel';

4
src/features/modals/main/marketplace/Lightbox.jsx → src/features/modals/main/marketplace/components/Elements/Lightbox/Lightbox.jsx
View File

@@ -14,4 +14,6 @@ function Lightbox({ modalClose, img }) {
);
}
export default memo(Lightbox);
const MemoizedLightbox = memo(Lightbox);
export default MemoizedLightbox;
export { MemoizedLightbox as Lightbox };

1
src/features/modals/main/marketplace/components/Elements/Lightbox/index.jsx Normal file
View File

@@ -0,0 +1 @@
export * from './Lightbox';

6
src/features/modals/main/marketplace/SideloadFailedModal.jsx → src/features/modals/main/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
View File

@@ -2,6 +2,7 @@ import { memo } from 'react';
import variables from 'config/variables';
import { MdClose } from 'react-icons/md';
import { Tooltip } from 'components/Elements';
function SideloadFailedModal({ modalClose, reason }) {
return (
<div className="smallModal">
@@ -21,4 +22,7 @@ function SideloadFailedModal({ modalClose, reason }) {
);
}
export default memo(SideloadFailedModal);
const MemoizedSideloadFailedModal = memo(SideloadFailedModal);
export default MemoizedSideloadFailedModal;
export { MemoizedSideloadFailedModal as SideloadFailedModal };

1
src/features/modals/main/marketplace/components/Elements/SideloadFailedModal/index.jsx Normal file
View File

@@ -0,0 +1 @@
export * from './SideloadFailedModal';

3
src/features/modals/main/marketplace/components/Elements/index.jsx Normal file
View File

@@ -0,0 +1,3 @@
export * from './Carousel';
export * from './SideloadFailedModal';
export * from './Lightbox';

8
src/features/modals/main/marketplace/Item.jsx → src/features/modals/main/marketplace/components/Items/Item.jsx
View File

@@ -1,7 +1,5 @@
import variables from 'config/variables';
import { PureComponent, Fragment } from 'react';
import { Tooltip } from 'components/Elements';
import ImageCarousel from 'features/helpers/carousel/Carousel';
import { toast } from 'react-toastify';
import {
MdIosShare,
@@ -21,7 +19,7 @@ import { Header } from 'components/Layout/Settings';
import { Button } from 'components/Elements';
import { install, uninstall } from 'utils/marketplace';
import { Carousel } from '../Elements/Carousel';
import { ShareModal } from 'components/Elements';
class Item extends PureComponent {
@@ -124,7 +122,7 @@ class Item extends PureComponent {
{this.props.data.data.photos && (
<div className="carousel">
<div className="carousel_container">
<ImageCarousel data={this.props.data.data.photos} />
<Carousel data={this.props.data.data.photos} />
</div>
</div>
)}
@@ -306,4 +304,4 @@ class Item extends PureComponent {
}
}
export default Item;
export { Item as default, Item };

4
src/features/modals/main/marketplace/Items.jsx → src/features/modals/main/marketplace/components/Items/Items.jsx
View File

@@ -3,6 +3,7 @@ import React, { memo } from 'react';
import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
import { Button } from 'components/Elements';
import MemoizedLightbox from '../Elements/Lightbox/Lightbox';
function Items({
type,
@@ -114,4 +115,5 @@ function Items({
);
}
export default memo(Items);
const MemoizedItems = memo(Items);
export { MemoizedItems as default, MemoizedItems as Items };

2
src/features/modals/main/marketplace/components/index.jsx Normal file
View File

@@ -0,0 +1,2 @@
export * from './Elements';
export * from './Items';

9
src/features/modals/main/marketplace/sections/Added.jsx → src/features/modals/main/marketplace/views/Added.jsx
View File

@@ -4,11 +4,10 @@ import { MdUpdate, MdOutlineExtensionOff, MdSendTimeExtension } from 'react-icon
import { toast } from 'react-toastify';
import Modal from 'react-modal';
import SideloadFailedModal from '../SideloadFailedModal';
import FileUpload from '../../../../../components/Form/Settings/FileUpload/FileUpload';
import Item from '../Item';
import Items from '../Items';
import Dropdown from '../../../../../components/Form/Settings/Dropdown/Dropdown';
import { SideloadFailedModal } from '../components/Elements/SideloadFailedModal/SideloadFailedModal';
import Item from '../components/Items/Item';
import Items from '../components/Items/Items';
import { Dropdown, FileUpload } from 'components/Form/Settings';
import { Header, CustomActions } from 'components/Layout/Settings';
import { Button } from 'components/Elements';

4
src/features/modals/main/marketplace/sections/Marketplace.jsx → src/features/modals/main/marketplace/views/Browse.jsx
View File

@@ -10,8 +10,8 @@ import {
MdLibraryAdd,
} from 'react-icons/md';
import Item from '../Item';
import Items from '../Items';
import Item from '../components/Items/Item';
import Items from '../components/Items/Items';
import Dropdown from '../../../../../components/Form/Settings/Dropdown/Dropdown';
import { Header } from 'components/Layout/Settings';
import { Button } from 'components/Elements';

0
src/features/modals/main/marketplace/sections/Create.jsx → src/features/modals/main/marketplace/views/Create.jsx
View File

2
src/features/modals/main/settings/sections/Changelog.jsx
View File

@@ -3,7 +3,7 @@ import { PureComponent, createRef } from 'react';
import { MdOutlineWifiOff } from 'react-icons/md';
import Modal from 'react-modal';
import Lightbox from '../../marketplace/Lightbox';
import Lightbox from '../../marketplace/components/Elements/Lightbox/Lightbox';
export default class Changelog extends PureComponent {
constructor() {

57
src/features/modals/main/settings/sections/Stats.jsx
View File

@@ -10,31 +10,14 @@ import { Header, CustomActions } from 'components/Layout/Settings';
import { saveFile } from 'utils/saveFile';
import achievementsData from 'utils/data/achievements.json';
import translations from 'i18n/locales/achievements/index';
const achievementLanguage = {
de_DE: translations.de_DE,
en_GB: translations.en_GB,
en_US: translations.en_US,
es: translations.es,
fr: translations.fr,
nl: translations.nl,
no: translations.no,
ru: translations.ru,
zh_CN: translations.zh_CN,
id_ID: translations.id_ID,
tr_TR: translations.tr_TR,
bn: translations.bn,
pt_BR: translations.pt_BR,
};
import { translations, achievements } from 'utils/achievements';
export default class Stats extends PureComponent {
constructor() {
super();
this.state = {
stats: JSON.parse(localStorage.getItem('statsData')) || {},
achievements: achievementsData.achievements,
achievements,
};
}
@@ -79,7 +62,7 @@ export default class Stats extends PureComponent {
this.setState({
stats: {},
});
toast('Stats reset');
toast(variables.getMessage('toasts.stats_reset'));
this.getAchievements();
this.forceUpdate();
}
@@ -92,23 +75,35 @@ export default class Stats extends PureComponent {
saveFile(JSON.stringify(this.state.stats, null, 2), filename);
}
getLocalisedAchievementData(id) {
const localised = translations[variables.languagecode][id] ||
translations.en_GB[id] || { name: id, description: '' };
return {
name: localised.name,
description: localised.description,
};
}
componentDidMount() {
this.getAchievements();
this.forceUpdate();
}
render() {
const achievementElement = (key, name, achieved) => (
<div className="achievement">
<FaTrophy />
<div className={'achievementContent' + (achieved ? ' achieved' : '')}>
<span>{name}</span>
<span className="subtitle">
{achievementLanguage[localStorage.getItem('language')][key]}
</span>
const achievementElement = (key, id, achieved) => {
const { name, description } = this.getLocalisedAchievementData(id);
return (
<div className="achievement" key={key}>
<FaTrophy />
<div className={'achievementContent' + (achieved ? ' achieved' : '')}>
<span>{name}</span>
<span className="subtitle">{description}</span>
</div>
</div>
</div>
);
);
};
const STATS_SECTION = 'modals.main.settings.sections.stats';
@@ -220,7 +215,7 @@ export default class Stats extends PureComponent {
<div className="achievements">
{this.state.achievements.map((achievement, index) => {
if (achievement.achieved) {
return achievementElement(index, achievement.name, achievement.achieved);
return achievementElement(index, achievement.id, achievement.achieved);
}
})}
</div>

4
src/features/modals/main/tabs/Addons.jsx
View File

@@ -2,8 +2,8 @@ import variables from 'config/variables';
import { memo } from 'react';
import Tabs from './backend/Tabs';
import Added from '../marketplace/sections/Added';
import Create from '../marketplace/sections/Create';
import Added from '../marketplace/views/Added';
import Create from '../marketplace/views/Create';
function Addons(props) {
return (

2
src/features/modals/main/tabs/Marketplace.jsx
View File

@@ -2,7 +2,7 @@ import variables from 'config/variables';
import { memo } from 'react';
import Tabs from './backend/Tabs';
import MarketplaceTab from '../marketplace/sections/Marketplace';
import MarketplaceTab from '../marketplace/views/Browse';
function Marketplace(props) {
return (