extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: run prettier

This commit is contained in:
David Ralph 2022-11-06 11:59:59 +00:00
parent f0968195cb
commit 333aabde1b
60 changed files with 259 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/helpers/carousel/Carousel.jsx
View File

@ -53,10 +53,7 @@ function EmblaCarousel({ data }) {
{data.map((photo, index) => (
<div className="carousel_slide" key={index}>
<div className="carousel_slide_inner">
<img
src={photo.url.default}
alt="Marketplace example screenshot"
/>
<img src={photo.url.default} alt="Marketplace example screenshot" />
</div>
</div>
))}

1
src/components/helpers/carousel/carousel.scss
View File

@ -48,7 +48,6 @@
height: 190px;
}
.carousel_button {
outline: 0;
cursor: pointer;

11
src/components/modals/main/marketplace/Item.jsx
View File

@ -142,11 +142,13 @@ export default class Item extends PureComponent {
<span className="link" onClick={() => this.incrementCount()}>
{this.state.count !== this.props.data.data.quotes.length ? (
<>
<MdExpandMore /> {variables.getMessage('modals.main.marketplace.product.show_all')}
<MdExpandMore />{' '}
{variables.getMessage('modals.main.marketplace.product.show_all')}
</>
) : (
<>
<MdExpandLess /> {variables.getMessage('modals.main.marketplace.product.show_less')}
<MdExpandLess />{' '}
{variables.getMessage('modals.main.marketplace.product.show_less')}
</>
)}
</span>
@ -253,7 +255,10 @@ export default class Item extends PureComponent {
<MdIosShare />
</button>
</Tooltip>
<Tooltip title={variables.getMessage('modals.main.marketplace.product.buttons.report')} key="report">
<Tooltip
title={variables.getMessage('modals.main.marketplace.product.buttons.report')}
key="report"
>
<button
onClick={() =>
window.open(

12
src/components/modals/main/marketplace/Items.jsx
View File

@ -1,10 +1,6 @@
import variables from 'modules/variables';
import React, { memo } from 'react';
import {
MdAutoFixHigh,
MdOutlineArrowForward,
MdOutlineOpenInNew,
} from 'react-icons/md';
import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
function Items({
type,
@ -17,7 +13,8 @@ function Items({
}) {
return (
<>
{(type === 'all' && !onCollection && (filter === null || filter === '')) || (type === 'collections' && !onCollection && (filter === null || filter === '')) ? (
{(type === 'all' && !onCollection && (filter === null || filter === '')) ||
(type === 'collections' && !onCollection && (filter === null || filter === '')) ? (
<>
<div
className="collection"
@ -55,7 +52,8 @@ function Items({
</>
) : null}
<div className="items">
{items?.filter(
{items
?.filter(
(item) =>
item.name.toLowerCase().includes(filter.toLowerCase()) ||
filter === '' ||

8
src/components/modals/main/marketplace/SideloadFailedModal.jsx
View File

@ -7,9 +7,7 @@ function SideloadFailedModal({ modalClose, reason }) {
return (
<div className="smallModal">
<div className="shareHeader">
<span className="title">
{variables.getMessage('modals.main.error_boundary.title')}
</span>
<span className="title">{variables.getMessage('modals.main.error_boundary.title')}</span>
<Tooltip
title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
>
@ -19,9 +17,7 @@ function SideloadFailedModal({ modalClose, reason }) {
</Tooltip>
</div>
<span>{variables.getMessage('modals.main.addons.sideload.failed')}</span>
<span className="subtitle">
{reason}
</span>
<span className="subtitle">{reason}</span>
</div>
);
}

9
src/components/modals/main/marketplace/sections/Create.jsx
View File

@ -389,9 +389,7 @@ export default class Create extends PureComponent {
);
// photos
const nextPhotosDisabled = !(
this.state.addonData.photos !== ''
);
const nextPhotosDisabled = !(this.state.addonData.photos !== '');
const addPhotos = (
<>
<SettingsItem
@ -490,7 +488,10 @@ export default class Create extends PureComponent {
<div className="flexTopMarketplace">
{this.state.currentTab !== 1 && (
<div className="returnButton">
<Tooltip title={variables.getMessage('modals.main.navbar.marketplace.product.buttons.back')} key="backArrow">
<Tooltip
title={variables.getMessage('modals.main.navbar.marketplace.product.buttons.back')}
key="backArrow"
>
<MdArrowBack
className="backArrow"
onClick={() => this.changeTab(this.state.currentTab - 1)}

2
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@ -390,7 +390,7 @@ export default class Marketplace extends PureComponent {
</div>
</>
)}
{(this.props.type === 'collections' && !this.state.collection) ? (
{this.props.type === 'collections' && !this.state.collection ? (
this.state.items.map((item) => (
<>
{!item.news ? (

1
src/components/modals/main/scss/index.scss
View File

@ -167,7 +167,6 @@ h5 {
align-items: center;
}
.languageSettings {
margin-bottom: 15px;
.MuiFormGroup-root {

2
src/components/modals/main/scss/marketplace/_main.scss
View File

@ -486,7 +486,6 @@ a.collectionButton {
all: unset;
}
@include themed() {
&:focus-within {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
@ -523,4 +522,3 @@ a.collectionButton {
font-size: 30px;
}
}

2
src/components/modals/main/settings/Dropdown.jsx
View File

@ -29,7 +29,7 @@ export default class Dropdown extends PureComponent {
if (!this.props.noSetting) {
localStorage.setItem(this.props.name, value);
localStorage.setItem(this.props.name2, this.props.value2)
localStorage.setItem(this.props.name2, this.props.value2);
}
if (this.props.onChange) {

37
src/components/modals/main/settings/sections/Appearance.jsx
View File

@ -22,7 +22,10 @@ function AppearanceSettings() {
<span className="title">
{variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
</span>
<span className="subtitle"> {variables.getMessage('modals.main.settings.sections.appearance.theme.description')}</span>
<span className="subtitle">
{' '}
{variables.getMessage('modals.main.settings.sections.appearance.theme.description')}
</span>
</div>
<div className="action">
<Radio
@ -50,7 +53,9 @@ function AppearanceSettings() {
<span className="title">
{variables.getMessage('modals.main.settings.sections.appearance.font.title')}
</span>
<span className="subtitle">{variables.getMessage('modals.main.settings.sections.appearance.font.description')}</span>
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.appearance.font.description')}
</span>
</div>
<div className="action">
<Checkbox
@ -124,7 +129,9 @@ function AppearanceSettings() {
</div>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
subtitle={variables.getMessage('modals.main.settings.sections.appearance.style.description')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.style.description',
)}
>
<Radio
name="widgetStyle"
@ -145,7 +152,9 @@ function AppearanceSettings() {
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
subtitle={variables.getMessage('modals.main.settings.sections.appearance.accessibility.description')}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.description',
)}
final={true}
>
<Dropdown
@ -155,9 +164,23 @@ function AppearanceSettings() {
name="textBorder"
category="other"
>
<option value="new">{variables.getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow.new',)}</option> {/* default */}
<option value="true">{variables.getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow.old',)}</option> {/* old checkbox setting */}
<option value="none">{variables.getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow.none')}</option>
<option value="new">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
)}
</option>{' '}
{/* default */}
<option value="true">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
)}
</option>{' '}
{/* old checkbox setting */}
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
)}
</option>
</Dropdown>
<Checkbox
text={variables.getMessage(

6
src/components/modals/main/settings/sections/Changelog.jsx
View File

@ -109,8 +109,10 @@ export default class Changelog extends PureComponent {
return errorMessage(
<>
<MdOutlineWifiOff />
<span className='title'>{variables.getMessage('modals.main.error_boundary.title')}</span>
<span className="subtitle">{variables.getMessage('modals.main.error_boundary.message')}</span>
<span className="title">{variables.getMessage('modals.main.error_boundary.title')}</span>
<span className="subtitle">
{variables.getMessage('modals.main.error_boundary.message')}
</span>
</>,
);
}

10
src/components/modals/main/settings/sections/Message.jsx
View File

@ -95,7 +95,7 @@ export default class Message extends PureComponent {
)}
onChange={(e) => this.message(e, true, index)}
varient="outlined"
style={{ padding: "0"}}
style={{ padding: '0' }}
/>
</div>
</div>
@ -117,8 +117,12 @@ export default class Message extends PureComponent {
<div className="photosEmpty">
<div className="emptyNewMessage">
<MdOutlineTextsms />
<span className="title">{variables.getMessage('modals.main.settings.sections.message.no_messages')}</span>
<span className="subtitle">{variables.getMessage('modals.main.settings.sections.message.add_some')}</span>
<span className="title">
{variables.getMessage('modals.main.settings.sections.message.no_messages')}
</span>
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.message.add_some')}
</span>
<button onClick={() => this.modifyMessage('add')}>
{variables.getMessage('modals.main.settings.sections.message.add')}
<MdAdd />

16
src/components/modals/main/settings/sections/Overview.jsx
View File

@ -43,9 +43,9 @@ export default class OrderSettings extends PureComponent {
date: '',
description: '',
link: '',
linkText: ''
linkText: '',
},
newsDone: false
newsDone: false,
};
}
@ -108,7 +108,7 @@ export default class OrderSettings extends PureComponent {
const data = await (await fetch('https://api.muetab.com/news')).json();
this.setState({
news: data.news,
newsDone: true
newsDone: true,
});
}
@ -151,11 +151,13 @@ export default class OrderSettings extends PureComponent {
})}
</div>
</div>
<div style={{ display: "flex", flexFlow: "column" }}>
<span className='title'>{this.state.news.title}</span>
<span className='subtitle'>{this.state.news.date}</span>
<div style={{ display: 'flex', flexFlow: 'column' }}>
<span className="title">{this.state.news.title}</span>
<span className="subtitle">{this.state.news.date}</span>
<span>{this.state.news.description}</span>
<a className='link' href={this.state.news.link}>{this.state.news.linkText}</a>
<a className="link" href={this.state.news.link}>
{this.state.news.linkText}
</a>
</div>
</div>
<div>

4
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -259,9 +259,7 @@ export default class QuoteSettings extends PureComponent {
value2={Date.now()}
>
<option value="refresh">{variables.getMessage('tabname')}</option>
<option value={10000}>
10 seconds
</option>
<option value={10000}>10 seconds</option>
<option value={60000}>
{variables.getMessage('modals.main.settings.sections.background.interval.minute')}
</option>

34
src/components/modals/main/settings/sections/Weather.jsx
View File

@ -71,12 +71,27 @@ export default class TimeSettings extends PureComponent {
zoomCategory="weather"
switch={true}
/>
<SettingsItem title={variables.getMessage('modals.main.settings.sections.weather.widget_type')}>
<Dropdown label={variables.getMessage('modals.main.settings.sections.time.type')} name="weatherType" category="weather" onChange={() => this.forceUpdate()}>
<option value="1">{variables.getMessage('modals.main.settings.sections.weather.options.basic')}</option>
<option value="2">{variables.getMessage('modals.main.settings.sections.weather.options.standard')}</option>
<option value="3">{variables.getMessage('modals.main.settings.sections.weather.options.expanded')}</option>
<option value="4">{variables.getMessage('modals.main.settings.sections.weather.options.custom')}</option>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.weather.widget_type')}
>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.time.type')}
name="weatherType"
category="weather"
onChange={() => this.forceUpdate()}
>
<option value="1">
{variables.getMessage('modals.main.settings.sections.weather.options.basic')}
</option>
<option value="2">
{variables.getMessage('modals.main.settings.sections.weather.options.standard')}
</option>
<option value="3">
{variables.getMessage('modals.main.settings.sections.weather.options.expanded')}
</option>
<option value="4">
{variables.getMessage('modals.main.settings.sections.weather.options.custom')}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem
@ -126,9 +141,10 @@ export default class TimeSettings extends PureComponent {
/>
</SettingsItem>
{weatherType === '4' && (
<SettingsItem title={variables.getMessage(
'modals.main.settings.sections.weather.custom_settings',
)} final={true}>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.weather.custom_settings')}
final={true}
>
<Checkbox
name="weatherdescription"
text={variables.getMessage(

2
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@ -15,7 +15,7 @@ import { videoCheck } from 'modules/helpers/background/widget';
import Checkbox from '../../Checkbox';
import FileUpload from '../../FileUpload';
import Tooltip from '../../../../../helpers/tooltip/Tooltip'
import Tooltip from '../../../../../helpers/tooltip/Tooltip';
import Modal from 'react-modal';

6
src/components/modals/main/settings/sections/overview_skeletons/Date.jsx
View File

@ -1,11 +1,7 @@
import { memo } from 'react';
function DateSkeleton() {
return (
<span className="date">
Thursday January 1st
</span>
);
return <span className="date">Thursday January 1st</span>;
}
export default memo(DateSkeleton);

8
src/components/modals/welcome/WelcomeSections.jsx
View File

@ -273,15 +273,11 @@ export default class WelcomeSections extends PureComponent {
<div className="options">
<div className={this.state.legacyStyle} onClick={() => this.changeStyle('legacy')}>
<MdArchive />
<span>
{variables.getMessage('modals.welcome.sections.style.legacy')}
</span>
<span>{variables.getMessage('modals.welcome.sections.style.legacy')}</span>
</div>
<div className={this.state.newStyle} onClick={() => this.changeStyle('new')}>
<MdOutlineWhatshot />
<span>
{variables.getMessage('modals.welcome.sections.style.modern')}
</span>
<span>{variables.getMessage('modals.welcome.sections.style.modern')}</span>
</div>
</div>
</div>

1
src/components/modals/welcome/welcome.scss
View File

@ -217,7 +217,6 @@ a.privacy {
animation-timing-function: ease-in;*/
}
.welcomeContent {
.light {
.toggle.lightTheme {

3
src/components/widgets/background/Background.jsx
View File

@ -253,7 +253,8 @@ export default class Background extends PureComponent {
const randomNumber = Math.floor(Math.random() * photoPack.length);
const randomPhoto = photoPack[randomNumber];
if (
(localStorage.getItem('backgroundchange') === 'refresh' && this.state.firstTime === true) ||
(localStorage.getItem('backgroundchange') === 'refresh' &&
this.state.firstTime === true) ||
(localStorage.getItem('backgroundchange') === null && this.state.firstTime === true)
) {
localStorage.setItem('marketplaceNumber', randomNumber);

4
src/components/widgets/navbar/Navbar.jsx
View File

@ -19,7 +19,7 @@ export default class Navbar extends PureComponent {
classList: localStorage.getItem('widgetStyle') === 'legacy' ? 'navbar old' : 'navbar new',
refreshText: '',
refreshEnabled: localStorage.getItem('refresh'),
refreshOption: localStorage.getItem('refreshOption') || ''
refreshOption: localStorage.getItem('refreshOption') || '',
};
}
@ -61,7 +61,7 @@ export default class Navbar extends PureComponent {
if (data === 'navbar' || data === 'background') {
this.setState({
refreshEnabled: localStorage.getItem('refresh'),
refreshOption: localStorage.getItem('refreshOption')
refreshOption: localStorage.getItem('refreshOption'),
});
try {
this.updateRefreshText();

8
src/components/widgets/navbar/Notes.jsx
View File

@ -20,8 +20,8 @@ class Notes extends PureComponent {
setZoom() {
this.setState({
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
})
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
});
}
componentDidMount() {
@ -56,13 +56,13 @@ class Notes extends PureComponent {
hideNotes() {
this.setState({
showNotes: (localStorage.getItem('notesPinned') === 'true'),
showNotes: localStorage.getItem('notesPinned') === 'true',
});
}
pin() {
variables.stats.postEvent('feature', 'Notes pin');
const notesPinned = (localStorage.getItem('notesPinned') === 'true');
const notesPinned = localStorage.getItem('notesPinned') === 'true';
localStorage.setItem('notesPinned', !notesPinned);
this.setState({
showNotes: !notesPinned,

6
src/components/widgets/navbar/Todo.jsx
View File

@ -35,7 +35,7 @@ class Todo extends PureComponent {
setZoom() {
this.setState({
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
});
}
@ -78,7 +78,7 @@ class Todo extends PureComponent {
hideTodo() {
this.setState({
showTodo: (localStorage.getItem('todoPinned') === 'true'),
showTodo: localStorage.getItem('todoPinned') === 'true',
});
}
@ -122,7 +122,7 @@ class Todo extends PureComponent {
pin() {
variables.stats.postEvent('feature', 'Todo pin');
const todoPinned = (localStorage.getItem('todoPinned') === 'true');
const todoPinned = localStorage.getItem('todoPinned') === 'true';
localStorage.setItem('todoPinned', !todoPinned);
this.setState({
showTodo: !todoPinned,

21
src/components/widgets/quote/Quote.jsx
View File

@ -132,9 +132,14 @@ export default class Quote extends PureComponent {
)
).json();
const metadata = authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]].imageinfo[0].extmetadata;
const metadata =
authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]]
.imageinfo[0].extmetadata;
const license = metadata.LicenseShortName;
const photographer = metadata.Attribution.value || metadata.Artist?.value.match(/<a.+>(?<name>.+)<\/a>/i)?.groups.name || 'Unknown';
const photographer =
metadata.Attribution.value ||
metadata.Artist?.value.match(/<a.+>(?<name>.+)<\/a>/i)?.groups.name ||
'Unknown';
authorimglicense = `© ${photographer}. ${license.value}`;
authorimglicense = authorimglicense.replace(/copyright\s/i, '').replace(/©\s©\s/, '© ');
@ -197,18 +202,17 @@ export default class Quote extends PureComponent {
? customQuote[Math.floor(Math.random() * customQuote.length)]
: null;
if (customQuote !== undefined) {
return this.setState({
quote: '"' + customQuote.quote + '"',
author: customQuote.author,
authorlink: this.getAuthorLink(customQuote.author),
authorimg: await this.getAuthorImg(customQuote.author),
noQuote: false
noQuote: false,
});
} else {
this.setState({
noQuote: true
noQuote: true,
});
}
break;
@ -335,7 +339,7 @@ export default class Quote extends PureComponent {
}
componentDidMount() {
const test = localStorage.getItem('quotechange')
const test = localStorage.getItem('quotechange');
this.interval = setInterval(() => {
if (test !== null) {
@ -387,7 +391,10 @@ export default class Quote extends PureComponent {
}
});
if (localStorage.getItem('quotechange') === 'refresh' || (localStorage.getItem('quotechange')) === null ) {
if (
localStorage.getItem('quotechange') === 'refresh' ||
localStorage.getItem('quotechange') === null
) {
this.setZoom();
this.getQuote();
localStorage.setItem('quoteStartTime', Date.now());

9
src/components/widgets/search/Search.jsx
View File

@ -110,7 +110,7 @@ export default class Search extends PureComponent {
toggleDropdown() {
this.setState({
searchDropdown: (this.state.searchDropdown === 'hidden') ? 'visible' : 'hidden',
searchDropdown: this.state.searchDropdown === 'hidden' ? 'visible' : 'hidden',
});
}
@ -171,7 +171,9 @@ export default class Search extends PureComponent {
{localStorage.getItem('searchDropdown') === 'true' ? (
<Tooltip title={variables.getMessage('widgets.search')}>
<button>
<MdScreenSearchDesktop onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })} />
<MdScreenSearchDesktop
onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })}
/>
</button>
</Tooltip>
) : (
@ -199,7 +201,8 @@ export default class Search extends PureComponent {
</form>
</div>
<div>
{localStorage.getItem('searchDropdown') === 'true' && this.state.searchDropdown === true ? (
{localStorage.getItem('searchDropdown') === 'true' &&
this.state.searchDropdown === true ? (
<div className="searchDropdown">
{searchEngines.map(({ name }) => {
if (name === this.state.currentSearch) {

2
src/components/widgets/time/Clock.jsx
View File

@ -164,7 +164,7 @@ export default class Clock extends PureComponent {
<Analog
className="analogclock clock-container"
value={this.state.time}
size={1.5 * Number((localStorage.getItem('zoomClock') || 100))}
size={1.5 * Number(localStorage.getItem('zoomClock') || 100)}
renderMinuteMarks={enabled('minuteMarks')}
renderHourMarks={enabled('hourMarks')}
renderSecondHand={enabled('secondHand')}

5
src/components/widgets/weather/Expanded.jsx
View File

@ -45,10 +45,7 @@ function Expanded({ state, weatherType, variables }) {
{state.weather.wind_speed}
<span className="minmax"> m/s</span>{' '}
{enabled('windDirection') ? (
<WindDirectionIcon
className="weatherIcon"
degrees={state.weather.wind_degrees}
/>
<WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
) : null}
</span>
</Tooltip>

8
src/components/widgets/weather/Weather.jsx
View File

@ -72,9 +72,9 @@ export default class Weather extends PureComponent {
wind_degrees: data.wind.deg,
cloudiness: data.clouds.all,
visibility: data.visibility,
pressure: data.main.pressure
pressure: data.main.pressure,
},
done: true
done: true,
});
document.querySelector('.tweather svg').style.fontSize = zoomWeather;
@ -135,7 +135,9 @@ export default class Weather extends PureComponent {
<span className="loc">{this.state.location}</span>
</div>
)}
{weatherType >= 3 ? <Expanded weatherType={weatherType} state={this.state} variables={variables}/> : null}
{weatherType >= 3 ? (
<Expanded weatherType={weatherType} state={this.state} variables={variables} />
) : null}
</div>
);
}

1
src/components/widgets/weather/WindDirectionIcon.jsx
View File

@ -1,4 +1,3 @@
import { memo } from 'react';
import {

8
src/index.jsx
View File

@ -40,7 +40,8 @@ variables.language = new I18n(variables.languagecode, {
tr_TR: translations.tr_TR,
});
variables.getMessage = (text, optional) => variables.language.getMessage(variables.languagecode, text, optional || {});
variables.getMessage = (text, optional) =>
variables.language.getMessage(variables.languagecode, text, optional || {});
// set html language tag
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
@ -57,7 +58,4 @@ Sentry.init({
autoSessionTracking: false,
});
render(
<App/>,
document.getElementById('root')
);
render(<App />, document.getElementById('root'));