Intastellar Consents Platform

SaaS - Solutions

Tech: ReactJS, MySQL

Med Intastellar Consents, kan du nemt og hurtigt oprette en Cookie Consent, GDPR Consent eller en Privacy Policy til din hjemmeside. Du kan nemt og hurtigt oprette en konto og komme igang med at oprette din første Consent.

Website besuchen

Jeg fik udviklet for min Cookie banner, en digitale platform for at holde styr på alle de forskellige Consents. Jeg udviklede den i ReactJS.

Dashboard

Med Dashboard for man et hurtigt overblik over hvordan consents er fordelt henover:

Nødvendige cookies
Statistik cookies
Funktionelle cookies
Marketing cookies
Accepteret alle
Afvist alle

samt hvordan fordeling er mellem lande.

Dashboarded indeholder også en simple lille cookie bot som checker hjemmesiden for cookies som er sendt igennem HTTP Requesten.

Live data

For at hente live data til at vise aktive bruger på ens hjemmeside, benytter jeg mig af pull methoden og fetcher hvert 250 millisekund nye data fra APIen som fortiden kun tæller, de seneste bruger i de sidste 30 min.

Med denne metode kan jeg så vise live data på dashboardet som er relativt nyt.

Custom Hooks

Jeg har udviklet en custom hook, som benytter sig af konceptet SWR, som jeg benytter mig af til at hente data fra APIen.

SWR, stale-while-revalidate, er en HTTP strategi som viser først data som ligger i cachen (stale), hvorefter den laver et nyt fetch kald (revalidate), for at så opdater indholdet med den nye opdateret information.


const { useState, useEffect } = React;
export default function useFetch(updateInterval, url, method, headers, body, handle){
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState();
    const [error, setError] = useState();
    const [lastUpdated, setLastUpdated] = useState(Math.floor(Date.now() / 100));
    const [updated, setUpdated] = useState("");
    let id = undefined;

    if(!url) return;

    useEffect(() => {
        const controller = new AbortController();
        setLoading(true);
        fetch(url, { method: method, headers, body, signal: controller.signal } )
            .then((res) => {
                if(res.status === 401){
                    return "Err_Login_Expired";
                }else if(res.status === 403){
                    return "Err_No_Access";
                }else if(
                    res.status === 404 ||
                    res.status === 500 ||
                    res.status === 502 ||
                    res.status === 503 ||
                    res.status === 504
                ){
                    return "Err_Server_Error";
                }

                return res.json()
            })
            .then(setData)
            .catch(setError)
            .finally(() => {
                setLoading(false);
                setUpdated("Now");
                setLastUpdated(Math.floor(Date.now() / 1000));
            });

        if(typeof(updateInterval) !=='undefined'){
            const interval1 = setInterval(() => {
                if ((Math.floor(Date.now() / 1000)) - lastUpdated >= 60) {
                    setUpdated(Math.floor(((Math.floor(Date.now() / 1000)) - lastUpdated) / 60) + " minute ago");
                }
            }, 1000);

            id = setInterval(() => {
                fetch(url, { method: method, headers, body, signal: controller.signal } )
                .then((res) => res.json())
                .then(setData)
                .catch(setError)
                .finally(() => {
                    setLoading(false);
                    clearInterval(interval1);
                    setUpdated("Now");
                    setLastUpdated(Math.floor(Date.now() / 1000));
                });
            }, updateInterval * 60 * 1000)
        }

        return () => {
            controller.abort();
            if(typeof(updateInterval) !=='undefined'){
                clearInterval(id);
            }
        }
    }, [url, handle]);

    if(data == "Err_Login_Expired"){
        localStorage.removeItem("globals");
        window.location.href = "/login";
        return;
    }

    return [loading, data, error, updated, lastUpdated, setUpdated];
}