try anonymous backend requests, cleanup

frontend/frontend/src/components/Card/SVG.js

@@ -4,48 +4,60 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { useSelector } from 'react-redux';
+
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 
 import { createMockReq, createMockRes } from '../../mock-http';
 import { default as router } from '../../backend/.vercel/output/functions/api.func/router.js';
-
-const waitForPat = async (interval = 100) => {
-  while (true) {
-    if (process.env.PAT_1 && process.env.PAT_1 !== 'placeholderPAT') return;
-    await new Promise((resolve) => setTimeout(resolve, interval));
-  }
-};
+import axios from 'axios';
 
 const SvgInline = (props) => {
   const [svg, setSvg] = useState(null);
   const [loaded, setLoaded] = useState(false);
   const containerRef = useRef(null);
+  const userToken = useSelector((state) => state.user.token);
+  const userId = useSelector((state) => state.user.userId);
   const { url } = props;
 
   useEffect(() => {
-    setLoaded(false);
+    const loadSvg = async () => {
+      process.env.PAT_1 = userToken;
 
-    const req = createMockReq({
-      method: 'GET',
-      url: url,
-    });
-    const res = createMockRes();
+      setLoaded(false);
+      const isAuthenticated = userId && userId.length > 0;
+      if (isAuthenticated && (!userToken || userToken === 'placeholderPAT')) {
+        // waiting for backend call to private-access
+        return;
+      }
 
-    waitForPat()
-      .then(() => router(req, res))
-      .then(() => {
-        const body = res._getBody();
-        const status = res._getStatusCode();
-        if (status >= 300) {
-          throw new Error('failed to generate SVG');
-        }
-        return body;
-      })
-      .then(setSvg)
-      .then(() => setLoaded(true))
-      .catch((e) => console.error(e));
-  }, [props.url]);
+      let body;
+      let status;
+      if (isAuthenticated) {
+        const req = createMockReq({
+          method: 'GET',
+          url: url,
+        });
+        const res = createMockRes();
+        await router(req, res);
+        body = res._getBody();
+        status = res._getStatusCode();
+      } else {
+        let res = await axios.get(url);
+        body = res.data;
+        status = res.status;
+      }
+
+      if (status >= 300) {
+        console.error('failed to fetch/generate SVG');
+        return;
+      }
+      setSvg(body);
+      setLoaded(true);
+    };
+    loadSvg();
+  }, [userToken, userId, props.url]);
 
   useEffect(() => {
     if (loaded && svg && containerRef.current) {

frontend/frontend/src/pages/App/AppTrends.js

@@ -53,7 +53,6 @@ function WrappedRedirectScreen() {
 function App() {
   const userId = useSelector((state) => state.user.userId);
   const userKey = useSelector((state) => state.user.userKey);
-  const userToken = useSelector((state) => state.user.token);
   const isAuthenticated = userId && userId.length > 0;
 
   const dispatch = useDispatch();
@@ -74,10 +73,6 @@ function App() {
     getPrivateAccess();
   }, [userKey]);
 
-  useEffect(() => {
-    process.env.PAT_1 = userToken;
-  }, [userToken]);
-
   return (
     <div className="h-screen flex flex-col">
       <Router basename="/frontend">

frontend/frontend/src/pages/Home/Home.js

@@ -1,5 +1,3 @@
-import { default as router } from '../../backend/.vercel/output/functions/api.func/router.js';
-
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import BounceLoader from 'react-spinners/BounceLoader';
@@ -17,7 +15,6 @@ import { authenticate } from '../../api';
 import { login as _login } from '../../redux/actions/userActions';
 import { HOST } from '../../constants';
 import { CardTypes } from '../../utils';
-import { createMockReq, createMockRes } from '../../mock-http';
 import axios from 'axios';
 
 const HomeScreen = () => {

frontend/frontend/src/redux/reducers/user.js

@@ -3,6 +3,7 @@ import * as types from '../actions/userActions';
 const initialState = {
   userId: JSON.parse(localStorage.getItem('userId')) || null,
   userKey: JSON.parse(localStorage.getItem('userKey')) || null,
+  token: null,
   privateAccess: null,
 };