+
+
+
+
+
+
+
Home
+
+
-
-
-
+
-
-
-
-
- Connected as {this.props.session.ip || "?"}
-
+
+
-
-
- {totalVisitorCount} unique visitors / {activeVisitorCount} of which have interacted with this website
-
+
+
-
-
- nframe.nl
-
-
- )
- }
+
+
+
+ Connected as {sessionstate.ip || "?"}
+
+
+
+
+ {totalVisitorCount} unique visitors / {activeVisitorCount} of which have interacted with this website
+
+
+
+
+
+ nframe.nl
+
+
+
+ )
}
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(Home);
+export default Home;
diff --git a/src/livepeer.js b/src/livepeer.js
index 380be4c..08017f8 100644
--- a/src/livepeer.js
+++ b/src/livepeer.js
@@ -1,43 +1,26 @@
import React, { useState, useEffect } from 'react'
import './style.css';
-import {
- Navigate, useSearchParams
-} from "react-router-dom";
-import { useSelector, useDispatch, batch } from 'react-redux'
-import {
- getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getOrchestratorInfo
-} from "./actions/livepeer";
+import { Navigate, useSearchParams } from "react-router-dom";
+import { useSelector, useDispatch } from 'react-redux'
+import { getOrchestratorInfo } from "./actions/livepeer";
import EventViewer from "./eventViewer";
import Orchestrator from "./orchestratorViewer";
import Stat from "./statViewer";
-// Refresh every 30 seconds
-const refreshInterval = 30000;
+// Shows the EventViewer and other Livepeer related info
const Livepeer = (obj) => {
const [prefill, setPrefill] = useSearchParams();
const dispatch = useDispatch();
const livepeer = useSelector((state) => state.livepeerstate);
const [redirectToHome, setRedirectToHome] = useState(false);
-
- const refreshAllZeData = () => {
- batch(() => {
- dispatch(getQuotes())
- dispatch(getEvents())
- dispatch(getBlockchainData())
- dispatch(getCurrentOrchestratorInfo())
- });
- }
+ console.log("Rendering Livepeer");
useEffect(() => {
- if (prefill.get('orchAddr') != ""){
+ if (prefill.get('orchAddr') != "") {
dispatch(getOrchestratorInfo(prefill.get('orchAddr')));
}
- if (refreshInterval) {
- const interval = setInterval(refreshAllZeData, refreshInterval);
- return () => clearInterval(interval);
- }
- }, [refreshInterval]);
+ }, [prefill]);
if (redirectToHome) {
return
;
diff --git a/src/loadingScreen.js b/src/loadingScreen.js
index 251f2bf..12116f2 100644
--- a/src/loadingScreen.js
+++ b/src/loadingScreen.js
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { connect, batch } from "react-redux";
+import React, { useEffect, useState } from 'react'
+import { useDispatch, batch } from 'react-redux'
import {
getVisitorStats
} from "./actions/user";
@@ -8,41 +8,66 @@ import {
} from "./actions/livepeer";
import { login } from "./actions/session";
-const mapStateToProps = (state) => {
- return {
- session: state.session,
- userstate: state.userstate,
- errors: state.errors
- }
-};
+// Shows a loading screen on first load and gets fresh data every refreshInterval milliseconds
-const mapDispatchToProps = dispatch => ({
- getVisitorStats: () => dispatch(getVisitorStats()),
- login: () => dispatch(login()),
- getQuotes: () => dispatch(getQuotes()),
- getEvents: () => dispatch(getEvents()),
- getBlockchainData: () => dispatch(getBlockchainData()),
- getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
-});
+// Refresh every 30 seconds
+const refreshInterval = 30000;
+const Startup = (obj) => {
+ const [isLoaded, setIsLoaded] = useState(false);
+ const dispatch = useDispatch();
-class Startup extends React.Component {
- componentDidMount() {
+ const refreshAllZeData = () => {
+ console.log("Refreshing data...");
batch(() => {
- this.props.login();
- this.props.getVisitorStats();
- this.props.getQuotes();
- this.props.getBlockchainData();
- this.props.getEvents();
- this.props.getCurrentOrchestratorInfo();
+ dispatch(getQuotes());
+ dispatch(getEvents());
+ dispatch(getBlockchainData());
+ dispatch(getCurrentOrchestratorInfo());
});
}
- render() {
- return this.props.children;
+
+ const refreshLogin = () => {
+ console.log("Logging in and getting visitor statistics...");
+ batch(() => {
+ dispatch(login());
+ dispatch(getVisitorStats());
+ });
+ setIsLoaded(true);
+ }
+
+ useEffect(() => {
+ refreshLogin();
+ refreshAllZeData();
+ if (refreshInterval) {
+ const interval = setInterval(refreshAllZeData, refreshInterval);
+ return () => clearInterval(interval);
+ }
+ }, [refreshInterval]);
+
+ if(isLoaded){
+ console.log("Rendering Application");
+ return obj.children;
+ }else{
+ console.log("Rendering Loading Screen");
+ return
+
+
+
+
+
+
+ nframe.nl
+
+
+
}
}
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(Startup);
\ No newline at end of file
+export default Startup;
\ No newline at end of file
diff --git a/src/reducers/root.js b/src/reducers/root.js
index b110ec9..38461f9 100644
--- a/src/reducers/root.js
+++ b/src/reducers/root.js
@@ -3,8 +3,6 @@ import errors from "./errors/errors";
import session from "./session/session";
import userstate from "./userstate/userstate";
import livepeerstate from "./livepeer/livepeerstate";
-{/*Reducers define how the state of the application changes when actions are sent into the store. They take in the current state and the action that was performed.
-This file combines all reducers in use so they are all accessible for redux*/}
export default combineReducers({
session,
errors,
diff --git a/src/store/store.js b/src/store/store.js
index da4e3b8..138c41a 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -2,7 +2,6 @@ import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import reducer from "../reducers/root";
-
function configureStore(preloadedState) {
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers(
@@ -12,7 +11,6 @@ function configureStore(preloadedState) {
return store;
}
-
export default (preloadedState) => (
configureStore(preloadedState)
);
\ No newline at end of file