import React, { useCallback, useState, } from 'react'; import { Layout, Menu, Avatar, Dropdown, Button } from 'antd'; import { QrcodeOutlined, FileImageOutlined, FileOutlined, VideoCameraOutlined, ContainerOutlined, LinkOutlined, } from '@ant-design/icons'; import HTMLHead from '../components/HTMLHead'; import Uploader from '../components/Uploader'; import QRCode from '../components/QRCode'; import ShortUrl from '../components/ShortUrl'; import Placeholder from '../components/Placeholder'; import auth0 from '../utils/auth0'; import { Context } from '../context'; import 'antd/dist/antd.css'; import 'video-react/dist/video-react.css'; import './index.css'; const { Header, Sider, Content } = Layout; const App = ({ user, isAdmin, isDev }) => { const [type, setType] = useState('image'); const handleTypeChange = useCallback((e) => { setType(e.key); }, []); return ( <Context.Provider value={{ user, isAdmin, isDev }}> <Layout style={{ height: '100%', flexDirection: 'row' }}> <HTMLHead /> <Sider breakpoint="lg" collapsedWidth={0} > <a className="logo" href="https://github.com/int64ago/getlink-next" target="_blank"> Get Link! </a> <Menu theme="dark" mode="inline" selectedKeys={[type]} onClick={handleTypeChange} > <Menu.Item key="image"> <FileImageOutlined />IMAGE </Menu.Item> <Menu.Item key="video"> <VideoCameraOutlined />VIDEO </Menu.Item> <Menu.Item key="file"> <FileOutlined />FILE </Menu.Item> <Menu.Item key="placeholder"> <ContainerOutlined />Placeholder </Menu.Item> <Menu.Item key="qrcode"> <QrcodeOutlined />QR Code </Menu.Item> <Menu.Item key="urlshorten"> <LinkOutlined />URL Shortener </Menu.Item> </Menu> </Sider> <Layout style={{ background: '#fff', overflow: 'hidden' }}> <Header> {user ? ( <Dropdown overlay={( <Menu> <Menu.Item> <a href="/api/logout">Logout</a> </Menu.Item> </Menu> )}> <Avatar src={user.picture} /> </Dropdown> ) : ( <div> <Button type="link" href="/api/login">Login</Button> </div> )} </Header> <Content style={{ padding: 24, height: '100%', background: '#fff', overflow: 'auto', }} > {type === 'image' && <Uploader type="image" />} {type === 'video' && <Uploader type="video" />} {type === 'file' && <Uploader type="file" />} {type === 'qrcode' && <QRCode />} {type === 'urlshorten' && <ShortUrl />} {type === 'placeholder' && <Placeholder />} </Content> </Layout> </Layout> </Context.Provider> ); }; App.getInitialProps = async ({ req, res }) => { if (typeof window === 'undefined') { const { adminUser } = require('../utils/av'); const { user } = await auth0.getSession(req) || {}; const isAdmin = await adminUser(user && user.sub); const isDev = process.env.NODE_ENV === 'development'; return { user, isAdmin, isDev }; } }; export default App;