diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index dd0fb23..71d2f52 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,28 +1,27 @@
+import { useSelector } from 'react-redux';
+import Hero from '../Hero';
import ConversationBubble from './ConversationBubble';
import ConversationInput from './ConversationInput';
+import { selectConversation } from './conversationSlice';
export default function Conversation() {
- // uncomment below JSX to see the sample harcoded chat box
+ const messages = useSelector(selectConversation);
return (
- {/*
- {new Array(10).fill(1).map((item, index) => {
+
+ {messages.map((message, index) => {
return (
);
})}
+ {messages.length === 0 && }
-
*/}
+
);
}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index e5a34f8..f97d096 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,24 +1,23 @@
import Avatar from '../Avatar';
import { User } from '../models/misc';
+import { MESSAGE_TYPE } from './conversationModels';
export default function ConversationBubble({
- user,
message,
- isCurrentUser,
+ type,
className,
}: {
- user: User;
message: string;
- isCurrentUser: boolean;
+ type: MESSAGE_TYPE;
className: string;
}) {
return (
);
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
new file mode 100644
index 0000000..1172f76
--- /dev/null
+++ b/frontend/src/conversation/conversationModels.ts
@@ -0,0 +1,10 @@
+export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
+
+export interface Message {
+ text: string;
+ type: MESSAGE_TYPE;
+}
+
+export interface ConversationState {
+ conversation: Message[];
+}
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 4923bf6..eaec819 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -1,15 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
-
-interface SingleConversation {
- message: string;
- messageType: MESSAGE_TYPE;
-}
-
-interface ConversationState {
- conversation: SingleConversation[];
-}
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import store from '../store';
+import { ConversationState, Message } from './conversationModels';
const initialState: ConversationState = {
conversation: [],
@@ -19,11 +10,16 @@ export const conversationSlice = createSlice({
name: 'conversation',
initialState,
reducers: {
- addMessage(state, action) {
+ addMessage(state, action: PayloadAction
) {
state.conversation.push(action.payload);
},
},
});
export const { addMessage } = conversationSlice.actions;
+
+type RootState = ReturnType;
+export const selectConversation = (state: RootState) =>
+ state.conversation.conversation;
+
export default conversationSlice.reducer;