636 when not authenticated show for companies link

src/core/appUrls.ts

@@ -6,6 +6,7 @@ export const getArticlesUrl = () => url`/articles`;
 export const getAuthCallbackUrl = () => url`/auth/callback`;
 export const getCareerOpportinityUrl = (opportunityId: number) => url`/career/${{ opportunityId }}`;
 export const getCareerOpportunitiesUrl = () => url`/career`;
+export const getCompanyNewUrl = () => url`https://new.online.ntnu.no/company`;
 export const getCompaniesUrl = () => url`/companies`;
 export const getCompanyUrl = (companyId: number) => url`/companies/${{ companyId }}`;
 export const getContributionsUrl = () => url`/contribution`;

src/core/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { DOMAIN } from 'common/constants/endpoints';
 import * as appUrls from 'core/appUrls';
@@ -9,28 +9,29 @@ import style from './header.less';
 import HeaderLogo from './HeaderLogo';
 import HeaderLogin from './Login';
 import MenuButton from './MenuButton';
+import { selectIsLoggedIn } from 'authentication/selectors/authentication';
+import { useSelector } from 'react-redux';
+
 
 export interface IState {
   isOpen: boolean;
 }
+const Header = () => {
+  const isLoggedIn = useSelector(selectIsLoggedIn());
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleMenu = () => setIsOpen( !isOpen );
 
-class Header extends Component<{}, IState> {
-  public state: IState = {
-    isOpen: false,
-  };
-
-  public toggleMenu = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
-
-  public closeMenu = () => this.setState({ isOpen: false });
+  const closeMenu = () => setIsOpen( false);
 
-  public render() {
-    const { isOpen } = this.state;
-    return (
-      <header className={style.header}>
+
+  return (
+    <header className={style.header}>
         <div className={style.grid}>
-          <MenuButton isOpen={isOpen} onClick={this.toggleMenu} />
-          <HeaderLogo onClick={this.closeMenu} />
-          <div className={classnames(style.links, { [style.dropdownMode]: isOpen })} onClick={this.closeMenu}>
+          <MenuButton isOpen={isOpen} onClick={toggleMenu} />
+          <HeaderLogo onClick={closeMenu} />
+          {isLoggedIn ? (
+            <div className={classnames(style.links, { [style.dropdownMode]: isOpen })} onClick={closeMenu}>
             <Link {...appUrls.getEventsUrl()}>
               <a>Arrangementer</a>
             </Link>
@@ -48,12 +49,28 @@ class Header extends Component<{}, IState> {
             </Link>
             <a href={`${DOMAIN}/wiki/`}>Wiki</a>
             <a href={`${DOMAIN}/webshop/`}>Webshop</a>
+            </div>
+          ) : (
+            <div className={classnames(style.links, { [style.dropdownMode]: isOpen })} onClick={closeMenu}>
+              <Link {...appUrls.getCompanyNewUrl()}>
+                <a>For bedrifter</a>
+              </Link>
+              <Link {...appUrls.getEventsUrl()}>
+                <a>Arrangementer</a>
+              </Link>
+              <Link {...appUrls.getCareerOpportunitiesUrl()}>
+                <a>Karriere</a>
+              </Link>
+              <Link {...appUrls.getHobbyGroupsUrl()}>
+                <a>Interessegrupper</a>
+              </Link>
+              <a href={`${DOMAIN}/wiki/`}>Wiki</a>  
+            </div>
+            )}
+            <HeaderLogin menuIsOpen={isOpen} closeMenu={closeMenu} />
           </div>
-          <HeaderLogin menuIsOpen={isOpen} closeMenu={this.closeMenu} />
-        </div>
       </header>
-    );
-  }
-}
-
+  )
+} 
+
 export default Header;