FBSAdminTool/src/containers/TheContent.js

import React, { Suspense, useState, useEffect } from 'react'
import axios from 'axios';
//import Cookies from 'js-cookie';
import Cookies from 'universal-cookie';
import {
    Redirect,
    Route,
    useLocation,
    Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'

// routes config
import routes from '../routes'
import Sso from 'src/views/sso';

const loading = ( <
    div className = "pt-3 text-center" >
    <div className = "sk-spinner sk-spinner-pulse" > </div>
    </div>
)

const TheContent = () => {

    const [SsoSession, setSsoSession] = useState('');
    const [UserData, setUserData] = useState('');
    const [UserId, setUserId] = useState('');
    const [isDataFetched, setIsDataFetched] = useState(false);

    async function fetchSession() {

        //setSsoSession('{ "expiration": 468, "client_address": "111.223.144.163", "protocol": "urn:oasis:names:tc:SAML:2.0:protocol", "identity_provider": "https://sso.ts.bizside.biz/idp/shibboleth", "authn_instant": "2021-09-03T08:26:41.248Z", "authncontext_class": "urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport", "attributes": [ { "name": "mail", "values": [ "akira.miyata@mobilous.com" ] }  ] }')
        const result = await axios('https://fbssso.ts.bizside.biz/Shibboleth.sso/Session');
        if(JSON.stringify(SsoSession) !== JSON.stringify(result.data)) {
          console.log(result.data);
          setSsoSession(result.data);
        }
    }

    useEffect(() => {
      fetchSession()
      get_token_from_storage_or_cookie();
    }, []);

    async function postUserData(data) {

      let axiosConfig = {
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            "Access-Control-Allow-Origin": "*",
        }
      };

      const result = await axios.post('https://fbssso.ts.bizside.biz/csv', data, axiosConfig)
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      });

      console.log("--- res ----", result);

      if(result === "OK"){

      }else{
        console.log("res id ", result.data.id);
        if(data.jsessionid !== result.data.id){
          setUserId(result.data.id);
        }
      }

      console.log("user data posted");
    }

    async function fetchUser() {
      if(SsoSession.attributes == null || SsoSession.attributes[0] === undefined) {
        return false;
      }
      const user_email = SsoSession.attributes[0].values[0]
      //console.log(user_email);
      const company_code = "FBS";
      const key = "api"
      const pwd = "c558a56c63c44f65956adde8863ecc3558f3e55a465d4338bb2e7d2692866fd8";

      const result = await axios.get('https://fbssso.ts.bizside.biz/users?email=' + user_email, {
        auth: {
          username: key,
          password: pwd
        }
      }).catch((err) => {
        console.log(err);
        return false;
      });
      //console.log(result.data);
      if(JSON.stringify(UserData) !== JSON.stringify(result.data[0])) {
        setUserData(result.data[0]);
      }
      return true;
    }

    function isCSVPath(){
      const url =window.location.href;
      if(url.includes('dashboard')) {
        return true;
      }
      else {
        return false;
      }
    }

    function get_token_from_storage_or_cookie() {
      //return true;
        const cookies = new Cookies();
        const shib = cookies.get('_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468')
        if (shib !== undefined) {
            fetchSession().then(() => {
                if (SsoSession !== null) {
                  console.log(shib);
                  fetchUser().then(() => {
                    if(UserId === ''){
                      let id = Math.floor(100000 + Math.random() * 900000)
                      setUserId(id);
                    }
                    setIsDataFetched(true); 

                    const _firstname = UserData.firstname;
                    const _lastname = UserData.lastname;
                    const _email = UserData.email;
                    const _empcode = UserData.employee_code;

                    const json_str = `[
                      {
                        "mailadress": "${_email}",
                        "name": "${_lastname} ${_firstname}",
                        "jsessionid": ${UserId},
                        "_idp_session": "",
                        "_opensaml_key": "_shibsession_64656661756c7468747470733a2f2f66627373736f2e74732e62697a736964652e62697a2f73686962626f6c657468",
                        "_opensaml_value": "${shib}"
                      }
                    ]`;


                    //const json_str = '[{"jsessonid": "' + UserId + '" , "name": "' + _firstname + ' ' +_lastname+ '", "mailadress":" ' + _email + '", "empcode": "' + _empcode + '"}]';
                    if(_empcode !== null && _empcode !== undefined){
                      if(isCSVPath()){
                        postUserData(json_str);
                      }
                    }
                    return true;
                  });
                }
            });
        } else {
            setIsDataFetched(true);
            return null;
        }

    }

    return (
      <main className="c-main">
        {isDataFetched ? ( // Render the component only when isDataFetched is true
          <CContainer fluid>
            <Suspense fallback={loading}>
              <Switch>
                {routes.map((route, idx) => {
                  return route.component && (
                    <Route
                      key={idx}
                      path={route.path}
                      exact={route.exact}
                      name={route.name}
                      render={(props) =>
                        <route.component {...props} userid={UserId} email={UserData.email} />
                      }
                    />
                  );
                })}
                <Redirect from="/" to="/dashboard" />
              </Switch>
            </Suspense>
          </CContainer>
        ) : null}
      </main>
    );
}

export default React.memo(TheContent)