mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-29 16:15:04 +00:00
refactor: split Sider from App.tsx
This commit is contained in:
Maël Gangloff
158
assets/App.tsx
158
assets/App.tsx
@@ -1,21 +1,4 @@
|
|||||||
import {Badge, Layout, Menu, theme} from "antd";
|
import {Layout, theme} from "antd";
|
||||||
import {
|
|
||||||
ApiOutlined,
|
|
||||||
BankOutlined,
|
|
||||||
CloudServerOutlined,
|
|
||||||
CompassOutlined,
|
|
||||||
FileProtectOutlined,
|
|
||||||
FileSearchOutlined,
|
|
||||||
HomeOutlined,
|
|
||||||
InfoCircleOutlined,
|
|
||||||
LineChartOutlined,
|
|
||||||
LoginOutlined,
|
|
||||||
LogoutOutlined,
|
|
||||||
QuestionCircleOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
TeamOutlined,
|
|
||||||
UserOutlined
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom";
|
import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom";
|
||||||
import TextPage from "./pages/TextPage";
|
import TextPage from "./pages/TextPage";
|
||||||
import DomainSearchPage from "./pages/search/DomainSearchPage";
|
import DomainSearchPage from "./pages/search/DomainSearchPage";
|
||||||
@@ -30,9 +13,8 @@ import {getUser} from "./utils/api";
|
|||||||
import LoginPage, {AuthenticatedContext} from "./pages/LoginPage";
|
import LoginPage, {AuthenticatedContext} from "./pages/LoginPage";
|
||||||
import ConnectorsPage from "./pages/tracking/ConnectorsPage";
|
import ConnectorsPage from "./pages/tracking/ConnectorsPage";
|
||||||
import NotFoundPage from "./pages/NotFoundPage";
|
import NotFoundPage from "./pages/NotFoundPage";
|
||||||
import {ItemType, MenuItemType} from "antd/lib/menu/interface";
|
|
||||||
import {t} from 'ttag'
|
|
||||||
import useBreakpoint from "./hooks/useBreakpoint";
|
import useBreakpoint from "./hooks/useBreakpoint";
|
||||||
|
import {Sider} from "./components/Sider";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const {
|
const {
|
||||||
@@ -67,145 +49,11 @@ export default function App() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
const menuItems: ItemType<MenuItemType>[] = [
|
|
||||||
{
|
|
||||||
key: 'home',
|
|
||||||
label: t`Home`,
|
|
||||||
icon: <HomeOutlined/>,
|
|
||||||
onClick: () => navigate('/home')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'search',
|
|
||||||
label: t`Search`,
|
|
||||||
icon: <SearchOutlined/>,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'domain-finder',
|
|
||||||
icon: <CompassOutlined/>,
|
|
||||||
label: t`Domain`,
|
|
||||||
title: t`Domain Finder`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/search/domain')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'entity-finder',
|
|
||||||
icon: <TeamOutlined/>,
|
|
||||||
label: t`Entity`,
|
|
||||||
title: t`Entity Finder`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/search/entity')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'ns-finder',
|
|
||||||
icon: <CloudServerOutlined/>,
|
|
||||||
label: t`Nameserver`,
|
|
||||||
title: t`Nameserver Finder`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/search/nameserver')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'info',
|
|
||||||
label: t`Information`,
|
|
||||||
icon: <InfoCircleOutlined/>,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'tld-list',
|
|
||||||
icon: <BankOutlined/>,
|
|
||||||
label: t`TLD`,
|
|
||||||
title: t`TLD list`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/info/tld')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'stats',
|
|
||||||
icon: <LineChartOutlined/>,
|
|
||||||
label: t`Statistics`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/info/stats')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'tracking',
|
|
||||||
label: t`Tracking`,
|
|
||||||
icon: <FileSearchOutlined/>,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'watchlist',
|
|
||||||
icon: <Badge count={0} size="small"><FileSearchOutlined/></Badge>,
|
|
||||||
label: t`My Watchlists`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/tracking/watchlist')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'connectors',
|
|
||||||
icon: <ApiOutlined/>,
|
|
||||||
label: t`My Connectors`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/tracking/connectors')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'watchdog',
|
|
||||||
label: t`My Watchdog`,
|
|
||||||
icon: <UserOutlined/>,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 'account',
|
|
||||||
icon: <UserOutlined/>,
|
|
||||||
label: t`My Account`,
|
|
||||||
disabled: !isAuthenticated,
|
|
||||||
onClick: () => navigate('/user')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'tos',
|
|
||||||
icon: <InfoCircleOutlined/>,
|
|
||||||
label: t`TOS`,
|
|
||||||
onClick: () => navigate('/tos')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'privacy',
|
|
||||||
icon: <FileProtectOutlined/>,
|
|
||||||
label: t`Privacy Policy`,
|
|
||||||
onClick: () => navigate('/privacy')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
icon: <QuestionCircleOutlined/>,
|
|
||||||
label: t`FAQ`,
|
|
||||||
onClick: () => navigate('/faq')
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
return <AuthenticatedContext.Provider value={contextValue}>
|
return <AuthenticatedContext.Provider value={contextValue}>
|
||||||
<Layout hasSider style={{minHeight: '100vh'}}>
|
<Layout hasSider style={{minHeight: '100vh'}}>
|
||||||
{/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0*/}
|
{/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0*/}
|
||||||
<Layout.Sider collapsible breakpoint="sm" {...(sm ? {collapsedWidth: 0} : {})}>
|
<Layout.Sider collapsible breakpoint="sm" {...(sm ? {collapsedWidth: 0} : {})}>
|
||||||
<Menu
|
<Sider isAuthenticated={isAuthenticated}/>
|
||||||
defaultSelectedKeys={['home']}
|
|
||||||
defaultOpenKeys={['search', 'info', 'tracking', 'watchdog']}
|
|
||||||
mode="inline"
|
|
||||||
theme="dark"
|
|
||||||
items={[...menuItems, isAuthenticated ? {
|
|
||||||
key: '8',
|
|
||||||
icon: <LogoutOutlined/>,
|
|
||||||
label: t`Log out`,
|
|
||||||
danger: true,
|
|
||||||
onClick: () => window.location.replace("/logout")
|
|
||||||
} : {
|
|
||||||
key: '8',
|
|
||||||
icon: <LoginOutlined/>,
|
|
||||||
label: t`Log in`,
|
|
||||||
onClick: () => navigate('/login')
|
|
||||||
}]}
|
|
||||||
/>
|
|
||||||
</Layout.Sider>
|
</Layout.Sider>
|
||||||
<Layout>
|
<Layout>
|
||||||
<Layout.Header style={{padding: 0, background: colorBgContainer}}/>
|
<Layout.Header style={{padding: 0, background: colorBgContainer}}/>
|
||||||
|
|||||||
163
assets/components/Sider.tsx
Normal file
163
assets/components/Sider.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import {ItemType, MenuItemType} from "antd/lib/menu/interface";
|
||||||
|
import {t} from "ttag";
|
||||||
|
import {
|
||||||
|
ApiOutlined,
|
||||||
|
BankOutlined,
|
||||||
|
CloudServerOutlined,
|
||||||
|
CompassOutlined,
|
||||||
|
FileProtectOutlined,
|
||||||
|
FileSearchOutlined,
|
||||||
|
HomeOutlined,
|
||||||
|
InfoCircleOutlined,
|
||||||
|
LineChartOutlined,
|
||||||
|
LoginOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
QuestionCircleOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
UserOutlined
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import {Badge, Menu} from "antd";
|
||||||
|
import React from "react";
|
||||||
|
import {useNavigate} from "react-router-dom";
|
||||||
|
|
||||||
|
export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
|
||||||
|
const menuItems: ItemType<MenuItemType>[] = [
|
||||||
|
{
|
||||||
|
key: 'home',
|
||||||
|
label: t`Home`,
|
||||||
|
icon: <HomeOutlined/>,
|
||||||
|
onClick: () => navigate('/home')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'search',
|
||||||
|
label: t`Search`,
|
||||||
|
icon: <SearchOutlined/>,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'domain-finder',
|
||||||
|
icon: <CompassOutlined/>,
|
||||||
|
label: t`Domain`,
|
||||||
|
title: t`Domain Finder`,
|
||||||
|
disabled: !isAuthenticated,
|
||||||
|
onClick: () => navigate('/search/domain')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'entity-finder',
|
||||||
|
icon: <TeamOutlined/>,
|
||||||
|
label: t`Entity`,
|
||||||
|
title: t`Entity Finder`,
|
||||||
|
disabled: true,
|
||||||
|
onClick: () => navigate('/search/entity')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ns-finder',
|
||||||
|
icon: <CloudServerOutlined/>,
|
||||||
|
label: t`Nameserver`,
|
||||||
|
title: t`Nameserver Finder`,
|
||||||
|
disabled: true,
|
||||||
|
onClick: () => navigate('/search/nameserver')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'info',
|
||||||
|
label: t`Information`,
|
||||||
|
icon: <InfoCircleOutlined/>,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'tld-list',
|
||||||
|
icon: <BankOutlined/>,
|
||||||
|
label: t`TLD`,
|
||||||
|
title: t`TLD list`,
|
||||||
|
disabled: !isAuthenticated,
|
||||||
|
onClick: () => navigate('/info/tld')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'stats',
|
||||||
|
icon: <LineChartOutlined/>,
|
||||||
|
label: t`Statistics`,
|
||||||
|
disabled: true,
|
||||||
|
onClick: () => navigate('/info/stats')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'tracking',
|
||||||
|
label: t`Tracking`,
|
||||||
|
icon: <FileSearchOutlined/>,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'watchlist',
|
||||||
|
icon: <Badge count={0} size="small"><FileSearchOutlined/></Badge>,
|
||||||
|
label: t`My Watchlists`,
|
||||||
|
disabled: !isAuthenticated,
|
||||||
|
onClick: () => navigate('/tracking/watchlist')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'connectors',
|
||||||
|
icon: <ApiOutlined/>,
|
||||||
|
label: t`My Connectors`,
|
||||||
|
disabled: !isAuthenticated,
|
||||||
|
onClick: () => navigate('/tracking/connectors')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'watchdog',
|
||||||
|
label: t`My Watchdog`,
|
||||||
|
icon: <UserOutlined/>,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'account',
|
||||||
|
icon: <UserOutlined/>,
|
||||||
|
label: t`My Account`,
|
||||||
|
disabled: !isAuthenticated,
|
||||||
|
onClick: () => navigate('/user')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'tos',
|
||||||
|
icon: <InfoCircleOutlined/>,
|
||||||
|
label: t`TOS`,
|
||||||
|
onClick: () => navigate('/tos')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'privacy',
|
||||||
|
icon: <FileProtectOutlined/>,
|
||||||
|
label: t`Privacy Policy`,
|
||||||
|
onClick: () => navigate('/privacy')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5',
|
||||||
|
icon: <QuestionCircleOutlined/>,
|
||||||
|
label: t`FAQ`,
|
||||||
|
onClick: () => navigate('/faq')
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
return <Menu
|
||||||
|
defaultSelectedKeys={['home']}
|
||||||
|
defaultOpenKeys={['search', 'info', 'tracking', 'watchdog']}
|
||||||
|
mode="inline"
|
||||||
|
theme="dark"
|
||||||
|
items={[...menuItems, isAuthenticated ? {
|
||||||
|
key: '8',
|
||||||
|
icon: <LogoutOutlined/>,
|
||||||
|
label: t`Log out`,
|
||||||
|
danger: true,
|
||||||
|
onClick: () => window.location.replace("/logout")
|
||||||
|
} : {
|
||||||
|
key: '8',
|
||||||
|
icon: <LoginOutlined/>,
|
||||||
|
label: t`Log in`,
|
||||||
|
onClick: () => navigate('/login')
|
||||||
|
}]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user