aboutsummaryrefslogtreecommitdiff
path: root/components/navbar.tsx
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-04-09 17:10:50 +0200
committerlonkaars <l.leblansch@gmail.com>2021-04-09 17:10:50 +0200
commit5856e80fcb78446be37456ec1e5c47b2ab02201f (patch)
treeeb600e49b8e5884c8ffc7d96719a9bd0b9764120 /components/navbar.tsx
parent24a90a67674d52dd3569cf5289b3f4b2f35f23ad (diff)
dprint format :tada:
Diffstat (limited to 'components/navbar.tsx')
-rw-r--r--components/navbar.tsx192
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>;
}
-