initialized bot session

src/features/chatbot/actionCreators.js

@@ -1,4 +1,6 @@
 import * as types from "./actionTypes";
+import api from "./api";
+import { sendHttpRequest } from "../../redux/actions/httpActions";
 
 export function summonWizard() {
   return { type: types.SUMMON_WIZARD };
@@ -7,3 +9,63 @@ export function summonWizard() {
 export function dismissBot() {
   return { type: types.DISMISS_BOT };
 }
+
+export function loadBotSession(botName, userKey) {
+  return async function(dispatch, getState) {
+    try {
+      dispatch({ type: types.INITIALIZE_BOT_SESSION_STARTED });
+      const { frontendSession } = getState();
+      const externalId = frontendSession.sessionId;
+      const clientApplication = frontendSession.applicationCode;
+      const data = await dispatch(
+        sendHttpRequest(
+          api.getBotSession(botName, externalId, clientApplication, userKey)
+        )
+      );
+      dispatch({
+        type: types.INITIALIZE_BOT_SESSION_SUCCESS,
+        payload: data
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+}
+
+export function initializeChat(sessionId) {
+  return async function(dispatch) {
+    try {
+      dispatch({ type: types.INITIALIZE_BOT_CHAT_STARTED });
+      const data = await dispatch(
+        sendHttpRequest(api.initializeChat(sessionId))
+      );
+      dispatch({
+        type: types.INITIALIZE_BOT_CHAT_SUCCESS,
+        payload: data
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+}
+
+export function saveMessage(
+  chatId,
+  messageSourceId,
+  messageDate,
+  messageContent
+) {
+  return async function(dispatch, getState) {
+    try {
+      const event = await dispatch(
+        sendHttpRequest(
+          api.saveMessage(chatId, messageSourceId, messageDate, messageContent)
+        )
+      );
+      dispatch({ type: types.SAVE_BOT_MESSAGE_SUCCESS, payload: event });
+      return event;
+    } catch (error) {
+      throw error;
+    }
+  };
+}

src/features/chatbot/actionTypes.js

@@ -1,2 +1,8 @@
 export const DISMISS_BOT = "DISMISS_BOT";
 export const SUMMON_WIZARD = "SUMMON_WIZARD";
+
+export const INITIALIZE_BOT_SESSION_STARTED = "INITIALIZE_BOT_SESSION_STARTED";
+export const INITIALIZE_BOT_SESSION_SUCCESS = "INITIALIZE_BOT_SESSION_SUCCESS";
+export const INITIALIZE_BOT_CHAT_STARTED = "INITIALIZE_BOT_CHAT_STARTED";
+export const INITIALIZE_BOT_CHAT_SUCCESS = "INITIALIZE_BOT_CHAT_SUCCESS";
+export const SAVE_BOT_MESSAGE_SUCCESS = "SAVE_BOT_MESSAGE_SUCCESS";

src/features/chatbot/api.js

@@ -0,0 +1,21 @@
+import { get, post } from "../../api/axiosApi";
+const baseUrl = process.env.CHATBOT_API_URL;
+
+const getBotSession = (botName, externalId, clientApplication, userKey) =>
+  get(
+    `${baseUrl}/system/initialize-session/${botName}/${externalId}/${clientApplication}/${userKey}`
+  );
+const initializeChat = () => get(`${baseUrl}/chat/initialize`);
+const saveMessage = (chatId, messageSourceId, messageDate, messageContent) =>
+  post(`${baseUrl}/chat/message`, {
+    chatId,
+    messageSourceId,
+    messageDate,
+    messageContent
+  });
+
+export default {
+  getBotSession,
+  initializeChat,
+  saveMessage
+};

src/features/chatbot/botType.js

@@ -1,4 +0,0 @@
-export const botType = {
-  none: Symbol("none"),
-  wizard: Symbol("wizard")
-};

src/features/chatbot/components/BotsManager.js

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
-import { botType } from "../botType";
+import { botType, bots, userKey } from "../constants";
 import Wizard from "./Wizard";
 import { makeStyles } from "@material-ui/core/styles";
-import { dismissBot } from "../actionCreators";
+import { dismissBot, loadBotSession } from "../actionCreators";
 
 const useStyles = makeStyles(theme => ({
   bot: {
@@ -24,7 +24,11 @@ const BotsManager = ({ bot, actions }) => {
   const classes = useStyles();
 
   useEffect(() => {
-    if (bot.type) setType(bot.type);
+    if (!bot.type) return;
+    setType(bot.type);
+
+    if (bot.type == botType.none) return;
+    actions.loadBotSession(bots.Zirhan, userKey.unknown);
   }, [bot.type]);
 
   return (
@@ -49,7 +53,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ dismissBot }, dispatch)
+    actions: bindActionCreators({ dismissBot, loadBotSession }, dispatch)
   };
 }
 

src/features/chatbot/components/Wizard.js

@@ -4,6 +4,7 @@ import ChatBot from "react-simple-chatbot";
 import { ThemeProvider } from "styled-components";
 import { useTheme } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
+import { bots } from "../constants";
 
 const Wizard = ({ dismissBot }) => {
   const theme = useTheme();
@@ -88,7 +89,7 @@ const Wizard = ({ dismissBot }) => {
         handleEnd={handleEnd}
         steps={steps}
         botAvatar={getAvatar()}
-        headerTitle="Zirhan"
+        headerTitle={bots.Zirhan}
       />
     </ThemeProvider>
   );

src/features/chatbot/constants.js

@@ -0,0 +1,12 @@
+export const botType = {
+  none: Symbol("none"),
+  wizard: Symbol("wizard")
+};
+
+export const bots = {
+  Zirhan: "Zirhan"
+};
+
+export const userKey = {
+  unknown: "Unknown"
+};

src/features/chatbot/reducer.js

@@ -1,6 +1,6 @@
 import * as types from "./actionTypes";
 import initialState from "../../redux/reducers/initialState";
-import { botType } from "./botType";
+import { botType } from "./constants";
 
 export default function chatbotReducer(state = initialState.bot, action) {
   switch (action.type) {
@@ -10,6 +10,24 @@ export default function chatbotReducer(state = initialState.bot, action) {
     case types.DISMISS_BOT:
       return { ...state, type: botType.none };
 
+    case types.INITIALIZE_BOT_SESSION_STARTED:
+      return { ...state, session: { loading: true, loaded: false } };
+
+    case types.INITIALIZE_BOT_SESSION_SUCCESS:
+      return {
+        ...state,
+        session: { loading: false, loaded: true, ...action.payload }
+      };
+
+    case types.INITIALIZE_BOT_CHAT_STARTED:
+      return { ...state, chat: { loading: true, loaded: false } };
+
+    case types.INITIALIZE_BOT_CHAT_SUCCESS:
+      return {
+        ...state,
+        chat: { loading: false, loaded: true, ...action.payload }
+      };
+
     default:
       return state;
   }

src/redux/reducers/initialState.js

@@ -19,7 +19,9 @@ export default {
     type: null
   },
   bot: {
-    type: null
+    type: null,
+    session: { loading: false, loaded: false },
+    chat: { loading: false, loaded: false }
   },
   ajaxCallsInProgress: 0
 };

webpack.config.dev.js

@@ -26,7 +26,8 @@ module.exports = {
     new webpack.DefinePlugin({
       "process.env.REVERSE_PROXY_API_URL": JSON.stringify(
         "http://localhost:5050"
-      )
+      ),
+      "process.env.CHATBOT_API_URL": JSON.stringify("http://localhost:5061")
     }),
     new HtmlWebpackPlugin({
       template: "src/index.html",

webpack.config.prod.js

@@ -3,7 +3,7 @@ const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const webpackBundleAnalyzer = require("webpack-bundle-analyzer");
-const CopyPlugin = require('copy-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 
 process.env.NODE_ENV = "production";
 process.env.PUBLIC_URL = "/reverse-proxy";
@@ -32,6 +32,9 @@ module.exports = {
       "process.env.PUBLIC_URL": JSON.stringify(process.env.PUBLIC_URL),
       "process.env.REVERSE_PROXY_API_URL": JSON.stringify(
         "https://toodle.ddns.net/reverse-proxy-api"
+      ),
+      "process.env.CHATBOT_API_URL": JSON.stringify(
+        "https://toodle.ddns.net/chatbot-api"
       )
     }),
     new HtmlWebpackPlugin({
@@ -52,9 +55,7 @@ module.exports = {
       }
     }),
     new CopyPlugin({
-      patterns: [
-        { from: 'public', to: 'public' }
-      ],
+      patterns: [{ from: "public", to: "public" }]
     })
   ],
   module: {