we store user token in session storage now

src/contexts/CASProvider.tsx

@@ -1,35 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, createContext, ReactNode } from 'react';
 import { User } from '../types';
+import axios from 'axios';
 
 export interface CASContext {
-  user: User | null;
+  user?: User;
   logout: () => void;
 }
 
-export const CASContext = React.createContext<CASContext | null>(null);
+export const CASContext = createContext<CASContext | undefined>(undefined);
 
 export interface CASProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const CASProvider = ({ children }: CASProviderProps) => {
-  const [user, setUser] = useState<User | null>(null);
-
+  const [user, setUser] = useState<User | undefined>(undefined);
   useEffect(() => {
     login();
   }, []);
 
-  function login() {
+  const login = async () => {
     const urlParams = new URLSearchParams(window.location.search);
     const ticket = urlParams.get('ticket');
-
     if (!ticket) {
       redirectToCASLoginService();
     }
-    if (ticket) {
-      setUser({ ...user, ticket: ticket });
+    try {
+      if (!sessionStorage.getItem('userToken')) {
+        const { data: token } = await axios.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
+        sessionStorage.setItem('userToken', token);
+        setUser({ ...user, token });
+      }
+      const token = sessionStorage.getItem('userToken');
+      setUser({ ...user, token });
+    } catch (e) {
+      console.log(e);
     }
-  }
+  };
 
   function logout() {
     redirectToCASLogoutService();

src/contexts/CoursesProvider.tsx

@@ -1,6 +1,7 @@
-import React, { useState, createContext, useEffect, ReactNode } from 'react';
+import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react';
 import { Course, Group, Basket, GroupType } from '../types';
 import axios from 'axios';
+import { CASContext, CASProvider } from './CASProvider';
 
 interface CourseContext {
   courses: Array<Course>;
@@ -10,7 +11,7 @@ interface CourseContext {
   deleteFromBasket: (id: number) => void;
   saveBasket: () => void;
 }
-export const coursesContext = createContext<CourseContext | null>(null);
+export const coursesContext = createContext<CourseContext | undefined>(undefined);
 
 interface CoursesProviderProps {
   children: ReactNode;
@@ -21,6 +22,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
 
+  const CAS = useContext(CASContext)!;
+  const token = CAS?.user?.token;
+
   const addToBasket = (course: Course) => {
     const courseToBasket = {
       name: course.name,
@@ -30,15 +34,26 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     } as Basket;
     setBasket([...basket, courseToBasket]);
   };
-
   const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
 
-  const saveBasket = () => {
-    // try {
-    //   axios.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add`);
-    // } catch (e) {
-    //   console.log(e);
-    // }
+  const saveBasket = async () => {
+    try {
+      let data = [7, 43, 54];
+      let json = JSON.stringify(data);
+      let post_data = { json_data: json };
+      const ech = await axios.post<Array<number>>(
+        `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`,
+        [7, 43, 54],
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+      console.log('api response;', ech);
+    } catch (e) {
+      console.log(e);
+    }
     console.log('saving to basket');
   };
 
@@ -67,8 +82,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
         lectures: groups.filter(({ type }) => type === GroupType.LECTURE),
         classes: groups.filter(({ type }) => type === GroupType.CLASS),
       })) as Array<Course>;
-      console.log('courses mapped');
-      console.log(courses);
       courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1));
 
       setCourses(courses);

src/index.tsx

@@ -7,12 +7,12 @@ import { GlobalStyles } from './styles/GlobalStyles';
 
 ReactDOM.render(
   <>
-    <CoursesProvider>
-      <CASProvider>
+    <CASProvider>
+      <CoursesProvider>
         <GlobalStyles />
         <App />
-      </CASProvider>
-    </CoursesProvider>
+      </CoursesProvider>
+    </CASProvider>
   </>,
   document.getElementById('root'),
 );

src/types/index.ts

@@ -30,5 +30,5 @@ export interface Course {
 export interface User {
   name?: string;
   surname?: string;
-  ticket: string | null;
+  token: string | null;
 }