mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-09 15:05:35 +00:00
refactor: remove all legacy files
+ comment/delete things that haven't yet migrated to mantine
This commit is contained in:
Sonny
Sonny
@@ -1,145 +1,122 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { ReactNode, useEffect } from 'react';
|
||||
import { CiMenuBurger } from 'react-icons/ci';
|
||||
import { useSwipeable } from 'react-swipeable';
|
||||
import CollectionContainer from '~/components/dashboard/collection/collection_container';
|
||||
import CollectionList from '~/components/dashboard/collection/list/collection_list';
|
||||
import DashboardProviders from '~/components/dashboard/dashboard_provider';
|
||||
import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
|
||||
import SwiperHandler from '~/components/dashboard/swiper_handler';
|
||||
import DashboardLayout from '~/components/layouts/dashboard_layout';
|
||||
import useToggle from '~/hooks/use_modal';
|
||||
import useScreenType from '~/hooks/viewport/use_screen_type';
|
||||
import { rgba } from '~/lib/color';
|
||||
import { router } from '@inertiajs/react';
|
||||
import { route } from '@izzyjs/route/client';
|
||||
import { AppShell, ScrollArea, Stack } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useEffect } from 'react';
|
||||
import { DashboardAside } from '~/components/dashboard/dashboard_aside';
|
||||
import { DashboardHeader } from '~/components/dashboard/dashboard_header';
|
||||
import { DashboardNavbar } from '~/components/dashboard/dashboard_navbar';
|
||||
import LinkItem from '~/components/dashboard/link/link_item';
|
||||
import { NoLink } from '~/components/dashboard/link/no_link';
|
||||
import { MantineFooter } from '~/components/footer/footer';
|
||||
import { useDisableOverflow } from '~/hooks/use_disable_overflow';
|
||||
import useShortcut from '~/hooks/use_shortcut';
|
||||
import { DashboardLayout } from '~/layouts/dashboard_layout';
|
||||
import { appendCollectionId } from '~/lib/navigation';
|
||||
import {
|
||||
useActiveCollection,
|
||||
useCollectionsSetter,
|
||||
} from '~/store/collection_store';
|
||||
import { useGlobalHotkeysStore } from '~/store/global_hotkeys_store';
|
||||
import { CollectionWithLinks } from '~/types/app';
|
||||
import classes from './dashboard.module.css';
|
||||
|
||||
interface DashboardPageProps {
|
||||
collections: CollectionWithLinks[];
|
||||
activeCollection: CollectionWithLinks;
|
||||
}
|
||||
|
||||
const SideBar = styled.div<{
|
||||
floating?: boolean;
|
||||
opened: boolean;
|
||||
}>(({ theme, opened, floating = false }) => ({
|
||||
zIndex: 9,
|
||||
position: floating ? 'absolute' : 'unset',
|
||||
top: 0,
|
||||
height: '100%',
|
||||
width: opened ? '100%' : 'fit-content',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
transition: 'left 0.15s, right 0.15s',
|
||||
export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
|
||||
const [openedNavbar, { toggle: toggleNavbar, close: closeNavbar }] =
|
||||
useDisclosure();
|
||||
const [openedAside, { toggle: toggleAside, close: closeAside }] =
|
||||
useDisclosure();
|
||||
|
||||
'&::before': {
|
||||
zIndex: -1,
|
||||
position: floating ? 'absolute' : 'unset',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
background: rgba(theme.colors.black, 0.35),
|
||||
backdropFilter: 'blur(0.1em)',
|
||||
content: '""',
|
||||
display: opened ? 'block' : 'none',
|
||||
},
|
||||
}));
|
||||
const { activeCollection } = useActiveCollection();
|
||||
const { _setCollections, setActiveCollection } = useCollectionsSetter();
|
||||
const { globalHotkeysEnabled } = useGlobalHotkeysStore();
|
||||
|
||||
const LeftSideBar = styled(SideBar)(({ opened }) => ({
|
||||
left: opened ? 0 : '-100%',
|
||||
}));
|
||||
|
||||
const RightSideBar = styled(SideBar)(({ opened }) => ({
|
||||
right: opened ? 0 : '-100%',
|
||||
alignItems: 'flex-end',
|
||||
}));
|
||||
|
||||
const BugerIcon = styled(CiMenuBurger)(({ theme }) => ({
|
||||
cursor: 'pointer',
|
||||
height: '24px',
|
||||
minHeight: 'fit-content',
|
||||
width: '24px',
|
||||
minWidth: 'fit-content',
|
||||
color: theme.colors.primary,
|
||||
}));
|
||||
|
||||
function DashboardPage(props: Readonly<DashboardPageProps>) {
|
||||
const isMobile = useScreenType('mobile');
|
||||
const isTablet = useScreenType('tablet');
|
||||
|
||||
const {
|
||||
isShowing: isNavigationOpen,
|
||||
open: openNavigation,
|
||||
close: closeNavigation,
|
||||
} = useToggle();
|
||||
const {
|
||||
isShowing: isCollectionListOpen,
|
||||
open: openCollectionList,
|
||||
close: closeCollectionList,
|
||||
} = useToggle();
|
||||
|
||||
const handleSwipeLeft = () => {
|
||||
if (!isMobile && !isTablet) return;
|
||||
if (isNavigationOpen) {
|
||||
closeNavigation();
|
||||
} else {
|
||||
openCollectionList();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSwipeRight = () => {
|
||||
if (!isMobile && !isTablet) return;
|
||||
if (isCollectionListOpen) {
|
||||
closeCollectionList();
|
||||
} else {
|
||||
openNavigation();
|
||||
}
|
||||
};
|
||||
|
||||
const handlers = useSwipeable({
|
||||
trackMouse: true,
|
||||
onSwipedLeft: handleSwipeLeft,
|
||||
onSwipedRight: handleSwipeRight,
|
||||
useShortcut('ESCAPE_KEY', () => {
|
||||
closeNavbar();
|
||||
closeAside();
|
||||
});
|
||||
|
||||
useDisableOverflow();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile && !isTablet) {
|
||||
closeCollectionList();
|
||||
closeNavigation();
|
||||
_setCollections(props.collections);
|
||||
setActiveCollection(props.activeCollection);
|
||||
}, []);
|
||||
|
||||
useShortcut(
|
||||
'OPEN_CREATE_LINK_KEY',
|
||||
() =>
|
||||
router.visit(
|
||||
appendCollectionId(route('link.create-form').url, activeCollection?.id)
|
||||
),
|
||||
{
|
||||
enabled: globalHotkeysEnabled,
|
||||
}
|
||||
}, [isMobile, isTablet, closeCollectionList, closeNavigation]);
|
||||
);
|
||||
useShortcut(
|
||||
'OPEN_CREATE_COLLECTION_KEY',
|
||||
() => router.visit(route('collection.create-form').url),
|
||||
{
|
||||
enabled: globalHotkeysEnabled,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardProviders
|
||||
collections={props.collections}
|
||||
activeCollection={props.activeCollection}
|
||||
>
|
||||
<SwiperHandler {...handlers}>
|
||||
<LeftSideBar
|
||||
opened={isNavigationOpen}
|
||||
floating={isMobile || isTablet}
|
||||
onClick={closeNavigation}
|
||||
<DashboardLayout>
|
||||
<div className={classes.app_wrapper}>
|
||||
<AppShell
|
||||
layout="alt"
|
||||
header={{ height: 50 }}
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !openedNavbar },
|
||||
}}
|
||||
aside={{
|
||||
width: 300,
|
||||
breakpoint: 'md',
|
||||
collapsed: { mobile: !openedAside },
|
||||
}}
|
||||
classNames={{
|
||||
aside: classes.ml_custom_class,
|
||||
footer: classes.ml_custom_class,
|
||||
navbar: classes.ml_custom_class,
|
||||
header: classes.ml_custom_class,
|
||||
}}
|
||||
className={classes.app_shell}
|
||||
>
|
||||
<SideNavigation />
|
||||
</LeftSideBar>
|
||||
<CollectionContainer
|
||||
openNavigationItem={
|
||||
<BugerIcon css={{ marginRight: '1em' }} onClick={openNavigation} />
|
||||
}
|
||||
openCollectionItem={<BugerIcon onClick={openCollectionList} />}
|
||||
showButtons={isMobile || isTablet}
|
||||
/>
|
||||
<RightSideBar
|
||||
opened={isCollectionListOpen}
|
||||
floating={isMobile || isTablet}
|
||||
onClick={closeCollectionList}
|
||||
>
|
||||
<CollectionList />
|
||||
</RightSideBar>
|
||||
</SwiperHandler>
|
||||
</DashboardProviders>
|
||||
<DashboardHeader
|
||||
navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
|
||||
aside={{ opened: openedAside, toggle: toggleAside }}
|
||||
/>
|
||||
<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
|
||||
<AppShell.Main>
|
||||
{activeCollection?.links && activeCollection.links.length > 0 ? (
|
||||
<ScrollArea
|
||||
h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
|
||||
p="md"
|
||||
>
|
||||
<Stack gap="xs">
|
||||
{activeCollection?.links.map((link) => (
|
||||
<LinkItem key={link.id} link={link} showUserControls />
|
||||
))}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
) : (
|
||||
<NoLink key={activeCollection?.id} />
|
||||
)}
|
||||
</AppShell.Main>
|
||||
<DashboardAside isOpen={openedAside} toggle={toggleAside} />
|
||||
<AppShell.Footer pl="xs" pr="xs">
|
||||
<MantineFooter />
|
||||
</AppShell.Footer>
|
||||
</AppShell>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
DashboardPage.layout = (page: ReactNode) => <DashboardLayout children={page} />;
|
||||
export default DashboardPage;
|
||||
|
||||
Reference in New Issue
Block a user