Created the form to search for the courses

package.json

@@ -7,13 +7,17 @@
   "repository": "github:Lambda-School-Labs/labs-spa-starter",
   "dependencies": {
     "@craco/craco": "^6.4.3",
+    "@okta/okta-auth-js": "^6.7.0",
+    "@okta/okta-react": "^6.5.0",
+    "@okta/okta-signin-widget": "^6.4.2",
     "antd": "^4.20.1",
     "axios": "^0.21.1",
     "craco-less": "^1.20.0",
     "dotenv": "^16.0.1",
     "emailjs-com": "^3.2.0",
     "formik": "^2.2.9",
     "moment": "^2.29.2",
+    "okta": "^1.0.0",
     "plotly.js": "^1.54.6",
     "react": "^18.1",
     "react-dom": "^18.1",

src/__tests__/LandingPage.test.js

@@ -10,6 +10,15 @@ import { LandingPage } from '../components/pages/Landing';
 
 const store = createStore(rootReducers);
 
+jest.mock('@okta/okta-react', () => ({
+  useOktaAuth: () => {
+    return {
+      authState: null,
+      authService: {},
+    };
+  },
+}));
+
 beforeEach(() => {
   render(
     <Provider store={store}>

src/__tests__/PaymentSuccess.test.js

@@ -7,7 +7,17 @@ import rootReducers from '../redux/reducers/index';
 import PaymentSuccess from '../components/pages/ParentHome/PaymentSuccess';
 
 const store = createStore(rootReducers);
-//TO-DO: Implement mock for Auth0
+
+jest.mock('@okta/okta-react', () => ({
+  useOktaAuth: () => {
+    return {
+      authState: {
+        isAuthenticated: true,
+      },
+      authService: {},
+    };
+  },
+}));
 
 describe('<PaymentSuccess />', () => {
   test('it renders the PaymentSuccess component', () => {

src/__tests__/ProfileListContainer.test.js

@@ -6,7 +6,16 @@ import { ProfileListPage } from '../components/pages/ProfileList';
 jest.mock('../api', () => {
   return { getProfileData: () => Promise.resolve([]) };
 });
-//TO-DO: Implement mock for Auth0
+jest.mock('@okta/okta-react', () => ({
+  useOktaAuth: () => {
+    return {
+      authState: {
+        isAuthenticated: true,
+      },
+      authService: {},
+    };
+  },
+}));
 
 describe('<ProfileListContainer />', () => {
   test('renders a loading state upon loading and calling for profiles', async () => {

src/__tests__/Registration.test.js

@@ -10,7 +10,17 @@ import { createMemoryHistory } from 'history';
 import InstructorWelcome from '../components/pages/Registration/InstructorWelcome';
 
 const store = createStore(rootReducers);
-//TO-DO: Implement mock for Auth0
+
+jest.mock('@okta/okta-react', () => ({
+  useOktaAuth: () => {
+    return {
+      authState: {
+        isAuthenticated: true,
+      },
+      authService: {},
+    };
+  },
+}));
 
 describe('<Instructor Welcome />', () => {
   test('it renders the instructorWelcome component', () => {

src/api/index.js

@@ -1,8 +1,6 @@
 import axios from 'axios';
-//TO-DO: Implement Auth0
 
 // we will define a bunch of API calls here.
-//NOTE: apiUrl will be used below once auth0 is implemented //
 const apiUrl = `${process.env.REACT_APP_API_URI}/profiles`;
 
 const sleep = time =>
@@ -16,28 +14,33 @@ const getExampleData = () => {
     .then(response => response.data);
 };
 
-const getDSData = url => {
+const getAuthHeader = authState => {
+  if (!authState.isAuthenticated) {
+    throw new Error('Not authenticated');
+  }
+  return { Authorization: `Bearer ${authState.idToken}` };
+};
+
+const getDSData = (url, authState) => {
   // here's another way you can compose together your API calls.
   // Note the use of GetAuthHeader here is a little different than in the getProfileData call.
+  const headers = getAuthHeader(authState);
   if (!url) {
     throw new Error('No URL provided');
   }
   return axios
-    .get(url)
+    .get(url, { headers })
     .then(res => JSON.parse(res.data))
-    .catch(err => {
-      console.log(err);
-    });
+    .catch(err => err);
 };
 
-// NOTE: Once auth0 is implemented these lines can be refactored or reused //
-// const apiAuthGet = authHeader => {
-//   return axios.get(apiUrl, { headers: authHeader });
-// };
+const apiAuthGet = authHeader => {
+  return axios.get(apiUrl, { headers: authHeader });
+};
 
-const getProfileData = () => {
+const getProfileData = authState => {
   try {
-    return 'Hi, need to Implement Auth0';
+    return apiAuthGet(getAuthHeader(authState)).then(response => response.data);
   } catch (error) {
     return new Promise(() => {
       console.log(error);
@@ -46,4 +49,4 @@ const getProfileData = () => {
   }
 };
 
-export { sleep, getExampleData, getProfileData, getDSData };
+export { sleep, getExampleData, getProfileData, getDSData, getAuthHeader };

src/components/common/Header.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Menu } from 'antd';
+import { useOktaAuth } from '@okta/okta-react';
 
 export default function MainHeader() {
-  //TO-DO: Implement Auth0
-  // const { authService, authState } = 'Update the hook with auth0';
+  const { authService, authState } = useOktaAuth();
   return (
     <div>
       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
@@ -12,7 +12,7 @@ export default function MainHeader() {
         <Menu.Item key="3">Booking</Menu.Item>
         <Menu.Item key="4">Scholarships</Menu.Item>
         <Menu.Item key="5">Contact Us (button)</Menu.Item>
-        {/* {authState.isAuthenticated ? (
+        {authState.isAuthenticated ? (
           <Menu.Item
             key="6"
             onClick={() => {
@@ -23,7 +23,7 @@ export default function MainHeader() {
           </Menu.Item>
         ) : (
           <></>
-        )} */}
+        )}
       </Menu>
     </div>
   );

src/components/common/JoinUpdate.js

@@ -45,7 +45,6 @@ const Form = props => {
       })
       .catch(err => {
         console.log(err);
-        return value;
       });
     setValues({
       'First Name': '',

src/components/common/Navbars/InstructorNavBar.js

@@ -4,6 +4,7 @@ import { ThunderboltFilled } from '@ant-design/icons';
 import { Drawer, Menu, Layout } from 'antd';
 import { NavLink } from 'react-router-dom';
 // eslint-disable-next-line
+import { useOktaAuth } from '@okta/okta-react';
 import { ProfileIcon } from '../../pages/LandingInstructor/Icons';
 
 const { Header } = Layout;

src/components/common/Navbars/NavBar.js

@@ -28,8 +28,6 @@ import { connect } from 'react-redux';
 import navLogo from '../../../img/navbar-logo.png';
 import handleLogout from '../../../utils/logout.js';
 
-//TO-DO: Implement Auth0
-
 const { SubMenu } = Menu;
 const { Header } = Layout;
 
@@ -43,7 +41,7 @@ function NavBar(props) {
 
   useEffect(() => {
     if (role_id === 5) setBgColor('#9FB222');
-    else if (role_id < 5 && role_id > 2) setBgColor('#21C5B5');
+    else if (role_id < 5) setBgColor('#21C5B5');
     else setBgColor('#FEAD2A');
   }, [role_id]);
 
@@ -72,7 +70,7 @@ function NavBar(props) {
       style={{
         backgroundColor: bgColor,
         minHeight: '98px',
-        lineHeight: '0px',
+        lineHeight: '0',
         padding: '0',
       }}
     >
@@ -101,15 +99,21 @@ function NavBar(props) {
             </NavLink>
           )}
           <NavLink to="/login">
-            <button>LOGIN</button>
-          </NavLink>
-          {/* {localStorage.getItem({}) && ( */}
-          <NavLink to="/parent/family">
-            <div className="navbar__profile">
-              <ProfileIcon style={{ color: 'black', fontSize: 30 }} />
-            </div>
+            <button
+              className={`navbar__btn navbar__login ${
+                localStorage.getItem('okta-token-storage') ? 'navbar__hide' : ''
+              }`}
+            >
+              LOGIN
+            </button>
           </NavLink>
-          {/* )} */}
+          {localStorage.getItem('okta-token-storage') && (
+            <NavLink to="/parent/family">
+              <div className="navbar__profile">
+                <ProfileIcon style={{ color: 'black', fontSize: 30 }} />
+              </div>
+            </NavLink>
+          )}
         </div>
         <div className="navbar__hamburgerMenu">
           <HamburgerMenuIcon style={{ color: 'white' }} onClick={showDrawer} />
@@ -123,12 +127,16 @@ function NavBar(props) {
               <Menu.Item key="1" icon={<HomeOutlined />}>
                 <NavLink to="/">Home</NavLink>
               </Menu.Item>
-              <Menu.Item key="3" icon={<LoginOutlined />}>
-                <NavLink to="/login">Login</NavLink>
-              </Menu.Item>
-              <Menu.Item key="99" icon={<ProfileIcon />}>
-                <NavLink to="/dev">My Dashboard</NavLink>
-              </Menu.Item>
+              {!localStorage.getItem('okta-token-storage') && (
+                <Menu.Item key="3" icon={<LoginOutlined />}>
+                  <NavLink to="/login">Login</NavLink>
+                </Menu.Item>
+              )}
+              {localStorage.getItem('okta-token-storage') && (
+                <Menu.Item key="99" icon={<ProfileIcon />}>
+                  <NavLink to="/dev">My Dashboard</NavLink>
+                </Menu.Item>
+              )}
               <Menu.Item key="2" icon={<ContactsOutlined />}>
                 <NavLink
                   to="/"

src/components/common/Navbars/NavBarLinks.js

@@ -6,17 +6,17 @@ export default function NavBarLinks(props) {
   if (role_id === 1 || role_id === 2) {
     return (
       <div className="navbar__links">
-        <NavLink className="navbar__navLink" to="/dashboard">
-          Dashboard
+        <NavLink className="navbar__navLink" to="/">
+          DASHBOARD
         </NavLink>
         <NavLink className="navbar__navLink" to="/admin-courses">
-          Components
+          COMPONENTS
         </NavLink>
         <NavLink className="navbar__navLink" to="/admin-add-course">
-          Utilities
+          UTILITIES
         </NavLink>
         <NavLink className="navbar__navLink last_navLink" to="/">
-          Pages
+          PAGES
         </NavLink>
       </div>
     );

src/components/common/calendar/Calendar.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useOktaAuth } from '@okta/okta-react';
 import '../../../styles/calendar.less';
 import 'antd/dist/antd.css';
 import {
@@ -13,8 +14,7 @@ import {
 } from 'antd';
 import moment from 'moment';
 import CalendarModal from './CalendarModal';
-import axios from 'axios';
-// import axiosWithAuth from '../../../utils/axiosWithAuth';
+import axiosWithAuth from '../../../utils/axiosWithAuth';
 
 function CalendarApp() {
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -27,20 +27,25 @@ function CalendarApp() {
   const [eventFlag, setEventFlag] = useState(true);
   const [form] = Form.useForm();
 
-  // TO-DO: Implement Auth0
+  const { authState, oktaAuth } = useOktaAuth();
+  const { idToken } = authState;
+
+  // const token = oktaAuth.getIdToken();
+
   useEffect(() => {
     if (eventFlag) {
-      // axiosWithAuth(idToken)
-      //   .get('/calendar-events/user')
-      Promise.resolve({ data: { events: [] }, message: '' })
+      console.log(authState);
+      console.log(oktaAuth);
+      axiosWithAuth(idToken)
+        .get('/calendar-events/user')
         .then(res => {
           setEventsArr(res.data.events);
         })
         .catch(err => console.error(err));
-      setEventFlag(false);
-      // eslint-disable-next-line
     }
-  }, [eventFlag]);
+    setEventFlag(false);
+    // eslint-disable-next-line
+  }, [eventFlag, idToken]);
 
   useEffect(() => {
     if (event) {
@@ -73,14 +78,13 @@ function CalendarApp() {
 
   // edit event form submission handler
   const onFinish = values => {
-    // axiosWithAuth()
-    //   .put(`/calendar-events/${event.event_id}`, {
-    //     ...values,
-    //     type: 'success',
-    //     date: values.date.format('MM/DD/YYYY'),
-    //     time: values.time.format('h:mm A'),
-    //   })
-    Promise.resolve({ data: [], message: '' })
+    axiosWithAuth()
+      .put(`/calendar-events/${event.event_id}`, {
+        ...values,
+        type: 'success',
+        date: values.date.format('MM/DD/YYYY'),
+        time: values.time.format('h:mm A'),
+      })
       .then(() => {
         setEventFlag(true);
         setIsModalVisible(false);
@@ -91,9 +95,8 @@ function CalendarApp() {
   };
 
   const handleDelete = () => {
-    // axiosWithAuth()
-    //   .delete(`/calendar-events/${event.event_id}`)
-    Promise.resolve({ data: [], message: '' })
+    axiosWithAuth()
+      .delete(`/calendar-events/${event.event_id}`)
       .then(() => {
         setEventFlag(true);
         setIsModalVisible(false);