PLAT-828 profile api to PLAT-802_profile-util (#50)

* PLAT-536 #comment add logout #time 15m

* PLAt-536 #comment fix link hover #time 5m

* PLAT-536 #comment fix logo size #time 15m

* PLAT-764 #comment convert svgs to components and
export from lib #time 30m

* PLAT-764 #comment remove styling from SVGs;
permit route route for isactive nav #time 1h

* PLAT-764 #comment refactor narrow tool selectors
so they are not a route; #time 30m

* PLAT-764 #comment rename svgs folder #time 5m

* PLAT-764 #comment clean up styles and svgs; #time 30m

* PLAT-764 #comment clean-up #time 5m

* PALT-764 #comment clean-up #time 5m

* PLAT-764 #comment clean-up #time 5m

* PLAT-764 #comment clean-up #time 5m

* PLAT-764 #comment clean-upo #time 5m

* PLAT-754 #comment convert url configs to constants;
define section routes in section #time 2h

* PLAT-754 #comment create and use route
provider #time 2.75h

* PLAT-745 #comment add child routes;
clean up root config dir; clean up tool
selectors; #time 1h

* PLAT-754 #comment configure sections in content
layout; design lib routes and sections #time 1h

* PLAT-754 #comment replace route config
w/route utils; create *.routes for each tool/util;
#time 1h

* PLAT-754 #comment hide sections for tools
that don't have any #time 10m

* PLAT-754 #comment fix styling for expanded
narrow tool selectors; #time 15m

* PLAT-754 #comment route provider cleanup #time 1h

* PLAT-754 #comment tools narrow clean-up;  #time 30m

* PLAT-764 #comment clean-up #time 5m

* PLAT-7584 #comment clean-up #time 10m

* POLAT-754 #comment clean-up #time 5m

* PLAT-754 #comment clean-up #time 5m

* PLAT-754 #comment clean-up #time 5m

* PLAT-754 #comment update readme #time 10m

* PLAT-754 #comment fix build issues #time 10m

* PLAT-754 #comment clean-up #time 5m

* PLAT-754 #comment remove commented out tests #time 5m

* PLAT-802 #comment create profile util;
fix padding for content layout; #time 1h

* PLAT-825 #comment fix profile styling;
create form element and text input;
remove profile from content layout; #time 6h

* PLAT-825 #comment consolidate font styles; #time 1h

* PLAT-828 #comment create button component;
migrate existing buttons to component; #time 30m

* PLAT-828 #comment use axios for xhr;
update button component; remove all service classes;
wire up api call to update profile #time 6h

* PLAT-828 #comment rename all services to
functions; #time 10m

* PLAT-828 #comment add update password functions
#time 30m

* PLAT-828 #comment clean-up #time 5m

* PLAT-828 #comment clean-up #time 10m

* PLAT-828 #comment use v3 api for pw change
#time 45m

* PLAT-828 #comment remove obsolete TODO;
change password input names to prevent
auto-fill; #time 10m

Author: brooketopcoder

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.5.0",
         "@heroicons/react": "^1.0.6",
+        "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
@@ -51,6 +52,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "@types/axios": "^0.14.0",
         "@types/jest": "^27.0.1",
         "@types/node": "^16.7.13",
         "@types/react": "^17.0.20",

src/App.tsx

@@ -3,11 +3,11 @@ import { Route, Routes } from 'react-router-dom'
 
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
-import { AnalyticsService, LoggingService, ProfileProvider } from './lib'
+import { initializeAnalytics, initializeLogger, ProfileProvider  } from './lib'
 import { RouteContext, RouteContextData } from './lib/route-provider'
 
-new AnalyticsService().initialize(EnvironmentConfig)
-new LoggingService().initialize(EnvironmentConfig)
+initializeAnalytics(EnvironmentConfig)
+initializeLogger(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 

src/config/environments/environment.default.config.ts

@@ -4,6 +4,7 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
     ENV: AppHostEnvironment.default,

src/config/environments/environment.prod.config.ts

@@ -6,6 +6,7 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
     ENV: AppHostEnvironment.prod,

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -2,7 +2,7 @@
 
 $overlaySquare: calc($pad-xxxxl + 2 * $border);
 
-.profile-avater,
+.profile-avatar,
 .overlay {
     cursor: pointer;
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, LoggingService, ProfileContext, ProfileContextData } from '../../../../../lib'
+import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
@@ -9,10 +9,9 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     const { profile }: ProfileContextData = useContext(ProfileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const logger: LoggingService = new LoggingService()
 
     if (!profile) {
-        logger.logInfo('tried to render the logged in profile w/out a profile')
+        logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
@@ -22,7 +21,7 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     return (
         <>
-            <div className={styles['profile-avater']} onClick={() => toggleProfilePanel()} >
+            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -2,10 +2,10 @@ import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
-    AuthenticationUrlConfig,
+    logoutUrl,
     ProfileContext,
     ProfileContextData,
-    ProfileRouteConfig,
+    profileRoute,
 } from '../../../../../../lib'
 
 import styles from './ProfilePanel.module.scss'
@@ -31,11 +31,11 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={ProfileRouteConfig.profile}
+                to={profileRoute}
             >
                 My Profile
             </Link>
-            <a href={AuthenticationUrlConfig.logout} className={styles.logout}>
+            <a href={logoutUrl} className={styles.logout}>
                 Log Out
             </a>
         </div>

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -1,29 +1,28 @@
-import classNames from 'classnames'
 import { FC } from 'react'
 
-import { AuthenticationUrlConfig, routeRoot } from '../../../../../lib'
+import { Button, loginUrl, routeRoot, signupUrl } from '../../../../../lib'
 import '../../../../../lib/styles/index.scss'
 
 import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
-    const buttonClass: string = 'button'
-
     return (
         <>
-            <a
-                className={classNames(buttonClass, styles.login)}
-                href={AuthenticationUrlConfig.login(routeRoot)}
-            >
-                Log In
-            </a>
-            <a
-                className={classNames(buttonClass, 'all-white', styles.signup)}
-                href={AuthenticationUrlConfig.signup(routeRoot)}
-            >
-                Sign Up
-            </a>
+            <Button
+                className={styles.login}
+                label='Log In'
+                size='sm'
+                buttonStyle='text'
+                url={loginUrl(routeRoot)}
+            />
+            <Button
+                className={styles.signup}
+                label='Sign Up'
+                size='sm'
+                buttonStyle='tertiary'
+                url={signupUrl(routeRoot)}
+            />
         </>
     )
 }

src/lib/button/Button.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+interface ButtonProps {
+    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+    readonly className?: string
+    readonly disable?: boolean
+    readonly label: string
+    readonly onClick?: (event?: any) => void
+    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly type?: 'button' | 'submit'
+    readonly url?: string
+}
+
+const Button: FC<ButtonProps> = (props: ButtonProps) => {
+
+    const classes: string = classNames(
+        'button',
+        props.className,
+        props.buttonStyle || 'primary',
+        `button-${props.size || 'md'}`
+    )
+
+    // if there is a url, this is a link button
+    if (!!props.url) {
+        return (
+            <a
+                className={classes}
+                href={props.url}
+            >
+                {props.label}
+            </a>
+        )
+    }
+
+    // if there is no url and no click handler, we hava a prob
+    if (!props.onClick) {
+        throw new Error(`button has neither a url or a click handler`)
+    }
+
+    // create a safe click handler that isn't null so the compiler
+    // doesn't complain
+    const clickHandler: (event: any) => void = props.onClick
+
+    return (
+        <button
+            className={classes}
+            disabled={!!props.disable}
+            onClick={event => clickHandler(event)}
+            type={props.type || 'button'}
+        >
+            {props.label}
+        </button>
+    )
+}
+
+export default Button

src/lib/button/Buttons.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})