import { MetaFunction, LoaderArgs, LinksFunction } from '@remix-run/node'; import { json } from '@remix-run/node'; import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, Link, useCatch, useMatches, useTransition, Form, useLocation } from '@remix-run/react'; import { useEffect, useState } from 'react'; import { MantineProvider, createEmotionCache, useMantineTheme, ColorScheme, ColorSchemeProvider, AppShell, Navbar, Header, Text, MediaQuery, Burger, ActionIcon, useMantineColorScheme, Button, Box, Group, UnstyledButton, ThemeIcon, NavLink, Menu } from '@mantine/core'; import { useColorScheme, useLocalStorage } from '@mantine/hooks'; import { StylesPlaceholder } from '@mantine/remix'; import { NavigationProgress, startNavigationProgress, completeNavigationProgress } from '@mantine/nprogress'; import { getUser } from './session.server'; import { Sun, Moon, Clock, LogOut, LogIn, Home, Briefcase, BarChart2, FileText, Upload, Settings, Lock, User, Users } from 'react-feather'; import { NotificationsProvider } from '@mantine/notifications'; export const meta: MetaFunction = () => ({ charset: 'utf-8', title: 'WorkTimer', description: 'WorkTimer is a time tracking app. Helps you track your time spent on projects.', viewport: 'width=device-width,initial-scale=1' }); export let links: LinksFunction = () => { return []; }; export async function loader({ request }: LoaderArgs) { return json({ user: await getUser(request) }); } createEmotionCache({ key: 'mantine' }); export default function App() { let transition = useTransition(); useEffect(() => { if (transition.state === 'idle') completeNavigationProgress(); else startNavigationProgress(); }, [transition.state]); return ( ); } function Document({ children, title }: { children: React.ReactNode; title?: string; }) { const preferredColorScheme = useColorScheme(); const toggleColorScheme = (value?: ColorScheme) => { setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); }; const [colorScheme, setColorScheme] = useLocalStorage({ key: 'mantine-color-scheme', defaultValue: preferredColorScheme, getInitialValueInEffect: true }); return ( {title ? {title} : null} {children} {process.env.NODE_ENV === 'development' && } ); } export function CatchBoundary() { let caught = useCatch(); let message; switch (caught.status) { case 401: message = 'Oops! Looks like you tried to visit a page that you do not have access to.'; break; case 404: message = 'Oops! Looks like you tried to visit a page that does not exist.'; break; default: throw new Error(caught.data || caught.statusText); } return (

{caught.status}: {caught.statusText}

{message}

 ); } function Layout({ children }: React.PropsWithChildren<{}>) { let user = useMatches().find((m) => m.id === 'root')?.data?.user; const [opened, setOpened] = useState(false); const location = useLocation(); const theme = useMantineTheme(); const { colorScheme, toggleColorScheme } = useMantineColorScheme(); useEffect(() => { setOpened(false); }, [location]); return ( ); } export function ErrorBoundary({ error }: { error: Error }) { console.error(error); return (

There was an error

{error.message}

Hey, developer, you should replace this with what you want your users to see.

); }