📦 EqualifyEverything / equalify-v2-web

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81import { useGlobalStore } from "#src/utils";
import { useEffect } from 'react';
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { Loader } from ".";
import * as Auth from "aws-amplify/auth";
import { usePostHog } from 'posthog-js/react';
import { useUser } from '../queries';

export const Navigation = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const { loading, authenticated, setAuthenticated, darkMode, setDarkMode } = useGlobalStore();
    const posthog = usePostHog();
    const { data: user } = useUser();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [location]);

    useEffect(() => {
        if (darkMode) {
            document.documentElement.classList.add('dark')
        }
        else {
            document.documentElement.classList.remove('dark')
        }
    }, [darkMode]);

    const authRoutes = ['/login'];

    useEffect(() => {
        const async = async () => {
            const attributes = (await Auth.fetchAuthSession()).tokens?.idToken?.payload;
            if (!attributes) {
                setAuthenticated(false);
                if (!authRoutes.includes(location.pathname) || location.pathname === '/') {
                    navigate(`/${location.search}`);
                }
            }
            else {
                setAuthenticated(attributes?.sub);
                posthog?.identify(attributes?.sub, { email: attributes?.email });
                await Auth.fetchAuthSession({ forceRefresh: true });
                if (location.pathname === '/') {
                    navigate('/dashboard')
                }
            }
        }
        async();
    }, []);

    return (
        <div>
            <div className='w-full max-w-screen-lg mx-auto bg-background p-4 pb-24 min-h-[calc(100vh_-_180px)]'>
                <div className='flex flex-col sm:flex-row items-center justify-between mb-4'>
                    <Link to='/' className='relative'><img className='w-[150px]' src='logo.svg' />
                        <div className='absolute right-[-22px] top-[calc(50%_-_11px)] text-2xl font-extrabold italic text-[#7F6A00]'>v2</div>
                    </Link>
                    <div className='flex flex-row items-center gap-4'>
                        {(!authenticated ? [
                            { label: 'Log In', value: '/login' },
                        ] : [
                            { label: 'Dashboard', value: '/dashboard' },
                            { label: 'Audit', value: '/audit' },
                            { label: 'Pages', value: '/pages' },
                            { label: 'Log', value: '/log' },
                            { label: 'Account', value: '/account' },
                            { label: 'Log Out', value: '/logout' },
                        ]).map(obj => <Link key={obj.value} to={obj.value} className={`hover:opacity-50 ${location.pathname === obj.value && 'font-bold'}`}>{obj.label}</Link>)}
                    </div>
                </div>
                {loading && <Loader />}
                <Outlet />
            </div>
            <div className='w-full max-w-screen-lg mx-auto py-4 flex flex-col sm:flex-row items-center justify-between'>
                <div>© {new Date().getFullYear()} Equalify. All rights reserved</div>
                <button onClick={() => setDarkMode(!darkMode)}>{`Switch to ${darkMode ? 'Light Mode' : 'Dark Mode'}`}</button>
            </div>
        </div>
    )
}