Merge pull request #115 from rasikaghadge/rasika-interview-page

Used consistent structure for sending request (like used everywhere else in the client)

client/src/actions/constants.js

@@ -31,4 +31,6 @@ export const FETCH_PROFILES_BY_USER = 'FETCH_PROFILES_BY_USER';
 
 export const LIST_MEETINGS = 'LIST_MEETINGS';
 export const GET_MEETING = 'GET_MEETING';
-export const SCHEDULE_MEETING = 'SCHEDULE_MEETING';
+export const SCHEDULE_MEETING = 'SCHEDULE_MEETING';
+
+export const PROCESS_AUDIO = 'PROCESS_AUDIO';

client/src/actions/modelCommunication.js

@@ -0,0 +1,16 @@
+import * as api from "../api/index.js";
+import { PROCESS_AUDIO } from "./constants";
+
+export const processCandidateAnswer = (audioBase64) => async (dispatch) => {
+    try {
+      const audioJson = {
+        audioBase64: audioBase64,
+      };
+      const { data } = await api.processCandidateAnswer(audioJson);
+      dispatch({ type: PROCESS_AUDIO, payload: data });
+      return data;
+    } catch (error) {
+      console.log(error);
+      return error;
+    }
+  };

client/src/api/index.js

@@ -12,6 +12,7 @@ if (NODE_ENV === 'development') {
 }
 export const baseURL = url;
 const API = axios.create({ baseURL: baseURL})
+const AI_API = axios.create({ baseURL: process.env.AI_API })
 
 
 API.interceptors.request.use((req) => {
@@ -50,4 +51,6 @@ export const getInterviewsHR = (id) => API.get(`/interviews/hr/${id}`);
 export const listMeetings = () => API.get('/meetings');
 export const getMeeting = (id) => API.get(`/meetings/${id}`);
 // export const scheduleMeeting = (meetingData) => API.post('/schedule', meetingData);
-export const scheduleMeeting = (formData) => API.post(`/interviews/schedule`, formData);
+export const scheduleMeeting = (formData) => API.post(`/interviews/schedule`, formData);
+
+export const processCandidateAnswer = (audioJson) => AI_API.post('/process/', audioJson);

client/src/components/Interview/Interview.js

@@ -8,8 +8,11 @@ import { Link } from "react-router-dom";
 import styles from "./Interview.module.css";
 import { useLocation } from "react-router-dom";
 import { questions, introduction } from "./FirstQuestions";
+import { processCandidateAnswer } from "../../actions/modelCommunication";
+import { useDispatch } from "react-redux";
 
 const Interview = () => {
+  const dispatch = useDispatch();
   const location = useLocation();
   const candidateName = location?.state?.participantNameFromDB;
   const endTime = location?.state?.endTimeFromDB;
@@ -138,26 +141,9 @@ const Interview = () => {
     };
   };
 
-  const sendAudioAndGetNextQuestion = (audioBase64) => {
+  const sendAudioAndGetNextQuestion = async (audioBase64) => {
     // TODO: Test with django server
-    const url = process.env.AI_APP_API || "http://127.0.0.1:8000"; // Replace with your server endpoint
-    const apiUrl = url + "/process";
-    const requestBody = { audioBase64 };
-
-    fetch(apiUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(requestBody),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        startRecording();
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+    let response = await dispatch(processCandidateAnswer(audioBase64));
     // TODO: Change it to the question from response
     let str = generateString(10);
     displayAndReadQuestion(str);
@@ -189,7 +175,7 @@ const Interview = () => {
         resolve();
       };
     });
-  }
+  };
 
   const displayAndReadQuestion = async (question) => {
     document.getElementById("question").innerHTML = question;