import { useState, useEffect } from 'react' import Image from 'next/image' import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid' import classNames from 'classnames' import { useMediaQuery } from 'react-responsive' import { useSwipeable } from 'react-swipeable' import { Sidebar, DirectionSidebar } from './Sidebar' import { IconButton } from '../design/IconButton' import { IconLink } from '../design/IconLink' import { Guilds } from './Guilds/Guilds' import { Divider } from '../design/Divider' import { Members } from './Members' import { useAuthentication } from '../../tools/authentication' import { API_URL } from '../../tools/api' export interface ChannelsPath { channelId: number } export interface GuildsPath { guildId: number } export interface GuildsChannelsPath extends GuildsPath, ChannelsPath {} const isGuildsChannelsPath = (path: any): path is GuildsChannelsPath => { return path.guildId !== undefined && path.channelId !== undefined } export type ApplicationPath = | '/application' | '/application/guilds/join' | '/application/guilds/create' | `/application/users/${number}` | `/application/users/settings` | GuildsChannelsPath | GuildsPath export interface ApplicationProps { path: ApplicationPath guildLeftSidebar?: React.ReactNode title: string } export const Application: React.FC = (props) => { const { children, path, guildLeftSidebar, title } = props const { user } = useAuthentication() const [mounted, setMounted] = useState(false) const isMobile = useMediaQuery({ query: '(max-width: 900px)' }) const [visibleSidebars, setVisibleSidebars] = useState({ left: !isMobile, right: false }) const handleToggleSidebars = (direction: DirectionSidebar): void => { if (!isMobile) { if (direction === 'left') { return setVisibleSidebars({ ...visibleSidebars, left: !visibleSidebars.left }) } if (direction === 'right') { return setVisibleSidebars({ ...visibleSidebars, right: !visibleSidebars.right }) } } else { if (direction === 'right' && visibleSidebars.left) { return setVisibleSidebars({ left: false, right: true }) } if (direction === 'left' && visibleSidebars.right) { return setVisibleSidebars({ left: true, right: false }) } if (direction === 'left' && !visibleSidebars.right) { return setVisibleSidebars({ ...visibleSidebars, left: !visibleSidebars.left }) } if (direction === 'right' && !visibleSidebars.left) { return setVisibleSidebars({ ...visibleSidebars, right: !visibleSidebars.right }) } } } const swipeableHandlers = useSwipeable({ trackMouse: false, trackTouch: true, preventDefaultTouchmoveEvent: true, onSwipedRight: () => { if (visibleSidebars.right) { return setVisibleSidebars({ ...visibleSidebars, right: false }) } setVisibleSidebars({ ...visibleSidebars, left: true }) }, onSwipedLeft: () => { if (visibleSidebars.left) { return setVisibleSidebars({ ...visibleSidebars, left: false }) } setVisibleSidebars({ ...visibleSidebars, right: true }) } }) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( <>
handleToggleSidebars('left')} > {!visibleSidebars.left ? : }
{title}
{title.startsWith('#') && ( handleToggleSidebars('right')} > {!visibleSidebars.right ? : } )}
{"Users's
{guildLeftSidebar}
{children}
{isGuildsChannelsPath(path) && ( )}
) }