From c0fcbd3592865e30f751ca195d1061b1395e7365 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 14 Dec 2018 01:34:27 -0500 Subject: [PATCH] updated loading to more concise --- src/components/Snippets.js | 6 +++++- src/components/SpreadsheetData.js | 17 +++++++++++++++++ src/components/collection/Search.js | 16 ++++++---------- src/components/entercode/EnterTheCode.js | 3 ++- src/components/entercode/PackSimulator.js | 18 +++++++----------- src/components/portal/Category/Attacks.js | 16 ++++++---------- src/components/portal/Category/Battlegear.js | 16 ++++++---------- src/components/portal/Category/Creatures.js | 16 ++++++---------- src/components/portal/Category/Locations.js | 16 ++++++---------- src/components/portal/Category/Mugic.js | 16 ++++++---------- src/components/portal/Category/Tribes.js | 16 ++++++---------- 11 files changed, 73 insertions(+), 83 deletions(-) diff --git a/src/components/Snippets.js b/src/components/Snippets.js index b602b0a..aaf64c3 100644 --- a/src/components/Snippets.js +++ b/src/components/Snippets.js @@ -1,7 +1,7 @@ import React from 'react'; import API from './SpreadsheetData'; import {observable} from "mobx"; -import {observer, inject} from 'mobx-react'; +import {observer, inject, action} from 'mobx-react'; import processString from 'react-process-string'; import s from '../styles/app.style'; @@ -20,6 +20,10 @@ export function PageNotFound(props) { ); } +export function Loading(props) { + return (Loading...); +} + export function Rarity(props) { return ( diff --git a/src/components/SpreadsheetData.js b/src/components/SpreadsheetData.js index c420cba..91b67a9 100644 --- a/src/components/SpreadsheetData.js +++ b/src/components/SpreadsheetData.js @@ -174,6 +174,23 @@ class API { } } + // Input format + // [{cards: 'attacks'}, {portal: 'attacks'}] + async LoadDB(collection) { + return new Promise((resolve, reject) => { + if (this.urls !== null && + this.portal !== null && + this.cards !== null + ) { + this.buildCollection(collection) + .then(() => { + resolve(); + }); + } + else resolve(); + }); + } + // Input format // [{cards: 'attacks'}, {portal: 'attacks'}] async buildCollection(input) { diff --git a/src/components/collection/Search.js b/src/components/collection/Search.js index e9fe912..3cdfcae 100644 --- a/src/components/collection/Search.js +++ b/src/components/collection/Search.js @@ -4,6 +4,7 @@ import {observer, inject} from 'mobx-react'; import loki from 'lokijs'; import Collapsible from 'react-collapsible'; import API from '../SpreadsheetData'; +import {Loading} from '../Snippets'; @inject((stores, props, context) => props) @observer export default class SearchCollection extends React.Component { @@ -135,19 +136,14 @@ export default class SearchCollection extends React.Component { } render() { - if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}]) - .then(() => { - this.loaded = true; + if (this.loaded == false) { + API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}]) + .then(() => { + this.loaded = true; this.search(); }); + return (); } - return (Loading...); - } let gen = (d, display, text) => { let tmp = []; diff --git a/src/components/entercode/EnterTheCode.js b/src/components/entercode/EnterTheCode.js index 418ac11..6fef079 100644 --- a/src/components/entercode/EnterTheCode.js +++ b/src/components/entercode/EnterTheCode.js @@ -5,6 +5,7 @@ import {Link} from 'react-router-dom'; import Interactive from 'react-interactive'; import DigitInput from 'react-digit-input'; import API from '../SpreadsheetData'; +import {Loading} from '../Snippets'; import style from '../../styles/style'; const s = Object.create(style); @@ -39,7 +40,7 @@ export default class EnterTheCode extends React.Component { API.getSpreadsheet(API.path("1hzSojB76Me-P1qppxYR0oiHSU56jyK59x3DKm660ntc"), (data) => { this.fan = data; }); - return (Loading...); + return (); } let getRandomInt = (min, max) => { diff --git a/src/components/entercode/PackSimulator.js b/src/components/entercode/PackSimulator.js index 8a294bc..2941d74 100644 --- a/src/components/entercode/PackSimulator.js +++ b/src/components/entercode/PackSimulator.js @@ -5,6 +5,7 @@ import {Link} from 'react-router-dom'; import loki from 'lokijs'; import Interactive from 'react-interactive'; import API from '../SpreadsheetData'; +import {Loading} from '../Snippets'; import s from '../../styles/style'; import '../../scss/packs.scss'; @@ -27,17 +28,12 @@ export default class PackSimulator extends React.Component { render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'attacks'}, , {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}]) - .then(() => { - this.setupDB(); - this.loaded = true; - }); - } - return (Loading...); + API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}]) + .then(() => { + this.setupDB(); + this.loaded = true; + }); + return (); } let setsInput = []; diff --git a/src/components/portal/Category/Attacks.js b/src/components/portal/Category/Attacks.js index 60826e0..e83ede6 100644 --- a/src/components/portal/Category/Attacks.js +++ b/src/components/portal/Category/Attacks.js @@ -5,6 +5,7 @@ import {observable} from 'mobx'; import {observer, inject} from 'mobx-react'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import Attack from '../Single/Attack'; @inject((stores, props, context) => props) @observer @@ -13,16 +14,11 @@ export default class Attacks extends React.Component { render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'attacks'}, {'portal': 'attacks'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.LoadDB([{'cards': 'attacks'}, {'portal': 'attacks'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/"); diff --git a/src/components/portal/Category/Battlegear.js b/src/components/portal/Category/Battlegear.js index 6b1bc10..4722bb3 100644 --- a/src/components/portal/Category/Battlegear.js +++ b/src/components/portal/Category/Battlegear.js @@ -5,6 +5,7 @@ import {observable} from 'mobx'; import {observer, inject} from 'mobx-react'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import SingleBattlegear from '../Single/Battlegear'; @inject((stores, props, context) => props) @observer @@ -13,16 +14,11 @@ export default class Battlegear extends React.Component { render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'battlegear'}, {'portal': 'battlegear'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.LoadDB([{'cards': 'battlegear'}, {'portal': 'battlegear'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/"); diff --git a/src/components/portal/Category/Creatures.js b/src/components/portal/Category/Creatures.js index 471ed28..e33e246 100644 --- a/src/components/portal/Category/Creatures.js +++ b/src/components/portal/Category/Creatures.js @@ -5,6 +5,7 @@ import {observable} from 'mobx'; import {observer, inject} from 'mobx-react'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import Creature from '../Single/Creature'; @inject((stores, props, context) => props) @observer @@ -17,16 +18,11 @@ export default class Creatures extends React.Component { // The first / gets counted render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.LoadDB([{'cards': 'creatures'}, {'portal': 'creatures'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/"); diff --git a/src/components/portal/Category/Locations.js b/src/components/portal/Category/Locations.js index 0f86fbb..b48192b 100644 --- a/src/components/portal/Category/Locations.js +++ b/src/components/portal/Category/Locations.js @@ -5,6 +5,7 @@ import {observable} from 'mobx'; import {observer, inject} from 'mobx-react'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import Location from '../Single/Location'; @inject((stores, props, context) => props) @observer @@ -13,16 +14,11 @@ export default class Locations extends React.Component { render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/"); diff --git a/src/components/portal/Category/Mugic.js b/src/components/portal/Category/Mugic.js index 96e9a94..7b44d78 100644 --- a/src/components/portal/Category/Mugic.js +++ b/src/components/portal/Category/Mugic.js @@ -5,6 +5,7 @@ import {observable} from 'mobx'; import {observer, inject} from 'mobx-react'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import SingleMugic from '../Single/Mugic'; @inject((stores, props, context) => props) @observer @@ -17,16 +18,11 @@ export default class Mugic extends React.Component { // The first / gets counted render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'mugic'}, {'portal': 'mugic'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.LoadDB([{'cards': 'mugic'}, {'portal': 'mugic'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/"); diff --git a/src/components/portal/Category/Tribes.js b/src/components/portal/Category/Tribes.js index b4049f5..18f2a97 100644 --- a/src/components/portal/Category/Tribes.js +++ b/src/components/portal/Category/Tribes.js @@ -6,6 +6,7 @@ import {observer, inject} from 'mobx-react'; import loki from 'lokijs'; import s from '../../../styles/app.style'; import API from '../../SpreadsheetData'; +import {Loading} from '../../Snippets'; import Creature from '../Single/Creature'; import Mugic from '../Single/Mugic'; @@ -24,16 +25,11 @@ export default class Tribes extends React.Component { // -> /{Tribe}/Mugic || /{Tribe}/Creatures render() { if (this.loaded == false) { - if (API.urls !== null && - API.portal !== null && - API.cards !== null - ) { - API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}]) - .then(() => { - this.loaded = true; - }); - } - return (Loading...); + API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}]) + .then(() => { + this.loaded = true; + }); + return (); } let path = this.props.location.pathname.split("/");