diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-04-09 17:10:50 +0200 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-04-09 17:10:50 +0200 |
commit | 5856e80fcb78446be37456ec1e5c47b2ab02201f (patch) | |
tree | eb600e49b8e5884c8ffc7d96719a9bd0b9764120 /components/navbar.tsx | |
parent | 24a90a67674d52dd3569cf5289b3f4b2f35f23ad (diff) |
dprint format :tada:
Diffstat (limited to 'components/navbar.tsx')
-rw-r--r-- | components/navbar.tsx | 192 |
1 files changed, 109 insertions, 83 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index d6775ee..70de574 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,121 +1,147 @@ -import { CSSProperties, useEffect, useState, useContext } from "react"; -import axios from "axios"; +import axios from 'axios'; +import { CSSProperties, useContext, useEffect, useState } from 'react'; -import { LogoDark } from "../components/logo"; -import { AccountAvatar } from "./account"; -import { userInfo } from "../api/api"; -import { NotificationsArea } from "./notificationsArea"; -import { SocketContext } from "./socketContext"; +import { userInfo } from '../api/api'; +import { LogoDark } from '../components/logo'; +import { AccountAvatar } from './account'; +import { NotificationsArea } from './notificationsArea'; +import { SocketContext } from './socketContext'; -import Home from '@material-ui/icons/Home'; -import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import ExtensionIcon from '@material-ui/icons/Extension'; +import Home from '@material-ui/icons/Home'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import PersonIcon from '@material-ui/icons/Person'; import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; -import PersonIcon from '@material-ui/icons/Person'; -import NotificationsIcon from '@material-ui/icons/Notifications'; +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; var NavBarItemStyle: CSSProperties = { margin: 12, marginBottom: 16, - display: "block" -} + display: 'block', +}; export function NavBar() { - var [ loggedIn, setLoggedIn ] = useState(false); - var [ gotData, setGotData ] = useState(false); + var [loggedIn, setLoggedIn] = useState(false); + var [gotData, setGotData] = useState(false); - var [ friendRequests, setFriendRequests ] = useState<Array<userInfo>>(null); + var [friendRequests, setFriendRequests] = useState<Array<userInfo>>(null); - var [ notificationsAreaVisible, setNotificationsAreaVisible ] = useState(false); - var [ gotNotifications, setGotNotifications ] = useState(false); + var [notificationsAreaVisible, setNotificationsAreaVisible] = useState(false); + var [gotNotifications, setGotNotifications] = useState(false); var { io } = useContext(SocketContext); async function getNotifications() { - var friendRequestsReq = await axios.request<{ requests: Array<userInfo> }>({ - method: "get", - url: `/api/social/list/requests` + var friendRequestsReq = await axios.request<{ requests: Array<userInfo>; }>({ + method: 'get', + url: `/api/social/list/requests`, }); setFriendRequests(friendRequestsReq.data.requests); setGotNotifications(friendRequestsReq.data.requests.length > 0); } - useEffect(() => {(async () => { - if (gotData) return; - if (typeof window === "undefined") return; - - var loggedIn = document.cookie.includes("token"); - setLoggedIn(loggedIn); - - if (loggedIn) { - await getNotifications(); - io.on("incomingFriendRequest", getNotifications); - io.on("changedRelation", getNotifications); - } + useEffect(() => { + (async () => { + if (gotData) return; + if (typeof window === 'undefined') return; - setGotData(true); - })()}, []); + var loggedIn = document.cookie.includes('token'); + setLoggedIn(loggedIn); - return <div className="navbar" style={{ - width: 48, - height: "100%", + if (loggedIn) { + await getNotifications(); + io.on('incomingFriendRequest', getNotifications); + io.on('changedRelation', getNotifications); + } - lineHeight: 0, + setGotData(true); + })(); + }, []); - backgroundColor: "var(--background)", - display: "inline-block", + return <div + className='navbar' + style={{ + width: 48, + height: '100%', - position: "fixed", - top: 0, - left: 0, + lineHeight: 0, - overflow: "visible", - whiteSpace: "nowrap", - zIndex: 2 - }}> - <div style={NavBarItemStyle}><LogoDark/></div> - <a href="/" style={NavBarItemStyle}><Home/></a> - <a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a> - { false && <a href="/" style={NavBarItemStyle}><ExtensionIcon/></a> } - <a href="/search" style={NavBarItemStyle}><SearchIcon/></a> + backgroundColor: 'var(--background)', + display: 'inline-block', - <div style={{ - position: "absolute", - bottom: -4, + position: 'fixed', + top: 0, left: 0, - backgroundColor: "var(--background)" - }}> - { loggedIn && <a style={{ - overflow: "visible", - position: "relative", - ...NavBarItemStyle - }}> - <div style={{ cursor: "pointer" }} onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)}> - <NotificationsIcon/> - { gotNotifications && <div style={{ - backgroundColor: "var(--disk-a)", - width: 8, height: 8, - borderRadius: 4, - position: "absolute", - top: 2, right: 2 - }}/> } + + overflow: 'visible', + whiteSpace: 'nowrap', + zIndex: 2, + }} + > + <div style={NavBarItemStyle}> + <LogoDark /> + </div> + <a href='/' style={NavBarItemStyle}> + <Home /> + </a> + <a href='/game' style={NavBarItemStyle}> + <VideogameAssetIcon /> + </a> + {false && <a href='/' style={NavBarItemStyle}> + <ExtensionIcon /> + </a>} + <a href='/search' style={NavBarItemStyle}> + <SearchIcon /> + </a> + + <div + style={{ + position: 'absolute', + bottom: -4, + left: 0, + backgroundColor: 'var(--background)', + }} + > + {loggedIn && <a + style={{ + overflow: 'visible', + position: 'relative', + ...NavBarItemStyle, + }} + > + <div + style={{ cursor: 'pointer' }} + onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)} + > + <NotificationsIcon /> + {gotNotifications && <div + style={{ + backgroundColor: 'var(--disk-a)', + width: 8, + height: 8, + borderRadius: 4, + position: 'absolute', + top: 2, + right: 2, + }} + />} </div> <NotificationsArea visible={notificationsAreaVisible} friendRequests={friendRequests} - rerender={getNotifications}/> - </a> } - <a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}> - { - loggedIn ? - <AccountAvatar size={24} round/> : - <PersonIcon/> - } + rerender={getNotifications} + /> + </a>} + <a href={loggedIn ? '/user' : '/login'} style={NavBarItemStyle}> + {loggedIn + ? <AccountAvatar size={24} round /> + : <PersonIcon />} </a> - { loggedIn && <a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a> } + {loggedIn && <a href='/settings' style={NavBarItemStyle}> + <SettingsIcon /> + </a>} </div> - </div> + </div>; } - |