Mirrors
/
vizality
mirror of https://github.com/vizality/vizality
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

some dashboard components cleanup and testing

Browse Source
pull/67/head
dperolio 3 years ago
parent b277745c12
commit e08379343c
No known key found for this signature in database
GPG Key ID: 3E9BBAA710D3DDCE
5 changed files with 119 additions and 151 deletions
Show Stats Download Patch File Download Diff File

99
src/core/builtins/dashboard/pages/Home.jsx
Unescape View File

@ -0,0 +1,99 @@
import { Section, Card, WaveDivider } from '@vizality/components/dashboard';
import React, { memo, useEffect, useState } from 'react';
import { Button, Icon } from '@vizality/components';
import { getModule } from '@vizality/webpack';
import { Guild } from '@vizality/constants';
export default memo(() => {
const [ hasJoinedDiscord, setHasJoinedDiscord ] = useState(false);
const guilds = getModule('getGuild', 'getGuilds').getGuilds();
const { getCurrentUser } = getModule('getCurrentUser');
const { username } = getCurrentUser();
useEffect(() => {
setHasJoinedDiscord(Boolean(Object.keys(guilds).find(guild => guild === Guild.ID)));
}, [ hasJoinedDiscord ]);
return (
<>
<Section className='vz-dashboard-home-section-cta'>
<div className='vz-dashboard-home-cta'>
<div className='vz-dashboard-home-cta-overlay-background'>
<div className='vz-dashboard-home-cta-background' />
</div>
<div className='vz-dashboard-home-cta-content'>
<Icon
className='vz-dashboard-home-cta-content-icon-wrapper'
iconClassName='vz-dashboard-home-cta-content-icon'
name='Vizality'
size='100%'
/>
<div className='vz-dashboard-home-cta-content-header-wrapper'>
<h1 className='vz-dashboard-home-cta-content-header'>Welcome, {username}!</h1>
<h3 className='vz-dashboard-home-cta-content-description'>
You've made the right choice. The power of customization is now at your fingertips. Check out the features below to learn how to harness your newfound power.
{!hasJoinedDiscord && ` Make sure you check out the Discord server, we'd love to have you!`}
</h3>
{!hasJoinedDiscord && <div className='vz-dashboard-home-cta-content-buttons-wrapper'>
<Button
className='vz-dashboard-home-cta-content-button'
onClick={() => {
const inviteStore = getModule('acceptInviteAndTransitionToInviteChannel');
const pop = getModule('popLayer');
inviteStore.acceptInviteAndTransitionToInviteChannel(Guild.INVITE);
pop.popAllLayers();
}}
color={Button.Colors.WHITE}
look={Button.Looks.FILLED}
size={Button.Sizes.LARGE}
>
Join the Discord Server
</Button>
</div>}
</div>
</div>
<Icon
className='vz-dashboard-home-cta-icon-wrapper'
name='PersonWaving'
size='100%'
/>
<WaveDivider />
</div>
</Section>
<Section className='vz-dashboard-home-section-features'>
<div className='vz-dashboard-home-features-wrapper'>
<div className='vz-dashboard-home-features'>
<Card
icon='Plugin'
header='Discover Plugins'
description='Explore our vast collection of official plugins. Plugins can add just about any new feature you can imagine to Discord.'
buttonText='Browse Plugins'
route='/vizality/plugins/browse'
/>
<Card
icon='Theme'
header='Discover Themes'
description='Explore our vast collection of official themes. Themes can change just small portions of the app or they can be full-blown redesigns.'
buttonText='Browse Themes'
route='/vizality/themes/browse'
/>
<Card
icon='UnknownUser'
header='Become a Developer'
description='Find out what it takes to start making your own plugins and themes. Come check out the guidelines and all the info you need to become an addon developer for Vizality.'
buttonText='Learn How'
route='/vizality/development'
/>
<Card
icon='Science'
header='Read the Docs'
description='Read about all the building blocks and tools we provide to make building plugins and themes easier for you.'
buttonText='Start Reading'
route='/vizality/docs'
/>
</div>
</div>
</Section>
</>
);
});

21
src/core/builtins/dashboard/pages/Test.jsx
Unescape View File

@ -10,6 +10,7 @@ const SlideIn = getModuleByDisplayName('SlideIn');
const { getCurrentUser } = getModule('getCurrentUser');
// eslint-disable-next-line no-empty-function
const { PremiumPaymentGuildAnimation } = getModule('PremiumPaymentGuildAnimation');
const KeybindEntry = (() => {
let keybindentry;
try {
@ -26,10 +27,28 @@ const KeybindEntry = (() => {
return keybindentry;
})();
const { usePaymentModalAnimationScene } = getModule('usePaymentModalAnimationScene');
export default memo(() => {
return (
<>
{/* e.WAITING = "WAITING",
e.PURCHASING = "PURCHASING",
e.FAIL = "FAIL",
e.COMPLETED = "COMPLETED" */}
<PremiumPaymentGuildAnimation
nextScene={
usePaymentModalAnimationScene({
purchaseState: 'PURCHASING',
currentStep: 'confirm',
initialScene: PremiumPaymentGuildAnimation.Scenes.ENTRY,
purchaseScene: PremiumPaymentGuildAnimation.Scenes.STARS,
errorScene: PremiumPaymentGuildAnimation.Scenes.ERROR,
successScene: PremiumPaymentGuildAnimation.Scenes.SUCCESS
})[0]
}
onScenePlay={PremiumPaymentGuildAnimation.getNextScene}
pauseWhileUnfocused={false}
/>
<SearchBar query='bob' size={SearchBar.Sizes.SMALL} />
<SearchBar query='bob' size={SearchBar.Sizes.MEDIUM} />
<SearchBar query='bob' size={SearchBar.Sizes.LARGE} />

62
src/core/builtins/dashboard/pages/home/CTA.jsx
Unescape View File

@ -1,62 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { WaveDivider } from '@vizality/components/misc';
import { Button, Icon } from '@vizality/components';
import { getModule } from '@vizality/webpack';
import { Guild } from '@vizality/constants';
export default memo(() => {
const [ hasJoinedDiscord, setHasJoined ] = useState();
const { getCurrentUser } = getModule('getCurrentUser');
const { username } = getCurrentUser();
const guilds = getModule('getGuild', 'getGuilds').getGuilds();
useEffect(() => {
setHasJoined(Boolean(Object.keys(guilds).find(guild => guild === Guild.ID)));
}, [ hasJoinedDiscord ]);
return (
<div className='vz-dashboard-home-cta'>
<div className='vz-dashboard-home-cta-overlay-background'>
<div className='vz-dashboard-home-cta-background' />
</div>
<div className='vz-dashboard-home-cta-content'>
<Icon
className='vz-dashboard-home-cta-content-icon-wrapper'
iconClassName='vz-dashboard-home-cta-content-icon'
name='Vizality'
size='100%'
/>
<div className='vz-dashboard-home-cta-content-header-wrapper'>
<h1 className='vz-dashboard-home-cta-content-header'>Welcome, {username}!</h1>
<h3 className='vz-dashboard-home-cta-content-description'>
You've made the right choice. The power of customization is now at your fingertips. Check out the features below to learn how to harness your newfound power.
{!hasJoinedDiscord && ` Make sure you check out the Discord server, we'd love to have you!`}
</h3>
{!hasJoinedDiscord && <div className='vz-dashboard-home-cta-content-buttons-wrapper'>
<Button
className='vz-dashboard-home-cta-content-button'
onClick={() => {
const inviteStore = getModule('acceptInviteAndTransitionToInviteChannel');
const pop = getModule('popLayer');
inviteStore.acceptInviteAndTransitionToInviteChannel(Guild.INVITE);
pop.popAllLayers();
}}
color={Button.Colors.WHITE}
look={Button.Looks.FILLED}
size={Button.Sizes.LARGE}
>
Join the Discord Server
</Button>
</div>}
</div>
</div>
<Icon
className='vz-dashboard-home-cta-icon-wrapper'
name='PersonWaving'
size='100%'
/>
<WaveDivider />
</div>
);
});

70
src/core/builtins/dashboard/pages/home/Features.jsx
Unescape View File

@ -1,70 +0,0 @@
import React, { memo } from 'react';
import { Button, Icon } from '@vizality/components';
const Card = memo(({ icon, header, description, buttonText, path }) => {
return (
<div className='vz-dashboard-home-features-card-wrapper'>
<div className='vz-dashboard-home-features-card'>
<Icon
name={icon}
className='vz-dashboard-home-features-icon-wrapper'
iconClassName='vz-dashboard-home-features-icon'
size='100%'
/>
<div className='vz-dashboard-home-features-card-header'>
{header}
</div>
<div className='vz-dashboard-home-features-card-body'>
{description}
</div>
<div className='vz-dashboard-home-features-card-footer'>
<Button
className='vz-dashboard-home-features-button'
onClick={() => vizality.api.routes.navigateTo(path)}
size={Button.Sizes.LARGE}
>
{buttonText}
</Button>
</div>
</div>
</div>
);
});
export default memo(() => {
return (
<div className='vz-dashboard-home-features-wrapper'>
<div className='vz-dashboard-home-features'>
<Card
icon='Plugin'
header='Discover Plugins'
description='Explore our vast collection of official plugins. Plugins can add just about any new feature you can imagine to Discord.'
buttonText='Browse Plugins'
path='/vizality/plugins/browse'
/>
<Card
icon='Theme'
header='Discover Themes'
description='Explore our vast collection of official themes. Themes can change just small portions of the app or they can be full-blown redesigns.'
buttonText='Browse Themes'
path='/vizality/themes/browse'
/>
<Card
icon='UnknownUser'
header='Become a Developer'
description='Find out what it takes to start making your own plugins and themes. Come check out the guidelines and all the info you need to become an addon developer for Vizality.'
buttonText='Learn How'
path='/vizality/development'
/>
<Card
icon='Science'
header='Read the Docs'
description='Read about all the building blocks and tools we provide to make building plugins and themes easier for you.'
buttonText='Start Reading'
path='/vizality/docs'
/>
</div>
</div>
);
});

18
src/core/builtins/dashboard/pages/home/Home.jsx
Unescape View File

@ -1,18 +0,0 @@
import { Section } from '@vizality/components/dashboard';
import React, { memo } from 'react';
import Features from './Features';
import CTA from './CTA';
export default memo(() => {
return (
<>
<Section className='vz-dashboard-home-section-cta'>
<CTA />
</Section>
<Section className='vz-dashboard-home-section-features'>
<Features />
</Section>
</>
);
});
Write Preview
Loading…
Cancel
Save