improvement!: clean up and optimize imports

src/api/authenticator.js

@@ -1,14 +1,10 @@
-import Logger from '../common/util/Logger';
+import Logger from '../common/util/logger';
 import gateway from "./gateway/globalGatewayConnection";
-import token from "./tokenManager";
+import { getToken } from "./tokenManager";
 
 const { log: authLog } = Logger([ 'Authenticator' ]);
 
-const Authenticator = {
-    login: async function() {
+export function login() {
     authLog('Logging in through gateway...');
-        return gateway.connect(token.getToken());
-    }
+    return gateway.connect(getToken());
 };
-
-export default Authenticator;

src/api/gateway/GatewayConnection.js

@@ -1,4 +1,4 @@
-import logger from "../../common/util/Logger";
+import logger from "../../common/util/logger";
 
 const { log: logGateway } = logger([ "Gateway" ]);
 const { log: logRtc } = logger([ "Gateway", "RTC" ]);

src/api/gateway/globalGatewayConnection.js

@@ -1,7 +1,7 @@
 import GatewayConnection from './GatewayConnection';
 import config from '../../config';
 import store from '../../common/store';
-import logger from '../../common/util/Logger';
+import logger from '../../common/util/logger';
 
 const { log } = logger(["globalGatewayConnection"]);
 const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiments"]);

src/api/request.js

@@ -1,7 +1,7 @@
 import config from '../config';
-import token from "./tokenManager";
+import { getToken } from "./tokenManager";
 
-async function APIRequest(endpoint, options) {
+export async function APIRequest(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -28,7 +28,7 @@ async function APIRequest(endpoint, options) {
     return { res, json, isOK, err };
 }
 
-APIRequest.authenticated = async function(endpoint, options) {
+export async function authenticated(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -38,7 +38,7 @@ APIRequest.authenticated = async function(endpoint, options) {
     if (!options.headers) options.headers = {};
 
     options.headers = {
-        "Authorization": token.getToken(),
+        "Authorization": getToken(),
         ...options.headers
     };
 

src/api/tokenManager.js

@@ -1,6 +1,7 @@
-const tokenManager = {
-    getToken: () => localStorage.getItem("token"),
-    setToken: (token) => localStorage.setItem("token", token)
+export function getToken() {
+    return localStorage.getItem("token");
 };
 
-export default tokenManager;
+export function setToken(token) {
+    localStorage.setItem("token", token);
+};

src/components/FullMessage.js

@@ -1,11 +1,13 @@
 export default function FullMessage({ glyph, title, content }) {
-    return (<div className="center grow col-flex">
+    return (
+        <div className="center grow col-flex">
             <div className="greeter-logo">
-                <span className="greeter-logo-text">{ glyph }</span>
+                <span className="greeter-logo-text">{glyph}</span>
             </div>
-            <span className="greeter-branding-name">{ title }</span>
+            <span className="greeter-branding-name">{title}</span>
             <div className="center">
-                { content }
+                {content}
             </div>
-        </div>)
+        </div>
+    );
 }

src/components/auth/Create.js

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import Notification from '../Notification';
 import APIRequest from '../../api/request';
-import { getSignupMessageFromError } from '../../common/util/Errors'
+import { getSignupMessageFromError } from '../../common/util/errors'
 
 export default function Create() {
     const history = useHistory();
@@ -11,7 +11,6 @@ export default function Create() {
     const [ usernameInput, setUsernameInput ] = useState();
     const [ passwordInput, setPasswordInput ] = useState();
     const [ specialCodeInput, setSpecialCodeInput ] = useState();
-
     const [ specialCodePrompt, setSpecialCodePrompt ] = useState();
 
     const [ info, setInfo ] = useState();

src/components/auth/Login.js

@@ -3,9 +3,9 @@ import { useHistory } from 'react-router-dom';
 
 import Notification from '../Notification';
 import APIRequest from '../../api/request';
-import Authenticator from '../../api/authenticator';
-import token from "../../api/tokenManager";
-import { getLoginMessageFromError } from '../../common/util/Errors'
+import { login } from '../../api/authenticator';
+import { setToken } from "../../api/tokenManager";
+import { getLoginMessageFromError } from '../../common/util/errors'
 
 export default function Login() {
     const history = useHistory();
@@ -42,8 +42,8 @@ export default function Login() {
             return;
         }
         
-        token.setToken(json.token);
-        await Authenticator.login();
+        setToken(json.token);
+        await login();
 
         history.push('/');
     }

src/components/channel/ChannelButton.js

@@ -1,8 +1,8 @@
+import { useHistory } from 'react-router-dom';
+
 import ChannelProfile from './ChannelProfileLink';
 import gatewayConnection from '../../api/gateway/globalGatewayConnection';
 
-import { useHistory } from 'react-router-dom';
-
 export default function ChannelButton({ channel, selected }) {
     const history = useHistory();
 

src/components/channel/ChannelList.js

@@ -1,8 +1,8 @@
+import { connect } from 'react-redux'
+
 import ChannelListLoader from './ChannelListLoader';
 import ChannelButton from './ChannelButton';
 
-import { connect } from 'react-redux'
-
 function ChannelList({ selectedChannelId, channels }) {
     if (!channels) {
         return (

src/components/channel/ChannelMessageView.js

@@ -1,6 +1,7 @@
-import Message from  "../Message";
 import { useRef, useEffect } from 'react';
 
+import Message from  "../Message";
+
 export default function ChannelMessageView({messages}) {
     const invisibleBottomMessageRef = useRef();
 

src/components/channel/ChannelView.js

@@ -1,10 +1,10 @@
+import { connect, useDispatch } from 'react-redux';
+import { useState, useRef, useEffect } from 'react';
+
 import ChannelProfile from './ChannelProfileLink';
 import gatewayConnection from '../../api/gateway/globalGatewayConnection';
 import ChannelUserList from "./ChannelUserList";
 import ProfileLinkLoader from "../ProfileLinkLoader";
-
-import { connect, useDispatch } from 'react-redux';
-import { useState, useRef, useEffect } from 'react';
 import ChannelMessageView from './ChannelMessageView';
 
 const ChannelView = ({ messages, channel, channelPresenceClientList }) => {

src/components/main/App.js

@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react';
 import { connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
+import './../../styles/App.scss';
 import Login from '../auth/Login';
 import Create from '../auth/Create';
 import Root from '../main/Root';
-import Authenticator from '../../api/authenticator';
+import { login } from '../../api/authenticator';
 import Notification from '../Notification';
-import './../../styles/App.scss';
 import LoggedInMount from './LoggedInMount';
 import FullMessage from '../FullMessage';
 
@@ -16,7 +16,7 @@ function App({ user, fullscreenMessage }) {
     const [ hasError ] = useState(false);
 
     useEffect(() => {
-        Authenticator.login();
+        login();
     }, []);
 
     if (user === null && !hasError) {

src/components/main/LoggedInMount.js

@@ -1,9 +1,10 @@
+import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+
 import Sidebar from "../Sidebar";
 import ChannelView from "../channel/ChannelView";
 import GradientBanner from "../GradientBanner";
 import UserView from "../user/UserView";
-import { connect } from "react-redux";
 
 function LoggedInMount({ gradientBannerNotificationText }) {
     const { channelId, userId } = useParams();

src/components/user/UserView.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import APIRequest from "../../api/request";
+import { authenticated } from "../../api/request";
 import UserProfile from "./UserProfileLink";
 import ProfileLinkLoader from "../ProfileLinkLoader";
 
@@ -7,7 +7,7 @@ export default function UserView({ userId }) {
     const [userObject, setUserObject] = useState(null);
 
     useEffect(() => {
-        APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
+        authenticated(`/api/v1/users/user/${userId}/info`, {
             method: 'GET',
             headers: {
                 "Accept": "application/json"
@@ -23,8 +23,8 @@ export default function UserView({ userId }) {
     if (userObject) {
         view = <>
             <UserProfile user={ userObject } size="32" />
-            {(userObject.role === "ADMIN") && <span>Admin</span>}
-            {(userObject.role === "USER") && <span>User</span>}
+            {(userObject.role === "ADMIN") && <span style={{ padding: "12px" }}>Admin</span>}
+            {(userObject.role === "USER") && <span style={{ padding: "12px" }}>User</span>}
         </>
     } else {
         view = <>