diff --git a/src/components/App/Helper/TeachMe/index.tsx b/src/components/App/Helper/TeachMe/index.tsx
index 9cc210672..da91feb0a 100644
--- a/src/components/App/Helper/TeachMe/index.tsx
+++ b/src/components/App/Helper/TeachMe/index.tsx
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useRef } from 'react'
+import styled from 'styled-components'
import { PropagateLoader } from 'react-spinners'
import { toast } from 'react-toastify'
import { Socket } from 'socket.io-client'
@@ -11,7 +12,7 @@ import useSocket from '~/hooks/useSockets'
import { postTeachMe, postInstagraph } from '~/network/fetchGraphData'
import { useAppStore } from '~/stores/useAppStore'
import { useDataStore } from '~/stores/useDataStore'
-import { useTeachStore } from '~/stores/useTeachStore'
+import { useTeachStore, InstagraphResponse } from '~/stores/useTeachStore'
import { colors } from '~/utils/colors'
import { AskQuestion } from '../AskQuestion'
import ReactFlow from 'reactflow'
@@ -46,10 +47,7 @@ export const TeachMe = () => {
)
const handleInstagraph = useCallback(
- (response: ResponseType) => {
- console.info('instgraph response', response.edges)
- console.info('instgraph response', response.nodes)
-
+ (response: InstagraphResponse) => {
setInstagraphAnswer(response)
toast(, {
@@ -126,9 +124,9 @@ export const TeachMe = () => {
}
return (
-
+
)
}
@@ -140,12 +138,10 @@ export const TeachMeText = () => {
s.hasInstagraphInProgress,
])
- console.info('instagraph anwser', instgraphAnswser)
-
return (
<>
- {!hasInstagraphInProgress ? (
-
+ {!hasInstagraphInProgress && !!instgraphAnswser?.edges && !!instgraphAnswser?.nodes ? (
+
) : (
@@ -176,3 +172,8 @@ export const TeachMeText = () => {
>
)
}
+
+
+const ButtonStyled = styled(Button)`
+`
+
diff --git a/src/stores/useTeachStore/index.ts b/src/stores/useTeachStore/index.ts
index 3bee7e3bc..1d5887fdd 100644
--- a/src/stores/useTeachStore/index.ts
+++ b/src/stores/useTeachStore/index.ts
@@ -1,22 +1,34 @@
import create from 'zustand'
-type InstagraphResponse = {
- edges: Array[{ direction: string; label: string; properties: object; source: string; target: string; color: string }]
- nodes: Array[{
+export type InstagraphResponse = {
+ instagraph: Instagraph
+} | null
+
+type Instagraph = {
+ edges: Array<{
+ direction: string
+ label: string
+ properties: object
+ source: string
+ target: string
+ color: string
+ id: string
+ }>
+ nodes: Array<{
color: string
id: string
data: { label: string }
position: { x: number; y: number }
properties: object
type: string
- }]
-}
+ }>
+} | null
type TeachStore = {
askedQuestions: string[] | null
askedQuestionsAnswers: string[] | null
teachMeAnswer: string | null
- instgraphAnswser: InstagraphResponse
+ instgraphAnswser: Instagraph
hasQuestionInProgress: boolean
hasTeachingInProgress: boolean
hasInstagraphInProgress: boolean
@@ -74,11 +86,11 @@ export const useTeachStore = create((set) => ({
}),
setTeachMeAnswer: (answer: string) => set({ hasTeachingInProgress: false, teachMeAnswer: answer }),
setInstagraphAnswer: (answer: InstagraphResponse) => {
- console.info(answer.instagraph)
-
- set({
- hasInstagraphInProgress: false,
- instgraphAnswser: { edges: answer.instagraph.edges, nodes: answer.instagraph.nodes },
- })
+ if (!!answer?.instagraph?.edges && !!answer?.instagraph?.nodes) {
+ set({
+ hasInstagraphInProgress: false,
+ instgraphAnswser: { edges: answer?.instagraph?.edges, nodes: answer?.instagraph?.nodes },
+ })
+ }
},
}))