wow! updates!!!

package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.1.2",
-    "@testing-library/user-event": "^12.2.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
-    "web-vitals": "^0.2.4"
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -1,11 +1,16 @@
 import React from 'react';
 
-function App() {
-  return (
-    <div>
-      just wow.
-    </div>
-  );
-}
+import AppContextProvider from './ContextProvider';
+
+import Pool from './Pool';
+
+import '../static/css/main.css';
+
+
+const App = () => (
+  <AppContextProvider>
+    <Pool />
+  </AppContextProvider>
+);
 
 export default App;

src/components/ContextProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import useAppState from './useAppState';
+import ApiHelper from '../helpers/ApiHelper';
+import { useEffectOnce } from '../helpers/Hooks';
+
+
+export const AppContext = React.createContext();
+
+const AppContextProvider = props => {
+  const [state, dispatch] = useAppState();
+  const Api = new ApiHelper({ state });
+
+
+  const getPoolConfig = () => {
+    Api.getPoolConfig()
+      .then(config => {
+        dispatch({ type: 'UPDATE_POOL_CONFIG', config });
+        dispatch({ type: 'APP_LOADED', appLoaded: true });
+      });
+  };
+
+  const actions = {
+    getPoolConfig,
+  };
+
+  useEffectOnce(() => {
+    getPoolConfig();
+  })
+
+  return (
+    <AppContext.Provider value={{ state, actions }}>
+      {state.appSettings.appLoaded && props.children}
+    </AppContext.Provider>
+  )
+};
+
+export default AppContextProvider;

src/components/Pool.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+const Pool = () => (
+  <div>
+    <p>welcome good friend &lt;3 thank so much for mining!</p>
+  </div>
+);
+
+export default Pool;

src/components/useAppState.js

@@ -0,0 +1,67 @@
+import { useReducer, useRef } from 'react';
+
+
+const initialState = () => ({
+  appSettings: {
+    apiURL: 'https://pool.wowne.ro/api',
+    appLoaded: false,
+    coinDecimals: 11,
+  },
+  pool: {
+    config: null,
+  },
+  user: {
+    loggedIn: false,
+  },
+  messages: {},
+});
+
+let updatedState;
+
+const reducer = (state, action) => {
+  let result = {};
+  const {
+    appLoaded,
+    config,
+    loggedIn,
+  } = action;
+
+  switch (action.type) {
+    case 'APP_LOADED':
+      result = {
+        ...state,
+        appSettings: {
+          ...state.appSettings,
+          appLoaded,
+        },
+      };
+      break;
+    case 'CLEAR_MESSAGES':
+      result = { ...state, messages: {} };
+      break;
+    case 'USER_LOGGED_IN':
+      result = { ...state, user: { loggedIn } };
+      break;
+    case 'UPDATE_POOL_CONFIG':
+      result = {
+        ...state,
+        pool: {
+          ...state.pool,
+          config,
+        }
+      };
+      break;
+    default:
+      throw new Error();
+  }
+  updatedState.current = result;
+  return result;
+};
+
+const useAppState = () => {
+  const state = initialState();
+  updatedState = useRef(state);
+  return [...useReducer(reducer, state), updatedState];
+};
+
+export default useAppState;

src/helpers/ApiHelper.js

@@ -0,0 +1,31 @@
+export default class ApiHelper {
+  constructor(options) {
+    this.apiURL = options.state.appSettings.apiURL;
+  }
+
+  getPoolConfig = () => {
+    return this.fetch(`${this.apiURL}/config`, { method: 'GET' })
+      .then(res => Promise.resolve(res));
+  }
+
+  fetch = (url, options) => {
+    const headers = options.headers || {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return fetch(url, { headers, ...options })
+      .then(this._checkStatus)
+      .then(response => response.json());
+  };
+
+  _checkStatus = response => {
+    if (response.status >= 200 && response.status < 300) {
+      return response;
+    } else {
+      const error = new Error(response.statusText);
+      error.response = response;
+      throw error;
+    }
+  };
+}

src/helpers/Hooks.js

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+
+
+export const useEffectOnce = fn => useEffect(fn, []);

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './css/main.css';
+import './static/css/main.css';
 import App from './components/App';
 import reportWebVitals from './reportWebVitals';